@charset "utf-8";

/*----------------------------
	top
------------------------------*/
/* topBox */
.top .topBox {
	padding: 7.5rem 0 6rem;
}
.top .topBox h1 {
	width: 38.1rem;
	margin: 0 auto;
}
.top .topBox .period {
	margin-top: 2.5rem;
	font-size: 2.6rem;
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	text-align: center;
}
.top .topBox .period span {
	font-size: 1.9rem;
	font-weight: 300;
	margin-left: 0.5rem;
}
.top .topBox .period span:nth-child(2) {
	margin-right: 0.5rem;
}
.top .topBox .shopTxt {
	margin-top: -0.5rem;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
}
.top .topBox .shopTxt span {
	display: inline-block;
	border-bottom: solid 1px #231815;
}
.top .topBox .lead {
	margin-top: 4rem;
	font-family: "Noto Serif CJK JP", serif;
	line-height: 1.944;
	letter-spacing: 0.1em;
	text-align: center;
}
@media (max-width: 768px) {
	.top .topBox {
		padding: 6rem 0;
	}
	.top .topBox h1 {
		width: 47.5rem;
	}
	.top .topBox .period {
		margin-top: 1rem;
		font-size: 3.8rem;
	}
	.top .topBox .period span {
		font-size: 2.7rem;
	}
	.top .topBox .shopTxt {
		margin-top: -1rem;
		font-size: 3rem;
	}
	.top .topBox .lead {
		margin-top: 4rem;
		font-size: 2.5rem;
	}
}

/* cont */
.top .cont .num {
	font-size: 3.2rem;
	font-family: "Playfair Display", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: italic;
	text-align: center;
}
.top .cont .num span {
	display: inline-block;
	border-bottom: solid 1px #000;
}
.top .cont h3 {
	margin-top: 2rem;
	font-size: 4.2rem;
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	line-height: 1;
}
.top .cont .txt {
	margin-top: 1rem;
	text-align: center;
}
.top .cont .splide__slide a {
	display: block;
	position: relative;
}
.top .cont .splide__slide a .more {
	font-weight: 600;
	color: #fff;
	position: absolute;
	bottom: 1rem;
	right: 2.5rem;
}
.top .cont .splide__slide a .more::before {
	content: "";
	display: inline-block;
	width: 5.9rem;
	height: 1px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	right: -1.3rem;
}
.top .cont .splide__slide a .more::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: -1.3rem;
	width: 1.2rem;
	height: 1px;
	background-color: #fff;
	transform: rotate(45deg);
	transform-origin: calc(100% - 0.5px) 50%;
}
@media (max-width: 768px) {
	.top .cont .num {
		font-size: 4.6rem;
	}
	.top .cont h3 {
		margin-top: 3rem;
		font-size: 6rem;
	}
	.top .cont .txt {
		margin-top: 1rem;
	}
	.top .cont .splide__slide a .more {
		font-size: 3.2rem;
		line-height: 1.3;
		bottom: 2.5rem;
		right: 3rem;
	}
	.top .cont .splide__slide a .more::before {
		width: 9.5rem;
		right: -1.5rem;
	}
	.top .cont .splide__slide a .more::after {
		right: -1.5rem;
		width: 1.3rem;
	}
}


/* bwCont */
.top .bwCont {
	background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg01.png") no-repeat center center / cover;
	padding: 4rem 0 10rem;
	border-bottom: solid 1.5rem #000;
}
.top .bwCont .inner {
	max-width: 93.7rem;
	margin: 0 auto;
}
.top .bwCont h2 {
	width: 45.4rem;
	margin: 3rem auto 0;
}
.top .bwCont .bwSplide {
	margin-top: 4rem;
}
.top .bwCont .bwSplide .splide__list {
	display: flex;
	justify-content: space-between;
}
.top .bwCont .bwSplide .splide__slide {
	width: 29.67%;
}
@media (max-width: 768px) {
	.top .bwCont {
		background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg01_sp.png") no-repeat center center / cover;
		padding: 7.5rem 0 10rem;
		border-bottom: solid 5rem #000;
	}
	.top .bwCont .inner {
		max-width: 100%;
	}
	.top .bwCont h2 {
		width: 52.4rem;
		margin: 4rem auto 0;
	}
	.top .bwCont .bwSplide {
		margin-top: 5rem;
	}
	.top .bwCont .bwSplide .splide__slide {
		width: 100%;
	}

	/* ページネーション */
	.bwSplide .splide__pagination {
		margin-top: 5.5rem;
		font-size: 0;
		width: auto;
		display: flex;
		gap: 0 6rem;
	}
	.bwSplide .splide__pagination__page {
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		border: solid 1px #808080;
		opacity: 1;
		border-radius: 50%;
		transition: all 0.3s;
	}
	.bwSplide .splide__pagination__page.is-active {
		background-color: #808080;
	}
}

/* senseCont */
.top .senseCont {
	background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg02.png") no-repeat center center / cover;
	padding: 6rem 0 11.5rem;
	border-bottom: solid 1.5rem #1eaad7;
}
.top .senseCont .inner {
	max-width: 100rem;
	margin: 0 auto;
}
.top .senseCont h2 {
	width: 46.1rem;
	margin: 3rem auto 0;
}
.top .senseCont .senseSplide {
	margin-top: 4rem;
}
.top .senseCont .senseSplide .splide__list {
	display: flex;
	justify-content: space-between;
}
.top .senseCont .senseSplide .splide__slide {
	width: 23%;
}
@media (max-width: 768px) {
	.top .senseCont {
		background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg02_sp.png") no-repeat center center / cover;
		padding: 9.5rem 0 10rem;
		border-bottom: solid 5rem #1eaad7;
	}
	.top .senseCont .inner {
		max-width: 100%;
	}
	.top .senseCont h2 {
		width: 53.2rem;
		margin: 4rem auto 0;
	}
	.top .senseCont .senseSplide {
		margin-top: 5rem;
	}
	.top .senseCont .senseSplide .splide__slide {
		width: 100%;
	}

	/* ページネーション */
	.senseCont .splide__pagination {
		margin-top: 5.5rem;
		font-size: 0;
		width: auto;
		display: flex;
		gap: 0 6rem;
	}
	.senseCont .splide__pagination__page {
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		border: solid 1px #1eaad7;
		opacity: 1;
		border-radius: 50%;
		transition: all 0.3s;
	}
	.senseCont .splide__pagination__page.is-active {
		background-color: #1eaad7;
	}
}

/* onlineStore */
.top .onlineStore {
	padding: 10rem 0 9rem;
}
.top .onlineStore h2 {
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
}
.top .onlineStore .lead {
	margin-top: 2rem;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
}
.top .onlineStore ul {
	margin-top: 3rem;
}
.top .onlineStore ul li {
	width: 60rem;
	height: 9rem;
	margin: 0 auto;
}
.top .onlineStore ul li + li {
	margin-top: 2.5rem;
}
.top .onlineStore ul li a {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: solid 1px #000;
	border-radius: 5rem;
	box-shadow: 0.3rem 0.3rem 0 0 #D2D2D2;
	position: relative;
}
.top .onlineStore ul li a::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-left: 1.3rem solid #000;
	border-right: 0;
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY(-50%);
}
.top .onlineStore ul li .online img {
	width: 23.3rem;
}
.top .onlineStore ul li .fs img {
	width: 30rem;
}
.top .onlineStore ul li .tbeaut img {
	width: 25.6rem;
}
@media (max-width: 768px) {
	.top .onlineStore {
		padding: 12rem 0 15rem;
	}
	.top .onlineStore h2 {
		font-size: 3.5rem;
	}
	.top .onlineStore .lead {
		margin-top: 1rem;
		font-size: 2.8rem;
	}
	.top .onlineStore ul {
		margin-top: 6rem;
	}
	.top .onlineStore ul li {
		width: 65.5rem;
		height: 13rem;
	}
	.top .onlineStore ul li + li {
		margin-top: 4.5rem;
	}
	.top .onlineStore ul li a {
		border-radius: 7rem;
	}
	.top .onlineStore ul li a::after {
		border-top: 1.6rem solid transparent;
		border-bottom: 1.6rem solid transparent;
		border-left: 2rem solid #000;
		right: 4rem;
	}
	.top .onlineStore ul li .online img {
		width: 33.7rem;
	}
	.top .onlineStore ul li .fs img {
		width: 38.4rem;
	}
	.top .onlineStore ul li .tbeaut img {
		width: 30rem;
	}
}

/* shopList */
.shopList {
	position: relative;
	padding-top: calc(99vw * 355 / 3000);
}
.shopList::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vw * 355 / 3000);
	background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg03.png") center top / 100% 100% no-repeat;
}
.shopList .bg {
	background-color: #000;
	padding-bottom: 9.5rem;
}
.shopList h2 {
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
.shopList ul {
	max-width: 100rem;
	margin: 7rem auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 2rem;
}
.shopList ul li {
	width: 32%;
}
.shopList ul li a {
	display: block;
	border-radius: 5rem;
	background-color: #fff;
	padding: 1rem 2.5rem;
	font-size: 2rem;
	font-weight: 600;
	position: relative;
}
.shopList ul li a::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 0.6rem solid transparent;
	border-bottom: 0.6rem solid transparent;
	border-left: 0.8rem solid #000;
	border-right: 0;
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
}
.shopList ul li:nth-child(2) a {
	font-size: 1.8rem;
}
@media (max-width: 768px) {
	.shopList {
		padding-top: calc(99vw * 85 / 750);
	}
	.shopList::before {
		height: calc(100vw * 85 / 750);
		background: url("/base/pc/store/special/midsummer_cool/2026/top/img/bg03_sp.png") center top / 100% 100% no-repeat;
	}
	.shopList .bg {
		padding-bottom: 10rem;
	}
	.shopList h2 {
		font-size: 3.5rem;
	}
	.shopList ul {
		max-width: 65rem;
		margin: 4rem auto 0;
		display: block;
	}
	.shopList ul li {
		width: 100%;
	}
	.shopList ul li + li {
		margin-top: 3.5rem;
	}
	.shopList ul li a {
		border-radius: 7rem;
		padding: 2rem 4rem;
		font-size: 3.5rem;
	}
	.shopList ul li a::after {
		border-top: 1.6rem solid transparent;
		border-bottom: 1.6rem solid transparent;
		border-left: 2rem solid #000;
		right: 3.5rem;
	}
	.shopList ul li:nth-child(2) a {
		font-size: 3.5rem;
	}
}

/* note */
.top .note {
	max-width: 120rem;
	margin: 0 auto;
	padding: 4.5rem 10rem;
}
.top .note p {
	font-size: 1.4rem;
	line-height: 1.786;
	text-align: justify;
}
@media (max-width: 768px) {
	.top .note {
		max-width: 100%;
		margin: 0 auto;
		padding: 7.5rem 4rem 5rem;
	}
	.top .note p {
		font-size: 2.4rem;
		line-height: 1.708;
	}
}