@charset "UTF-8";

/*
 *  SiteName : rrrrrrrrr
 *  SiteUrl : https://rrrrrrrrr.jp/
 *  © 2025 marci
 */

.fs-preview-header {
	display: none;
}

/*==============================================================
  input reset
==============================================================*/
input,
select,
textarea,
button {
	border: none;
	outline: none;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*==============================================================
  font
==============================================================*/
*,
body,
input,
select,
textarea,
button {
	color: #3c3c3c;
	/*letter-spacing: 0.135em;*/
	line-break: anywhere;
	font-family: "Hind Madurai", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
}

/*==============================================================
  body,.fs-l-page
============================================================== */
body,
.fs-l-page {
	min-width: 1000px;
	min-height: 100vh;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/*==============================================================
	img
============================================================== */
img {
	width: 100%;
}

/*==============================================================
  link
==============================================================*/
a {
	width: 100%;
	height: 100%;
	display: inline-block;
}

a:link,
a:visited,
a:active {
	color: #3c3c3c;
	text-decoration: none;
}

@media only screen and (min-width: 48em) {
	a {
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	a img {
		-webkit-transition: all 1s ease;
		transition: all 1s ease;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	a:hover,
	a:hover img {
		opacity: 0.6;
		text-decoration: none;
	}
}

/*==============================================================
  header
==============================================================*/
header {
	margin: 23px 0 0;
	width: 100%;

	.header-contents {
		position: relative;
		margin: 0 auto;
		width: 1000px;
		height: 42px;

		.hamburger-menu {
			.hamburger-menu-checkbox {
				display: none;
			}

			.hamburger-menu-icon {
				position: absolute;
				top: 50%;
				left: 0;
				width: 32px;
				text-align: center;
				font-size: 10px;
				transform: translateY(-50%);
				-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;

				span {
					margin: 0 auto 3px;
					width: 16.5px;
					height: 2px;
					background-color: #3c3c3c;
					display: block;
					-webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
				}

				p {
					margin: 7px 0 0;
					text-align: center;
				}
			}

			.hamburger-menu-nav {
				position: fixed;
				top: 0;
				left: -100%;
				margin: 0;
				width: 300px;
				height: 100%;
				background-color: #fff;
				overflow-y: scroll;
				overflow-x: hidden;
				-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;
				z-index: 2;

				ul {
					position: relative;
					margin: 0 0 30px;
					width: 300px;
					font-size: 13px;
					background-color: #fff;
					display: block;
					z-index: 1;

					li {
						position: relative;
						text-align: left;

						&::before {
							position: absolute;
							left: 20px;
							bottom: 0;
							width: calc(100% - 20px - 35px);
							height: 1px;
							content: "";
							background-color: #d3d3d3;
						}

						a {
							position: relative;
							padding: 16px 35px 16px 20px;

							&::before {
								position: absolute;
								top: 15px;
								right: 39px;
								width: 8px;
								height: 8px;
								content: "";
								border-top: solid 2px #3c3c3c;
								border-right: solid 2px #3c3c3c;
								transform: rotate(45deg);
							}
						}

						.category-checkbox {
							display: none;
						}

						label {
							position: relative;
							padding: 16px 35px 0 20px;
							display: block;

							&::before,
							&::after {
								position: absolute;
								top: 21px;
								right: 35px;
								width: 14px;
								height: 2px;
								content: "";
								background-color: #3c3c3c;
								-webkit-transition: all 0.5s ease;
								transition: all 0.5s ease;
							}

							&::after {
								-webkit-transform: rotate(90deg);
								transform: rotate(90deg);
							}

							span {
								padding: 0 0 16px 0;
								width: 100%;
								border-bottom: 1px solid #d3d3d3;
								display: block;
							}
						}

						ul {
							margin: 0;
							height: 0;
							opacity: 0;
							overflow: hidden;
							-webkit-transition: all 0.5s ease;
							transition: all 0.5s ease;

							li {
								&::before {
									left: 30px;
									width: calc(100% - 30px - 35px);
								}
								a {
									padding: 16px 35px 16px 30px;
								}
							}
						}
					}

					&.nav-icon-list {
						margin: 0;
						padding: 31px 0 20px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-wrap: wrap;
						flex-wrap: wrap;
						-webkit-box-pack: center;
						-ms-flex-pack: center;
						justify-content: center;

						li {
							width: 60px;
							text-align: center;

							&::before {
								display: none;
							}

							a {
								padding: 0;
								border: none;

								&::before {
									display: none;
								}
							}

							img {
								width: 26px;
							}

							p {
								font-size: 10px;
							}
						}
					}

					&.sns-icon-list {
						margin: 40px auto 20px;
						width: 170px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-ms-flex-wrap: wrap;
						flex-wrap: wrap;
						-webkit-box-pack: center;
						-ms-flex-pack: center;
						justify-content: center;

						li {
							margin: 0 10px;
							width: calc((100% - 60px) / 3);
							text-align: center;

							a {
								padding: 0;
								border: none;

								&::before {
									display: none;
								}
							}
						}
					}
				}

				.main-title {
					margin: 0 0 5px;
					padding: 12px 0 11px 20px;
					line-height: 20px;
					background-color: #f0f0f0;

					img {
						margin: 0 5px 0 0;
						width: 70px;
						display: inline-block;
						vertical-align: -1px;
					}
				}

				.small-title {
					margin: 15px 20px 0;
					padding: 0 0 10px;
					line-height: 20px;
					font-size: 13px;
					border-bottom: 1px solid #d3d3d3;
				}
			}

			.nav-backcolor {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.4);
				opacity: 0;
				-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;
				z-index: -1;

				span {
					position: absolute;
					top: 37px;
					left: 320px;
					width: 18px;
					height: 2px;
					background-color: #fff;

					&:nth-of-type(1) {
						transform: rotate(-45deg);
					}

					&:nth-of-type(2) {
						transform: rotate(45deg);
					}
				}
			}
		}

		#hamburger-menu-checkbox:checked ~ .hamburger-menu-nav {
			left: 0;
		}

		#hamburger-menu-checkbox:checked ~ .nav-backcolor {
			opacity: 1;
			z-index: 1;
		}

		#hamburger-menu-checkbox:checked ~ .hamburger-menu-icon {
			opacity: 0;
		}

		.category-tops-checkbox:checked ~ .category-tops,
		.category-bottoms-checkbox:checked ~ .category-bottoms,
		.category-onepiece-checkbox:checked ~ .category-onepiece,
		.category-coat-checkbox:checked ~ .category-coat,
		.category-accessories-checkbox:checked ~ .category-accessories,
		.category-limited-checkbox:checked ~ .category-limited {
			height: auto;
			opacity: 1;
			overflow: visible;
		}

		.category-tops-checkbox:checked ~ .category-tops-label::after,
		.category-bottoms-checkbox:checked ~ .category-bottoms-label::after,
		.category-onepiece-checkbox:checked ~ .category-onepiece-label::after,
		.category-coat-checkbox:checked ~ .category-coat-label::after,
		.category-accessories-checkbox:checked ~ .category-accessories-label::after,
		.category-limited-checkbox:checked ~ .category-limited-label::after {
			transform: rotate(0);
		}

		.logo-image {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 150px;
			transform: translate(-50%, -50%);
		}

		.header-icon {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);

			ul {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;

				li {
					margin: 0;
					width: 60px;
					text-align: center;
					font-size: 10px;

					img {
						width: 23px;
					}
				}
			}
		}
	}

	nav {
		margin: 15px 0 0;
		width: 100%;
		background-color: #f5eedd;

		ul {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;

			li {
				a {
					padding: 15px 20px;
					font-size: 13px;
				}
			}
		}
	}
}

/*==============================================================
  main
==============================================================*/
main {
	margin: 0;
	width: 100%;
}

/*==============================================================
  section
==============================================================*/
section {
	margin: 0;
	width: 100%;

	.section-contents {
		margin: 0 auto;
		width: 1000px;
	}

	.link-button {
		margin: 0 auto;
		width: 400px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		background-color: #3c3c3c;
		border-radius: 4px;

		a {
			padding: 18px 0 15px;
			color: #fff;
		}
	}
}

/*==============================================================
  footer
==============================================================*/
footer {
	margin: 0;
	padding: 60px 0 15px;
	width: 100%;
	font-size: 13px;
	background-color: #f3f3f3;

	.footer-contents {
		margin: 0 auto;
		width: 1000px;

		.footer-nav {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;

			ul {
				margin: 0 0 -12px;
				width: calc(100% / 4);

				li {
					margin: 0 0 12px;
				}

				&:nth-of-type(n + 2) li:nth-of-type(1) {
					margin: 0 0 24px;
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		.footer-logo {
			margin: 97px auto 39px;
			width: 140px;
			text-align: center;

			p {
				margin: 16px 0 0;
			}
		}

		small {
			margin: 0;
			width: 100%;
			text-align: center;
			display: block;

			a {
				display: inline;
			}
		}
	}
}

@media only screen and (max-width: 48.0625em) {
	/*==============================================================
  font
==============================================================*/
	*,
	body,
	input,
	select,
	textarea,
	button {
		font-size: 10px;
	}

	/*==============================================================
  body,.fs-l-page
============================================================== */
	body,
	.fs-l-page {
		min-width: 100%;
	}

	/*==============================================================
  header
==============================================================*/
	header {
		margin: 4px 0 0;

		.header-contents {
			width: calc(100% - 30px);
			height: 52px;

			.hamburger-menu {
				.hamburger-menu-icon {
					width: 16.5px;

					p {
						display: none;
					}
				}

				.hamburger-menu-nav {
					display: block;

					ul {
						li {
							&::before {
								width: calc(100% - 20px - 20px);
							}
						}
					}
				}
			}

			.logo-image {
				width: 24%;
				min-width: 90px;
			}

			.header-icon {
				ul {
					li {
						margin: 0 0 0 14px;
						width: 21px;

						&:nth-last-of-type(1) {
							display: none;
						}

						img {
							width: 23px;
						}

						p {
							display: none;
						}
					}
				}
			}
		}

		nav {
			display: none;
		}
	}

	/*==============================================================
  section
==============================================================*/
	section {
		.section-contents {
			width: 100%;
		}

		.link-button {
			margin: 0 auto;
			width: 100%;
			font-size: 12px;

			a {
				padding: 18px 0 14px;
			}
		}
	}

	/*==============================================================
  footer
==============================================================*/
	footer {
		padding: 40px 0 13px;
		width: 100%;
		font-size: 11px;

		.footer-contents {
			width: calc(100% - 50px);

			.footer-nav {
				display: block;

				ul {
					margin: 0 0 40px;
					width: 100%;

					li {
						margin: 0 0 13px;
					}

					&:nth-of-type(n + 2) li:nth-of-type(1) {
						margin: 0 0 16px;
						font-size: 13px;
					}
				}
			}

			.footer-logo {
				margin: 80px auto 13px;
				width: 96px;
				text-align: center;

				p {
					margin: 15px 0 0;
				}
			}
		}
	}
}