@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 .e_link a {

    line-height: 2;

}

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

	#naps_clm-container .mt0 {

		margin-top: 30px!important;

	}

}





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

}

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

	コンテナ

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

/*#naps_clm-container {

	max-width: 1020px;

	background-color: #ffffff;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 50px;

}*/

#bgmv {

	position: relative;

	overflow: hidden;

	height: 51.7vh;

}

/*h1 {

	position: absolute;

	width: 100%;

	margin: auto;

	left: 0;

	right: 0;

	top: 16vh;

	z-index: 1;

}*/

/*h1{

	position: absolute;

	width: 100%;

	top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

	z-index: 1;

}*/

#naps_clm-container p {

	line-height: 1.3;

}

#naps_clm-container h1 {

	width: 100%;

	position: absolute;

	top: 50%;

	left: 50%;

	-webkit-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%); /*上下左右中央寄せ*/

	text-align: center;

	z-index: 1;

}

video {

	min-height: 500px;

	width: 100%;

	transform: translateY(-30%);

}

#naps_clm-container h2 {

	position: relative;

	padding: .25em 0.5em .25em 1.25em;

	border: 1px solid #ccc;

	font-size: 28px;

	font-weight: 700;

	margin-top: 30px;

	background-color: white;

}

#naps_clm-container h2::after {

	position: absolute;

	top: 0.3em;

	left: .5em;

	content: '';

	width: 7px;

	height: -webkit-calc(100% - 1em);

	height: calc(100% - 0.5em);

	background-color: #5ab4bd;

	border-radius: 4px;

}

#c_head, #safety, #maker {

	background-color: #f2f2f2;

	padding: 20px 0 50px 0;

}

#c_head {

	padding-top: 0;

}

#feature, #use {

	padding: 20px 0 50px 0;

}

#naps_clm-container h3 {

	font-size: 22px;

	font-weight: 600;

}

#naps_clm-container h4 {

	font-size: 20px;

	font-weight: 600;

}

#naps_clm-container h3.dot {

	text-align: center;

	width: 90%;

	border-bottom: 1px dotted #333;

	padding-bottom: 5px;

	margin: 30px auto 0 auto;

}

#c_headb .lead {

	font-size: 18px;

	font-weight: 500;

	margin-top: 20px;

}

#c_headb ul, #feature ul, .m_ul, .s_ul, .u_item, #maker ul li dl {

	overflow: hidden;

	margin: 30px 0 0 0;

}

#c_headb ul li {

	float: left;

	width: calc(97% / 4);

	margin-right: 1%;

}

#c_headb ul li:last-child {

	margin-right: 0;

}

#feature ul li {

	float: left;

	width: 49%;

	margin: 50px 2% 0 0;

}

#feature ul li h3 {

	text-align: center;

}

#feature ul li dl {

	overflow: hidden;

}

#feature ul li dl dt {

	float: left;

	width: 55%;

	margin-right: 2%;

}

#feature ul li dl dd {

	float: left;

	width: 43%;

}

#feature .cau {

	text-align: right;

	font-size: 12px;

	margin-top: 30px;

}

.e_link {

	color: #ed1e79;

	border: 2px solid #ed1e79;

	border-radius: 5px;

	text-align: center;

	width: 496px;

	margin-top: 20px;

	margin-left: auto;

	line-height: 2;

}

.e_link a {

	color: #ed1e79;

	text-decoration: none;

	display: block;

}

.e_link a:hover {

	background-color: #ed1e79;

	color: white;

	transition: 0.7s;

	padding: 0;

}

.m_ul li:first-child {

	float: left;

	width: 41%;

	margin-right: 2%;

}

.m_ul li:last-child {

	float: left;

	width: 57%;

}

#safety b {

	color: #e20000;

	font-weight: 600;

}

.s_ul li {

	float: left;

	width: 49%;

	margin: 30px 2% 0 0;

}

.s_ul li dl {

	overflow: hidden;

}

.s_ul li dl dt {

	float: left;

	width: 33%;

	margin-right: 2%;

}

.s_ul li dl dd {

	float: left;

	width: 65%;

}

#naps_clm-container #bg_way {

	background-image: url(/Contents/ImagesPkg/page/helmet_choice/u_bg.jpg);

	background-repeat: no-repeat;

	background-size: cover;

	padding: 30px 0;

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	margin-top: 30px;

}

#naps_clm-container #bg_way p {

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	line-height: 1.35;

}

.u_nav {

	margin-top: 30px;

	overflow: hidden;

	border-bottom: 3px solid #5ab4bd;

}

.u_nav li {

	float: left;

	width: 25%;

	background-color: #d9d9d9;

	line-height: 1.8;

	border-right: 1px solid #aaa;

	font-size: 22px;

	font-weight: 600;

	padding-top: 3px;

}

.u_nav li a {

	color: #565656;

	text-align: center;

	text-decoration: none;

	display: block;

}

.u_nav li a:hover {

	opacity: 0.5;

}

.u_nav li:last-child {

	border-right: none;

}

#u_touring .u_nav li:first-child, #u_city .u_nav li:nth-child(2), #u_sport .u_nav li:nth-child(3), #u_off .u_nav li:last-child {

	background-color: #5ab4bd;

}

#u_touring .u_nav li:first-child a, #u_city .u_nav li:nth-child(2) a, #u_sport .u_nav li:nth-child(3) a, #u_off .u_nav li:last-child a {

	color: white;

}

.u_item {

	padding: 3px;

}

.u_item li {

	float: left;

	width: calc(96% / 3);

	margin-right: 2%;

	box-shadow: 1px 1px 3px 3px #ccc;

	padding: 1%;

}

.u_item li .e_link {

	width: 98%;

	text-align: center;

	margin-right: auto;

}

#maker ul li {

	margin-top: 30px;

}

#maker ul li:first-child {

	margin-top: 0;

}

#maker ul li dl dt {

	float: left;

	width: 27%;

	margin-right: 2%;

}

#maker ul li dl dd {

	float: left;

	width: 71%;

}



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

.inner {

	width: 1020px;

	margin: 0 auto;

}

#naps_clm-container h1 img {

	width: 100%;

}

#safety .e_link {

	width: 90%;

}

#safety .mt1 {

	margin-top: 40px;

}

#safety .mt2 {

	margin-top: 95px;

}

#feature ul li:nth-child(even) {

	margin-right: 0;

}

#feature ul li:nth-child(-n+2) {

	margin-top: 0;

}

#maker ul li:first-child .e_link {

	margin-top: 0;

}

#maker ul li:nth-child(n+2):nth-child(-n+6) .e_link {

	margin-top: 38px;

}

#maker ul li:nth-child(8) .e_link {

	margin-top: 56px;

}

.s_ul li:nth-child(-n+2) {

	margin-top: 0;

}

.s_ul li:nth-child(even) {

	margin-right: 0;

}

.u_item li:nth-child(3n) {

	margin-right: 0;

}

}



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

#naps_clm-container, img {

	width: 100%;

}

#bgmv {

	height: 25vh;

}

#naps_clm-container h1 {

	width: 180%;

	object-fit: cover;

}

#title {

	width: 100%;

	overflow: hidden;

}

.inner {

	width: 98%;

	margin: 0 1%;

}

#c_headb .lead {

	font-size: 16px;

}

#c_headb ul li {

	width: 48%;

	margin: 2% 2% 0 0;

}

#c_headb ul li:nth-child(even) {

	margin-right: 0;

}

#naps_clm-container h2 {

	font-size: 24px;

	padding: .3em 0.5em .25em 1.25em;

}

#naps_clm-container h3,

#naps_clm-container h4 {

	font-size: 18px;

}

#feature ul li {

	float: none;

	width: 100%;

	margin-top: 40px;

}

#feature ul li:first-child {

	margin-top: 0;

}

.m_ul li:first-child {

	float: none;

	width: 90%;

	margin: 20px auto 0 auto;

}

.m_ul li:nth-child(2n) {

	float: none;

	width: 100%;

	margin: 10px auto 0 auto;

}

#naps_clm-container.mt0 {

	margin-top: 0!important;

}

#naps_clm-container .e_link {

	width: 98%;

	line-height: 2.7;

	margin-right: auto;

}

#naps_clm-container .e_link a{

	line-height: 2.7;

}

.s_ul li {

	float: none;

	width: 100%;

	margin: 20px auto 0 auto;

}

.s_ul li dl dt {

	padding-top: 5px;

}

.s_ul li:first-child {

	margin-top: 0;

}

#naps_clm-container #bg_way {

	text-align: left;

	font-size: 16px;

	font-weight: 500;

	padding: 20px 5px;

}

#naps_clm-container #bg_way p{

	text-align: left;

	font-size: 16px;

	font-weight: 500;

}

.u_nav {

	margin-top: 50px;

}

.u_nav li {

	width: 50%;

	border-right: 2px solid #aaa;

	border-bottom: 2px solid #aaa;

}

.u_nav li:nth-child(even) {

	border-right: none;

}

.u_nav li:nth-child(3), .u_nav li:nth-child(4) {

	border-bottom: none;

}

.u_item li {

	float: none;

	width: 98%;

	height: auto;

	margin: 20px auto 0 auto;

	padding: 2% 2% 3% 2%;

}

.u_item li:first-child {

	margin-top: 0;

}

#maker ul li {

	margin-top: 50px;

}

#maker ul li:first-child {

	margin-top: 0;

}

#maker ul li dl dt {

	float: none;

	width: 80%;

	margin: 0 auto;

}

#maker ul li dl dd {

	float: none;

	width: 100%;

	margin-top: 10px;

}

}



@media screen and (min-width:801px) and (max-width:1000px) {

#bgmv {

	height: 35vh;

}

}



@media screen and (min-width:1001px) and (max-width:1200px) {

#bgmv {

	height: 40vh;

}

}