@charset "utf-8";
@import url("reset.css");

*{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#wrapper {
	overflow: hidden;
}

.sp {
	display: block;
}

.pc {
	display: none;
}

br.sp,
span.sp {
	display: inline-block;
}

br.pc,
span.pc {
	display: none;
}

.container {
	width:86vw;
	max-width: 800px;
	margin: 0 auto;
}

.min01 {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	font-style: normal;
}

.mv_black {
	overflow: hidden;
	background-image: -webkit-linear-gradient(top, #C3161D 0%, #000 100%);
	background-image:    -moz-linear-gradient(top, #C3161D 0%, #000 100%);
	background-image:     -ms-linear-gradient(top, #C3161D 0%, #000 100%);
	background-image:      -o-linear-gradient(top, #C3161D 0%, #000 100%);
	background-image:         linear-gradient(top, #C3161D 0%, #000 100%);
}

.mv_black .mv_inner {
	position: relative;
	width:100vw;
	height:169.5vw;
	margin:0 auto;
	text-align: center;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: hidden;
}

.mv_black .mv_inner div img,
.mv_black .mv_inner div svg {
	width:100%;
	height:auto;
}

.mv_black .hasegawa_logo {
	position: absolute;
	right: 3.4vw;
	top: 3.4vw;
	width:24vw;
}
.mv_black .mv_visual {
	position: absolute;
	right: 21.5%;
	bottom: 0;
	width: 200%;
	opacity: 0;
}
.mv_black .mv_img01 {
	position: absolute;
	right: -1%;
	bottom: 0;
	width: 70%;
	opacity: 0;
}
.mv_black .mv_title {
	position: absolute;
	left: 50%;
	top: 54vw;
	width: 10.4%;
	margin-left: 15%;
	opacity: 0;
}
.mv_black .mv_logo01 {
	position: absolute;
	left: 50%;
	top: 15.61vw;
	width: 70%;
	margin-left:-35%;
	opacity: 0;
}
.mv_black .mv_logo02 {
	position: absolute;
	left: 50%;
	top: 20.48vw;
	width: 78%;
	margin-left:-39%;
	opacity: 0;
}
.mv_black .mv_logo03 {
	position: absolute;
	left: 50%;
	top: 34.5vw;
	width: 60%;
	margin-left:-30%;
	opacity: 0;
}
.mv_black .mv_logo02 svg,
.mv_black .mv_logo03 svg {
	position: absolute;
	top:0;
	left:0;
}
.mv_black .shadow {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40vw;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

@keyframes lefttoright {
	0% {
		transform: translateX(-15vw);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes righttoleft {
	0% {
		transform: translateX(10vw);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes bottomtotop {
	0% {
		transform: translateY(10vw);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.loaded .mv_img01 {
	animation: righttoleft 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0.1s forwards;
}

.loaded .mv_visual {
	animation: lefttoright 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0s forwards;
}

.loaded .mv_logo01 {
	animation: righttoleft 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0.25s forwards;
}

.loaded .mv_logo02 {
	animation: righttoleft 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.775) 0.4s forwards;
}

.loaded .mv_logo03 {
	animation: righttoleft 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.55s forwards;
}

.loaded .mv_title {
	animation: fadein 3s 0.55s forwards;
}

.kiratto {
	display: none;
}

#lead {
	padding:2em 0 3em;
}

#lead .title {
	font-size: 2em;
	line-height: 1.5;
	margin-bottom: 1em;
	font-weight: bold;
}
#lead .subtitle {
	font-size: 1.2em;
	line-height: 2;
	margin-bottom: 1em;
	font-weight: bold;
}

#lead p {
	font-size: 1em;
	font-weight: bold;
	line-height: 2.0;
}

#lead p span {
	font-weight: bold;
}

#contents, #contents_upper {
	background: linear-gradient(180deg, rgba(230,0,18,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
	padding:50px 0 14px;
}
#contents_upper {
	background: linear-gradient(180deg, rgba(230,0,18,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}
.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;
}

.leftAnime {
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

.fadein_lr {
	opacity: 0;
	transform: translateX(-6vw);
}

.fadein_lr.show {
	display: block;
	opacity: 1;
	transform: translateX(0);
	transition-duration: .6s;
	transition-delay: .4s;
}

.fadein_bt {
	opacity: 0;
	transform: translateY(6vw);
}

.fadein_bt.show {
	opacity: 1;
	transform: translateY(0);
	transition-duration: .6s;
	transition-delay: .4s;
}

.syutto {
	opacity: 0;
}

.syutto.show {
	animation: lefttoright 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
}

#difference {
	background: #EAEEF1;
	text-align: center;
	position: relative;
	padding-top: 11em;
	padding-bottom:4em;
}

#difference .difference_title {
	position: absolute;
	top:-18px;
	width:100%;
}

#difference h2 {
	font-weight:bold;
	font-size: 1.2em;
	line-height: 1.5;
	margin-top: 1.4em;
}

#difference h2 strong {
	display: block;
	color:#E60012;
	font-size:1.8em;
}

#difference p {
	text-align: left;
	font-weight:bold;
	font-size: 1.1em;
	line-height: 2.0;
}

#difference p strong {
	color:#E60012;
}

#difference p.difference_lead {
	margin-bottom:2em;
}
.difference_img {
	margin-bottom: 20px;
}
.difference_img figure {
	width:260px;
	margin:0 auto;
}

.difference_img figure:nth-child(1) {
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 34px;
}

.difference_img figure:nth-child(1):before {
	content:"";
	width:30px;
	height:30px;
	position: absolute;
	bottom:-10px;
	left:50%;
	background: url(../img/arrow01.svg) no-repeat center center;
	background-size: cover;
	transform: translateX(-50%) rotate(90deg);
}

.difference_img figure figcaption {
	display: inline-block;
	background:#595757;
	color:#FFF;
	font-weight:bold;
	font-size:1.1em;
	border-radius: 0.9em;
	line-height: 1.8em;
	padding:0 1.5em;
}

.difference_img figure:nth-child(2) figcaption {
	background:#E60012;
}

.difference_img figure img {
	display: block;
	margin:0 auto;
	padding:20px;
}

.difference_img figure:nth-child(1) img {
	width:189px;
}

.difference_img figure:nth-child(2) img {
	width:200px;
	padding: 30px 0 10px;
}
.difference_img figure:nth-child(3) {
	width: 90%;
}
.difference_img figure:nth-child(3) img {
	width: 100%;
	padding: 20px 0 10px;
}
.difference_img figure .code{
	text-align: center !important;
}

.nav_btns {
	text-align: center;
	font-size:0;
	width:90%;
	max-width: 500px;
	margin:0 auto;
}

.nav_btns a {
	color:#FFF;
	font-weight:bold;
	font-size:11px;
	display: block;
}

.nav_btns a img {
	transition-duration: .3s;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	width:100%;
	max-width:20vw;
	margin-bottom:0.5em;
}

.nav_btns a:hover {
	text-decoration: none;
	transition-duration: .3s;
}

.nav_btns a span {
	font-weight:bold;
	display: block;
}

.nav_btns li {
	font-size:14px;
	display: inline-block;
	vertical-align: top;
	width:33.3%;
	margin:0;
}

.nav_btns + div.container {
	margin-top:12px;
}

#contents .container > div, #contents_upper .container > div{
	display: block;
	overflow: hidden;
}

.contents_title {
	position: relative;
	background: linear-gradient(90deg, rgba(127,0,0,1) 0%, rgba(40,0,0,1) 100%);
	padding:1em 0;
	margin-top:26px;
	z-index: 1;
}

.contents_title img {
	position: absolute;
}

.contents_title h2 {
	color:#FFF;
	font-size:19px;
	line-height:1.4;
	font-weight:bold;
	text-align: center;
}

#side_trigger .contents_title h2 {
	padding-left:120px;
	text-align: left;
}

#side_trigger .contents_title.hero_appear img {
	left: 2.8%;
	/*bottom:-1vw;*/
	bottom:0;
	width:100px;
	opacity: 0;
}
/*
#side_trigger .contents_title:before {
	content:"";
	position: absolute;
	bottom:-5vw;
	height:5vw;
	width:100%;
	background: #FFF;
	z-index: 2;
}
*/
@keyframes hero_appear {
	0% {
		transform: translateY(5vw);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

#side_trigger .contents_title.hero_appear.show img {
	/*animation: hero_appear 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s forwards;*/
	animation: hero_appear 0.2s 0.5s forwards;
}

.contents_inner {
	background:#FFF;
	padding:3vw 6vw 6vw;
	text-align: center;
	margin-bottom:26px;
}

.contents_inner img {
	max-width: 100%;
}

.contents_inner p {
	text-align: left;
	font-weight: bold;
	line-height:1.9;
}

#side_trigger figure {
	position: relative;
	padding-top:39px;
	max-width: 293px;
	margin:0 auto;
}

#side_trigger figure figcaption {
	position: absolute;
	top:0;
	width:78px;
	left:4px;
}

#side_trigger figure + img {
	width:38%;
	max-width:160px;
	margin:20px;
}

#how_to .contents_title h2 {
	padding-right: 120px;
	line-height: 2.8;
}

#how_to .contents_title.hero_fly img {
	right:0;
	bottom:-15vw;
	width:38vw;
	max-width:145px;
	opacity: 0;
}

@keyframes hero_fly {
	0% {
		transform: translate(30px, 50px) scale(0,0) rotate(60deg);
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		transform: translate(0, 0) scale(1,1) rotate(0deg);
		opacity: 1;
	}
}

#how_to .contents_title.hero_fly.show img {
	animation: hero_fly 0.3s 0.5s forwards;
}

#how_to .point {
	text-align: center;
	font-family: 'Helvetica',sans-serif;
	font-style: italic;
	color:#E60012;
	font-size:1.2em;
	font-weight: normal;
	line-height: 1.7;
}

#how_to .point strong {
	font-family: 'Helvetica',sans-serif;
	font-style: italic;
	font-size:2.4em;
	font-weight: normal;
}

#how_to .contents_inner div + div .point {
	margin-top:12px;
}

.contents_inner h3 {
	font-weight:bold;
	font-size:1.2em;
	line-height:1.5;
	margin-bottom:1em;
}

.contents_inner h3 strong {
	color:#E60012;
	font-size:1.7em;
	display: block;
}

#point1_content,
#point2_content,
#point3_content {
	border-bottom:solid 1px #E60012;
	padding-bottom:2em;
	max-width:630px;
	margin:0 auto;
}

#point3_content {
	border-bottom:none;
	padding-bottom:2.5em;
}

#point1_content figure {
	width:100%;
	max-width:285px;
	margin:0 auto 18px;
	position: relative;
}

#point1_content figure + figure {
	max-width:285px;
}

#point1_content figure img,
#point2_content figure img {
	width:100%;
	height:auto;
}

#point1_content figure img:nth-of-type(2),
#point2_content figure img:nth-of-type(2) {
	position: absolute;
	bottom:0;
	left:0;
	opacity: 0;
	transition-duration: .5s;
}

#point1_content figure.show img:nth-of-type(2),
#point2_content figure.show img:nth-of-type(2) {
	opacity: 1;
}

#point2_content .figure_wrap {
	display: block;
	width:100%;
	max-width:263px;
	margin:0 auto 36px;
}

#point2_content figure {
	position: relative;
	margin:0 auto 14px;
}

#point2_content figure + figure {
	width:189px;
}

#point2_content figure figcaption {
	display: inline-block;
	color:#E60012;
	border:solid 2px #E60012;
	border-radius:1em;
	line-height:1.8;
	font-weight:bold;
	padding:0 2em;
	margin: 8px 0 10px;
}

#point3_content figure img {
	display: block;
	width:100%;
	max-width:263px;
	margin:0 auto 14px;
}

#point3_content figure {
	margin-bottom:10px;
}

#point3_content figure + figure {
	margin-bottom:24px;
}

#point3_content figure figcaption {
	font-size:1.4em;
	font-weight:bold;
	padding:10px 0 7px;
}

#how_to_other h3 {
	color:#E60012;
	font-size:2.1em;
	display: block;
	margin:0 auto 20px;
	position: relative;
}

#how_to_other h3:before {
	content:"";
	position: absolute;
	top:50%;
	left:0;
	width:100%;
	height:0;
	border-top:solid 1px #E60012;
	z-index: -2;
}

#how_to_other h3:after {
	content:"";
	position: absolute;
	top:0;
	left:50%;
	margin-left:-3.2em;
	width:6.4em;
	height:2em;
	background:#FFF;
	z-index: -1;
}

#how_to_other figure figcaption {
	font-size:1.4em;
	font-weight:bold;
	padding:10px 0 7px;
}

#how_to_other figure img {
	width:100%;
}

#how_to_other ul li {
	width:100%;
	max-width:278px;
	margin:0 auto;
}

#how_to_other ul li p {
	margin:1.3em 0 2em;
	font-size:12px;
	font-weight:normal;
}

.other_lock {
	background: #EAEEF1;
	border-radius: 10px;
	padding:2em;
	padding-top:104vw;
	width:calc(100% + 3vw);
	margin-left:-1.5vw;
	margin-bottom:1em;
	box-sizing: border-box;
	position: relative;
}

.other_lock > img {
	position: absolute;
	top: 8vw;
	left: 4.3vw;
	width: 32vw;
}

.other_lock > img:nth-of-type(2) {
	width: 41vw;
	top: 63vw;
	left: 30vw;
}

.other_lock p {
	font-size:12px;
	font-weight:normal;
}


#spec .contents_title h2 {
	line-height: 2.8;
}

#spec .contents_inner {
	padding-top:3em;
}

#spec ul.icons {
	font-size: 0;
	text-align: left;
	display: block;
	width:100%;
	max-width:275px;
	margin:0 auto 24px;
}

#spec ul.icons li {
	display: inline-block;
	vertical-align: top;
}

#spec ul.icons li:nth-of-type(1) {
	color:#FFF;
	background:#AD0E1B;
	font-weight:bold;
	font-size:28px;
	text-align: center;
	line-height:1.0;
	width:100%;
	max-width: 275px;
	box-sizing: border-box;
	border-radius: 5px;
	padding:18px;
}

#spec ul.icons li:nth-of-type(1) span {
	display: inline-block;
	vertical-align: top;
	font-size:15px;
	font-weight:bold;
	margin: 8px 18px 8px 0;
}

#spec ul.icons li:nth-of-type(2) {
	width:87px;
	margin:18px 20px 24px -7px;
}

#spec ul.icons li:nth-of-type(3) {
	width:85px;
	margin:27px 0 29px;
}

#spec ul.icons li:nth-of-type(4) {
	width:100%;
	max-width: 275px;
}

#spec .tags_wrap {
	text-align: left;
	display: block;
	width:100%;
	max-width:279px;
	margin:0 auto 40px;
	font-size: 0;
}

#spec ul.tags {
	display: inline-block;
	text-align: left;
	font-size:0;
}

#spec ul.tags li {
	display: inline-block;
	font-size:12px;
	color:#FFF;
	font-weight:bold;
	line-height: 1.2;
	border-radius: 6px;
	padding:0.2em 1em;
	text-align: center;
	min-width:7em;
	box-sizing: border-box;
	margin:0 2px 4px;
	background: #000;
}

#spec ul.tags:nth-of-type(2) li {
	background: #AD0E1B;
}

#spec .swiper {
	padding-bottom:36px;
	margin-bottom:20px;
	max-width: 680px;
}

.swiper-button-next,
.swiper-button-prev {
	--swiper-navigation-color: #000;
	--swiper-navigation-size: 19px;
}

.swiper-pagination {
	--swiper-theme-color: #666;
}

#spec dl {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	width:16em;
	margin:0 0.5em 2.5em;
}

#spec dt {
	display: inline-block;
	padding:0 1.6em;
	background: #000;
	color:#FFF;
	font-weight:bold;
	font-size:0.9em;
	border-radius: 6px;
	margin-bottom:1em;
}

#spec dd {
	display: block;
	width:100%;
}

#spec p.note {
	font-size:11px;
	font-weight:normal;
	color:#666;
}

.btn {
	display: block;
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	background: #FFF;
}

.btn a {
	display: block;
	color: #FFF;
	font-weight: bold;
	font-size: 4.3vw;
	padding: 0.8em 0;
	text-align: center;
	transition-duration: .3s;
	line-height: 1.6;
}

.btn a:hover {
	text-decoration: none;
	opacity: 0.6;
}

.to_shop {
	margin:28px auto 22px;
}

.to_shop a {
	background: #E60012;
}

.to_inquiry {
	margin:0 auto 30px;
}

.to_inquiry a {
	background: #000;
}

footer {
	text-align: center;
	background-image: -webkit-linear-gradient(top, #E60013, #000);
	background-image:    -moz-linear-gradient(top, #E60013, #000);
	background-image:     -ms-linear-gradient(top, #E60013, #000);
	background-image:      -o-linear-gradient(top, #E60013, #000);
	background-image:         linear-gradient(top, #E60013, #000);
	padding: 3em 0 0;
}

footer .bottom_title_area {
	position: relative;
	width:312px;
	height:388px;
	margin:0 auto;
}

footer .bottom_title_area h2 {
	width: 312px;
	margin: 0 auto;
}

footer .bottom_title_area h2 span {
	color:#FFF;
	text-align: left;
	font-size:11px;
	font-weight:bold;
}

footer .bottom_title_area > img:nth-of-type(1) {
	position: absolute;
	top: 160px;
	right: 34px;
	width: 108px;
	z-index: 2;
}

footer .bottom_title_area > img:nth-of-type(2) {
	width: 230px;
	position: absolute;
	z-index: 1;
	top: 120px;
	left: 40px;
}

footer p {
	color:#FFF;
	text-align: left;
	font-size:11px;
	margin-bottom:50px;
}

footer small {
	color:#FFF;
	padding:2em 0 3.2em;
	display: block;
	font-family: 'Helvetica',sans-serif;
	font-size:11px;
}


@media screen and (min-width: 440px) {

#side_trigger .contents_title h2 {
	padding-left:0;
	text-align: center;
}

.nav_btns a {
	font-size: 12px;
}

.btn a {
	font-size:18px;
}

.other_lock {
	width:100%;
	max-width: 474px;
	padding:28px;
	padding-top:458px;
	margin:0 auto;
}

.other_lock > img {
	width:140px;
	top:36px;
	left:50%;
	margin-left:-148px;
}

.other_lock > img:nth-of-type(2) {
	width:180px;
	top:278px;
	left:50%;
	margin-left:-34px;
}

}


@media screen and (min-width: 540px) {

#how_to .contents_title h2 {
	padding-right:0;
}



}


@media screen and (min-width: 620px) {

#spec ul.icons {
	width:calc(100% + 14px);
	max-width: none;
	margin-left:-7px;
	text-align: center;
}

#spec ul.icons li,
#spec ul.icons li:nth-of-type(2),
#spec ul.icons li:nth-of-type(3) {
	vertical-align: bottom;
	margin:0 7px 14px;
}

#spec ul.icons li:nth-of-type(1) {
	width:242px;
	padding:29px 0;
	font-size:32px;
}

#spec ul.icons li:nth-of-type(4) {
	width:192px;
}


}



@media screen and (min-width: 768px) {

.sp {
	display: none;
}

.pc {
	display: block;
}

br.sp,
span.sp {
	display: none;
}

br.pc,
span.pc {
	display: inline-block;
}

.mv_black .mv_inner {
	position: relative;
	width:100vw;
	height:59vw;
	margin:0 auto;
	text-align: center;
	box-sizing: border-box;
	padding:0;
	overflow-y: hidden;
}

.mv_black .hasegawa_logo {
	position: absolute;
	right: 2vw;
	top: 1.6vw;
	width:100px;
}
.mv_black .mv_visual {
	position: absolute;
	right: 44%;
	bottom: 0;
	width: 104%;
}
.mv_black .mv_img01 {
	position: absolute;
	right: 14%;
	bottom: 0;
	width: 46%;
}
.mv_black .mv_title {
	position: absolute;
	left: 50%;
	top: 16vw;
	width: 6%;
	margin-left: 36%;
}
.mv_black .mv_logo01 {
	position: absolute;
	left: 84%;
	top: 5.5vw;
	width: 35%;
}
.mv_black .mv_logo02 {
	position: absolute;
	left: 85.7%;
	top: 7.5vw;
	width: 38%;
}
.mv_black .mv_logo03 {
	position: absolute;
	left: 81%;
	top: 15vw;
	width: 29%;
}

.mv_black .shadow {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40vw;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}


@keyframes lefttoright {
	0% {
		transform: translateX(-100px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes righttoleft {
	0% {
		transform: translateX(100px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes bottomtotop {
	0% {
		transform: translateY(60px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

#lead {
	text-align: center;
}
#lead .title {
	font-size: 30px;
	line-height: 2;
	margin-bottom: 1em;
}
#lead .subtitle {
	font-size: 16px;
	line-height: 2;
	margin-bottom: 1em;
}

#lead p {
	font-size: 12px;
	line-height: 2;
}

.fadein_lr {
	transform: translateX(-40px);
}

.fadein_bt {
	transform: translateY(40px);
}

#difference {
	padding-top:124px;
	padding-bottom:56px;
}
#difference .container:nth-of-type(3){
	max-width: 960px;
}

#difference h2 {
	margin-top: 20px;
	font-size: 23px;
}

#difference h2 strong {
	display: inline;
	font-size:1.7em;
}

#difference p {
	text-align: center;
	font-size: 14px;
}

#difference p.difference_lead {
	font-size: 16px;
}

.difference_img figure figcaption {
	font-size:14px;
}

.difference_img {
	display: block;
	margin:0 auto 20px;
}

.difference_img figure {
	display: inline-block;
	vertical-align: bottom;
	margin:0;
}

.difference_img figure:nth-child(1) {
	margin-right:20px;
	margin-bottom:0;
	padding-bottom: 20px;
}
.difference_img figure:nth-child(1):before {
	width:40px;
	height:40px;
	bottom: 50%;
	left: auto;
	right: -35px;
	transform: translatey(-50%) rotate(0);
}


.difference_img figure:nth-child(2) img {
	padding-top:20px;
}
.difference_img figure:nth-child(3) {
	width: 285px;
}
.difference_img figure:nth-child(3) img {
	width: 100%;
}

.difference_img figure .code{
	font-size: 12px !important;
}
.nav_btns {
	margin:30px auto;
}

.nav_btns a {
	font-size: 14px;
}

.nav_btns a img {
	max-width:110px;
}

.nav_btns a:hover img {
	transform:scale(1.1,1.1);
}

.nav_btns a:hover span {
	opacity: 0.7;
}

.nav_btns + div.container {
	/*margin-top:22px;*/
	margin-top:12px;
}

.contents_title,
#side_trigger .contents_title {
	/*margin-top:54px;*/
	margin-top:64px;
}

.contents_title {
	padding:20px 0;
}

.contents_title h2,
#how_to .contents_title h2,
#spec .contents_title h2 {
	font-size:2.0em;
	line-height: 1.4;
	text-align: center;
}

#side_trigger .contents_title h2 {
	padding-left:0;
}
/*
#side_trigger .contents_title:before {
	bottom:-20px;
	height:20px;
}
*/
@keyframes hero_appear {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

#side_trigger .contents_title.hero_appear img {
	left: calc(50% - 245px - 11vw);
	/*bottom:-8px;*/
	bottom:0;
	max-width: none;
	width: 134px;
}

.contents_inner {
	padding:26px;
	margin-bottom:8px;
}

.contents_inner p {
	text-align: center;
}

.contents_inner #how_to_other ul li p,
.contents_inner .other_lock p {
	text-align: left
}

#point1_content,
#point2_content,
#point3_content {
	padding-bottom: 2.3em;
}

#side_trigger .contents_inner {
	overflow: hidden;
}

#side_trigger .contents_inner > div {
	width:540px;
	margin:0 auto;
	overflow: visible;
}

#side_trigger figure {
	float:left;
	padding-top:45px;
	margin-bottom:10px;
	max-width: 310px;
}

#side_trigger figure figcaption {
	top:0;
	left:-40px;
	width:105px;
}

#side_trigger figure + img {
	float:right;
}

#side_trigger p {
	float: left;
	width: 310px;
	font-size: 14px;
	text-align: left;
}

#how_to .contents_title h2 {
	padding-right:0;
}

#how_to .contents_title.hero_fly img {
	right:5px;
	bottom:-84px;
	width:191px;
	max-width:none;
}

#how_to .contents_inner {
	padding:16px 40px 26px;
}

#how_to .point {
	font-size:22px;
	line-height:1.0;
}

#how_to .point strong {
	font-size:58px;
}

#how_to .contents_inner div + div .point {
	margin-top:30px;
}

.contents_inner h3 {
	font-size: 24px;
}

.contents_inner h3 strong {
	display: inline;
}

#point1_content figure {
	max-width:328px;
	width:52%;
	display: inline-block;
	vertical-align: bottom;
}

#point1_content figure + figure {
	width:45%;
	margin-left:12px;
}

#point2_content .figure_wrap {
	display: inline-block;
	vertical-align: top;
	margin: 0px 12px 18px;
}

#point3_content figure,
#point3_content figure + figure {
	display: inline-block;
	vertical-align: top;
	margin: 0px 12px 18px;
}

#how_to_other {
	max-width: 630px;
	margin: 0 auto 16px;
}

#how_to_other ul {
	display: flex;
	align-items:flex-start;
}

#how_to_other ul li {
	max-width: 190px;
}
#how_to_other ul li:nth-of-type(2) {
	margin: 0 20px;
}

.other_lock {
	max-width: none;
	height:330px;
	box-sizing: border-box;
	padding:90px 40px 0 61%;
}

.other_lock > img {
	width:104px;
	top:17px;
	margin-left:-260px;
}

.other_lock > img:nth-of-type(2) {
	width:190px;
	top:100px;
	margin-left:-144px;
}

#how_to .contents_inner {
	margin-bottom:64px;
}

#spec ul.icons {
	display: flex;
	align-items:flex-end;
	justify-content: center;
}

#spec ul.icons li,
#spec ul.icons li:nth-of-type(2),
#spec ul.icons li:nth-of-type(3) {
	margin:0 8px 5px;
}

#spec ul.icons li:nth-of-type(3) {
	margin-right:18px;
}

#spec .tags_wrap {
	max-width: 670px;
}

#spec ul.tags li {
	margin:0 3px 6px;
	line-height: 1.3;
}

#spec .swiper {
	margin-bottom:40px;
}


#spec dl {
	width:18.5em;
}
#spec dl.onecl {
	display: block;
}
#spec dt {
	border-radius: 10px;
}

.btn a {
	font-size:20px;
	padding: 16px;
}

.to_shop {
	margin:36px auto 40px;
}

.to_inquiry {
	margin: 0 auto 80px;
}

footer .bottom_title_area {
	width:590px;
	height:214px;
}

footer .bottom_title_area h2 {
	width:380px;
	z-index: 3;
	position: absolute;
	top: 34px;
	left: 50%;
	margin-left: -190px;
}

footer .bottom_title_area h2 span {
	font-size:12px;
}

footer .bottom_title_area > img:nth-of-type(1) {
	top:19px;
	right:36px;
	width:80px;
}

footer .bottom_title_area > img:nth-of-type(2) {
	top:14px;
	left:0;
	width:180px;
}


}

@media screen and (min-width: 768px) and (max-width: 960px) {

.difference_img figure {
	width: 160px;
}
.difference_img figure:nth-child(1) {
	margin-right: 70px;
}
.difference_img figure:nth-child(1):before {
	right: -75px;
}
.difference_img figure:nth-child(2) {
	width: 160px;
}
.difference_img figure:nth-child(2) img{
	width: 100%;
}
.difference_img figure:nth-child(3) {
	width: 230px;
}


}

@media screen and (min-width: 1040px) {

.mv_black .mv_inner {
	width:100vw;
	height: 616px;
	text-align: left;
	padding:0;
}

.mv_black .hasegawa_logo {
	position: absolute;
	left:50%;
	top: 18px;
	width: 100px;
	margin-left:294px;
}
.mv_black .mv_visual {
	width: 1086px;
	right:50%;
	margin-right:-62px;
}
.mv_black .mv_img01 {
	left: 50%;
	margin-left: -140px;
	width: 480px;
}
.mv_black .mv_title {
	left: 50%;
	top: 170px;
	width: 64px;
	margin-left: 328px;
}
.mv_black .mv_logo01 {
	left: 50%;
	top: 66px;
	width: 336px;
	margin-left: -26px;
}
.mv_black .mv_logo02 {
	position: absolute;
	left: 50%;
	top: 86px;
	width: 372px;
	margin-left: -52px;
}
.mv_black .mv_logo03 {
	position: absolute;
	left: 50%;
	top: 154px;
	width: 290px;
	margin-left: -16px;
}

.mv_black .shadow {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 200px;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

#lead {
	padding: 60px 0;
}

#lead .title {
	font-size: 38px;
	margin-bottom: 30px;
}
#lead .subtitle {
	font-size: 20px;
	margin-bottom: 20px;
}

#lead p {
	font-size: 14px;
}

#side_trigger .contents_title.hero_appear img {
	left: 44px;
}

}

/**************************************************************
	
	追加：タイムパフォーマンス向上

****************************************************************/
#perform {
	background: linear-gradient(0deg, rgba(230, 0, 18, 1) 0%, rgba(0, 0, 0, 1) 100%);	
	padding: 4em 0;
}
#perform img {
	width: 100%;
}
#perform .container {
	width: 94%;
	margin: 0 auto;
}
#perform .title {
	width: 90%;
	margin: 0 auto 2em;
}
#perform .perform_img {
	position: relative;
	height: 57vw;
}
#perform .perform_img > div {
	position: absolute;
	left: 50%;
	top: 0;
}
#perform .perform_img > div.img01 {
	width: 40%;
	margin-left: -50%;
}
#perform .perform_img > div.img02 {
	width: 40%;
	margin-left: 10%;
}
#perform .perform_img > div.img03 {
	width: 45%;
	top: 2vw;
	transform: translateX(-50%);
}
#perform .perform_img > div.img04 {
	width: 36%;
	top: 19.97vw;
	transform: translateX(-50%);
}
.BeforeAfter1,
.BeforeAfter2,
.BeforeAfter3 {
	opacity: 0;
	transition-duration: .3s;
}
.BeforeAfter1.show,
.BeforeAfter2.show,
.BeforeAfter3.show {
	opacity: 1;
}
#perform .body {
	display: block;
	width: 91.49%;
	margin: 0 auto;
}
#perform .body p {
	color: #FFF;
	font-weight: bold;
}

@media screen and (min-width: 768px) {
	#perform {
		padding: 6em 0;
	}
	#perform .container {
		width: 80%;
	}
	#perform .title {
		margin: 0 auto 3em;
	}
	#perform .perform_img {
		height: 48.5vw;
	}
	#perform .perform_img > div.img04 {
		top: 17vw;
	}
	#perform .body {
		text-align: center;
		font-size: 1.2em;
		width: 90%;
	}
}
@media screen and (min-width: 960px) {
	#perform {
		padding:60px 0;
	}
	#perform .container {
		width: 80%;
		margin: 0 auto;
	}
	#perform .title {
		width: 80%;
		margin: 0 auto 30px;
	}
	#perform .perform_img {
		position: relative;
		height: 430px;
	}
	#perform .perform_img > div {
		position: absolute;
		left: 50%;
		top: 0;
	}
	#perform .perform_img > div.img01 {
		width: 36%;
		margin-left: -50%;
	}
	#perform .perform_img > div.img02 {
		width: 36%;
		margin-left: 14%;
	}
	#perform .perform_img > div.img03 {
		width: 40%;
		top: 50px;
		transform: translateX(-50%);
	}
	#perform .perform_img > div.img04 {
		width: 36%;
		top: 170px;
		transform: translateX(-50%);
	}
	#perform .body {
		font-size: 20px;
	}
}


/**************************************************************
	
	追加：商品紹介

****************************************************************/
#item {
	padding: 3em 0;
}
#item img {
	width: 100%;
}
#item .container {
	width: 90vw;
}
#item .item_detail {
	margin-bottom: 3em;
}
#item .item_detail:last-of-type {
	margin-bottom: 0;
}
#item .title_wrap {
	margin: 0 0 2em;
	padding: 1em;
	background: linear-gradient(90deg, rgba(127, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
	color: #FFF;
}
#item .title_wrap h4 {
	font-size: 2em;
	font-weight: bold;
}
#item .title_wrap .sub {
	font-weight: bold;
}
#item .lead {
	color: #9B0C2F;
	font-weight: bold;
	margin-bottom: 2em;
}
#item .pic {
	width: 100%;
	margin-bottom: 1.5em;
}
#item .spec_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#item .spec_list > div {
	width: 48%;
	margin-bottom: 1em;
	margin-right: 2%;
}
#item .spec_list > div.weight {
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
	background: #9A0C30;
	padding: 1em 0;
	color: #FFF;
	border-radius: 5px;
	font-size: 0.9em;
}
#item .spec_list > div.weight span {
	font-size: 2.4em;
	font-weight: bold;
}
#item .spec_list > div.height {
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
	background: #000;
	padding: 1em 0;
	color: #FFF;
	border-radius: 5px;
	font-size: 0.9em;
}
#item .spec_list > div.height span {
	font-size: 2.4em;
	font-weight: bold;
}
#item .spec_list > div.onetouch {
	width: 20%;
    margin-right: 1.5%;
}
#item .spec_list > div.kyokai {
	width: 22%;
    margin-right: 1.5%;
}
#item .spec_list > div.drawing {
	width: 54%;
	margin-right: 0;
}

#item .sub_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 2em;
}
#item .sub_list div {
	padding: 0.3em 1em;
	background-color: #000;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
	border-radius: 5px;
	margin-right: 1%;
}
#item .sub_list div.bgred {
	background-color: #9A0C30;
}

/** スペックテーブル **/
#item .table_list {
	overflow: scroll;
	margin-bottom: 1em;
}
#item .table_list table {
	border-collapse:separate;
	border-top: 1px solid #000;
	margin-bottom: 1em;
	width: 400%;
}
#item .table_list table tr:nth-of-type(even) {
	background-color: #F3F3F3;
}
#item .table_list table tr th {
	vertical-align: middle;
	background-color: #CCC;
	text-align: center;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 0.5em 1em;
	font-weight: bold;
	line-height: 1.2;
}
#item .table_list table tr th.price {
	background-color: #00B5EB;
	color: #FFF;
	border-right: none;
}
#item .table_list table tr td {
	vertical-align: middle;
	text-align: center;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 0.5em 1em;
	font-weight: bold;
}
#item .table_list table tr td:last-of-type {
	border-right: none;
}
#item .table_list table tr td.big {
	font-size: 1.1em;
}
#item .table_list table tr td span {
	font-size: 0.8em;
	vertical-align: baseline;
}

#item .attention {
	font-size: 0.8em;
	line-height: 1.6;
}

/** アンカー リスト **/
#item .anchor_wrap {
	margin-bottom: 2em;
	display: flex;
	justify-content: center;
}
#item .anchor_wrap .box{
	width: 48%;
	text-align: center;
	margin: 0 1%;
}
#item .anchor_wrap .box .img {
	width: 60%;
	margin: 0 auto;
}
#item .anchor_wrap .box .name {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0.3em;
}
#item .anchor_wrap .box ul {

}
#item .anchor_wrap .box ul li {
	padding: 0.2em 0;
	width: 90%;
	margin: 0 auto;
}
#item .anchor_wrap .box ul li a {
	display: block;
	padding: 0.3em 1em;
	background-color: #000;
	color: #FFF;
	font-weight: bold;
	position: relative;
}
#item .anchor_wrap .box ul li a.shaga {
	background-color: #CCC;
	color: #000;
}

#item .anchor_wrap .box ul li a::after {
    content: "";
    position: absolute;
    right: 5%;
    top: 40%;
    width: 4px;
    height: 4px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    vertical-align: middle;
}
#item .anchor_wrap .box ul li a.shaga::after {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
@media screen and (min-width: 768px) {
	
	#item {
		padding: 4em 0;
	}
	#item img {
	}
	#item .container {
	}
	#item .item_detail {
		margin-bottom: 3em;
	}
	#item .item_detail:last-of-type {
		margin-bottom: 0;
	}
	#item .title_wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#item .title_wrap h4 {
		margin-right: 0.6em;
	}
	#item .title_wrap .sub {
	}
	#item .lead {
		text-align: center;
		font-size: 1.4em;
	}
	#item .pic {
		margin-bottom: 2em;
	}
	#item .spec_list {
		align-items: center;
	}
	#item .spec_list > div {
		width: 23%;
		margin-bottom: 1em;
	}
	#item .spec_list > div.weight {
	}
	#item .spec_list > div.weight span {
	}
	#item .spec_list > div.height {
	}
	#item .spec_list > div.height span {
	}
	#item .spec_list > div.onetouch {
		width: 9%;
	}
	#item .spec_list > div.kyokai {
		width: 11%;
	}
	#item .spec_list > div.drawing {
		width: 26%;
	}
	
	#item .sub_list {
	}
	#item .sub_list div {
	}
	#item .sub_list div.bgred {
	}
	
	/** スペックテーブル **/
	#item .table_list {
	}
	#item .table_list table {
		width: 180%;
	}
	
	#item .table_list table tr {
	}
	#item .table_list table tr:nth-of-type(even) {
	}
	#item .table_list table tr th {
	}
	#item .table_list table tr th.price {
	}
	#item .table_list table tr td {
	}
	#item .table_list table tr td:last-of-type {
	}
	#item .table_list table tr td.big {
	}
	#item .table_list table tr td span {
	}	
	#item .attention {
	}
	
	/** アンカー リスト **/
	#item .anchor_wrap {
		margin-bottom: 3em;
	}
	#item .anchor_wrap .box{
	}
	#item .anchor_wrap .box .img {
		width: 30%;
		margin: 0 auto;
	}
	#item .anchor_wrap .box .name {
		font-size: 1.4em;
		font-weight: bold;
	}
	#item .anchor_wrap .box ul {
		display: flex;
		justify-content: space-between;
	}
	#item .anchor_wrap .box ul li {
		padding: 0 0;
		width: 48%;
		margin: 0;
	}
	#item .anchor_wrap .box ul li a {
	}
	#item .anchor_wrap .box ul li a.shaga {
	}
	
	#item .anchor_wrap .box ul li a::after {
	}
	#item .anchor_wrap .box ul li a.shaga::after {
	}
	
}
@media screen and (min-width: 960px) {
	#item {
		padding: 60px 0;
	}
	#item img {
	}
	#item .container {
		width: 960px;
		max-width: 960px;
	}
	#item .item_detail {
		margin-bottom: 50px;
	}
	#item .item_detail:last-of-type {
		margin-bottom: 0;
	}
	#item .title_wrap {
		margin: 0 0 30px;
		padding: 16px 20px;
	}
	#item .title_wrap h4 {
		font-size: 32px;
	}
	#item .title_wrap .sub {
		font-size: 16px;
	}
	#item .lead {
		margin-bottom: 30px;
		font-size: 24px;
	}
	#item .pic {
		margin-bottom: 30px;
	}
	#item .spec_list {
	}
	#item .spec_list > div {
		width: 26%;
		margin-bottom: 10px;
	}
	#item .spec_list > div.weight {
		padding: 18px 0;
		font-size: 12px;
	}
	#item .spec_list > div.weight span {
		font-size: 32px;
	}
	#item .spec_list > div.height {
		padding: 18px 0;
		font-size: 12px;
	}
	#item .spec_list > div.height span {
		font-size: 32px;
	}
	#item .spec_list > div.onetouch {
		width: 8%;
	}
	#item .spec_list > div.kyokai {
		width: 10%;
	}
	#item .spec_list > div.drawing {
		width: 22%;
	}
	
	#item .sub_list {
		margin-bottom: 30px;
	}
	#item .sub_list div {
		padding: 0.3em 2em;
		font-size: 12px;
		margin-right: 5px;
	}
	#item .sub_list div.bgred {
		background-color: #9A0C30;
	}
	
	/** スペックテーブル **/
	#item .table_list {
		overflow: inherit;
		margin-bottom: 15px;
	}
	#item .table_list table {
		margin-bottom: 10px;
		width: 100%;
	}
	
	#item .table_list table tr {
	}
	#item .table_list table tr:nth-of-type(even) {
	}
	#item .table_list table tr th {
		padding: 0.5em 0.7em;
		font-size: 12px;
	}
	#item .table_list table tr th.price {
	}
	#item .table_list table tr td {
		padding: 0.5em 0.7em;
		font-size: 12px;
	}
	#item .table_list table tr td:last-of-type {
	}
	#item .table_list table tr td.big {
	}
	#item .table_list table tr td span {
	}
	
	#item .attention {
		font-size: 11px;
	}
	
	/** アンカー リスト **/
	#item .anchor_wrap {
		margin-bottom: 50px;
	}
	#item .anchor_wrap .box{
	}
	#item .anchor_wrap .box .img {
		width: 30%;
	}
	#item .anchor_wrap .box .name {
		font-size: 20px;
		font-weight: bold;
	}
	#item .anchor_wrap .box ul {
		justify-content: center;
	}
	#item .anchor_wrap .box ul li {
		padding: 0 0;
		width: 40%;
		margin: 0 1%;
	}
	#item .anchor_wrap .box ul li a {
		font-size: 16px;
	}
	#item .anchor_wrap .box ul li a.shaga {
	}
	
	#item .anchor_wrap .box ul li a::after {
	}
	#item .anchor_wrap .box ul li a.shaga::after {
	}
}


/**************************************************************
	
	追加：動画掲載

****************************************************************/
#contents_movie {
	background-color: #000;
	padding: 3em 0;
}
#contents_movie .movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 1.5em;
}
#contents_movie .movie:last-of-type {
	margin-bottom: 0;
}

#contents_movie .movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
@media screen and (min-width: 768px) {
	#contents_movie {
		padding: 5em 0;
	}

	#contents_movie .movie {
	}
	#contents_movie .movie:last-of-type {
	}
	
	#contents_movie .movie iframe {
	}
}
@media screen and (min-width: 960px) {
	#contents_movie {
		padding: 60px 0;
	}
	#contents_movie .container {
		width: 90%;
		min-width: 960px;
		max-width: 1440px;
		display: flex;
		justify-content: space-between;
	}
	#contents_movie .movie {
		width: 48%;
		padding-top: 0;
		height: auto;
		aspect-ratio: 16/9;
	}
	#contents_movie .movie:last-of-type {
	}
	
	#contents_movie .movie iframe {
	}

}