@charset "utf-8";

/********** サイトの定義 **********

使用する文字サイズ：
10px
14px（基本）
16px
18px（中サイズ見出し）
20px（特例:TOPの検索するボタンなど）
24px（特例:TOPのエリア検索・駅検索など）
28px（大サイズ見出し）

空白の使用サイズ：
10px
20px
40px（基本）
60px
120px（大見出しの段落ごと）

*******************************/



/************************************************************
　店舗TOP > メインイメージ表示領域＋店舗タイトル＋店舗紹介文
************************************************************/

section#top #mainImage {

}

/* スライダーの幅 */
section#top #mainImage .wrapper {
  margin-inline: auto;
  max-width: 880px;
  width: 100%;
	margin-bottom: 20px;
}

/* サムネイルの幅を調整 */
section#top #mainImage .splide__track--nav > .splide__list > .splide__slide {
  width: 100% !important;
}
section#top #mainImage .splide__track--nav > .splide__list > .splide__slide.is-active {
  width: 100% !important;
}

/* サムネイルをグリッド表示 */
section#top #mainImage #thumbnail-carousel .splide__list {
  display: grid;
  grid-template-columns: repeat(10, 2fr);
}

/*
* 選択されていないサムネイルは薄くする *
section#top #mainImage .splide__slide {
  opacity: .6;
}

* 選択されているサムネイルだけ透過しない *
section#top #mainImage .splide__slide.is-active {
  opacity: 1;
}
*/


/* 画像サイズ調整 */
/*
section#top #mainImage .splide__slide img {
  width: 100%;
  height: auto;
}
*/

section#top #mainImage #main-carousel .splide__slide img {
  width: 880px;
  height: 495px;
  object-fit: cover;
}

section#top #mainImage #thumbnail-carousel li.splide__slide img {
  width: 80.8px;
  height: 80.8px;
  object-fit: cover;
}


section#top #mainImage h3.title {
	font-size: 20px;
}

section#top #mainImage p.message {
	margin: 0;
}




/************************************************************
　店舗TOP > みんなの投稿写真
************************************************************/

section#photo {

}

section#photo h3 {
	float: left;

	display: inline-block;
	vertical-align: middle;

	height: 32px;
	line-height: 32px;
}

section#photo button {
	float: right;

	display: inline-block;
	vertical-align: middle;

	margin: 0;
	padding: 0;

	background: -webkit-linear-gradient(90deg, #ddd, #fff);
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 0 4px 0 rgba(64, 64, 64, 0.1);
}

section#photo button a {
	display: block;
	width: unset;
	padding: 5px 10px;
	color: #4c4c4c;
	font-weight: bold;
	text-shadow: 0px -1px 0px #ddd;
	text-decoration: none;
}

section#photo button a i {
	margin-right: 5px;
	color: #a54cff;
	text-shadow: none;
}

section#photo .image-container.flex {
	clear: both;
}

section#photo ul {

}

section#photo ul li {
	display: inline-block;

	width: 201px;
	height: 201px;

	margin-right: 20px;
	margin-bottom: 20px;

	border: 2px solid #a54cff;
}

/*
section#photo ul li:hover {
	border: 3px solid #a54cff;
	transition: 0.3s;
}
*/

section#photo ul li:nth-child(4n) {
	margin-right: 0;
}

/*
section#photo ul li:nth-last-child(-n+4) {
	margin-bottom: 0;
}
*/

section#photo ul li a img {
	display: block;

	width: 201px;
	height: 201px;
	object-fit: cover;
}

/*
section#photo ul li a img {
	opacity: unset;
	transition: unset;
}
*/

section#photo p.moreLink a {
	color: #a54cff;
}