@charset "utf-8";
/* CSS Document */
body,html {

}
.lp-main { font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", 'メイリオ', Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  width: 100%;
  font-size: 100%;
}
.lp-main a {

}
.lp-main a img:hover {
 opacity: 0.7; filter: brightness(110%);
}


 /* page-link
----------------------------------------------*/
.lp-main .page-link {
  margin-top: 53px;
}


 /* タブ切り替え
----------------------------------------------*/
.tab-wrap ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 90%;
  max-width: 1080px;
  margin:0 auto;
}
 
.tab-btn {
  padding: 10px 0;
  text-align: center;
  list-style: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.4;
}
.tab-btn .category {
  display: block;
  font-size: 1rem;
}
 
.tab-btn.show {

}
 
.tab-contents {
  display: none;
}
 
.tab-contents.show {
  display: block;
}


 /* 見出し共通
----------------------------------------------*/
.lp-main  h2.common-tl {
  margin-bottom: 60px;
}

#point.block {
  padding-bottom: 9vw;
}

 /* #logo
----------------------------------------------*/
.lp-main header#logo {
  height: auto;
  padding: 1vw 0;
  text-align: center;
}
.lp-main header#logo img {
  width: 46%;
  max-width: 694px;
}

 /* page-nav
----------------------------------------------*/
.lp-main .page-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 70%;
  max-width: 1066px;
  margin: 0 auto;
}
.lp-main .page-nav li {
  display: flex;
   justify-content: center;
  align-items: center;
  width: 19%;
  margin: 1.5vw 0;
  padding: 0;
  border-right: 1px solid #fff;
}
.lp-main .page-nav li:nth-last-child(1) {
  border-right: none;
}
.lp-main .page-nav li a {
  width: 100%;
  position: relative;
 display:block;
  text-align: center;
  line-height: 1;
  font-size: 1.4rem;
}

.lp-main .page-nav li a:hover {
 opacity: 0.7; filter: brightness(110%);
}

 /* #highright 
----------------------------------------------*/
#highright h2.common-tl img {
  width: 7.55vw;
  max-width: 115px;
}
#highright .tab-btn {
  width: 24.5%;
}


 /* #lineup
----------------------------------------------*/
#lineup h2.common-tl img {
  width: 9.41vw;
  max-width: 143px;
}
#lineup .tab-btn {
  width: 19.5%;
}
#lineup .tab-btn {
  text-align: left;
}
#lineup .caution {
  width: 88%;
  max-width: 1336px;
  margin: 5vw auto 0;
  font-size: 11px;
  line-height: 1.4;
}


 /* #safety
----------------------------------------------*/
#safety h2.common-tl img {
  width: 7.17vw;
  max-width: 109px;
}
#safety .caution {
  font-size: 13px;
  line-height: 1.4;
}
#safety .caution .icon-coution {
  max-width: 17px;
  margin-right: .5rem;
  line-height: 1;
  vertical-align: middle;
}


 /* #color
----------------------------------------------*/
#color h2.common-tl img {
  width: 9.34vw;
  max-width: 142px;
}
#color .caution {
  width: 60%;
  max-width: 800px;
  margin: 3vw auto 0;
  font-size: 11px;
  line-height: 1.4;
}

 /* special
----------------------------------------------*/
#special h2.common-tl img {
  width: 9.08vw;
  max-width: 138px;
}

.lp-main #special {
  padding-bottom: 100px;
}
.lp-main #special .special__present {
  margin-top: -30px;
  margin-bottom: 50px;
}
.lp-main #tryal {
  padding-bottom: 40px;
  background: url("../../img/bg-step__pc.jpg") no-repeat center top;
}
.lp-main #tryal .tryal__step {
}
.lp-main .btn_link {
  display: block;
  max-width: 692px;
  margin: 0 auto;
  margin-top: 90px;
  background: #fff;
}
.lp-main #tryal .btn_link {
  margin-top: 40px;
}
.lp-main #tryal .tryal__notes {
  padding-top: 80px;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
}


 /* スクロールイベント
----------------------------------------------*/

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  transform: translate(0, 30px);
}
.fade-left {
  transform: translate(-500px, 0);
  overflow: hidden;
}
.fade-right {
  transform: translate(500px, 0);
  overflow: hidden;
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

 /* color スライダー
----------------------------------------------*/
.lp-main #color #slidercolor{
	position: relative;
}

.lp-main #color #slidercolor .car{
  width: 100%;
  max-width: 1520px;
}



/*スライド色ボタン配置*/
.lp-main #slidercolor-btn{
  position: relative;
  max-width: 1000px;
	margin: 2% auto;
}


.lp-main .mono_txt img, .lp-main .two_txt img{
	vertical-align: top;
}

.lp-main .two_txt{
	position: absolute;
  max-width: 110px;
	height: auto;
	top: 6px;
	left: 50px;
}

.lp-main .mono_txt{
	position: absolute;
  max-width: 125px;
	height: auto;
	top: 6px;
	left: 440px;
}

.lp-main #slidercolor-2{
	width: 100%;
  max-width: 1000px;
	height: 50px;
  position: relative;
}

.lp-main #slidercolor-2 li{
	position: absolute;
	width: 30px;
	height: 30px;
}

.lp-main #slidercolor-2 li img{
	width: 30px;
	height: 30px;
}

.lp-main #slidercolor-2 .slick-track{
  width: 1000px !important;
	height: 50px;
}
/* 起点0から●の幅30px + 20px */
.lp-main #slidercolor-2 li:nth-child(1){
	top: 0;
	left: 0;
}

.lp-main #slidercolor-2 li:nth-child(2){
	top: 0;
	left: 50px;
}

.lp-main #slidercolor-2 li:nth-child(3){
	top: 0;
	left: 100px;
}

.lp-main #slidercolor-2 li:nth-child(4){
	top: 0;
	left: 400px;
}

.lp-main #slidercolor-2 li:nth-child(5){
		top: 0;
	left: 450px;
}

.lp-main #slidercolor-2 li:nth-child(6){
		top: 0;
	left: 500px;
}

.lp-main #slidercolor-2 li:nth-child(7){
		top: 0;
	left: 550px;
}

.lp-main #slidercolor-2 li:nth-child(8){
	top: 0;
	left: 600px;
}

.lp-main #slidercolor-2 li:nth-child(9){
		top: 0;
	left: 650px;
}

.lp-main #slidercolor-2 li:nth-child(10){
		top: 0;
	left: 700px;
}

.lp-main #slidercolor-2 li:nth-child(11){
		top: 0;
	left: 750px;
}


/*スライドボタン配置ここまで*/

.lp-main #slidercolor-2 li img:hover{
	cursor: pointer;
	cursor: hand;
	opacity: 0.8;
}

.lp-main #slidercolor-2 li.slick-current:after{
	content: '';
	display: inline-block;
	cursor: pointer;
	width: 65px;
	height: 65px;
background-image: url("https://sagad-rocky-special.com/img/slide/btn_on.png");
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: -2px;
	left: 7px;
	z-index: 5;
}

 /* サイドナビ調整　*/
.sideMenu .sideMenuList>li>a p {
  font-size: 12px;
}
.sideMenu .sideMenuList>li>a span:before {
  font-size: 14px;
}

.sideMenu .sideMenuList>li>a {
  width: 6rem;
  max-width: 90px;
  height: 4rem;
  max-height: 72px;
}