@charset "utf-8";

/*-------------------------
汎用css
---------------------------*/
.sp {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	span.sp {
		display: inline;
	}
}

/* box size */
.box-size {
	width: 100%;
	margin: 0 auto;
}
.box-side {
	padding-right: 20px;
	padding-left: 20px;
}
.size-448 {
	max-width: 448px;
}
.box-side.size-448 {
	max-width: 448px;
}
.size-540 {
	max-width: 540px;
}
.box-side.size-540 {
	max-width: 580px;
}
.size-620 {
	max-width: 620px;
}
.box-side.size-620 {
	max-width: 660px;
}
.size-705 {
	max-width: 705px;
}
.box-side.size-705 {
	max-width: 745px;
}
.size-720 {
	max-width: 720px;
}
.box-side.size-720 {
	max-width: 760px;
}
.size-1090 {
	max-width: 1090px;
}
.box-side.size-1090 {
	max-width: 1130px;
}
.inner-padding {
	padding-top: 120px;
	padding-bottom: 120px;
}
.inner-padding-top {
	padding-top: 120px;
}
@media screen and (max-width: 640px){
	.inner-padding-top {
		padding-top: 60px;
	}
}
.bottom-hr {
	position: relative;
}
.bottom-hr::after {
	display: block;
	content: "";
	background-color: var(--color-point);
	width: 100%;
	max-width: 720px;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* flex box */
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex a,
.flex img {
	display: block;
	width: 100%;
}
.flex-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.col-2-2-1 > * {
	width: 50%;
}
.col-3-2-1 > * {
	width: calc(100% / 3);
}
.col-margin-10 {
	margin: 0 0 -10px -10px;
}
.col-margin-10 > * {
	padding: 0 0 10px 10px;
}
.col-margin-20 {
	margin: 0 0 -20px -20px;
}
.col-margin-20 > * {
	padding: 0 0 20px 20px;
}
.col-margin-60 {
	margin: 0 0 -60px -60px;
}
.col-margin-60 > * {
	padding: 0 0 60px 60px;
}
@media screen and (max-width: 960px) {
	.col-3-2-1 > * {
		width: 50%;
	}
}
@media screen and (max-width: 640px) {
	.col-2-2-1 > *,
	.col-3-2-1 > * {
		width: 100%;
	}
}

/* d-list */
.d-list dt {
	color: var(--color-point);
	font-weight: 700;
}
.d-list dd+dt {
	margin-top: 30px;
}
.d-list dd {
	text-align: justify;
}

/* order-list */
.order-list li {
	min-height: 320px;
	padding: 70px 0;
	position: relative;
}
.order-list li+li {
	margin-top: 100px;
}
.order-list span {
	display: block;
	width: 100%;
	max-width: 1130px;
	color: var(--color-point);
	font-family: var(--font-point);
	font-size: 40px;
	line-height: 1;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}
.order-list span::after {
	display: block;
	content: "";
	background-color: var(--color-point);
	width: calc(100% - 40px);
	height: 1px;
	position: absolute;
	bottom: 6px;
	left: 20px;
}
.order-list dl {
	width: 100%;
	max-width: 1130px;
	padding: 0 20px;
	margin: 0 auto;
}
.order-list dl > * {
	width: 100%;
	max-width: 380px;
	padding-right: 60px;
}
.order-list dt {
	font-size: var(--font-m);
	font-family: var(--font-point);
	font-weight: 700;
	margin-top: 30px;
}
.order-list dd {
	text-align: justify;
	margin-top: 20px;
}
.order-list figure {
	width: calc(50% + 165px);
	max-width: 715px;
	height: 320px;
	position: absolute !important;
	top: 0;
	left: calc(50% - 165px);
}
.order-list .img-out {
	max-width: 735px;
}
.order-list .img-full {
	max-width: none;
}
.order-list li:nth-child(2n) span {
	text-align: right;
}
.order-list li:nth-child(2n) dl > * {
	padding-right: 0;
	padding-left: 60px;
	margin: 20px 0 0 auto;
}
.order-list li:nth-child(2n) figure {
	left: auto;
	right: calc(50% - 165px);
}
.order-list li.order-list-unique:nth-child(2n) dl > * {
	max-width: 800px;
}
.order-list li.order-list-unique:nth-child(2n) figure {
	max-width: 310px;
	right: calc(50% + 255px);
}
@media screen and (max-width: 1130px) {
	.order-list figure {
		width: calc(100% - 380px);
		right: 0;
		left: auto;
	}
	.order-list li:nth-child(2n) figure {
		right: auto;
		left: 0;
	}
	.order-list li.order-list-unique:nth-child(2n) dl > * {
		width: calc(100% - 270px);
	}
}
@media screen and (max-width: 720px) {
	.order-list li {
		padding: 70px 0 0;
	}
	.order-list span::after {
		width: 100%;
		left: 0;
	}
	.order-list dl {
		margin-top: 132px;
	}
	.order-list dl > * {
		width: 100%;
		max-width: none;
		padding: 0 !important;
	}
	.order-list dt {
		text-align: center;
	}
	.order-list dl dd {
		margin-top: 10px !important;
	}
	.order-list figure {
		width: calc(100% - 80px);
		height: 220px;
	}
	.order-list li.order-list-unique:nth-child(2n) dl > * {
		width: 100%;
	}
}

/* list-icon */
.list-icon li {
	padding-left: 1em;
	position: relative;
}
.list-icon li::before {
	display: block;
	color: var(--color-point);
	position: absolute;
	top: .5em;
	left: 0;
}
.list-style-square li::before {
	content: "";
	background-color: var(--color-point);
	width: 12px;
	height: 12px;
}

/* list-circle */
.list-circle {
	text-align: left;
}
.list-circle li {
	display: inline-block;
	padding-left: 1em;
	margin-right: 1em;
	position: relative;
}
.list-circle li::before {
	display: block;
	content: "\25EF";
	color: var(--color-point);
	position: absolute;
	top: 0;
	left: 0;
}

/* title */
.title-02 {
	font-family: var(--font-point);
	font-size: 42px;
	text-indent: 5px;
	text-align: center;
	letter-spacing: 5px;
	padding: 0 20px 110px;
	position: relative;
}
.title-02::before,
.title-02::after {
	display: block;
	content: "";
	width: 2px;
	height: 90px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 1px);
}
.title-02::before {
	background-color: var(--color-point);
}
.title-02::after {
	background-color: #cbcbcb;
	transition: .8s ease-out;
}
.title-02.animated::after {
	height: 30px;
}
.title-03 {
	color: var(--color-point);
	font-family: var(--font-point);
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	padding: 0 20px;
}
.title-03 span {
	display: block;
	color: #464646;
	font-family: var(--font-default);
	font-size: 16px;
	font-weight: 400;
	text-indent: .15em;
	letter-spacing: .15em;
}

/* anchor-circle */
.anchor-circle {
	display: block;
	text-align: right;
}
.anchor-circle a {
	display: inline-block;
	color: #464646;
	font-size: 12px;
	text-align: right;
	padding-right: 40px;
	margin-top: 40px;
	position: relative;
	transition: 200ms ease-out;
}
.anchor-circle a:hover {
	color: var(--color-point);
	transition-delay: 200ms;
}
.anchor-circle a figure {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.circle,.arrow {
	fill: none;
	stroke: #464646;
	stroke-miterlimit: 10;
}
.circle {
	stroke-dasharray: 92 94;
	stroke-dashoffset: 0;
	transition: 200ms ease-out 200ms;
}
a:hover .circle {
	stroke-dashoffset: 93;
	transition-delay: 0ms;
}
.arrow {
	transition: 200ms ease-out;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
a:hover .arrow {
	stroke: var(--color-point);
	transition-delay: 200ms;
	-webkit-transform: translateX(4px);
	transform: translateX(4px);
}

/* anchor-list */
.anchor-list-outer {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}
.anchor-list a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.anchor-list a::before,
.anchor-list a::after {
	display: block;
	content: "";
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 0;
}
.anchor-list a::before {
	height: 100%;
	top: 0;
	border: 1px solid var(--color-point);
}
.anchor-list a::after {
	background-color: var(--color-point);
	height: 0;
	top: 50%;
	transition: .2s ease-out;
}
.anchor-list a:hover::after {
	height: 100%;
	top: 0;
}
.anchor-list span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: var(--color-point);
	font-size: 20px;
	font-weight: 700;
	padding: 18px 0;
	position: relative;
	z-index: 1;
	transition: .2s ease-out;
}
.anchor-list a:hover span {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.anchor-list span::before {
	display: block;
	content: "";
	background-repeat: no-repeat;
	background-size: 24px;
	width: 24px;
	height: 24px;
	margin-right: 10px;
}
.list-detail span::before {
	background-image: url("../img/ico_detail.svg");
}
.list-cart span::before {
	background-image: url("../img/ico_cart.svg");
}

/* anchor-contact */
.anchor-contact {
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}
.anchor-contact a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.anchor-contact a::before,
.anchor-contact a::after {
	display: block;
	content: "";
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 0;
	
}
.anchor-contact a::before {
	height: 100%;
	border: 1px solid var(--color-point);
	top: 0;
}
.anchor-contact a::after {
	background-color: var(--color-point);
	height: 0;
	top: 50%;
	transition: .2s ease-out;
}
.anchor-contact a:hover::after {
	top: 0;
	height: 100%;
}
.anchor-contact a > span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: var(--color-point);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	padding: 18px 0;
	position: relative;
	z-index: 1;
	transition: .2s ease-out;
}
.anchor-contact a:hover > span {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.anchor-contact a > span::before {
	display: block;
	content: "";
	background: url("../img/ico_mail.svg") no-repeat;
	background-size: 22px 17px;
	width: 22px;
	height: 17px;
	margin-bottom: 5px;
}
.anchor-contact a span span {
	display: block;
	color: #464646;
	font-family: var(--font-point);
	font-size: 16px;
	font-weight: 400;
}

/* font */
.font-color-point {
	color: var(--color-point);
}
.font-s {
	font-size: var(--font-s);
}
.font-m {
	font-size: var(--font-m);
}
.font-l {
	font-size: var(--font-l);
}
.font-align-j {
	text-align: justify;
}
.font-align-c,
.font-align-c-j {
	text-align: center;
}
.font-align-r {
	text-align: right;
}
.font-bold {
	font-weight: 700;
}
@media screen and (max-width: 640px) {
	.font-align-c-j {
		text-align: justify;
	}
}

/* margin */
.mt10 {
	margin-top: 10px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt60 {
	margin-top: 60px !important;
}
.mt100 {
	margin-top: 100px !important;
}

/*-------------------------
Animation
---------------------------*/
.setAnime {
	transition-duration: 800ms;
	transition-timing-function: ease-out;
}

/*-------------------------
TextTyping
---------------------------*/
.TextTyping span {
	display: none;
}

/*-------------------------
csParallax
---------------------------*/
.csParallax > img {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.img-c.csParallax > img {
	height: auto;
	position: relative;
}

/*-------------------------
Swiper
---------------------------*/
.swiper-container {
	overflow: hidden;
}
.swiper-container img {
	display: block;
	width: 100%;
}
.manufacture .swiper-wrapper {
	transition-timing-function: linear !important;
}