@charset "utf-8";

html {
	scroll-padding-top: 80px;
}
/* -- Link
-------------------------------------------------------------------------------- */
a {
	-webkit-tap-highlight-color: rgba(209, 7, 7, 0.5);
}
a,
a:link,
a:visited {
	color: #fff;
	text-decoration: none;
	outline: none;
}
a:active,
a:focus {
	color: #d10707;
	text-decoration: underline;
}



/* -- Layout
-------------------------------------------------------------------------------- */
header,
main,
footer {
	text-align: left;
	width: 100%;
}
.pc, [class^="pc-"] {
	display: none!important;
}



/* -- Headerer
-------------------------------------------------------------------------------- */
header {
	height: 80px;
	padding: 30px 0 0 20px;
	position: absolute;
	top: 0;
	z-index: 9;
}
.header-clone {
	position: fixed;
	top: -100%;
	padding: 30px 0 0 20px;
	background: #000;
	transition: top .5s ease;
}
.header-clone.is-active {
	top: 0;
}
header .logo {
	width: 39px;
	position: relative;
	z-index: 2;
}
.nav-btn {
	width: 64px;
	height: 64px;
	position: absolute;
	top: 8px;
	right: 3px;
	z-index: 2;
}
.nav-btn button {
	overflow: hidden;
	width: 30px;
	height: 30px;
	margin: 17px;
	padding: 0;
	position: relative;
}
.nav-btn::after,
.nav-btn button::before,
.nav-btn button::after {
	content: "";
	background-color: #fff;
	display: block;
	width: 30px;
	height: 2px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all 0.3s ease;
}
.nav-btn button::before {
	transform: translateY(10px);
}
.nav-btn button::after {
	transform: translateY(-10px);
}
header nav {
	background-color: rgba(0, 0, 0, 0.9);
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 0.5s ease;
}
header nav ul {
	padding: 109px 35px 0;
}
header nav a {
	font-size: 2rem;
	display: block;
	padding: 30px 0 3px 10px;
	border-bottom: solid 2px #d10707;
	letter-spacing: 0;
	line-height: 1.2;
}

header .contact-btn {
	position: relative;
	width: calc(100% - 40px);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 32px 16px 16px;
	margin: 62px auto 0;
	background: #A0001D;
	border-bottom: initial;
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	box-sizing: border-box;
}
header .contact-btn-icn {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 10px;
	height: 10px;
	translate: 0 -50%;
}

header.is-open nav {
	height: 100vh;
}
header.is-open .nav-btn::after {
	opacity: 0;
}
header.is-open .nav-btn button::before {
	transform: rotate(45deg) translateY(0);
}
header.is-open .nav-btn button::after {
	transform: rotate(-45deg) translateY(0);
}



/* -- Contents
-------------------------------------------------------------------------------- */
main {
	font-size: 2rem;
	overflow: hidden;
	width: 100%;
}
main > section {
	padding: 0 20px;
	position: relative;
	z-index: 1;
}
#contact {
	background-color: #222;
	padding: 75px 35px 50px;
}
#contact h2 {
	font-size: 2.4rem;
	line-height: 1.5;
	text-align: center;
}
.contact-wrap {
	margin-top: 30px;
}
.contact-mail {
	font-size: 1.6rem;
	line-height: 1.5;
	background: url(/kikouhin/nailer/img/icon_mail.png) no-repeat 0 8px / 50px 40px;
	padding-left: 80px;
}
.contact-mail a {
	line-height: 1;
	background: #a0001d url(/kikouhin/nailer/img/arrow_w.png) no-repeat right 30px  top 10px / 12px 15px;
	text-align: center;
	display: block;
	box-sizing: border-box;
	height: 36px;
	margin-top: 15px;
	padding: 10px 25px 0 0;
	position: relative;
	z-index: 1;
}
.contact-tel {
	font-size: 1.4rem;
	line-height: 1.5;
	background: url(/kikouhin/nailer/img/icon_tel.png) no-repeat 0 8px / 56px 56px;
	margin-top: 40px;
	padding-left: 80px;
}
.contact-tel b {
	font-size: 2.4rem;
	line-height: 1;
	display: block;
	margin-bottom: 15px;
}
.main-ti {
	font-size: 3rem;
	text-align: center;
}



/* -- Footer
-------------------------------------------------------------------------------- */
footer {
	padding: 10px 0;
	text-align: center;
}
footer small {
	font-size: 1rem;
	color: #898989;
}



/* -- index
-------------------------------------------------------------------------------- */
/* -- main visual -- */
#kv {
	position: relative;
	background: url(/kikouhin/nailer/img/kv_sp.jpg) no-repeat center center / cover;
	text-align: center;
	width: 100%;
	aspect-ratio: 58 / 103;
}
#kv h1 {
	width: 226px;
	margin: auto;
	padding-top: 92px;
}
#kv .lead {
	width: 284px;
	margin: 270px auto 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0;
	text-align: left;
}
#kv .lead span {
	display: block;
	line-height: 1;
}
#kv .lead b {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 2;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 8%;
	text-underline-offset: 20%;
	text-underline-position: from-font;
	color: #D70C19;
}

/* -- lineup -- */
#lineup {
	padding: 40px 0 0;
}
#lineup::before {
	position: relative;
	content: "";
	width: 100%;
	display: block;
	top: 1px;
	right: initial;
	left: initial;
	height: auto;
	aspect-ratio: 375 / 49;
	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: 375 / 49;
	background: #000;
	content: "";
}
.lineup-wrapper {
	padding: 10px 20px 48px;
	background: #A0001D;
}
#lineup h2.main-ti {
	font-size: 3rem;
	text-align: center;
	margin-bottom: 67px;
}
#lineup ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#lineup ul li {
	width: calc(50% - 8px);
	margin-bottom: 40px;
}
#lineup figcaption {
	font-size: 1.4rem;
	text-align: center;
	margin-top: 10px;
}
#lineup figcaption i {
	padding-right: 0.5em;
}
#lineup figcaption b {
	font-size: 2.4rem;
}
#lineup .product-name {
	display: block;
	padding-top: 5px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}
#lineup p {
	margin: -10px 15px 0;
}
#lineup .lineup-btn {
	position: relative;
	height: 53px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	padding-right: 26px;
	margin: 20px auto 0;
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
}
#lineup .lineup-btn + .lineup-btn {
	    margin-top: 40px;
}
#lineup .lineup-btn-icn {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 15px;
	height: 15px;
	translate: 0 -50%;
}

/* -- reason -- */
#reason {
	line-height: 1.5;
	padding-top: 40px;
}
#reason h2.main-ti {
	line-height: 1.5;
	margin-bottom: 40px;
}
#reason h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0 2rem;
	font-size: 2.4rem;
	font-style: italic;
}
#reason h3 .num {
	font-size: 8rem;
	line-height: 1;
	color: #d70c19;
}
.reason-wrap-w .container {
	background-color: #a0001d;
	margin: 30px -20px 0;
	padding: 40px 20px;
}
.reason-wrap-w .container p {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}
.reason-wrap-w .container figure {
	margin-top: 40px;
}
.reason-wrap-w .container figure + figure {
	margin-top: 30px;
}
.reason-wrap-w .container figcaption {
	margin-top: 10px;
	font-feature-settings: 'pwid' on;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
}
.reason-wrap-w .container ol {
	font-size: 1.6rem;
	margin-top: 40px;
}
.reason-wrap-w .container ol li {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}
.reason02,
.reason03,
.reason04,
.reason05 {
	margin-top: 80px;
}
.reason04 {
	margin-top: 100px;
}
[class^="reason-wrap-i"] {
	margin-top: 70px;
}
[class^="reason-wrap-i"] .reason-subti {
	margin-bottom: 60px;
}
[class^="reason-wrap-i"] .reason-subti h3 {
	margin-bottom: 32px;
}
[class^="reason-wrap-i"] .reason-subti h3 small {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 2.5;
	font-feature-settings: 'pwid' on;
}
[class^="reason-wrap-i"] .reason-subti h3 b {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
}
[class^="reason-wrap-i"] .reason-subti h3 span {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}
[class^="reason-wrap-i"] .reason-subti p {
	font-size: 1.6rem;
}
[class^="reason-wrap-i"] figure {
	position: relative;
	z-index: 1;
}
[class^="reason-wrap-i"] figure::after {
	content: "";
	background-color: #a0001d;
	display: block;
	width: 100%;
	height: calc(100% + 40px);
	position: absolute;
	top: -20px;
	z-index: -1;
}
[class^="reason-wrap-i"] .reason-subti .note {
	margin-top: 10px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}
.reason-wrap-il h3 span {
	font-size: 1.4rem;
	font-feature-settings: "palt";
	display: block;
	margin-bottom: 5px;
}
.reason-wrap-il p span {
	font-size: 1.2rem;
	display: block;
	margin-top: 10px;
}
.reason-wrap-il figure::after {
	right: 25px;
}
.reason-comment {
	margin-top: 60px;
}
.reason-comment dl {
	font-size: 1.6rem;
	background-color: #222;
	margin-top: 10px;
	padding: 45px 20px 40px;
}
.reason-comment dl dt {
	font-size: 2.4rem;
	font-style: italic;
	line-height: 1;
	margin-bottom: 28px;
}
.reason-comment dl dd {
	letter-spacing: 0;
}
.reason-comment dl h4 {
	margin: 35px 0 23px;
}
.reason-comment dl h4 img {
	vertical-align: middle;
	display: inline-block;
	width: 25px;
	margin-right: 10px;
}
.reason-comment dl li {
	color: #000;
	background-color: #fff;
	display: block;
	margin-top: 10px;
	padding: 15px 20px;
	border-radius: 5px;
}
#reason .reason-wrap-ir figure::after {
	left: 25px;
}

.reason-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 15px;
	margin: 60px auto 0;
	border: 1px solid #fff;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	box-sizing: border-box;
}
.reason-btn-icn {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 15px;
	height: 15px;
	translate: 0 -50%;
}

/* -- movie -- */
#movie {
	margin-top: 40px;
	padding: 0;
}
#movie + #lineup {
	padding: 0;
}
#movie + #lineup::after {
	background-color: #222;
}
#movie::before {
	position: relative;
	content: "";
	width: 100%;
	display: block;
	top: 1px;
	right: initial;
	left: initial;
	height: auto;
	background-color: #222;
	aspect-ratio: 375 / 49;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	z-index: 1;
}
.movie-wrapper {
	padding: 30px 20px 20px;
	background-color: #222;
}
#movie .main-ti {
	line-height: 1.5;
}
.movie-wrap {
	background-color: #a0001d;
	margin-top: 30px;
	padding: 40px 15px 10px;
}
.movie-wrap figure {
	margin-bottom: 25px;
}
.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: 2rem;
	color: #d70c19;
	text-align: center;
	display: block;
	width: 100%;
	position: absolute;
	top: calc(50% - 10px);
}
.movie-wrap figcaption {
	font-size: 1.2rem;
	margin-top: 10px;
}

/* -- story -- */
#story {
	margin-top: 117px;
}
#story p.lead {
	font-size: 1.6rem;
	font-style: italic;
	line-height: 1.75;
	text-align: center;
	margin: 25px 0 30px	;
}
.slide-wrap {
	position: relative;
}
.slide-wrap + .slide-wrap {
	margin-top: 55px;
}
.slide-wrap h3 {
	font-size: 2.8rem;
	letter-spacing: 0;
	line-height: 1.2;
	margin-right: -20px;
	padding-top: 105px;
	position: absolute;
	top: calc((100vw - 40px) * 0.607143);
	z-index: 2;
}
.slide-container .photo {
	display: block;
	padding: 20px 0;
}
.slide-container dl {
	display: block;
	margin-top: 150px;
}
.slide-container dt {
	font-size: 2rem;
	color: #d70c19;
	margin-bottom: 10px;
}
.slide-container dd {
	font-size: 1.6rem;
	line-height: 1.75;
	letter-spacing: 0;
}
.slide-container dd span {
	font-size: 1.2rem;
	display: block;
	margin-top: 10px;
}
.slick-initialized .slick-slide {
	display: block;
}
.slider {
	position: relative;
	z-index: 1;
}
.slider::after {
	content: "";
	background-color: #a0001d;
	display: block;
	width: 100%;
	height: calc(((100vw - 40px) * 0.607143) + 40px);
	position: absolute;
	top: 0;
	left: -20px;
	z-index: -1;
}
.slick-arrow {
	background: url(/kikouhin/nailer/img/arrow_slide.png) no-repeat 0 0 / 20px 25px;
	width: 20px;
	height: 25px;
	position: absolute;
	top: calc(((((100vw - 40px) * 0.607143)) / 2) + 7px);
	z-index: 1;
}
.slick-prev {
	left: 15px;
	transform: rotateY(180deg);
}
.slick-next {
	right: 15px;
}
.slick-dots {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	top: calc(((100vw - 40px) * 0.607143) + 60px);
	left: 0;
}
.slick-dots li {
	width: calc((100% - 30px) / 4);
}
.slick-dots button {
	background-color: #313131;
	width: 100%;
	height: 4px;
}
.slick-dots .slick-active button {
	background-color: #d70c19;
}



/* -- Lineup
-------------------------------------------------------------------------------- */
#page_ti {
	font-size: 3rem;
	background-color: #222;
	text-align: center;
	height: 95px;
	margin-top: 80px;
	padding-top: 35px;
}
#page_ti em {
	font-size: 1.4rem;
	font-style: normal;
	color: #d70c19;
	display: block;
	margin-bottom: 10px;
}
#anchor {
	margin: 40px 20px;
}
#anchor ul {
	text-align: center;
	display: flex;
	flex-flow: row wrap;
	border: solid 2px #a0001d;
	border-top: none;
}
#anchor li {
	display: block;
	box-sizing: border-box;
	width: 50%;
	border-top: solid 2px #a0001d;
}
#anchor li:nth-child(odd) {
	border-right: solid 1px #a0001d;
}
#anchor li:nth-child(even) {
	border-left: solid 1px #a0001d;
}
#anchor li a {
	font-size: 1.6rem;
	display: block;
	box-sizing: border-box;
	height: 50px;
	padding-top: 17px;
}
.lineup-wrap + .lineup-wrap {
	margin-top: 80px;
}
.lineup-wrap + #contact {
	margin-top: 150px;
}
.item-wrap {
	background-color: #a0001d;
	margin: 0 -20px 20px;
	padding: 60px 20px;
}
.item-wrap h2 {
	font-size: 1.6rem;
}
.item-wrap h2 span {
	line-height: 1.5;
	font-feature-settings: "palt";
}
.item-wrap h2 em {
	font-size: 4rem;
	display: block;
	margin-top: 15px;
}
.item-wrap figure {
	margin-top: 40px;
	position: relative;
}
.item-wrap figcaption {
	font-size: 1.5rem;
	text-align: center;
	display: block;
	box-sizing: border-box;
	width: 140px;
	height: 64px;
	padding-top: 16px;
	border: solid 2px #fff;
	position: absolute;
	top: 0;
	right: 0;
}
.item-wrap figcaption span {
	font-size: 1.2rem;
}
.item-wrap figcaption i {
	font-size: 3rem;
	font-style: normal;
	vertical-align: -2px;
	display: inline-block;
}
.item-wrap .features {
	margin-top: 35px;
}
.item-wrap .features li {
	font-size: 2rem;
	line-height: 1.5;
	background-color: #000;
	display: block;
	margin-top: 5px;
	padding: 8px 30px;
}
.item-wrap .nml {
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 15px 0 0 20px;
}
.item-wrap .nml li {
	margin-top: 5px;
	list-style: disc;
}
.detail-btn {
	margin-top: 30px;
}
.detail-btn a {
	line-height: 1;
	color: #a0001d;
	background: #fff url(/kikouhin/nailer/img/arrow_r.png) no-repeat right 30px  top 10px / 12px 15px;
	text-align: center;
	display: block;
	box-sizing: border-box;
	width: 240px;
	height: 36px;
	margin-top: 15px;
	padding: 9px 25px 0 0;
	position: relative;
	z-index: 1;
}
.introduction {
	background-color: #222;
	display: none;
	border: solid 4px #313131;
	border-bottom: none;
}
.introduction section {
	margin: 0 16px;
	padding: 35px 0;
}
.introduction section + section {
	border-top: solid 2px #a0001d;
}
.introduction section div {
	margin-bottom: 30px;
}
.introduction section h3 {
	font-size: 3rem;
	font-style: italic;
	line-height: 1.5;
	font-feature-settings: "palt";
	margin-bottom: 15px;
}
.introduction section p {
	font-size: 1.6rem;
	line-height: 1.75;
}
.accordion-btn {
	font-size: 0;
	background-color: #222;
	display: block;
	width: 100%;
	height: 56px;
	border: solid 4px #313131;
	position: relative;
}
.accordion-btn::before {
	content: "機能紹介を開く";
	font: 700 1.6rem/1 "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Verdana, Roboto, "Droid Sans" ,sans-serif;
	color: #fff;
	text-align: center;
	display: block;
	padding: 16px 0;
	position: relative;
	transition: all 0.3s ease;
}
.accordion-btn::after {
	content: "";
	background: url(/kikouhin/nailer/img/arrow_w.png) no-repeat 0 0 / 16px 20px;
	display: block;
	width: 16px;
	height: 20px;
	position: absolute;
	top: 18px;
	right: 36px;
	transform: rotate(90deg);
	transition: all 0.3s ease;
}
.is-open .accordion-btn::before {
	content: "機能紹介を閉じる";
}
.is-open .accordion-btn::after {
	transform: rotate(-90deg);
}

/* -- Media query
-------------------------------------------------------------------------------- */
@media screen and (max-width: 320px) {
	.w32 {
		display: none;
	}
	.contact-mail a {
		background-position: right 15px top 10px;
	}
	footer nav li a {
		padding: 23px 18px;
	}
	#lineup figcaption {
		font-size: 1.2rem;
	}
	#lineup figcaption i {
		padding-right: 0.2em;
	}
	#lineup figcaption b {
		font-size: 2rem;
	}
	.slide-wrap h3 {
		font-size: 2.3rem;
	}
	.item-wrap figcaption {
		height: 44px;
		padding-top: 6px;
	}
	.item-wrap .features li {
		padding: 8px 13px;
	}
}
@media screen and (max-width: 360px) {
	.slide-wrap h3 {
		font-size: 2.6rem;
	}
}