@charset "UTF-8";


	
	
/* fv
--------------------- */
#fv {
	width: 100%;
	overflow: hidden;
	position: relative;
}
	#fv .slider-wrap {
		position: relative;
		width: 100%;
		height: 100vh;
	}
		#fv .slider-items {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0;
			visibility: hidden;
			transition: opacity 1.4s cubic-bezier(0.45, 0, 0.2, 1),
			            visibility 0s linear 1.4s;
		}
		#fv .slider-items.is-current {
			z-index: 2;
			opacity: 1;
			visibility: visible;
			transition: opacity 1.4s cubic-bezier(0.45, 0, 0.2, 1),
			            visibility 0s linear 0s;
		}
			#fv .slider-items .pht {
				width: 100%;
				height: 100vh;
				overflow: hidden;
				position: relative;
			}
				#fv .slider-items .pht::after {
					content: "";
					position: absolute;
					inset: 0;
					background: linear-gradient(180deg, rgba(10,9,7,.35) 0%, rgba(10,9,7,.15) 32%, rgba(10,9,7,.4) 100%);
					z-index: 1;
				}
				#fv .slider-items .pht img {
					display: block;
					width: 100%;
					height: 100vh;
					object-fit: cover;
					transform: scale(1.08);
					transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1);
				}
				#fv .slider-items.is-current .pht img {
					transform: scale(1);
				}

			#fv .slider-items .icon {
				opacity: 0;
				transform: scale(0.5);
				position: absolute;
				z-index: 2;
				pointer-events: none;
				filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
			}
			#fv .slider-items.active .icon {
				animation: iconZoomIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
			}
			#fv .slider-items.active .icon01 {
				animation-delay: 0.25s;
			}
			#fv .slider-items.active .icon02 {
				animation-delay: 0.42s;
			}
			#fv .slider-items.active .icon03 {
				animation-delay: 0.59s;
			}
			@keyframes iconZoomIn {
				0% {
					opacity: 0;
					transform: scale(0.4);
					filter: drop-shadow(0 10px 24px rgba(0,0,0,0)) blur(6px);
				}
				60% {
					opacity: 1;
					filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)) blur(0);
				}
				100% {
					opacity: 1;
					transform: scale(1);
					filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)) blur(0);
				}
			}

			#fv .slider-items.slider01 .icon01 {
				width: calc(140 * var(--vw-ratio));
				top: calc(236 * var(--vw-ratio));
				left: calc(290 * var(--vw-ratio));
			}
			#fv .slider-items.slider01 .icon02 {
				width: calc(126 * var(--vw-ratio));
				top: calc(106 * var(--vw-ratio));
				right: calc(139 * var(--vw-ratio));
			}
			#fv .slider-items.slider01 .icon03 {
				width: calc(107 * var(--vw-ratio));
				bottom: calc(141 * var(--vw-ratio));
				right: calc(173 * var(--vw-ratio));
			}

			#fv .slider-items.slider02 .icon01 {
				width: calc(172 * var(--vw-ratio));
				bottom: calc(108 * var(--vw-ratio));
				left: calc(292 * var(--vw-ratio));
			}
			#fv .slider-items.slider02 .icon02 {
				width: calc(90 * var(--vw-ratio));
				top: calc(321 * var(--vw-ratio));
				right: calc(349 * var(--vw-ratio));
			}
			#fv .slider-items.slider02 .icon03 {
				width: calc(116 * var(--vw-ratio));
				top: calc(125 * var(--vw-ratio));
				left: calc(449 * var(--vw-ratio));
			}

			#fv .slider-items.slider03 .icon01 {
				width: calc(124 * var(--vw-ratio));
				top: calc(199 * var(--vw-ratio));
				right: calc(250 * var(--vw-ratio));
			}
			#fv .slider-items.slider03 .icon02 {
				width: calc(77 * var(--vw-ratio));
				top: calc(103 * var(--vw-ratio));
				left: calc(541 * var(--vw-ratio));
			}
			#fv .slider-items.slider03 .icon03 {
				width: calc(185 * var(--vw-ratio));
				bottom: calc(99 * var(--vw-ratio));
				left: calc(246 * var(--vw-ratio));
			}

			#fv .slider-items.slider04 .icon01 {
				width: calc(93 * var(--vw-ratio));
				bottom: calc(106 * var(--vw-ratio));
				left: calc(474 * var(--vw-ratio));
			}
			#fv .slider-items.slider04 .icon02 {
				width: calc(160 * var(--vw-ratio));
				top: calc(155 * var(--vw-ratio));
				right: calc(257 * var(--vw-ratio));
			}
			#fv .slider-items.slider04 .icon03 {
				width: calc(120 * var(--vw-ratio));
				top: calc(222 * var(--vw-ratio));
				left: calc(263 * var(--vw-ratio));
			}

	#fv .catch-copy {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		pointer-events: none;
	}
		#fv .catch-copy .text {
			text-align: center;
			opacity: 0;
			transform: translateY(14px);
			animation: copyFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
		}
		@keyframes copyFadeIn {
			to { opacity: 1; transform: translateY(0); }
		}
			#fv .catch-copy h2 {
				width: calc(500 * var(--vw-ratio));
				max-width: 86vw;
				margin: 0 auto calc(30 * var(--vw-ratio));
			}
				#fv .catch-copy h2 img {
					display: block;
					width: 100%;
				}

			#fv .catch-copy .en {
				text-align: center;
				letter-spacing: 0.06em;
				margin: 0;
				font-weight: 300;
			}

	#fv .slider-nav {
		position: absolute;
		left: 50%;
		bottom: calc(48 * var(--vw-ratio));
		transform: translateX(-50%);
		z-index: 4;
		display: flex;
		gap: 14px;
	}
		#fv .slider-nav button {
			appearance: none;
			border: none;
			background: none;
			padding: 10px 0;
			cursor: pointer;
			display: block;
		}
		#fv .slider-nav .bar {
			width: 44px;
			height: 2px;
			background: rgba(255,255,255,.32);
			position: relative;
			overflow: hidden;
		}
		#fv .slider-nav .bar span {
			position: absolute;
			top: 0; left: 0;
			height: 100%;
			width: 0%;
			background: var(--c-white);
		}
		#fv .slider-nav button.is-active .bar span {
			animation: barFill linear forwards;
			animation-duration: var(--slide-duration, 5s);
		}
		#fv .slider-nav button.is-done .bar span {
			width: 100%;
		}
		@keyframes barFill {
			from { width: 0%; }
			to { width: 100%; }
		}

	#fv a.btn-tag {
		width: calc(170 * var(--vw-ratio));
		position: absolute;
		bottom: calc(30 * var(--vw-ratio));
		right: calc(80 * var(--vw-ratio));
		z-index: 3;
		transform: scale(1);
	}
	#fv a.btn-tag:hover {
		transform: scale(1.1);
	}
@media screen and (max-width: 767px) {
	#fv .slider-wrap {
		height: 100dvh;
	}
		#fv .slider-items {
			height: 100dvh;
		}
			#fv .slider-items .pht {
				height: 100dvh;
			}
				#fv .slider-items .pht img {
					height: 100dvh;
				}

			#fv .slider-items.slider01 .icon01 {
				width: calc(70 * var(--vw-ratio));
				top: calc(250 * var(--vw-ratio));
				left: calc(40 * var(--vw-ratio));
			}
			#fv .slider-items.slider01 .icon02 {
				width: calc(60 * var(--vw-ratio));
				top: calc(160 * var(--vw-ratio));
				right: calc(40 * var(--vw-ratio));
			}
			#fv .slider-items.slider01 .icon03 {
				width: calc(80 * var(--vw-ratio));
				bottom: calc(141 * var(--vw-ratio));
				right: calc(100 * var(--vw-ratio));
			}

			#fv .slider-items.slider02 .icon01 {
				width: calc(80 * var(--vw-ratio));
				bottom: calc(108 * var(--vw-ratio));
				left: calc(42 * var(--vw-ratio));
			}
			#fv .slider-items.slider02 .icon02 {
				width: calc(45 * var(--vw-ratio));
				top: calc(200 * var(--vw-ratio));
				right: calc(50 * var(--vw-ratio));
			}
			#fv .slider-items.slider02 .icon03 {
				width: calc(50 * var(--vw-ratio));
				top: calc(125 * var(--vw-ratio));
				left: calc(40 * var(--vw-ratio));
			}

			#fv .slider-items.slider03 .icon01 {
				width: calc(60 * var(--vw-ratio));
				top: calc(240 * var(--vw-ratio));
				right: calc(50 * var(--vw-ratio));
			}
			#fv .slider-items.slider03 .icon02 {
				width: calc(34 * var(--vw-ratio));
				top: calc(103 * var(--vw-ratio));
				left: calc(41 * var(--vw-ratio));
			}
			#fv .slider-items.slider03 .icon03 {
				width: calc(90 * var(--vw-ratio));
				bottom: calc(99 * var(--vw-ratio));
				left: calc(46 * var(--vw-ratio));
			}

			#fv .slider-items.slider04 .icon01 {
				width: calc(45 * var(--vw-ratio));
				bottom: calc(106 * var(--vw-ratio));
				left: calc(74 * var(--vw-ratio));
			}
			#fv .slider-items.slider04 .icon02 {
				width: calc(80 * var(--vw-ratio));
				top: calc(155 * var(--vw-ratio));
				right: calc(57 * var(--vw-ratio));
			}
			#fv .slider-items.slider04 .icon03 {
				width: calc(60 * var(--vw-ratio));
				top: calc(222 * var(--vw-ratio));
				left: calc(63 * var(--vw-ratio));
			}

	#fv .catch-copy {
		height: 100dvh;
	}
		#fv .catch-copy h2 {
			width: 90%;
			margin: 0 auto calc(20 * var(--vw-ratio));
		}

		#fv .catch-copy .en {
			font-size: calc(14 * var(--vw-ratio));
			letter-spacing: 0;
		}

	#fv a.btn-tag {
		width: calc(140 * var(--vw-ratio));
		bottom: calc(80 * var(--vw-ratio));
		right: 50%;
		margin-right: calc(-70 * var(--vw-ratio));
	}
	#fv a.btn-tag:hover {
		transform: scale(1);
	}
}


	
	
/* message
--------------------- */
#message .circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(744 * var(--vw-ratio));
	height: calc(744 * var(--vw-ratio));
	border-radius: 50%;
	margin: 0 auto;
}
	#message .circle .text {
		text-align: center;
	}
		#message .circle .text h2 {
			font-size: calc(60 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1;
			padding-bottom: calc(30 * var(--vw-ratio));
			margin-bottom: calc(40 * var(--vw-ratio));
			background: url("../img/gesture01.svg") no-repeat center bottom / calc(230 * var(--vw-ratio));
		}

		#message .circle .text .txt-20 {
			font-weight: 500;
			letter-spacing: 0.06em;
			line-height: 2.4em;
		}

#message .pht {
	position: absolute;
}
#message .pht01 {
	width: calc(240 * var(--vw-ratio));
	top: calc(40 * var(--vw-ratio));
	left: calc(150 * var(--vw-ratio));
}
#message .pht02 {
	width: calc(233 * var(--vw-ratio));
	bottom: calc(-40 * var(--vw-ratio));
	left: calc(240 * var(--vw-ratio));
}
#message .pht03 {
	width: calc(398 * var(--vw-ratio));
	top: calc(380 * var(--vw-ratio));
	right: calc(70 * var(--vw-ratio));
}

#message .gesture {
	position: absolute;
}
#message .gesture01 {
	width: calc(170 * var(--vw-ratio));
	top: calc(0 * var(--vw-ratio));
	right: calc(280 * var(--vw-ratio));
}
#message .gesture02 {
	width: calc(145 * var(--vw-ratio));
	top: calc(270 * var(--vw-ratio));
	left: calc(310 * var(--vw-ratio));
}
#message .gesture03 {
	width: calc(92 * var(--vw-ratio));
	top: calc(550 * var(--vw-ratio));
	right: calc(270 * var(--vw-ratio));
}
@media screen and (max-width: 767px) {
	#message {
		overflow: hidden;
	}
		#message .circle {
			width: calc(500 * var(--vw-ratio));
			height: calc(500 * var(--vw-ratio));
			margin: 0 0 0 calc(-70 * var(--vw-ratio));
		}
				#message .circle .text h2 {
					font-size: calc(40 * var(--vw-ratio));
					padding-bottom: calc(25 * var(--vw-ratio));
					margin-bottom: calc(20 * var(--vw-ratio));
					background: url("../img/gesture01.svg") no-repeat center bottom / calc(160 * var(--vw-ratio));
				}

				#message .circle .text .txt-20 {
					font-size: calc(16 * var(--vw-ratio));
					line-height: 2.0em;
				}

		#message .pht01 {
			width: calc(100 * var(--vw-ratio));
			top: calc(-40 * var(--vw-ratio));
			left: 0;
		}
		#message .pht02 {
			width: calc(100 * var(--vw-ratio));
			bottom: calc(-30 * var(--vw-ratio));
			left: calc(50 * var(--vw-ratio));
		}
		#message .pht03 {
			width: calc(100 * var(--vw-ratio));
			top: calc(100 * var(--vw-ratio));
			right: 0;
		}

		#message .gesture {
			position: absolute;
		}
		#message .gesture01 {
			width: calc(80 * var(--vw-ratio));
			top: calc(-10 * var(--vw-ratio));
			right: calc(60 * var(--vw-ratio));
		}
		#message .gesture02 {
			width: calc(100 * var(--vw-ratio));
			top: auto;
			bottom: calc(10 * var(--vw-ratio));
			left: auto;
			right: calc(40 * var(--vw-ratio));
		}
		#message .gesture03 {
			width: calc(50 * var(--vw-ratio));
			top: calc(350 * var(--vw-ratio));
			right: calc(20 * var(--vw-ratio));
		}
}


	
	
/* step
--------------------- */
#step .s-title {
	width: calc(280 * var(--vw-ratio));
}
	#step .s-title .flowting {
		position: sticky;
		top: calc(150 * var(--vw-ratio));
		left: 0;
	}
		#step .s-title .flowting .en {
			white-space: nowrap;
			font-size: calc(105 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1;
			margin-bottom: calc(10 * var(--vw-ratio));
			position: relative;
		}
		#step .s-title .flowting .en:before {
			content: "";
			width: calc(246 * var(--vw-ratio));
			height: calc(210 * var(--vw-ratio));
			background: url("../img/gesture05.svg") no-repeat center / 100%;
			position: absolute;
			top: calc(-30 * var(--vw-ratio));
			right: calc(-80 * var(--vw-ratio));
			z-index: -2;
		}

		#step .s-title .flowting h2 {
			font-size: calc(30 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1;
			margin-bottom: calc(30 * var(--vw-ratio));
		}

#step .content {
	width: calc(720 * var(--vw-ratio));
	margin-right: calc(-50 * var(--vw-ratio));
}
	#step .content a.linkbox {
		display: block;
		margin-bottom: calc(70 * var(--vw-ratio));
	}
	#step .content a.linkbox:nth-last-child(1) {
		margin-bottom: 0;
	}
		#step .content a.linkbox .pht {
			margin-right: calc(-100 * var(--vw-ratio));
		}

		#step .content a.linkbox .text {
			padding-top: calc(16 * var(--vw-ratio));
		}
			#step .content a.linkbox .text h3 {
				font-size: calc(30 * var(--vw-ratio));
				margin-bottom: calc(6 * var(--vw-ratio));
			}

			#step .content a.linkbox .text .cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: calc(15 * var(--vw-ratio));
			}
				#step .content a.linkbox .text .cell .txt-14 {
					color: #B5B5B5;
					line-height: 1;
					font-weight: 500;
				}
@media screen and (max-width: 767px) {
	#step .inner {
		display: block;
	}
		#step .s-title {
			padding-top: calc(40 * var(--vw-ratio));
			width: 100%;
		}
			#step .s-title .flowting {
				position: static;
				margin-bottom: calc(50 * var(--vw-ratio));
			}
				#step .s-title .flowting .en {
					font-size: calc(78 * var(--vw-ratio));
					text-align: center;
				}
				#step .s-title .flowting .en:before {
					width: calc(120 * var(--vw-ratio));
					height: calc(100 * var(--vw-ratio));
					top: calc(10 * var(--vw-ratio));
					right: calc(10 * var(--vw-ratio));
				}

				#step .s-title .flowting h2 {
					font-size: calc(22 * var(--vw-ratio));
					margin-bottom: calc(30 * var(--vw-ratio));
					text-align: center;
					line-height: 0.8;
					margin-bottom: calc(15 * var(--vw-ratio));
				}
					#step .s-title .flowting h2 span {
						font-size: calc(13 * var(--vw-ratio));
					}

		#step .content {
			width: 100%;
			margin-right: 0;
		}
			#step .content a.linkbox {
				margin-bottom: calc(50 * var(--vw-ratio));
			}
				#step .content a.linkbox .pht {
					margin-right: calc(-25 * var(--vw-ratio));
				}

				#step .content a.linkbox .text {
					padding-top: calc(20 * var(--vw-ratio));
				}
					#step .content a.linkbox .text h3 {
						font-size: calc(22 * var(--vw-ratio));
						line-height: 1.5em;
						margin-bottom: calc(10 * var(--vw-ratio));
					}

					#step .content a.linkbox .text .read {
						font-size: calc(14 * var(--vw-ratio));
						line-height: 1.8em;
					}

					#step .content a.linkbox .text .cell {
						margin-top: calc(12 * var(--vw-ratio));
					}
}


	
	
/* other
--------------------- */
#other {
	padding-bottom: calc(20 * var(--vw-ratio));
}
	#other h2 {
		font-size: calc(70 * var(--vw-ratio));
		font-weight: 500;
		text-align: center;
		line-height: 1;
		margin-bottom: calc(20 * var(--vw-ratio));
	}

	#other .swiper-wrapper {
		transition-timing-function: linear;
	}
		#other .swiper-wrapper .swiper-slide {
			margin-right: calc(20 * var(--vw-ratio));
		}
			#other .swiper-wrapper .swiper-slide a {
				display: block;
				overflow: hidden;
				position: relative;
			}
			#other .swiper-wrapper .swiper-slide.full {
				width: calc(480 * var(--vw-ratio));
			}
			#other .swiper-wrapper .swiper-slide.half {
				width: calc(320 * var(--vw-ratio));
			}
			#other .swiper-wrapper .swiper-slide.half a.mini:nth-child(1) {
				margin-bottom: calc(20 * var(--vw-ratio));
			}
				#other .swiper-wrapper .swiper-slide a .en {
					line-height: 1;
					position: absolute;
					top: calc(20 * var(--vw-ratio));
					left: calc(20 * var(--vw-ratio));
				}

				#other .swiper-wrapper .swiper-slide a h3 {
					font-weight: 700;
					line-height: 1.3em;
					position: absolute;
					bottom: calc(20 * var(--vw-ratio));
					left: calc(20 * var(--vw-ratio));
				}
				#other .swiper-wrapper .swiper-slide a h3.txt-24 {
					font-size: calc(24 * var(--vw-ratio));
				}
@media screen and (max-width: 767px) {
	#other h2 {
		font-size: calc(45 * var(--vw-ratio));
	}

	#other .swiper-wrapper .swiper-slide {
		margin-right: calc(10 * var(--vw-ratio));
	}
		#other .swiper-wrapper .swiper-slide.full {
			width: calc(300 * var(--vw-ratio));
			height: calc(310 * var(--vw-ratio));
		}
		#other .swiper-wrapper .swiper-slide.half {
			width: calc(200 * var(--vw-ratio));
			height: calc(310 * var(--vw-ratio));
		}
		#other .swiper-wrapper .swiper-slide.half a.mini:nth-child(1) {
			margin-bottom: calc(10 * var(--vw-ratio));
		}
			#other .swiper-wrapper .swiper-slide.full .pht img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
	
			#other .swiper-wrapper .swiper-slide a .en {
				top: calc(15 * var(--vw-ratio));
				left: calc(15 * var(--vw-ratio));
			}

			#other .swiper-wrapper .swiper-slide a h3 {
				bottom: calc(15 * var(--vw-ratio));
				left: calc(15 * var(--vw-ratio));
			}
			#other .swiper-wrapper .swiper-slide a h3.txt-24 {
				font-size: calc(16 * var(--vw-ratio));
			}
			#other .swiper-wrapper .swiper-slide a h3.txt-18 {
				font-size: calc(14 * var(--vw-ratio));
			}
}


	
	
/* tag-area
--------------------- */
#tag-area {
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;
}
#tag-area.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
	#tag-area  .btn-close {
		width: calc(40 * var(--vw-ratio));
		position: fixed;
		top: calc(20 * var(--vw-ratio));
		right: calc(30 * var(--vw-ratio));
		z-index: 16;
	}
		#tag-area  .btn-close a {
			display: block;
		}
		#tag-area  .btn-close a:hover {
			transform:rotate(-180deg);
		}

	#tag-area .content {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		padding: calc(80 * var(--vw-ratio)) calc(100 * var(--vw-ratio)) calc(100 * var(--vw-ratio)) calc(100 * var(--vw-ratio));
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}

		#tag-area .content h2 {
			font-size: calc(30 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1.3em;
			text-align: center;
			margin-bottom: calc(30 * var(--vw-ratio));
		}

		#tag-area .content ul.keyword-box {
			width: 80%;
			margin: 0 auto calc(60 * var(--vw-ratio)) auto;
		}
			#tag-area .content ul.keyword-box li {
				list-style: none;
				margin: calc(5 * var(--vw-ratio));
			}
				#tag-area .content ul.keyword-box li input {
					clip: rect(1px, 1px, 1px, 1px);
					position: absolute;
				}

				#tag-area .content ul.keyword-box li label.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 0 calc(12 * var(--vw-ratio));
					height: calc(32 * var(--vw-ratio));
					border-radius: calc(5 * var(--vw-ratio));
					font-size: calc(14 * var(--vw-ratio));
					font-weight: 500;
					line-height: calc(32 * var(--vw-ratio));
					text-align: center;
					background: #fff;
					border: none;
					transition: all .2s;
					cursor: pointer;
				}
				#tag-area .content ul.keyword-box li input[type="radio"]:checked + label {
					background: #282828;
					color: #fff;
				}

		#tag-area .content .list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: calc(40 * var(--vw-ratio));
			row-gap: calc(50 * var(--vw-ratio));
		}
			#tag-area .content .list a.linkbox {
				display: block;
			}
			#tag-area .content .list a.linkbox.is-hide {
				display: none;
			}
				#tag-area .content .list a.linkbox h3 {
					padding-top: calc(17 * var(--vw-ratio));
					padding-left: calc(30 * var(--vw-ratio));
					padding-bottom: calc(17 * var(--vw-ratio));
					font-size: calc(15 * var(--vw-ratio));
					line-height: 1.4em;
					background: url("../common/img/icon_arrow_black.svg") no-repeat left calc(5 * var(--vw-ratio)) center/ calc(14 * var(--vw-ratio));
					border-bottom: solid 1px #fff;
					position: relative;
				}
				#tag-area .content .list a.linkbox h3:before {
					content: "";
					width: calc(28 * var(--vw-ratio));
					height: 1px;
					background: #282828;
					position: absolute;
					bottom: -1px;
					left: 0;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#tag-area .content .list a.linkbox:hover h3:before {
					width: 100%;
				}
@media screen and (max-width: 767px) {
	#tag-area  .btn-close {
		width: calc(36 * var(--vw-ratio));
		top: calc(15 * var(--vw-ratio));
		right: calc(15 * var(--vw-ratio));
	}

	#tag-area .content {
		height: 100dvh;
		padding: calc(40 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(60 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
	}

		#tag-area .content h2 {
			font-size: calc(24 * var(--vw-ratio));
			margin-bottom: calc(20 * var(--vw-ratio));
		}

		#tag-area .content ul.keyword-box {
			width: 100%;
			margin: 0 auto calc(40 * var(--vw-ratio)) auto;
		}
			#tag-area .content ul.keyword-box li {
				margin: calc(4 * var(--vw-ratio));
			}
				#tag-area .content ul.keyword-box li label.tag {
					height: calc(28 * var(--vw-ratio));
					border-radius: calc(4 * var(--vw-ratio));
					font-size: calc(13 * var(--vw-ratio));
					line-height: calc(28 * var(--vw-ratio));
				}

		#tag-area .content .list {
			grid-template-columns: repeat(2, 1fr);
			column-gap: calc(25 * var(--vw-ratio));
			row-gap: calc(35 * var(--vw-ratio));
		}
				#tag-area .content .list a.linkbox h3 {
					font-size: calc(14 * var(--vw-ratio));
					padding-top: calc(15 * var(--vw-ratio));
					padding-left: 0;
					padding-bottom: calc(15 * var(--vw-ratio));
					background: none;
				}
				#tag-area .content .list a.linkbox h3:before {
					width: calc(20 * var(--vw-ratio));
				}
}