@charset "utf-8";
html {
	scroll-padding-top: 140px;
}

/* -- Link
-------------------------------------------------------------------------------- */
a:link, a:visited,
button {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
a:hover,
button:hover {
	opacity: 0.7;
}
header a:hover,
footer a:hover {
	text-decoration: underline;
}



/* -- Layout
-------------------------------------------------------------------------------- */
html,
body {
	min-width: 1240px;
}
section,
footer {
	text-align: left;
	width: 100%;
	max-width: 1240px;
	margin: auto;
}
footer,
#contact {
	max-width: 1000px;
}
.sp, [class^="sp-"] {
	display: none!important;
}



/* -- Headerer
-------------------------------------------------------------------------------- */
header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	min-width: 1240px;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 9;
	transition: top .5s ease;
}
header .logo a {
	display: block;
	width: 74px;
	margin: 43px 0 0 40px;
}
header.header-clone {
	position: fixed;
	align-items: center;
	top: -100%;
	padding: 30px 0;
	background: #000;
}
header.header-clone .logo a {
	margin-top: 0;
}
header.header-clone nav {
	align-items: center;
}
header.header-clone.is-active {
	top: 0;
}

header nav {
	display: flex;
	align-items: flex-end;
	gap: 0 40px;
}
header nav ul {
	display: flex;
	justify-content: flex-end;
	gap: 0 45px;
}
header nav ul li {
	position: relative;
}
header nav ul li:not(:last-child)::after {
	content: "";
	background-color: #a0001d;
	width: 2px;
	width: 2px;
	height: 26px;
	position: absolute;
	top: 0px;
	right: -22px;
	transform: rotate(15deg);
}
header nav ul li a {
	display: block;
	padding: 5px 0;
	font-size: 1.8rem;
	letter-spacing: 0;
}
header nav .contact-btn {
	display: block;
	padding: 28px;
	background: #A0001D;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: normal;
	transition: background 0.5s ease, color 0.5s ease;
}
header nav .contact-btn-icn {
	display: none;
}



/* -- Contents
-------------------------------------------------------------------------------- */
main {
	font-size: 2rem;
	overflow: hidden;
	width: 100%;
}
.bg-belt {
	position: relative;
	z-index: 1;
}
.bg-belt::before {
	content: "";
	background-color: #a0001d;
	display: block;
	box-sizing: border-box;
	width: 100vw;
	min-width: 1240px;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: -100%;
	left: -100%;
	z-index: -1;
}
#contact {
	padding: 75px 0;
}
#contact::before {
	background-color: #222;
	padding: 75px 0;
}
#contact h2 {
	font-size: 3.6rem;
	text-align: center;
}
.contact-wrap {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}
.contact-mail {
	line-height: 1.75;
	background: url(/kikouhin/nailer/img/icon_mail.png) no-repeat 0 8px / 70px 56px;
	padding-left: 100px;
}
.contact-mail a {
	line-height: 1;
	background: #fff url(/kikouhin/nailer/img/arrow_r.png) no-repeat right 30px  top 14px / 12px 15px;
	display: block;
	box-sizing: border-box;
	width: 260px;
	height: 42px;
	margin-top: 15px;
	padding: 11px 0 0 60px;
	position: relative;
	z-index: 1;
}
.contact-mail a::after {
	content: "";
	background: #a0001d url(/kikouhin/nailer/img/arrow_w.png) no-repeat right 30px  top 14px / 12px 15px;
	display: block;
	width: 260px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all 0.3s ease;
}
.contact-mail a:hover {
	color: #a0001d;
	opacity: 1;
}
.contact-mail a:hover::after {
	opacity: 0;
}
.contact-tel {
	font-size: 1.4rem;
	line-height: 1.5;
	background: url(/kikouhin/nailer/img/icon_tel.png) no-repeat 0 8px / 56px 56px;
	padding: 3px 0 0 85px;
}
.contact-tel b {
	font-size: 4rem;
	line-height: 1;
	display: block;
	margin-bottom: 20px;
}
.main-ti {
	font-size: 6rem;
	text-align: center;
}



/* -- Footer
-------------------------------------------------------------------------------- */
footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
}
footer small {
	font-size: 1rem;
	color: #898989;
	letter-spacing: 0;
}



/* -- index
-------------------------------------------------------------------------------- */
/* -- main visual -- */
#kv {
	background: url(/kikouhin/nailer/img/kv_pc.jpg) no-repeat center center / cover;
	text-align: right;
	position: relative;
	aspect-ratio: 1366/1367;
}
#kv h1 {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 1240px;
	margin: auto;
	padding: 0 94px 0 0;
	position: absolute;
	right: 0;
	left: 0;
	top: 150px;
}
#kv h1 img {
	width: 340px;
}
#kv .lead {
	display: block;
	width: max-content;
	padding-top: 65.56vw;
	margin: 0 auto;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0;
	color: #fff;
	text-align: left;
}
#kv .lead span {
	display: block;
	line-height: initial;
}
#kv .lead b {
	font-size: 5.6rem;
	font-weight: 700;
	line-height: initial;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 8%;
	text-underline-offset: 14%;
	text-underline-position: from-font;
	color: #D70C19;
}

/* -- lineup -- */
#lineup {
	max-width: none;
	
}
#lineup::before {
	position: relative;
	width: 100%;
	top: 1px;
	right: initial;
	left: initial;
	height: auto;
	aspect-ratio: 1366 / 180;
	background: #A0001D;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	z-index: 1;
}
#lineup::after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	aspect-ratio: 1366 / 180;
	background: #000;
	content: "";
}
.lineup-wrapper {
	padding: 105px 0 200px;
	background: #A0001D;
}
#lineup h2.main-ti {
	text-align: center;
	margin-bottom: 95px;
}
#lineup ul {
	max-width: 980px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 80px 60px;
	margin: 0 auto;
}
#lineup ul li a {
	display: block;
}
#lineup ul li a:hover {
	opacity: 1;
	transform: scale(1.05);
}
#lineup figcaption {
	text-align: center;
	margin-top: 10px;
	font-size: 2.8rem;
}
#lineup figcaption i {
	padding-right: 0.5em;
}
#lineup figcaption b {
	font-size: 5.6rem;
}
#lineup .product-name {
	display: block;
	padding-top: 5px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}
#lineup p {
	background-color: #000;
	width: 740px;
	margin: auto;
}
#lineup .lineup-btn {
	position: relative;
	max-width: 758px;
	height: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	margin: 130px auto 0;
	color: #fff;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
	transition: background 0.5s ease, color 0.5s ease;
}
#lineup .lineup-btn + .lineup-btn {
	margin-top: 60px;
}
#lineup .lineup-btn-icn {
	position: absolute;
	top: 50%;
	right: 30px;
	width: 19px;
	height: 19px;
	translate: 0 -50%;
}
#lineup .lineup-btn-icn-stroke {
	transition: stroke 0.5s ease;
}

/* -- reason -- */
#reason {
	line-height: 1.75;
	padding-top: 100px;
	padding-bottom: 147px;
}
#reason h2.main-ti {
	line-height: 1.5;
	margin-bottom: 60px;
}
#reason h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0 35px;
	font-size: 4rem;
	color: #fff;
	font-style: italic;
}
#reason h3 .num {
	font-size: 15rem;
	line-height: 1;
	color: #d70c19;
}
.reason-wrap-w .container {
	background-color: #a0001d;
	margin-top: 60px;
	padding: 58px 60px 60px;
}
.reason-wrap-w .container p {
	font-size: 2.4rem;
	letter-spacing: 0;
	line-height: 1.5;
}
.reason-wrap-w .container figure {
	margin-top: 40px;
}

.reason-wrap-w .container figcaption {
	margin-top: 20px;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}
.reason-wrap-w .container ol {
	margin-top: 30px;
}
.reason-wrap-w .container ol li {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0;
}

.reason-wrap-w .image-wrapper {
	display: flex;
	gap: 0 30px;
}

.reason02,
.reason03,
.reason05 {
	margin-top: 160px;
}
.reason04 {
	margin-top: 200px;
}

[class^="reason-wrap-i"] {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 200px;
}
.reason05 {
	margin-top: 176px;
}
[class^="reason-wrap-i"] .reason-subti {
	width: 50%;
	padding-right: 40px;
}
[class^="reason-wrap-i"] .reason-subti h3 {
	margin-bottom: 40px;
	line-height: 1.2;
}
[class^="reason-wrap-i"] .reason-subti h3 small {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 2.4;
	letter-spacing: 0;
}
[class^="reason-wrap-i"] .reason-subti h3 b {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}
[class^="reason-wrap-i"] .reason-subti h3 span {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}
[class^="reason-wrap-i"] .reason-subti p {
	font-size: 2.4rem;
	line-height: 1.5;
}
[class^="reason-wrap-i"] .reason-subti .note {
	margin-top: 2rem;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0;
}
[class^="reason-wrap-i"] figure {
	width: 620px;
	position: relative;
	z-index: 1;
}
[class^="reason-wrap-i"] figure::after {
	content: "";
	background-color: #a0001d;
	display: block;
	width: 50vw;
	height: 420px;
	position: absolute;
	top: -40px;
	z-index: -1;
}

.reason-wrap-il .reason-subti {
	order: 1;
}
.reason-wrap-il h3 {
	line-height: 1.25;
	margin-top: -10px;
}
.reason-wrap-il h3 span {
	font-size: 2rem;
	display: block;
	margin-bottom: 20px;
	position: relative;
	top: 10px;
}
.reason-wrap-il p span {
	font-size: 1.4rem;
	display: block;
	margin-top: 10px;
}
.reason-wrap-il figure {
	order: 0;
}
.reason-wrap-il figure::after {
	right: 63px;
}
.reason-comment {
	display: flex;
	justify-content: space-between;
	order: 2;
	width: 100%;
	margin-top: 46px;
}
.reason-comment dl {
	background-color: #222;
	width: 495px;
	padding: 50px 60px 40px;
}
.reason-comment dl dt {
	font-size: 4rem;
	font-style: italic;
	line-height: 1;
	margin-bottom: 26px;
}
.reason-comment dl h4 {
	line-height: 1;
	margin: 40px 0;
}
.reason-comment dl h4 img {
	vertical-align: middle;
	display: inline-block;
	width: 30px;
	margin-right: 12px;
}
.reason-comment dl li {
	font-size: 1.8rem;
	line-height: 1.5;
	color: #000;
	background-color: #fff;
	display: block;
	margin-top: 5px;
	padding: 25px 30px;
	border-radius: 10px;
}
#reason .reason-wrap-ir figure::after {
	left: 63px;
}
.reason-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 758px;
	width: 100%;
	height: 108px;
	margin: 122px auto 0;
	border: 1px solid #fff;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}
.reason-btn-icn {
	position: absolute;
	top: 50%;
	right: 30px;
	width: 20px;
	height: 20px;
	translate: 0 -50%;
}
.reason-btn-icn-stroke {
	transition: stroke 0.5s ease;
}

/* -- movie -- */
#movie {
	max-width: none;
	margin-top: 100px;
}
#movie + #lineup::after {
	background-color: #222;
}
#movie::before {
	position: relative;
	width: 100%;
	top: initial;
	right: initial;
	left: initial;
	height: auto;
	background-color: #222;
	aspect-ratio: 1366 / 180;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	z-index: 1;
}
.movie-wrapper {
	padding: 117px 0 98px;
	background-color: #222;
}
.movie-wrap {
	max-width: 1240px;
	background-color: #a0001d;
	display: flex;
	justify-content: space-between;
	margin: 75px auto 0;
	padding:60px;
}
.movie-wrap figure {
	width: 540px;
}
.movie-wrap figure span {
	background-color: #000;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}
.movie-wrap figure span iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.movie-wrap figure span i {
	font-size: 3rem;
	color: #d70c19;
	text-align: center;
	display: block;
	width: 100%;
	position: absolute;
	top: calc(50% - 15px);
}
.movie-wrap figcaption {
	font-size: 1.4rem;
	margin-top: 18px;
	letter-spacing: 0;
}

/* -- story -- */
#story {
	margin-top: 255px;
}
#story p.lead {
	font-size: 2.4rem;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	margin: 70px 0;
}
.slide-wrap {
	position: relative;
}
.slide-wrap + .slide-wrap {
	margin-top: 95px;
}
.slide-wrap h3 {
	font-size: 4rem;
	line-height: 1.2;
	margin-bottom: 30px;
	position: absolute;
	top: 40px;
	left: 50%;
	z-index: 2;
}
.slide-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.slide-container .photo {
	display: block;
	width: 560px;
	padding: 40px 0;
}
.slide-container dl {
	display: block;
	box-sizing: border-box;
	width: 50%;
	padding: 150px 125px 40px 0;
}
.slide-container dt {
	font-size: 2.4rem;
	color: #d70c19;
	margin-bottom: 10px;
}
.slide-container dd {
	font-size: 1.8rem;
	line-height: 1.75;
	letter-spacing: 0;
}
.slide-container dd span {
	font-size: 1.4rem;
	display: block;
	margin-top: 5px;
}
.slick-initialized .slick-slide {
	display: flex;
}
.slider {
	position: relative;
	z-index: 1;
}
.slider::after {
	content: "";
	background-color: #a0001d;
	display: block;
	width: 50vw;
	height: 420px;
	position: absolute;
	top: 0;
	right: calc(50% + 123px);
	z-index: -1;
}
.slick-arrow {
	background: url(/kikouhin/nailer/img/arrow_slide.png) no-repeat 0 0 / 32px 40px;
	width: 32px;
	height: 40px;
	position: absolute;
	top: 190px;
	z-index: 1;
}
.slick-prev {
	left: 10px;
	transform: rotateY(180deg);
}
.slick-next {
	right: 10px;
}
.slick-dots {
	display: flex;
	justify-content: space-between;
	width: 495px;
	position: absolute;
	right: 125px;
	bottom: 0;
}
.slick-dots button {
	background-color: #313131;
	width: 116px;
	height: 4px;
}
.slick-dots .slick-active button {
	background-color: #d70c19;
}



/* -- Lineup
-------------------------------------------------------------------------------- */
#page_ti {
	font-size: 5rem;
	height: 140px;
	margin-top: 130px;
	padding-top: 60px;
}
#page_ti em {
	font-size: 2rem;
	font-style: normal;
	color: #d70c19;
	display: block;
	margin-bottom: 15px;
}
#page_ti::before {
	background-color: #222;
}
#anchor {
	max-width: 1240px;
	margin: 80px auto 40px;
}
#anchor ul {
	display: flex;
	border: solid 2px #a0001d;
	border-right: none;
}
#anchor li {
	display: block;
	box-sizing: border-box;
	width: 25%;
	border-right: solid 2px #a0001d;
}
#anchor li a {
	display: block;
	box-sizing: border-box;
	height: 58px;
	padding-top: 20px;
}
.lineup-wrap + .lineup-wrap {
	margin-top: 120px;
}
.lineup-wrap + #contact {
	margin-top: 200px;
}
.item-wrap {
	height: 585px;
	margin-bottom: 40px;
	padding: 80px 0 0 125px;
}
.item-wrap h2 {
	font-size: 2rem;
	position: relative;
	z-index: 2;
}
.item-wrap h2 span {
	letter-spacing: 0.02em;
}
#HN-75N4 .item-wrap h2 {
	width: 420px;
}
#HN-75N4 .item-wrap h2 span {
	line-height: 1.5;
}
.item-wrap h2 em {
	font-size: 6rem;
	display: block;
	margin-top: 25px;
}
.item-wrap figure {
	width: 575px;
	position: absolute;
	top: 40px;
	right: 80px;
}
.item-wrap figcaption {
	font-size: 2.5rem;
	text-align: center;
	display: block;
	box-sizing: border-box;
	width: 215px;
	height: 70px;
	padding-top: 10px;
	border: solid 2px #fff;
	position: absolute;
	top: 40px;
	right: -26px;
}
.item-wrap figcaption span {
	font-size: 2rem;
}
.item-wrap figcaption i {
	font-size: 5rem;
	font-style: normal;
	vertical-align: -2px;
	display: inline-block;
}
.item-wrap .features {
	width: 420px;
	margin-top: 30px;
}
.item-wrap .features li {
	font-size: 2.4rem;
	background-color: #000;
	display: block;
	margin-top: 5px;
	padding: 15px 40px;
}
.item-wrap .nml {
	margin: 20px 0 0 22px;
}
.item-wrap .nml li {
	margin-top: 10px;
	list-style: disc;
}
.detail-btn {
	position: absolute;
	bottom: 80px;
	left: 125px;
}
.detail-btn a {
	line-height: 1;
	color: #a0001d;
	background: #a0001d url(/kikouhin/nailer/img/arrow_w.png) no-repeat right 30px  top 14px / 12px 15px;
	display: block;
	box-sizing: border-box;
	width: 260px;
	height: 42px;
	padding: 11px 0 0 60px;
	border: solid 2px #fff;
	position: relative;
	z-index: 1;
}
.detail-btn a::after {
	content: "";
	background: #fff url(/kikouhin/nailer/img/arrow_r.png) no-repeat right 32px  top 14px / 12px 15px;
	display: block;
	width: 256px;
	height: 38px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all 0.3s ease;
}
.detail-btn a:hover {
	color: #fff;
	opacity: 1;
}
.detail-btn a:hover::after {
	opacity: 0;
}
.introduction {
	background-color: #222;
	display: none;
	border: solid 4px #313131;
	border-bottom: none;
}
.introduction section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	margin: 0 76px;
	padding: 60px 0;
}
.introduction section + section {
	border-top: solid 2px #a0001d;
}
.introduction section div {
	width: 485px;
}
.introduction section h3 {
	font-size: 4rem;
	font-style: italic;
	line-height: 1.5;
	font-feature-settings: "palt";
	margin-bottom: 30px;
}
.introduction section p {
	line-height: 1.75;
}
.introduction section picture {
	width: 530px;
}
.introduction section:nth-of-type(even) div {
	order: 1;
}
.introduction section:nth-of-type(even) picture {
	order: 0;
}
.introduction section:first-of-type picture {
	width: 540px;
}
.accordion-btn {
	font-size: 0;
	background-color: #222;
	display: block;
	width: 100%;
	height: 76px;
	border: solid 4px #313131;
	position: relative;
}
.accordion-btn::before {
	content: "機能紹介を開く";
	font: 700 2rem/1 "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Verdana, Roboto, "Droid Sans" ,sans-serif;
	text-align: center;
	display: block;
	padding: 24px 0;
	position: relative;
}
.accordion-btn::after {
	content: "";
	background: url(/kikouhin/nailer/img/arrow_w.png) no-repeat 0 0 / 19px 24px;
	display: block;
	width: 19px;
	height: 24px;
	position: absolute;
	top: 24px;
	right: 78px;
	transform: rotate(90deg);
	transition: all 0.3s ease;
}
.is-open .accordion-btn::before {
	content: "機能紹介を閉じる";
}
.is-open .accordion-btn::after {
	transform: rotate(-90deg);
}

@media (hover: hover) {
	header nav .contact-btn:hover {
		opacity: 1;
		background: #fff;
		color: #A0001D;
		text-decoration: none;
	}
	.reason-btn:hover {
		background: #fff;
		color: #000;
		opacity: 1;
	}
	.reason-btn:hover .reason-btn-icn-stroke {
		stroke: #000;
	}
	#lineup .lineup-btn:hover {
		background: #fff;
		color: #000;
		opacity: 1;
	}
	#lineup .lineup-btn:hover .lineup-btn-icn-stroke {
		stroke: #000;
	}
}

/* -- Media query
-------------------------------------------------------------------------------- */
@media screen and (min-width: 1400px) {
	#kv {
		background: url(/kikouhin/nailer/img/kv_pc.jpg) no-repeat center 0 / 100% auto;
	}
}