@charset "utf-8";
* {
	font-family: "Kaisei Opti", serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
}
:root {
	--content-height: calc(100dvh - 100px);
	--content-width: calc(100dvw - 80px);
	--aside-right-width: 60px;
	--aside-left-width: 10dvw;
	--section-width: calc(100dvw - var(--aside-left-width) - var(--aside-right-width) - 20px);
	/* --section-height: calc(var(--content-height) - 0px); */
}

body {
	height: 100dvh;
	width: 100dvw;
	margin: 0;
	overflow: hidden;
	background: linear-gradient(270deg, #5ddfeb, #6677f3);
	background-size: 200% 200%;
	animation: Grad 5s ease infinite;
}
@keyframes Grad {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}

/* ===================================================
ベースの状態（通常時・縦画面）：非表示 ＆ クリック透過
=================================================== */
.landscape-blocker {
	position: fixed;
	
	/* 💡 【超重要】iOS Chromeのバグを突破するため、画面の外側まで50pxはみ出させます */
	top: -50px;
	left: -50px;
	/* 💡 画面幅（100%）に、はみ出させた左右の計100pxをプラスします */
	width: calc(100% + 100px);
	height: calc(100% + 100px);
	
	z-index: 99999;
	
	/* 正しい画像パス */
	background-image: url('./assets/landscape_blocker.webp');
	background-position: center center;
	background-repeat: no-repeat;
	
	/* 画面より大きな要素になっても、画像自体は画面中央に綺麗にフィットします */
	background-size: cover;
	
	/* 縦画面（通常時）の状態：透明 ＆ クリック透過 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	
	/* 戻した時（消える時）：0.4秒かけてフワッと消える */
	transition: 
	opacity 0.4s ease-out, 
	visibility 0.4s ease-out allow-discrete;
}


/* ===================================================
スマホの横画面を検知した時：表示 ＆ クリックガード
=================================================== */
@media screen and (orientation: landscape) and (max-device-width: 932px) {
	.landscape-blocker {
		/* 横画面時はくっきり表示 ＆ クリックをガード */
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		
		/* 現れる時：0.6秒かけてフワッと現れる */
		transition: 
		opacity 0.6s ease-out, 
		visibility 0.6s ease-out allow-discrete;
	}
}

.content {
	box-sizing: border-box;
	will-change: padding-right;
	transition-duration: 1s;
	max-width: 1024px;
	margin: 0 auto;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	width: 100dvw;
	padding: 0 var(--aside-right-width) 0 var(--aside-left-width);
	box-sizing: border-box;
	position: relative;
	& .logo {
		font-size: 40px;
		color: #f8fdff;
		font-family: "Cherry Bomb One", system-ui;
		font-weight: 400;
		font-style: normal;
	}
}
.body {
	display: flex;
	justify-content: space-between;
	& .body-left {
		width: var(--aside-left-width);
		max-width: 60px;
	}
	& .body-right {
		position: relative;
		transition-duration: 1s;
		will-change: width;
		width: var(--aside-right-width);
		& .large,
		& .small {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			height: var(--content-height);
			transition-duration: 1s;
			will-change: opacity;
		}
		& .navi {
			color: #f8fdff;
			cursor: pointer;
			&.is-active {
				color: #ff0;
			}
		}
		& .large {
			opacity: 0;
			pointer-events: none;
			& .navi {
				font-family: "Cherry Bomb One", system-ui;
				font-weight: 400;
				font-style: normal;
				font-size: 30px;
				white-space: nowrap;
			}
		}
		& .small {
			opacity: 1;
		}
		&.is-open {
			width: 40dvw;
			& .large {
				opacity: 1;
				pointer-events: auto;
			}
			& .small {
				opacity: 0;
				pointer-events: none;
			}
		}
	}
}
.wrapper {
	border: 20px #fff;
	border-radius: 10px;
	height: var(--content-height);
	box-sizing: border-box;
	background-color: #fff;
	flex: 1;
	position: relative;
	& .section {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--content-height);
		box-sizing: border-box;
		padding: 10px;
		opacity: 0;
		overflow: scroll;
		transition-duration: 500ms;
		will-change: opacity;
		&.is-active {
			display: block;
			opacity: 1;
			overflow: hidden;
		}
	}
}

.top {
	background-image: url('./assets/top.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.event {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1em 0;
	height: calc(var(--content-height) - 20px);
	padding: 25px 15px;
	box-sizing: border-box;
	background-color: #769ece;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	::-webkit-scrollbar {
		display: none;
	}
	& .event-balloon {
		display: flex;
		align-items: center;
		gap: 0 15px;
		opacity: 0;
		transform: translateX(0);
		&.from-left {
			transform: translateX(-16px);
		}
		&.from-right {
			transform: translateX(16px);
		}
		&.is-visible {
			opacity: 1;
			transform: translateX(0);
		}
		&.is-visible.from-left {
			animation: event-balloon-from-left 350ms ease both;
		}
		&.is-visible.from-right {
			animation: event-balloon-from-right 350ms ease both;
		}
		& .event-icon {
			width: 2.7em;
			height: 2.7em;
			border-radius: 50%;
		}
		& .event-text {
			display: inline-block;
			position: relative;
			max-width: 80%;
			margin: 0;
			padding: .4em .8em;
			border-radius: 20px;
			color: #333;
			font-size: .9em;
			&.left {
				background-color: #fff;
				&::before {
					left: -10px;
					border-radius: 0 0 0 15px;
					box-shadow: -3px -15px 0 -7px white inset;
				}
			}
			&.right {
				background-color: #30e852;
				margin: 0 10px 0 auto;
				&::before {
					right: -10px;
					border-radius: 0 0 15px 0;
					box-shadow: 3px -15px 0 -7px #30e852 inset;
				}
			}
			&::before {
				position: absolute;
				top: -15px;
				width: 20px;
				height: 30px;
				content: '';
			}
		}
	}
	& > [hidden] {
		display: none !important;
	}
}

@keyframes event-balloon-from-left {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes event-balloon-from-right {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.event .event-balloon.is-visible {
		animation: none;
	}
}

.event-loader {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #769ece;
}

.event-loader .loader {
	margin: 0;
}

.list {
	position: relative;
	& .list-head {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 80px;
		background: #fff;
		& .bxs-user-search {
			vertical-align: middle;
			margin-left: 8px;
		}
		& input {
			margin: 2em 0;
			color: #565656;
			background: #ffeaea;
			box-shadow: 0px 0px 0px 10px #ffeaea;
			border: dashed 2px #ffc3c3;
			border-radius: 8px;
			outline: none;
		}
	}
	& .list-body {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1px;
		height: calc(var(--content-height) - 40px);
		width: 100%;
		padding: 80px 0 200px;
		box-sizing: border-box;
		overflow-y: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
		::-webkit-scrollbar {
			display: none;
		}
		& .article {
			position: relative;
			aspect-ratio: 1 / 1;
			& .movie-time {
				position: absolute;
				right: 4px;
				bottom: 4px;
				background-color: rgba(0, 0, 0, 0.8);
				color: #fff;
				padding: 0 4px;
			}
		}
		& img {
			vertical-align: top;
			min-width: 100%;
			max-width: 100%;
			min-height: 100%;
			max-height: 100%;
			border-radius: 8px;
		}
	}
}

.footer {
	height: 40px;
}

.modal-checkbox {
	display: none;
}
.modal {
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100dvw;
	height: 100dvh;
	background-color: rgb(0 0 0 / 60%);
	& .close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 24px;
		color: black;
		text-decoration: none;
		cursor: pointer;
		transform: translate(50%, -50%);
	}
	& .modal-wrapper {
		position: relative;
		width: 90dvw;
		height: 90dvh;
		padding: 20px;
		box-sizing: border-box;
		margin: auto;
		overflow: scroll;
		background-color: #FEFEFE;
		border-radius: 5px;
	}
}
.modal-checkbox:checked + .modal {
	display: flex;
}

.carousel {
	display: flex;
	& .carousel-wrapper {
		overflow-x: scroll;
	}
}

.sns {
	background: linear-gradient(180deg, #ffeef2 0%, #fff8f0 100%);
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: scroll;
}

.sns-links {
  display: grid;
  /* 最小幅250pxを確保しつつ、画面幅いっぱいに等間隔で自動配置 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0 auto;
  /* 丸みのある優しいフォントを指定 */
  font-family: "Hiragino Maru Gothic ProN", "Quicksand", "Yu Gothic", sans-serif;
}

/* 1. 枠をパステルピンク＆白い内側の光でマシュマロ風に */
.sns-item {
  width: 240px;
	background-color: #fff8fa; /* ほんのり優しいミルキーピンク */
  border: 2px solid #ffffff; /* 白い縁取りでぷっくり感を強調 */
  border-radius: 30px; /* 角をさらに丸く */
  padding: 16px;
  position: relative;
  /* ふわっと浮いているような柔らかい影 */
  box-shadow: 0 8px 20px rgba(255, 182, 193, 0.25);
	box-sizing: border-box;
}

/* 2. 区切りを可愛いパステルハートに変更 */
.sns-item {
  margin: 0 auto 32px;
}
.sns-item::after {
  content: "・ ♡ ・";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #ffb6c1; /* 優しいピンク色 */
  letter-spacing: 3px;
}

/* 3. ボタンの黒線をなくし、パステルカラーの影でぷっくりさせる */
.sns-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 50px;
  color: #5a4a4a; /* 真っ黒ではなく柔らかいブラウン系グレー */
  background-color: #ffffff;
  border: 2px solid #ffd1dc;
  box-shadow: 0 4px 0 #ffd1dc;
  transition: all 0.15s ease;
}

.sns-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #ffd1dc;
}

/* 各SNSごとのパステル配色 */
.sns-btn.x {
  background-color: #f4f9ff;
  border-color: #cce3ff;
  box-shadow: 0 4px 0 #cce3ff;
}
.sns-btn.tiktok {
  background-color: #f2fffd;
  border-color: #b5f5ec;
  box-shadow: 0 4px 0 #ffb8d0; /* 影だけピンクにして可愛さアップ */
}
.sns-btn.insta {
  background: linear-gradient(45deg, #fff5f8, #fff9f0);
  border-color: #ffc2d4;
  box-shadow: 0 4px 0 #ffc2d4;
}
.sns-btn.threads {
  background-color: #f9f6ff; /* ほんのりラベンダー */
  border-color: #e2d6ff;
  box-shadow: 0 4px 0 #e2d6ff;
}
/* YouTube：いちごミルク風の淡いコーラルピンク */
.sns-btn.youtube {
  background-color: #fff2f4;
  border-color: #ffccd5;
  box-shadow: 0 4px 0 #ffccd5;
}

/* Amazon：ハニーミルク風の淡いアプリコットオレンジ */
.sns-btn.amazon {
  background-color: #fff9f0;
  border-color: #ffe0b2;
  box-shadow: 0 4px 0 #ffe0b2;
}

/* カード枠：白もふもふ＋ほんのりサイバーな光 */
.sns-item.cyber-girl {
  background-color: #f4fbff;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 20px rgba(0, 229, 255, 0.25);
}

/* ボタン：白ベース × 蛍光シアン枠 × ネオンピンク影 */
.sns-btn.cyber {
  background-color: #ffffff;
  color: #2b2638;
  border-color: #00e5ff;
  box-shadow: 0 4px 0 #ff2a85, 0 0 12px rgba(0, 229, 255, 0.5);
}

.sns-btn.cyber:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #ff2a85;
}

/* カード枠：ほんのり頬が染まったようなローズミルク色 */
.sns-item.sexy-red {
  background-color: #fff2f5;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 20px rgba(220, 20, 60, 0.15);
}

/* ボタン：艶のあるペールピンク × 深紅のフチと影 */
.sns-btn.sexy {
  background: linear-gradient(180deg, #ffffff 0%, #ffe6ec 100%);
  color: #8a1c38; /* 色気のあるワインレッド文字 */
  border-color: #e63963; /* 鮮やかなローズレッド */
  box-shadow: 0 4px 0 #c9184a; /* 深みのあるベリーレッドの影 */
}

.sns-btn.sexy:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #c9184a;
}

/* 4. コメントの文字色も柔らかく */
.sns-comment {
  margin: 14px 0 0;
  font-size: 12px;
  color: #8c7b7b; /* 優しいココア色 */
  text-align: center;
  line-height: 1.5;
}

.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}