@charset "utf-8";

/* CSS Document */

/* ------------------------

	追加

------------------------ */

#naps_clm-container *{

	font-feature-settings: normal;

  font-family: Meiryo, fontFamily\.sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

  font-variation-settings: normal;

	line-height: 1.6;

	letter-spacing: 0;

}

#naps_clm-container p{

	font-size: 14px;

	line-height: 1.6;

}

#naps_clm-container img {

    border: 0;

    height: auto;

    max-width: 100%;

    vertical-align: top;

}



#naps_clm-container .e_link,

#naps_clm-container .a_e_link,

#naps_clm-container .e_link a,

#naps_clm-container .a_e_link a{

  line-height: 2;

  font-size: 16px;

}



/* ------------------------

	コンテナ

------------------------ */

/*#naps_clm-container {

	max-width: 1020px;

	background-color: #ffffff;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 50px;

}*/

#slide {

	background: url("/Contents/ImagesPkg/page/helmet_type/slide.jpg");

	background-size: contain;

	width: 100%;

	height: 478px;

	-moz-animation: loop 80s linear infinite;

	animation: loop 80s linear infinite;

}

 @keyframes loop {

 0% {

background-position: 2000px 0;

}

 25% {

background-position: 1500px 0;

}

 50% {

background-position: 1000px 0;

}

 75% {

background-position: 500px 0;

}

 100% {

background-position: 0 0;

}

}

 @-moz-keyframes loop {

 0% {

background-position: 2000px 0;

}

 25% {

background-position: 1500px 0;

}

 50% {

background-position: 1000px 0;

}

 75% {

background-position: 500px 0;

}

 100% {

background-position: 0 0;

}

}

#ht_head, #ht_foot {

	background-color: black;

	padding: 50px 0 80px 0;

}

#ht_body {

	background-color: white;

	padding-bottom: 90px;

}

h1 {

	color: white;

	font-size: 36px;

	font-weight: bold;

	text-align: center;

	padding-bottom: 20px;

}

h2 {

	font-size: 24px;

	font-weight: 700;

	text-align: center;

	border-bottom: 2px solid #333;

	padding-bottom: 5px;

	margin-top: 80px;

}

#choice h2 {

	margin-top: 60px;

}

h3 {

	font-size: 20px;

	font-weight: 600;

}

#ht_head h2, #ht_foot h2 {

	color: white;

	border-bottom: 2px solid white;

}

#ht_head p {

	color: white;

	text-align: center;

	margin-top: 20px;

	font-size: 18px;

	font-weight: 600;

}

.eclink {

	color: #ed1e79;

	border: 2px solid #ed1e79;

	border-radius: 5px;

	text-align: center;

	width: 38%;

	margin-top: 20px;

	margin-left: auto;

	line-height: 2;

}

.eclink a {

	color: #ed1e79;

	text-decoration: none;

	display: block;

}

.eclink a:hover{

	background-color: #ed1e79;

	color: white;

	transition: 0.7s;

	padding: 0;

}

#ht_foot .htlink{

	color: #FFF;

	border: 2px solid #FFF;

	border-radius: 5px;

	text-align: center;

	width: 90%;

	margin-top: 30px;

	margin-left: auto;

	line-height: 2;

}

#ht_foot .htlink a{

	color: #FFF;

	text-decoration: none;

	display: block;

}

#ht_foot .htlink a:hover{

	background-color: #FFF;

	color: #000;

	transition: 0.7s;

	padding: 0;

}

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

.pcnon {

	display: none;

}

.inner {

	width: 1020px;

	margin: 0 auto;

}

#h_type ul, #ht_body ul {

	overflow: hidden;

	margin-top: 20px;

}

#h_type ul li {

	float: left;

	width: 24.25%;

	margin: 1.5% 1% 0 0;

}

#h_type ul li:nth-child(4n) {

	margin-right: 0;

}

#ht_body ul li {

	margin-top: 10px;

	float: left;

}

#ht_body ul li:first-child {

	width: 46%;

	margin-right: 2%;

}

#ht_body ul li:last-child {

	width: 52%;

}

#ht_foot #choice ul, #ht_foot #fitting ul, #s_shop ul, #ht_foot #h_choice ul {

	overflow: hidden;

	margin-top: 20px;

}

#ht_foot #choice ul li:first-child, #fitting ul li:first-child, #h_choice ul li:first-child {

	float: left;

	width: 49%;

	margin-right: 2%;

}

#ht_foot #choice ul li:last-child, #fitting ul li:last-child , #h_choice ul li:last-child{

	float: left;

	width: 49%;

	color: white;

}

#ht_foot #s_shop ul li {

	float: left;

	width: 49%;

	margin: 2% 2% 0 0;

}

#ht_foot #s_shop ul li:nth-child(even) {

	margin: 2% 0 0 0;

}

}



@media screen and (max-width: 767px) {

h1 {

	font-size: 24px;

}

h2 {

	margin-top: 50px;

}

#slide {

	height: 44vh;

	background-size: 200%;

	background-repeat: repeat-x;

}

.inner {

	padding: 0 1%;

}

#ht_head, #ht_foot {

	padding: 50px 0;

}

#ht_head p {

	font-size: 14px;

	font-weight: normal;

	text-align: left;

	padding: 0 3%;

	line-height: 1.3;

}

#ht_head #h_type ul {

	overflow: hidden;

	margin-top: 20px;

	padding: 0 1%;

}

#ht_head #h_type ul li {

	float: left;

	width: 48.5%;

	margin: 3% 3% 0 0;

}

#ht_head #h_type ul li:nth-child(even) {

	margin-right: 0;

}

#ht_body ul, #ht_foot ul {

	margin-top: 20px;

}

#ht_body ul li:first-child, #ht_foot ul li:first-child {

	margin-bottom: 10px;

}

#ht_body ul li h3 {

	text-align: left;

}

#ht_body ul li p {

	line-height: 1.35;

	margin-top: 5px;

}

.eclink,.htlink {

	width: 100%!important;

}

#h_choice h2 {

	margin-top: 0;

}

#s_shop ul li {

	margin-top: 20px;

}

#ht_foot ul li {

	color: white;

}

	#fitting h2{

		text-align: left;

	}

}