.skill {
	background-image: url(https://www.helmet-master.com/image/uv/uv_lp03.jpg);
    height: 690px;
    padding-top: 133px;
    background-size: 100%;
	background-repeat:no-repeat;
}

.skill{
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.skill .swiper-button-prev{
    left: -20px;
}
.skill .swiper-button-next{
    right: -20px;
}
.skill .swiper-pagination{
    bottom: 60px!important;
}
.swiper-container .swiper-pagination{
    bottom: -30px!important;
}
.main-slider{
    width:100%;
}
.faq {
	background-color:#000;
	width:100%;
}
.accordion {
	padding:5% 10%;
}

.toggle {
	display: none;
}
.Label {
	padding: 1em;
	display: block;
	color: #fff;
	background:#333333;
}
.Label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}

.content {
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {
	height: auto;
    padding: 20px;
    color: #fff;
    transition: all .3s;
    background-color: #999999;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}
.bnr_link {
	padding: 5% 10%;
    background-color: #231815;
}



.skill .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 24px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 24px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #fff);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1.0);
}

.skill .swiper-pagination-bullet-active {
	width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 24px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 24px));
}
.skill.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 8px var(--swiper-pagination-bullet-horizontal-gap, 4px) -8px;

}

.ja_mihon a,.al_mihon a{
	width: 269px;
    height:85px;
    display: grid;
}
.ja_mihon {
	margin-top: -82px;
    margin-left: 337px;
    width: 166px;
    height: 52px;
}
.al_mihon {
	margin-top: -51px;
    margin-left: 517px;
    width: 165px;
    height: 52px;
    margin-bottom: 28px;
}
#uv_page .swiper-pagination {
    position: inherit;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
	    background-color: #241917;
	padding-top: 20px;
}
#uv_page .accordion {
	width: 100%;
} 



/* ページネーション共通のスタイル */
.swiper-pagination-bullet {
  background-color: #fff;
  color: #000;
  font-size: 16px;
  height: 24px;
  line-height: 1.5;
  transition: transform .2s linear;
  width: 24px;
}
/* 現在のページネーションのスタイル */
.swiper-pagination-bullet-active {
  background-color: #999;
  color: #000;
  transform: scale(1);
}

.skill .swiper-pagination-bullet-active {
background: var(--swiper-pagination-bullet-inactive-color, #999);
}

/* ページネーションの余白(位置) */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px 30px;
}

#uv_page h2 {
    font-size: 30px;
    color: #575d68;
    margin: 1em 0;
    padding-bottom: 0.6em;
    font-weight: bold;
}

section.highlight .col2 {
    width: 48%;
    float: left;
    margin: 1%;
}

section.highlight .col2:nth-of-type(2n+1) {
    clear: both;
}
.iframe-aspect-padding {
    max-width: 100%;
    padding: 40px 20px;
    background-color: #000;
}
.iframe-aspect-padding .inn {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56%;
}
.iframe-aspect-padding iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#guide-movie {
    background-image: url(https://www.daimatsu-netstore.com/wp-content/uploads/what_mobie.jpg);
    padding: 15% 5% 5%;
    background-size: cover;
    background-repeat: no-repeat;
}


#guide-movie .iframe-wrap {
    padding-top: 56.25%;
    width: 100%;
    position: relative;
}

#guide-movie .iframe-wrap  iframe{
width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;	
}
.helmet-pickup {
    width: 100%;
    padding: 2% 10% 5%;
}


.order {
    max-width: 100%;
    background: #231815;
    padding: 30px 0px;
}
.order .step .txt {position:relative;z-index:10;width:94%;margin:auto;position:relative;text-align: center;color:#fff;font-size:22px;padding-top:10px;margin-bottom:15px;}
.order .step .txt3 {position:relative;z-index:10;width:94%;margin:auto;position:relative;text-align: center;color:#fff;font-size:16px;padding-top:10px;margin-bottom:10px;}
.order .step .txt2 {position:relative;z-index:10;width:94%;margin:auto;position:relative;text-align: center;color:#fff;font-size:16px;padding-top:10px;margin-bottom:15px;}
.order .step .note {position:relative;z-index:10;width:94%;margin:auto;color:#D35480;font-weight:bold;font-size:21px;margin-bottom:15px;}
.order .step .note:before {content:"ご注意";background:#D35480;color:#fff;padding:5px;}
.order .step .photo {position:relative;text-align:center;padding-bottom:15px;}
.order .step .photo1{width:94%;margin:0 auto 20px;background:url(https://www.daimatsu-netstore.com/uvhelmet/img/bg1.jpg) no-repeat top;padding:0px 0px 0px 0;}
.order .step  .maker {z-index:10;position:relative;width:94%;margin:auto;display:flex;flex-wrap: wrap;justify-content: space-between;align-items:start;}
.order .step  .maker dl {width:48%;background:#fff;padding:0 15px;}
.order .step  .maker dl  dt {text-align:center;padding-top:10px;font-size:14px;font-weight:bold;color:#282F39;margin-bottom:15px;}
.order .step  .maker dl  dt  img {display:block;margin:auto;}
.order .step  .maker dl  dd a {display:block;width:150px;margin:0 auto 15px;color:#282F39;font-size:16px;text-decoration:underline;}
.order .step  .maker dl  dd a span:before {content:"▶︎";font-size:12px;}
.order .step  .maker dl  dd .stit {background:#282F39;color:#fff;display:block;padding:5px;font-weight:bold;font-size:16px;text-align:center;margin-bottom:15px;}
.order .step  .maker2 {margin-top:20px;padding:15px;background:#fff;}
.order .step  .maker2 > div {width:49%;}
.order .step  .maker2 ul {display:flex;flex-wrap: wrap;justify-content: space-between;align-items:stretch;}
.order .step  .maker2 ul li {width:31%;}
.order .step  .maker2 ul li img {border:1px solid #ccc4c2;}
.order .step .maker2 .stit {background: #282F39;color: #fff;display: block;padding: 5px;font-weight: bold;font-size: 16px;text-align: center;    margin-bottom: 15px;}
.order .step .maker2 ul li a {display: block;margin: 0 auto 15px;color: #282F39;font-size: 16px;text-decoration: underline;line-height:1.4;}
.order .step .maker2 ul li a span:before {content:"▶︎";font-size:12px;}

.order .step  .maker {align-items:start;}
.order .step  .maker .left {width:66%;display:flex;flex-wrap: wrap;justify-content: space-between;align-items:stretch;}
.order .step  .maker .right {width:31%;background:#fff;}
.order .step  .maker .left dl {width:48%;}
.order .step  .maker .right dl {width:100%;}
.order .step  .maker2 {width:100%;}
.order .step .maker2 > div {width:100%;}
.order .step .maker2 > div p {    width: 100%;    margin-bottom: 0px;}
.order .step .maker2  > p {text-align:center;}
.order .step .maker2 .left ul li {    width: 48%;}
.order .step .maker2 .right  {width:32%;}
.order .step .maker2 .right ul li {width: 100%;}
.order .title {margin-bottom:0 !important;}
.order .step .maker2 ul li a span {display:block;}
.font .mihon  > a {width:25%;}
.font .mihon  > a img {width:100%;}
.order .step .maker2 ul {    margin: 0;    padding: 0;}
.order .step .pricearea h3 {text-align:left;color:#000;}
.order .title img {vertical-align: bottom;}
 .order .step .maker .left dl {margin-top:0;}
 .order .step .maker dl dt {width:100%;}
 .order .step .maker dl dd {width:100%;    padding: 0;    margin: 0;}
.order .step .maker2 ul li {list-style:none;}
 .order .step .maker2 dl dt {width:100%;}
 .order .step .maker2 dl dd {width:100%;    padding: 0;    margin: 0;}

.order .step  .maker3 {margin-top:20px;padding:15px;background:#fff;}
.order .step  .maker3 > div {width:49%;}
.order .step  .maker3 ul {display:flex;flex-wrap: wrap;justify-content: space-between;align-items:stretch;}
.order .step  .maker3 ul li {width:31%;}
.order .step  .maker3 ul li img {border:1px solid #ccc4c2;}
.order .step .maker3 .stit {background: #282F39;color: #fff;display: block;padding: 5px;font-weight: bold;font-size: 16px;text-align: center;    margin-bottom: 15px;}
.order .step .maker3 ul li a {display: block;margin: 0 auto 15px;color: #282F39;font-size: 16px;text-decoration: underline;line-height:1.4;}
.order .step .maker3 ul li a span:before {content:"▶︎";font-size:12px;}
.order .step  .maker3 {width:100%;}
.order .step .maker3 > div {width:100%;}
.order .step .maker3 > div p {    width: 100%;    margin-bottom: 0px;}
.order .step .maker3  > p {text-align:center;}
.order .step .maker3 .left ul li {    width: 100%;}
.order .step .maker3 .right  {width:32%;}
.order .step .maker3 .right ul li {width: 48.5%;}
.order .step .maker3 ul li a span {display:block;}
.order .step .maker3 ul {    margin: 0;    padding: 0;}
.order .step .maker3 ul li {list-style:none;}
 .order .step .maker3 dl dt {width:100%;}
 .order .step .maker3 dl dd {width:100%;    padding: 0;    margin: 0;}
.order .step .maker3 {margin-top: 20px; padding: 15px; background: #fff;}
.order .step .maker3 .left {
    width: 32%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.order .step .maker3 .right {
    width: 66%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}



























@media screen and (max-width: 768px) {
	.skill {
	background-color: #231816;
    height: 111vh;
    padding-top: 0vh;
}

.skill{
    position: relative;
    width: 100%;
    margin: 0 auto;
}
	.skill .swiper-pagination{
    bottom: 20px!important;
}
	.skill .wrap {
		width:100%;
		margin:0;
	}
	.compare {
		    width: 100%;
    padding: 10% 5%;
    background-image: url(https://www.helmet-master.com/image/uv/sp-lp-17.jpg);
    overflow: scroll;
    background-size: 100%;
	}
	.price {
		width: 600px;
    overflow: scroll;
	}
	.ja_mihon a,.al_mihon a{
	width: 42vw;
    height: 13vw;
    display: grid;

}
.ja_mihon {
    margin-top: -18vw;
    margin-left: 7vw;
    width: 42vw;
    height: 13vw;
    margin-bottom: 5%;
}
.al_mihon {
	margin-top: -18vw;
    margin-left: 52vw;
    width: 42vw;
    height: 13vw;
    margin-bottom: 5%;
}
	.order_btn {
		margin-top: -24vw;
    margin-left: 11vw;
    width: 78vw;
    height: 20vw;
    margin-bottom: 4vw
	}
	.order_btn a {
	width: 78vw;
    height: 20vw;
    display: grid;
	}
	.fax_btn {
		margin-top: -18vw;
    margin-left: 16vw;
    width: 68vw;
    height: 10vw;
    margin-bottom: 4vw;
	}
	.fax_btn a {
	width: 68vw;
    height: 10vw;
    display: grid;
	}
	.swiper-slide img {
	width: 100%;
}
	.iframe-aspect-padding {
    padding: 2em 1em;
}
.order .step h3 i {    top: -40px;}
.order .step h3{padding-left:65px;    font-size: 17px;padding-top:0;}
.order .step .txt {    padding-left: 65px;    font-size: 14px;}
.order .step .note {    font-size: 10px;}
.order .step .maker dl {width:100%;margin:0 auto 15px;}
.order .step .maker dl dd {display:flex;flex-wrap: wrap;justify-content: space-between;align-items:stretch;}
.order .step .maker dl dd span {width:100%;}
.order .step .maker dl dd a {display:block;width:48%;}
.order .step .maker2 {margin-top:15px;padding:15px;background:#fff;}
.order .step .maker2 > div {width:100%;}
.order .step .maker2 ul {justify-content: space-around;}
.order .step .maker2 ul li {width:48%;}
.order .step .photo {width:94%;margin:-15px auto 0;}
	
.order .step  .maker .left {width:100%;display:block;}
.order .step  .maker .right {width:100%;}
.order .step  .maker .left dl {width:100%;}
.order .step h3 {padding:15px;text-align:left;margin-bottom:15px;}
.order .step .txt {padding:15px;text-align:left;}
.order .step .maker2 .right ul li {width: auto;max-width: 50%;}

	
	
	
	
	
	
}