@charset 'utf-8';

/* main_special style */
.main_special {
	position: relative;
	background-image: url(../images/bg_special.webp);
	background-size: 300px;
	background-color: #F1EFEB;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 2;
}


.main_special .content {
	position: relative;
	width: 115.2rem;
	margin: 0 auto;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.main_special .content {
		margin: 0 auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special {
		font-size: 16px;
	}

	.main_special .content {
		width: 1152px;
	}
}

@media screen and (max-width: 768px) {
	.main_special .content {
		width: 32.4rem;
		margin: 0 auto;
	}
}

.main_special .upperLink_area {
	font-weight: 500;
	position: absolute;
	margin-bottom: 5rem;
	margin-top: 3rem;
	z-index: 1;
}

@media screen and (min-width: 1440px) {
	.main_special .upperLink_area {
		margin-bottom: 50px;
		margin-top: 30px;
	}
}

@media screen and (max-width: 768px) {
	.main_special .upperLink_area {
		position: relative;
		margin-top: unset;
	}
}

.main_special .upperLink_area .link_wrap {
	display: inline-block;
	padding: .4rem 2rem .5rem 1rem;
	border: 1px solid #000;
	border-radius: 9999px;
	position: relative;
	font-size: 1.5rem;
}

.main_special .upperLink_area a.link_wrap span {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1440px) {
	.main_special .upperLink_area .link_wrap {
		padding: 4px 20px 5px 10px;
		font-size: 15px;
	}
}

.main_special .upperLink_area .link_wrap::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	opacity: .2;
	pointer-events: none;
	border-radius: 9999px;
	z-index: 0;
	background: unset;
	transition: background .3s;
}

.main_special .upperLink_area .link_wrap:hover::before {
	background: #000;
}

.main_special img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* button */
.main_special .ButtonLink_wrap {
	display: inline-block;
	margin: 3rem 0 0;
	height: 4rem;
	padding: 0 3rem 0 1rem;
	border: 1px solid #000;
	border-radius: 9999px;
	font-weight: 500;
	transition: background-color 0.3s ease;
	position: relative;
	z-index: 1;
}

.main_special .ButtonLink_wrap a {
	z-index: 1;
	position: relative;
}

@media screen and (min-width: 1440px) {
	.main_special .ButtonLink_wrap {
		margin: 30px 0 0;
		height: 40px;
		padding: 0 30px 0 10px;
	}

}

@media screen and (max-width: 768px) {
	.main_special .ButtonLink_wrap {
		margin: 0 0 1rem;
		width: 100%;
	}
}

.main_special .ButtonLink_wrap::after {
	content: "→";
	display: block;
	height: 4rem;
	font-size: 2rem;
	font-weight: 100;
	right: 1.5rem;
	top: 0;
	bottom: 0;
	left: auto;
	position: absolute;
	margin: auto;
}

@media screen and (min-width: 1440px) {
	.main_special .ButtonLink_wrap::after {
		height: 40px;
		font-size: 20px;
		right: 15px;
	}
}

.main_special .ButtonLink_wrap:before {
	content: "";
	background-color: unset;
	opacity: .2;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	pointer-events: none;
	z-index: 0;
	transition: background-color .3s;
}

.main_special .ButtonLink_wrap:hover:before {
	background-color: #000;
}

.main_special a.ButtonLink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.main_special .ButtonLink_text {
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: .026em;
	word-break: break-word;
}

@media screen and (min-width: 1440px) {
	.main_special .ButtonLink_text {
		font-size: 13px;
	}
}

/* toc nav */
/* imgLinkArea */
.main_special #index {
	position: relative;
}

@media screen and (min-width: 1440px) {
	.main_special #index {
		width: 1420px;
		position: relative;
		margin: 0 auto;
	}
}

.main_special #index .inner {
	display: flex;
}

@media screen and (max-width: 768px) {
	.main_special #index .inner {
		display: block;
	}
}

.main_special #index .text_area {
	line-height: 1.6;
	width: 64.8rem;
	padding: 15rem 3rem 0rem 14.4rem;
	border-right: 1px solid #000;
}

@media screen and (min-width: 1440px) {
	.main_special #index .text_area {
		line-height: 1.6;
		width: 648px;
		padding: 150px 30px 0px 144px;
		border-right: 1px solid #000;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .text_area {
		display: flex;
		align-items: center;
		font-size: 1.5rem;
		width: 100%;
		padding: unset;
		border: unset;
		height: 90vh;
	}
}

.main_special #index .logo_wrap {
	font-size: 3rem;
	margin-bottom: 3rem;
	padding-right: 3rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .logo_wrap {
		font-size: 30px;
		margin-bottom: 30px;
		padding-right: 30px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .logo_wrap {
		width: 25rem;
		font-size: 2rem;
		padding-right: unset;
	}
}

.main_special #index .logo_wrap>img {
	margin-bottom: 2rem;
}

.main_special #index .scroll_wrap {
	display: none;
}

@media screen and (max-width: 768px) {
	.main_special #index .scroll_wrap {
		height: 10rem;
		display: flex;
		margin: 5rem auto;
	}

	.main_special #index .scroll {
		width: 10rem;
		border-bottom: 1px solid #000;
		transform: rotate(90deg);
		text-align: center;
		margin: auto;
	}
}

/* #index link */

.main_special #index {
	height: 67rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index {
		height: 670px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index {
		height: unset;
		padding: 1.8rem 1.8rem 0;
	}
}

.main_special #index .inner {
	height: 100%;
}

.main_special #index .imgLink_container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 39.6rem;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_container {
		width: 396px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_container {
		border-top: unset;
		border-right: unset;
		margin: 0 -1.8rem 0;
		width: calc(100% + 3.6rem);
	}
}

.main_special #index .imgLink_flx {
	overflow: hidden;
	border-bottom: 1px solid #000;
	position: relative;
	flex-basis: 34%;
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx {
		border-top: 1px solid #000;
		margin-bottom: 5rem;
	}
}

.main_special #index .imgLink_flx>div.imgLinkImg_wrap {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx>div.imgLinkImg_wrap {
		height: 20rem;
	}
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap {
	width: 6rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	font-size: 3rem;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-right: 1px solid #000;
	pointer-events: none;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx>div.imgLinkNum_wrap {
		width: 60px;
		font-size: 30px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx>div.imgLinkNum_wrap {
		top: 0;
		left: unset;
		right: 0;
		border-left: 1px solid #000;
	}
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap>div:nth-child(2) {
	padding: 1rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx>div.imgLinkNum_wrap>div:nth-child(2) {
		padding: 10px;
	}
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap::before {
	content: "";
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	background: #EAE6DF;
	opacity: .8;
	z-index: 0;
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx>div.imgLinkNum_wrap::before {
		opacity: 1;
	}
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap::after {
	content: "";
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/bg_blend_special.webp);
	background-size: 300px;
	opacity: .3;
	z-index: 0;
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap>div {
	z-index: 1;
}

.main_special #index .imgLink_flx>div.imgLinkNum_wrap>div:first-child {
	border-bottom: 1px solid #000;
}

.main_special #index .imgLink_flx .imgLinkNum_wrap a {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
}

/* img position */
.main_special #index .imgLink_flx a.switch-color[name="blue"] img {
	max-width: unset;
	width: 119%;
	height: auto;
	object-position: -.5rem -2rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx a.switch-color[name="blue"] img {
		object-position: -5px -20px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx a.switch-color[name="blue"] img {
		width: 109%;
		height: auto;
		object-position: 0rem -2.5rem;
	}
}

.main_special #index .imgLink_flx a.switch-color[name="greige"] img {
	max-width: unset;
	width: 117%;
	height: auto;
	object-position: -2rem -30rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx a.switch-color[name="greige"] img {
		object-position: -20px -300px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx a.switch-color[name="greige"] img {
		width: 93%;
		height: auto;
		object-position: -1rem -20rem;
	}
}

.main_special #index .imgLink_flx a.switch-color[name="coral"] img {
	max-width: unset;
	width: 111%;
	height: auto;
	object-position: -3rem -1rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx a.switch-color[name="coral"] img {
		object-position: -30px -10px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx a.switch-color[name="coral"] img {
		width: 93%;
		height: auto;
		object-position: -1rem -0rem;
	}
}

.main_special #index .imgLink_flx a.switch-color[name="green"] img {
	max-width: unset;
	width: 100%;
	height: auto;
	object-position: 0rem -25rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx a.switch-color[name="green"] img {
		object-position: 0px -250px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx a.switch-color[name="green"] img {
		width: 96%;
		height: auto;
		object-position: -3rem -22rem;
	}
}

.main_special #index .imgLink_flx a.switch-color[name="black"] img {
	max-width: unset;
	width: 136%;
	height: auto;
	object-position: 0rem -10rem;
}

@media screen and (min-width: 1440px) {
	.main_special #index .imgLink_flx a.switch-color[name="black"] img {
		object-position: 0px -100px;
	}
}

@media screen and (max-width: 768px) {
	.main_special #index .imgLink_flx a.switch-color[name="black"] img {
		width: 130%;
		height: auto;
		object-position: -4rem -8rem;
	}
}



/* hover */
.main_special .imgLink_flx {
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 769px) {
	.main_special .imgLink_flx a img {
		transition: transform .3s;
		transform-origin: center 0;
	}

	.main_special .imgLink_flx a:hover img {
		transform: scale(1.05);
	}
}

/* colors */
.main_special section.colors {
	border-top: 1px solid #000;
	position: relative;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors>div {
		width: 1420px;
		position: relative;
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors>div {
		padding-bottom: 13rem;
	}
}



.main_special section.colors .bottomLink_area {
	position: absolute;
	bottom: 5rem;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .bottomLink_area {
		position: absolute;
		bottom: 50px;
		width: 1420px;
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area {
		left: 0;
		bottom: 0;
		mask-image: linear-gradient(to bottom, transparent 3%, black 50%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 3%, black 50%);
	}

}

.main_special section.colors .bottomLink_area>div {
	width: 26rem;
	background-color: rgb(255, 255, 255, 1);
	font-weight: 500;
	border: 1px solid #000;
	border-radius: 9999px;
	position: relative;
	transition: background-color .3s;
}

.main_special section.colors .bottomLink_area>div:hover {
	background-color: #ccc;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .bottomLink_area>div {
		width: 260px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area>div:hover {
		background-color: rgb(255, 255, 255, 1);
	}
}

.main_special section.colors .bottomLink_area>div a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.5rem 3rem;
}


@media screen and (min-width: 1440px) {
	.main_special section.colors .bottomLink_area>div a {
		padding: 5px 30px;
	}
}

.main_special section.colors .bottomLink_area>div a span.pp {
	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
	line-height: 1;
	border-bottom: unset;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .bottomLink_area>div a span.pp {
		font-size: 20px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area>div a span.pp {
		font-size: unset;
	}
}

.main_special section.colors .bottomLink_area>div:first-child {
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
	border-left: unset;
}

.main_special section.colors .bottomLink_area>div:first-child a {
	text-align: right;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area>div:first-child a {
		text-align: left;
	}
}

.main_special section.colors .bottomLink_area>div:last-child {
	text-align: right;
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
	border-right: unset;
}

.main_special section.colors .bottomLink_area>div:last-child a {
	text-align: left;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area>div:last-child a {
		text-align: right;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .bottomLink_area>div {
		background-color: rgb(255, 255, 255, 1);
		padding: 10rem 0 5rem;
		border-radius: unset;
		border: none;
	}

	.main_special section.colors .bottomLink_area>div a span {
		display: inline-block;
		border-bottom: 1px solid #000;
	}

	.main_special section.colors .bottomLink_area>div:first-child a {
		padding-left: 1.8rem;
	}

	.main_special section.colors .bottomLink_area>div:last-child a {
		padding-right: 1.8rem;
	}
}



.main_special section.colors .colorMainImage {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorMainImage {
		border-bottom: 1px solid #000;
		margin: 0 -1.8rem 2rem 3rem;
		height: 22rem;
	}
}

.main_special section.colors .colorMainImage>img {
	height: auto;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorMainImage>img {
		object-position: -9rem -10rem;
		width: 153%;
		max-width: unset;
	}
}

.main_special section.colors .colorSubImg01 {
	border-left: 1px solid #000;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorSubImg01 {
		border: 1px solid #000;
		border-left: none;
		margin-left: -1.8rem;
		margin-bottom: 2rem;
		width: 26rem;
		height: 20rem;
		z-index: 1;
		position: relative;
	}
}

.main_special section.colors .colorSubImg02 {
	border-left: 1px solid #000;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorSubImg02 {
		border: 1px solid #000;
		border-right: none;
		margin-right: -1.8rem;
		margin-left: auto;
		width: 18rem;
		height: 14rem;
		z-index: 1;
		position: relative;
	}
}

.main_special section.colors .colorName_wrap {
	position: relative;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	padding: 1.5rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .colorName_wrap {
		padding: 15px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorName_wrap {
		border: 1px solid #000;
		border-left: none;
		height: 7rem;
		width: 90%;
		padding: .7rem 1rem;
		margin-left: -1.8rem;
		margin-top: -32rem;
		z-index: 2;
		position: relative;
	}
}

.main_special section.colors .colorName_wrap>img {
	position: relative;
	object-fit: contain;
	width: auto;
	z-index: 1;
}

.main_special section.colors .colorName_wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	z-index: 0;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorPhone_wrap {
		z-index: 1;
		position: relative;
	}
}


.main_special section.colors .stylefor {
	margin: 2rem 0;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .stylefor {
		margin: 20px 0;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .stylefor {
		text-indent: 1.8rem;
		position: relative;
		margin: 1rem -1.8rem 0;
		width: 36rem;
	}

	.main_special section.colors .stylefor::before {
		content: "";
		display: block;
		width: 1px;
		height: 6rem;
		background: #000;
		position: absolute;
		top: 8rem;
		right: 0;
		left: 0;
		margin: auto;
		z-index: 1;
	}

	.main_special section.colors .stylefor::after {
		content: "";
		display: block;
		width: 1rem;
		height: 1rem;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		transform: rotate(45deg);
		position: absolute;
		top: 13rem;
		right: 0;
		left: 0;
		margin: auto;
	}

	.main_special section.colors .stylefor>div {
		height: 38rem;
		margin-top: 8rem;
	}
}

.main_special section.colors .phone_flx {
	display: flex;
	align-items: flex-end;
	gap: 2rem;
	margin-top: 3rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .phone_flx {
		gap: 20px;
		margin-top: 30px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .phone_flx {
		gap: 0;
	}
}

.main_special section.colors .phone_flx .phoneMain_wrap {
	width: 20rem;
	padding: 0 3rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .phone_flx .phoneMain_wrap {
		width: 200px;
		padding: 0 30px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .phone_flx .phoneMain_wrap {
		padding: 0 1rem;
	}
}

.main_special section.colors .phone_flx .phoneCoordi_wrap {
	width: 23rem;
	padding: 0 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .phone_flx .phoneCoordi_wrap {
		width: 230px;
		padding: 0 20px;
	}
}

.main_special section.colors .phone_flx .phoneCoordi_wrap>img {
	margin: 0 auto 4rem;
	width: 86%;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .phone_flx .phoneCoordi_wrap>img {
		margin: 0 auto 40px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .phone_flx .phoneCoordi_wrap>img {
		margin: 0 0rem 2rem;
		width: 80%;
	}
}

.main_special section.colors .phone_flx .phoneCoordi_body {
	display: flex;
	gap: 4rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .phone_flx .phoneCoordi_body {
		gap: 40px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .phone_flx .phoneCoordi_body {
		gap: 1rem;
	}
}

.main_special section.colors .phone_flx .phoneCoordi_body>div {
	flex-basis: 50%;
}

.main_special section.colors .phone_flx .phoneCoordi_body>img {
	width: unset;
}

.main_special section.colors .ButtonLink_container {
	display: flex;
	gap: 2rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .ButtonLink_container {
		gap: 20px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .ButtonLink_container {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-top: 3rem;
		margin-bottom: 5rem;
	}
}

.main_special section.colors .ButtonLink_wrap.body {
	width: 20rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .ButtonLink_wrap.body {
		width: 200px;
	}
}

.main_special section.colors .ButtonLink_wrap.case {
	width: 23rem;
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .ButtonLink_wrap.case {
		width: 230px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section.colors .ButtonLink_wrap {
		width: 28rem !important;
		padding: 0 4rem;
	}
}

.main_special section.colors .colorSubImg_sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.main_special section.colors .colorSubImg_sp {
		display: block;
		width: 100vw;
		height: 46rem;
		margin: 15rem -1.8rem 0 -1.8rem;
		z-index: 0;
		position: relative;
		background-repeat: no-repeat;
		background-size: 45rem;
	}

	.main_special section.colors .colorSubImg01 {
		margin-top: -56rem;
	}
}


/* section.colors grid for PC_start */
@media screen and (min-width: 769px) {
	.main_special section.colors .colors_grid {
		position: relative;
		display: grid;
		grid-template-columns: 68.8rem 37.6rem 37.6rem;
		grid-template-rows: 25.3rem 12.7rem 12.7rem 25.3rem;
		grid-template-areas:
			"text subImg02 subImg01"
			"phone colorName subImg01"
			"phone mainImg mainImg"
			"phone mainImg mainImg";
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: auto 80rem;
		z-index: 0;
	}

	.main_special section.colors .colors_grid:before {
		content: '';
		background: inherit;
		-webkit-filter: blur(.5rem);
		-moz-filter: blur(.5rem);
		-o-filter: blur(.5rem);
		-ms-filter: blur(.5rem);
		filter: blur(.5rem);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.main_special section.colors .colors_grid:after {
		content: '';
		background-color: #FFF;
		opacity: .5;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.main_special section.colors .colorText_wrap {
		grid-area: text;
		padding: 10rem 5rem 0rem 14.4rem;
	}

	.main_special section.colors .colorPhone_wrap {
		grid-area: phone;
		padding: 0 5rem 5rem 14.4rem;
	}

	.main_special section.colors .colorMainImage {
		grid-area: mainImg;
	}

	.main_special section.colors .colorSubImg01 {
		grid-area: subImg01;
	}

	.main_special section.colors .colorSubImg02 {
		grid-area: subImg02;
	}

	.main_special section.colors .colorName_wrap {
		grid-area: colorName;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section.colors .colors_grid {
		grid-template-columns: 668px 376px 376px;
		grid-template-rows: 253px 127px 127px 253px;
		background-size: auto 800px;
	}

	.main_special section.colors .colors_grid:before {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
	}

	.main_special section.colors .colorText_wrap {
		padding: 100px 50px 0px 144px;
	}

	.main_special section.colors .colorPhone_wrap {
		padding: 0 50px 50px 144px;
	}
}

/* section.colors grid for PC_end */

@media screen and (max-width: 768px) {
	.main_special section.colors {
		padding: 1.8rem;
		overflow: hidden;
	}

	.main_special section.colors .stylefor>div {
		position: relative;
	}

	.main_special section.colors .stylefor>div::after {
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #FFF;
		opacity: .5;
	}

	.main_special section.colors .colorSubImg_sp {
		position: relative;
	}

	.main_special section.colors .colorSubImg_sp::after {
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #FFF;
		opacity: .5;
	}
}




/* blue */
.main_special section#blue.colors .colors_grid:after {
	opacity: .6;
}

.main_special section#blue.colors .colorName_wrap:before {
	background-color: #F6F0E7;
}

@media screen and (min-width: 769px) {
	.main_special section#blue.colors .colors_grid {
		position: relative;
		background-image: url(../images/blue_bg.webp);
		background-position: 0rem -34rem;
		background-size: 76rem;
		display: grid;
		grid-template-areas:
			"text mainImg mainImg"
			"phone mainImg mainImg"
			"phone colorName subImg01"
			"phone subImg02 subImg01";
	}

	.main_special section#blue.colors .colorMainImage {
		border-top: unset;
		border-bottom: 1px solid #000;
	}

	.main_special section#blue.colors .colorMainImage>img {
		object-position: -1rem -10rem;
		max-width: unset;
		width: 106%;
	}

	.main_special section#blue.colors .colorName_wrap {
		border-top: unset;
		border-bottom: 1px solid #000;
	}

	.main_special section#blue.colors .colorSubImg01>img {
		object-position: -5rem -2rem;
		max-width: unset;
		width: 174%;
		height: auto;
	}

	.main_special section#blue.colors .colorSubImg02>img {
		object-position: -2rem -2rem;
		max-width: unset;
		width: 111%;
		height: auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#blue.colors .colors_grid {
		background-position: 0px -340px;
		background-size: 760px;
	}

	.main_special section#blue.colors .colorMainImage>img {
		object-position: -10px -100px;
	}

	.main_special section#blue.colors .colorSubImg01>img {
		object-position: -50px -20px;
	}

	.main_special section#blue.colors .colorSubImg02>img {
		object-position: -20px -20px;
	}
}


@media screen and (max-width: 768px) {
	.main_special section#blue.colors .colorMainImage>img {
		object-position: -4rem -2rem;
		height: auto;
		width: 117%;
		max-width: unset;
	}

	.main_special section#blue.colors .colorSubImg01>img {
		object-position: -2rem -2.5rem;
		max-width: unset;
		width: 151%;
		height: auto;
	}

	.main_special section#blue.colors .colorSubImg_sp {
		background-image: url(../images/blue_bg.webp);
		background-position: -5rem -18rem;
		background-size: 49rem;
	}

	.main_special section#blue.colors .stylefor>div {
		background: url(../images/blue_bg.webp) no-repeat;
		background-size: 50rem;
		background-position: -6rem -18rem;
	}
}


/* greige */
.main_special section#greige.colors .colorName_wrap:before {
	background-color: #6B6959;
}

@media screen and (min-width: 769px) {
	.main_special section#greige.colors .colors_grid {
		background-image: url(../images/greige_bg.webp);
		background-position: -40rem 0rem;
		display: grid;
		grid-template-areas:
			"text mainImg mainImg"
			"phone mainImg mainImg"
			"phone subImg01 colorName"
			"phone subImg01 subImg02";
	}

	.main_special section#greige.colors .colorMainImage {
		border-top: unset;
		border-bottom: 1px solid #000;
	}

	.main_special section#greige.colors .colorMainImage>img {
		object-position: -21rem -36rem;
		max-width: unset;
		width: 150%;
	}

	.main_special section#greige.colors .colorName_wrap {
		border-top: unset;
		border-bottom: 1px solid #000;
	}

	.main_special section#greige.colors .colorSubImg01>img {
		object-position: 0rem -15rem;
		max-width: unset;
		width: 109%;
		height: auto;
	}

	.main_special section#greige.colors .colorSubImg02>img {
		object-position: -1rem -25rem;
		max-width: unset;
		width: 113%;
		height: auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#greige.colors .colors_grid {
		background-position: -400px 0px;
	}

	.main_special section#greige.colors .colorMainImage>img {
		object-position: -210px -360px;
	}

	.main_special section#greige.colors .colorSubImg01>img {
		object-position: 0px -150px;
	}

	.main_special section#greige.colors .colorSubImg02>img {
		object-position: -10px -250px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section#greige.colors .colorMainImage>img {
		object-position: -16rem -18rem;
		width: 195%;
		max-width: unset;
	}

	.main_special section#greige.colors .colorSubImg01>img {
		object-position: 0rem -12rem;
		max-width: unset;
		width: 104%;
		height: auto;
	}

	.main_special section#greige.colors .colorSubImg02>img {
		object-position: 0rem -9rem;
		max-width: unset;
		width: 104%;
		height: auto;
	}

	.main_special section#greige.colors .colorSubImg_sp {
		background-image: url(../images/greige_bg.webp);
		background-position: -7rem 0;
		background-size: 51rem;
	}

	.main_special section#greige.colors .stylefor>div {
		background: url(../images/greige_bg.webp) no-repeat;
		background-size: 57rem;
		background-position: -12rem 0rem;
	}
}

/* coral */
.main_special section#coral.colors .colorName_wrap:before {
	background-color: #B5D2ED;
}

@media screen and (min-width: 769px) {
	.main_special section#coral.colors .colors_grid {
		background-image: url(../images/coral_bg.webp);
		background-position: -24rem 0rem;
		display: grid;
		grid-template-areas:
			"text subImg01 subImg02"
			"phone subImg01 colorName"
			"phone mainImg mainImg"
			"phone mainImg mainImg";
	}

	.main_special section#coral.colors .colorMainImage {
		border-top: 1px solid #000;
	}

	.main_special section#coral.colors .colorMainImage>img {
		object-position: -8rem -10rem;
		max-width: unset;
		width: 115%;
		height: auto;
	}

	.main_special section#coral.colors .colorSubImg01>img {
		object-position: -1rem -7rem;
		max-width: unset;
		width: 109%;
		height: auto;
	}

	.main_special section#coral.colors .colorSubImg02>img {
		object-position: -2rem -1rem;
		max-width: unset;
		width: 106%;
		height: auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#coral.colors .colors_grid {
		background-position: -240px 0px;
	}

	.main_special section#coral.colors .colorMainImage>img {
		object-position: -80px -100px;
	}

	.main_special section#coral.colors .colorSubImg01>img {
		object-position: -10px -70px;
	}

	.main_special section#coral.colors .colorSubImg02>img {
		object-position: -20px -10px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section#coral.colors .colorMainImage>img {
		object-position: -2rem -2rem;
		height: auto;
		width: 117%;
		max-width: unset;
	}

	.main_special section#coral.colors .colorSubImg01>img {
		object-position: -1rem -5rem;
		max-width: unset;
		width: 107%;
		height: auto;
	}

	.main_special section#coral.colors .colorSubImg02>img {
		object-position: -3rem -1rem;
		max-width: unset;
		width: 124%;
		height: auto;
	}

	.main_special section#coral.colors .colorSubImg_sp {
		background-image: url(../images/coral_bg.webp);
		background-position: -6rem 0;
		background-size: 46rem;
	}

	.main_special section#coral.colors .stylefor>div {
		background: url(../images/coral_bg.webp) no-repeat;
		background-size: 51rem;
		background-position: -6rem 0rem;
	}
}


/* green */
.main_special section#green.colors .colorName_wrap:before {
	background-color: #192C21;
}

@media screen and (min-width: 769px) {
	.main_special section#green.colors .colors_grid {
		background-image: url(../images/green_bg.webp);
		background-position: -66rem -7rem;
		background-size: auto 92rem;
		display: grid;
		grid-template-areas:
			"text mainImg mainImg"
			"phone mainImg mainImg"
			"phone subImg01 colorName"
			"phone subImg01 subImg02";
	}

	.main_special section#green.colors .colors_grid::before {
		-webkit-filter: unset;
		-moz-filter: unset;
		-o-filter: unset;
		-ms-filter: unset;
		filter: unset;
	}

	.main_special section#green.colors .colors_grid::after {
		content: unset;
	}

	.main_special section#green.colors .colorMainImage {
		border-top: unset;
		border-bottom: 1px solid #000;
		/* border-left: unset; */
	}

	.main_special section#green.colors .colorSubImg01>img {
		object-position: 0rem -16rem;
		max-width: unset;
		width: 109%;
		height: auto;
	}

	.main_special section#green.colors .colorName_wrap {
		border-top: unset;
	}

	.main_special section#green.colors .colorMainImage>img {
		object-position: -1rem -21rem;
		max-width: unset;
		width: 162%;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#green.colors .colors_grid {
		background-position: -660px -70px;
		background-size: auto 920px;
	}

	.main_special section#green.colors .colorMainImage>img {
		object-position: -10px -210px;
	}

	.main_special section#green.colors .colorSubImg01>img {
		object-position: 0px -160px;
	}
}


@media screen and (max-width: 768px) {
	.main_special section#green.colors .colorMainImage>img {
		object-position: -1rem -8rem;
		height: auto;
		width: 167%;
		max-width: unset;
	}

	.main_special section#green.colors .colorSubImg01>img {
		object-position: 0rem -16rem;
		max-width: unset;
		width: 109%;
		height: auto;
	}

	.main_special section#green.colors .colorSubImg_sp {
		background-image: url(../images/green_bg.webp);
		background-position: -1rem 0rem;
		background-size: 65rem;
	}

	.main_special section#green.colors .stylefor>div {
		background: url(../images/green_bg.webp) no-repeat;
		background-position: -21rem 0rem;
		background-size: 68rem;
	}
}

/* white */
.main_special section#white.colors .colorName_wrap:before {
	background-color: #36607D;
}

@media screen and (min-width: 769px) {
	@media screen and (min-width: 769px) {
		.main_special section#white.colors .colors_grid {
			background-image: url(../images/white_bg.webp);
		}
	}

	.main_special section#white.colors .colorMainImage>img {
		object-position: -17rem -20rem;
		max-width: unset;
		width: 123%;
		height: auto;
	}

	.main_special section#white.colors .colorSubImg01>img {
		object-position: -2rem 0rem;
		max-width: unset;
		width: 156%;
		height: auto;
	}

	.main_special section#white.colors .colorSubImg02>img {
		object-position: 0rem -14rem;
		max-width: unset;
		height: auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#white.colors .colorMainImage>img {
		object-position: -170px -200px;
	}

	.main_special section#white.colors .colorSubImg01>img {
		object-position: -20px 0;
	}

	.main_special section#white.colors .colorSubImg02>img {
		object-position: 00px -140px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section#white.colors .colorSubImg_sp {
		background-image: url(../images/white_bg.webp);
		background-position: -5rem 0;
	}

	.main_special section#white.colors .stylefor>div {
		background: url(../images/white_bg.webp) no-repeat;
		background-size: 49rem;
		background-position: -6rem 0rem;
	}
}

/* black */
.main_special section#black.colors .colorName_wrap:before {
	background-color: #24262A;
}

@media screen and (min-width: 769px) {
	.main_special section#black.colors .colors_grid {
		background-image: url(../images/black_bg.webp);
		background-position: -12rem 0;
		background-size: auto 104rem;
	}

	.main_special section#black.colors .colors_grid::after {
		content: unset;
	}

	.main_special section#black.colors .colorMainImage {
		/* border-bottom: 1px solid #000; */
	}

	.main_special section#black.colors .colorMainImage>img {
		object-position: -3rem -6rem;
		max-width: unset;
		width: 104%;
		height: auto;
	}

	.main_special section#black.colors .colorSubImg01>img {
		object-position: 0rem 0rem;
		max-width: unset;
		width: 155%;
		height: auto;
	}

	.main_special section#black.colors .colorSubImg02>img {
		object-position: -3rem -2rem;
		max-width: unset;
		width: 113%;
		height: auto;
	}
}

@media screen and (min-width: 1440px) {
	.main_special section#black.colors .colors_grid {
		background-position: -120px 0;
		background-size: auto 1040px;
	}

	.main_special section#black.colors .colorMainImage>img {
		object-position: -30px -60px;
	}

	.main_special section#black.colors .colorSubImg01>img {
		object-position: 0px 0px;
	}

	.main_special section#black.colors .colorSubImg02>img {
		object-position: -30px -20px;
	}
}

@media screen and (max-width: 768px) {
	.main_special section#black.colors .colorMainImage>img {
		object-position: -7rem -2rem;
		height: auto;
		width: 132%;
		max-width: unset;
	}

	.main_special section#black.colors .colorSubImg01>img {
		height: auto;
		width: 120%;
		max-width: unset;
	}

	.main_special section#black.colors .colorSubImg_sp {
		background-image: url(../images/black_bg.webp);
		background-position: -10rem 0;
		background-size: 47rem;
	}

	.main_special section#black.colors .stylefor>div {
		background: url(../images/black_bg.webp) no-repeat;
		background-size: 47rem;
		background-position: -10rem 0rem;
	}
}


/* black & green */
@media screen and (min-width: 769px) {

	.main_special section#green,
	.main_special section#black {
		color: #FFF;
	}

	.main_special section#green .upperLink_area .link_wrap,
	.main_special section#black .upperLink_area .link_wrap {
		border: 1px solid #FFF;
	}

	.main_special section#green .ButtonLink_wrap,
	.main_special section#black .ButtonLink_wrap {
		border: 1px solid #FFF;
	}

	.main_special section#green.colors .phone_flx .phoneCoordi_wrap>img,
	.main_special section#black.colors .phone_flx .phoneCoordi_wrap>img {
		filter: invert();
	}
}


/* modal */
.main_special .case_container {
	display: none;
	color: #11181c;
	z-index: 49;
	position:relative;
}

.main_special .caseModal_bg {
	position: fixed;
	z-index: 50;
	width: 100vw;
	height: 100vh;
	inset: 0;
	background-color: #000;
	opacity: .6;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.main_special .caseModal_wrap {
	position: fixed;
	z-index: 51;
	width: 86.2rem;
	height: auto;
	opacity: 1;
	background-color: #f5f5f5;
	border-radius: 1rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 4.1rem 6.3rem 4.1rem 5.3rem;
	font-size: 1.4rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModal_wrap {
		width: 862px;
		border-radius: 10px;
		padding: 41px 63px 41px 53px;
		font-size: 14px;
	}
}

@media screen and (max-width: 768px) {
	.main_special .caseModal_wrap {
		width: 32.4rem;
		max-height: calc(100% - 20px);
		padding: 4.4rem 1.8rem;
		overflow-y: scroll;
	}
}

.main_special .caseModal_close {
	width: 1.5rem;
	height: 1.5rem;
	visibility: visible;
	opacity: .6;
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	cursor: pointer;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModal_close {
		width: 15px;
		height: 15px;
		top: 25px;
		right: 25px;
	}
}

.main_special .caseModal_wrap .logo_wrap {
	width: auto;
	height: 2.4rem;
	margin-bottom: .6rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModal_wrap .logo_wrap {
		height: 24px;
		margin-bottom: 6px;
	}
}

.main_special .caseModal_wrap .logo_wrap>img {
	width: auto;
	height: 100%;
	object-fit: contain;
	display: inline-block;
	margin-right: 1rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModal_wrap .logo_wrap>img {
		margin-right: 10px;
	}
}

.main_special .caseModalColorname {
	margin: 2rem 0 .5rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModalColorname {
		margin: 20px 0 5px;
	}
}

.main_special .caseModalCarrier_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModalCarrier_wrap {
		gap: 24px;
	}
}

.main_special .caseModalCarrier_wrap>div {
	background-color: #fff;
	width: 23.1rem;
	padding: 2.6rem 2rem;
	border-radius: 1rem;
}

@media screen and (min-width: 1440px) {
	.main_special .caseModalCarrier_wrap>div {
		width: 231px;
		padding: 26px 20px;
		border-radius: 10px;
	}
}

@media screen and (max-width: 768px) {
	.main_special .caseModalCarrier_wrap>div {
		width: 100%;
		padding: 1.8rem 4.2rem;
	}
}
.main_special .carrierLogo {
	text-align: center;
	font-size: 2.225rem;
	line-height: 1;
	font-weight: 500;
}
@media screen and (min-width: 1440px) {
	.main_special .carrierLogo {
		font-size: 22.25px;
	}
}
@media screen and (max-width: 768px) {
	.main_special .carrierLogo {
		height: 1.62rem;
		font-size: 1.62rem;
	}
	.main_special .carrierLogo>img {
		width: auto;
    height: 100%;
    margin: auto;
    object-fit: contain;
	}
}

.main_special .carrierList {
	margin: 2.3rem 0 0;
	list-style: none;
}

@media screen and (max-width: 768px) {
	.main_special .carrierList {
		margin: 1rem 0 0;
	}
}

@media screen and (min-width: 1440px) {
	.main_special .carrierList {
		margin: 23px 0 0;
	}
}

.main_special .carrierList_link {
	display: flex;
	align-items: center;
}

.main_special .carrierList_link .shop {
	line-height: 1.5;
	margin: 0 0 0 1.4rem;
	font-size: 1.4rem;
	transition: color .3s ease;
}

@media screen and (min-width: 1440px) {
	.main_special .carrierList_link .shop {
		margin: 0 0 0 14px;
		font-size: 14px;
	}
}
.main_special .carrierList_link:hover .shop {
	color: #2680ff;
}
.main_special .carrierList_link.dummy:hover .shop {
	color: unset;
}

.main_special .carrierList_link span {
	flex-shrink: 0;
}

.main_special .carrierList_link span.arrow {
	position: relative;
	top: .1rem;
	left: 0;
	width: .7rem;
	color: #2680ff;
	transition: left .3s ease;
}


@media screen and (min-width: 1440px) {
	.main_special .carrierList_link span.arrow {
		top: 1px;
		width: 7px;
	}
}

.main_special .carrierList_link:hover span.arrow {
	left: .3rem;
}
@media screen and (min-width: 1440px) {
	.main_special .carrierList_link:hover span.arrow {
		left: 3px;
	}
}
.main_special .carrierList_link.dummy:hover span.arrow {
	left: unset;
}
.main_special .carrierList_link.dummy:hover span.arrow {
	left: unset;
}

.main_special .carrierList_link span.window {
	position: relative;
	top: -.2rem;
	width: .9rem;
	margin: 0 0 0 .6rem;
}

@media screen and (min-width: 1440px) {
	.main_special .carrierList_link span.window {
		top: -2px;
		width: 9px;
		margin: 0 0 0 6px;
	}
}


/* ギミック */
.main_special #index,
.main_special section.colors {
	display: none;
}

.main_special #index>* {
	opacity: 0;
}

.main_special #index.active,
.main_special section.colors.active {
	display: block;
}

.main_special #index.active.on>* {
	animation: content_fade-in 0.4s;
	animation-fill-mode: forwards;
}

.main_special section.colors .colorText_wrap p,
.main_special section.colors .colorText_wrap div,
.main_special section.colors .colorName_wrap:before,
.main_special section.colors .colorName_wrap img,
.main_special section.colors .phoneMain_wrap,
.main_special section.colors .phoneCoordi_wrap,
.main_special section.colors .ButtonLink_container,
.main_special section.colors .bottomLink_area {
	opacity: 0;
}

.main_special section.colors.active.on .colorText_wrap p,
.main_special section.colors.active.on .colorText_wrap div {
	animation: content_fade-in 1.0s;
	animation-delay: 1.0s;
	animation-fill-mode: forwards;
}


.main_special section.colors.active.on .colorName_wrap:before,
.main_special section.colors.active.on .colorName_wrap img,
.main_special section.colors.active.on .phoneMain_wrap,
.main_special section.colors.active.on .phoneCoordi_wrap,
.main_special section.colors.active.on .ButtonLink_container {
	animation: content_fade-in 1.0s;
	animation-delay: 1.0s;
	animation-fill-mode: forwards;
}

.main_special section.colors.active.on .bottomLink_area {
	animation: content_fade-in 0.4s;
	animation-delay: 1.0s;
	animation-fill-mode: forwards;
}

.main_special section.colors .bottomLink_area a {
	display: none;
}

.main_special section.colors.active.on .bottomLink_area a {
	display: inline-block;
	color: #000;
}

@keyframes content_fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.main_special .colorName_wrap,
.main_special .colorMainImage,
.main_special .colorSubImg01,
.main_special .colorSubImg02 {
	background-image: url(../images/bg_special.webp);
	background-size: 300px;
	background-color: #F1EFEB;
	overflow: hidden;
}

.main_special .colorMainImage img,
.main_special .colorSubImg01 img,
.main_special .colorSubImg02 img {
	transform: scale(1.3);
	opacity: 0;
}

.main_special .active.on .colorMainImage img,
.main_special .active.on .colorSubImg01 img,
.main_special .active.on .colorSubImg02 img {
	animation: content_fade-zoomIn 1.0s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

@keyframes content_fade-zoomIn {
	0% {
		opacity: 0;
		transform: scale(1.3);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.main_special img {
	pointer-events: none;
}

.loading {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #F1EFEB;
	pointer-events: none;
}

.loading.off {
	animation: content_fade-out 0.2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

@keyframes content_fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.spinner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 10rem;
	height: 10rem;
	max-width: 100px;
	max-height: 100px;
	animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(270deg);
	}
}

.path {
	stroke-dasharray: 187;
	stroke-dashoffset: 0;
	transform-origin: center;
	stroke: rgba(0, 0, 0, 0.37);
	animation: dash 1.4s ease-in-out infinite;
}

@keyframes dash {
	0% {
		stroke-dashoffset: 187;
	}

	50% {
		stroke-dashoffset: 44;
		transform: rotate(135deg);
	}

	100% {
		stroke-dashoffset: 187;
		transform: rotate(450deg);
	}
}

@media screen and (max-width: 768px) {
	.fadeIn_sp {
		opacity: 0;
		transition: opacity 0.6s;
	}

	.fadeIn_sp.active {
		opacity: 1;
	}

	.main_special section.colors.active.on .colorText_wrap p,
	.main_special section.colors.active.on .colorText_wrap div,
	.main_special section.colors.active.on .colorName_wrap:before,
	.main_special section.colors.active.on .colorName_wrap img,
	.main_special section.colors.active.on .phoneMain_wrap,
	.main_special section.colors.active.on .phoneCoordi_wrap,
	.main_special section.colors.active.on .ButtonLink_container,
	.main_special section.colors.active.on .bottomLink_area {
		animation-delay: 0s;
	}

	.spinner {
		top: 40vh;
		bottom: auto;
	}
}