@charset "utf-8";

/* sensor用独自style */
:root {}

.sensor article {
padding-top: 60px;
}

/* COMMON */
hr.line-5px {
border-width: 5px;
border-color: var(--palegray);
}
.sensor .fs22 {font-size:clamp(16px,3.6vw,21px);}
.sensor .fs20 {font-size:clamp(15px,3.3vw,19px);}
.sensor .fs18 {font-size:clamp(14px,3vw,17px);}

/* sensor_fv */
.sensor_fv {
position: relative;
height:min(77vw, 380px);
background-repeat: no-repeat;
background-position: right;
background-size: auto 110%;
}
.sensor_fv.motion {
background-image: url(../images/motion/motion-fv_bg-sp.jpg);
margin-bottom: min(70vw, 270px);
}
.sensor_fv.vibration {
background-image: url(../images/vibration/vibration-fv_bg-sp.jpg);
margin-bottom: min(56vw, 300px);
}
.sensor_fv > .wrapper {
align-items: flex-end;
translate: 0 198px;
justify-content: flex-start;
}
.sensor_fv.vibration > .wrapper {
translate: 0 175px;
}
.sensor_fv .col5 {
padding-right: 10px;
padding-left: 0;
width: min(31%,195px);
box-sizing: border-box;
}
.sensor_fv .col7 {
padding-left: 0;
padding-top: 0;
padding-bottom: 20px;
width: min(60%,262px);
box-sizing: border-box;
}
.sensor_fv.vibration .col7 {
padding-bottom: 3px;
}
.sensor_fv.motion .font_round {
margin-top: clamp(30px,6vw,65px);
}
.sensor_fv.vibration .font_round {
margin-top: clamp(12px,5vw,65px);
}

.sensor_fv .font_round h2 {
font-size:clamp(20px,3.2vw,34px);
padding-bottom: min(3vw,10px);
font-weight: 600;
}
.sensor_fv.vibration .font_round h2 {
letter-spacing: -0.03em;
}
.sensor_fv .font_round p {
font-size:clamp(16px,2.6vw,20px);
}
.sensor_fv .bottom_wrap {
padding-top: 0;
padding-right: 60px;
}
.sensor_fv .fv_btn_mamolico {
display: inline-block;
margin-top: min(4vw , 30px);
width: min(80vw , 480px);
}




@media screen and (min-width:768px) {
.sensor_fv {
height:min(80vw, 560px);
background-position: center center;
}
.sensor_fv.vibration {
background-image: url(../images/vibration/vibration-fv_bg.jpg);
}
.sensor_fv.motion {
background-image: url(../images/motion/motion-fv_bg.jpg);
}
.sensor_fv > .wrapper {
align-items: flex-end;
translate: 0 min(40vw,260px);
}
.sensor_fv.vibration > .wrapper {
translate: 0 245px;
}
.sensor_fv .col5 {
width: var(--col5);
}
.sensor_fv .col7 {
width: var(--col7);
padding-bottom:min(16vw,110px);
}
.sensor_fv.vibration .col7 {
padding-bottom:min(14vw,95px);
}
.sensor_fv .font_round p {
font-size:min(1.9vw,20px);
}
.sensor_fv.vibration .font_round h2 {
letter-spacing: normal;
}
.sensor_fv .bottom_wrap {
display: none;
}

}/* min-width:768px */

@media screen and (min-width: 768px) and (max-width: 850px) {
.sensor_fv > .wrapper {
translate: 0 min(60vw,320px);
}
.sensor_fv.vibration > .wrapper {
translate: 0 min(36vw,290px);
}
}


@media screen and (min-width:1080px) {
.sensor_fv {
background-size: cover;
}
.sensor_fv .col5 {
padding-right: 0;
}
.sensor_fv .col7 {
translate: -30px 0;
padding-left:0;
padding-bottom: 60px;
}
.sensor_fv > .wrapper {
translate: 0 min(27vw,180px);
}
.sensor_fv.vibration > .wrapper {
translate: 0 min(25vw,250px);
}
}/* min-width:1080px */




/* OUTLINE */
.container.outline {
padding-top: 0;
}
.container.outline#vibration_outline {
padding-bottom: clamp(60px, 12vw, 120px);
}
.outline#vibration_outline .box_white-round,
.outline#motion_outline .box_white-round {
background-color: var(--mamolico-yellow30);
}
.sensor .outline .ouline_box_check {
background: #fbf8ed;
}



/* INTERVAL */
.interval_vibration p > span {
display: block;
text-align: center;
font-size:min(5vw,32px);
line-height: 1.5;
font-weight: 600;
}
.interval.interval_vibration {
background-image: url(../images/vibration/interval_vibration-bg.jpg);
background-position: right -90px center;
}

@media screen and (min-width:768px) {
.interval.interval_vibration {
background-position: right center;
background-size: cover;
}
}



/* SENSOR FEATURE */
.sensor-feature .head42 {
line-height: 1.6;
text-align: center;
}
.sensor-feature .fs22 {
font-size:clamp(18px,3.6vw,22px);
}
.sensor-feature .bg-gray {
padding: min(8vw,50px);
box-sizing: border-box;
}
.sensor-feature .wrapper.line {
padding-top: min(20vw,140px);
}
.sensor-feature .wrapper.line:before {
top:min(10vw,70px);
background: #f1f4f5;
}

@media screen and (min-width:768px) {
.sensor-feature .head42 {
text-align:left;
}
}/* min-width:768px */




/* sensor-feature motion" */
.head_motion-feature {
padding: min(12vw,120px) min(6vw,90px);
background: url(../images/motion/head_motion-feature_bg.jpg) no-repeat right center;
background-size: cover;
color: #FFF;
font-family: var(--font-family-round);
font-size:clamp(24px,6vw,42px);
font-weight: 600;
border-radius: min(4vw,20px);
}
.head_motion-feature + .flex {
position: relative;
translate: 0 -15px;
}
.head_motion-feature + .flex > figure {
padding-left: 20px;
}
.head_motion-feature + .flex > p {
font-size: clamp(13px,2vw,22px);
line-height: 1.4;
padding-bottom: min(3vw,30px);
}

@media screen and (min-width:768px) {
.head_motion-feature + .flex {
position: relative;
translate: 0 -100px;
width: var(--col10);
margin: 0 auto -100px;
}
.head_motion-feature + .flex > figure {
padding-left: 0;
}
.head_motion-feature + .flex > p {
line-height: 1.7;
}

}/* min-width:768px */



/* SETTING */
.setting_nav {
display: flex;
justify-content: center;
gap: min(4vw,40px);
margin: 0 0 min(8vw,30px) ;
}
.setting_nav > li {
padding: min(2vw,10px);
width: min(36vw,180px);
background: #f4f6f7;
border-radius: 40px;
font-family: var(--font-family-round);
font-weight: 600;
font-size:min(4.8vw , 22px);
text-align: center;
cursor: pointer;
transition: opacity .2s;
}
.setting_nav > li.current {
background: var(--necolico-red);
color: #FFF;
cursor: default;
}
.setting_nav > li:hover {
opacity: .8;
}
.setting_nav > li.current:hover {
opacity: 1;
}
.setting_detail {
padding: min(6vw,50px);
box-sizing: border-box;
background: var(--palegray);
text-align: center;
}
.caution_icon {
position: relative;
display: inline-block;
padding-left: min(6vw,35px);
font-size:min(2.6vw,13px);
}
.caution_icon:before {
position: absolute;
top:0;
left:0;
content: "";
display: block;
width: min(4.6vw,25px);
height: 22px;
background: url(../images/icon_caution.svg) no-repeat top center;
background-size: 100%;
}

@media screen and (min-width:768px) {
.setting_nav {
margin-top: min(8vw,30px);
}
}/* min-width:768px */




/* MOTION SETTING */
.motion-setting li:nth-child(n + 2) {
margin-top: min(9.5vw,30px);
}


@media screen and (min-width:768px) {
.motion-setting ul {
padding-top:min(8vw,50px);
}
.motion-setting ul li {
width: min(48%,480px);
}
.motion-setting li:nth-child(even) {
text-align: right;
}
.motion-setting li:nth-child(n + 2) {
margin-top: 0;
}
.motion-setting li:nth-child(n + 3) {
margin-top: min(5.5vw,70px);
}
}


/* VIBRATION / MOTION  SPEC */
.spec-slider .slick-slide {
opacity: 1;
}


/* slick */
.spec-slider .slick-dots li {
margin: 0 3px;
}
.spec-slider .slick-dots li button:before {
content: "" !important;
background: var(--lightgray);
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
opacity: 1;
}
.spec-slider .slick-dots li.slick-active button:before {
background: var(--mamolico-red);
}
@media screen and (max-width: 768px) {
.spec-slider .slick-dots {
bottom: -30px;
}
}/* max-width: 768px */



.list_price {
display: inline-block;
width: min(80%,340px);
border-top: 1px solid var(--lightgray);
}
.list_price li {
display: flex;
align-items: center;
gap:10px;
border-bottom: 1px solid var(--lightgray);
font-size: var(--18px);
font-family: var(--font-family-round);
}
.list_price li > span {
display: block;
padding: min(2vw,10px) 0;
}
.list_price span > strong {
display: inline-block;
font-size: 156%;
}
.list_spec {
border-top: 1px solid var(--lightgray);
}
.list_spec li {
display: flex;
gap:10px;
padding: min(2.6vw,8px) 0;
border-bottom: 1px solid var(--lightgray);
font-size:min(3.4vw,17px);
}
.list_spec li > strong {
width: 50%;
}
.list_spec li > span {
width: 50%;
}



/* motion spec */
.motion-spec .set_img figure {
width:min(78%,290px);
}
.motion-spec .set_img figure + figure {
width:100%;
}




@media screen and (min-width:768px) {
.list_spec li > strong {
width: 40%;
}
.list_spec li > span {
width: 40%;
}
.motion-spec .set_img figure {
width:min(42%,290px);
}
.motion-spec .set_img figure + figure {
width:min(55%,370px);
}


}/* min-width:768px */






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

}/* min-width:1080px */











/* sensor_bottom-nav */
.sensor_bottom-nav {
align-items: center;
}
.sensor_bottom-nav .flex > a {
display: inline-block;
margin-right: min(3vw,20px);
font-size: min(3.6vw,15px);
font-family: var(--font-family-round);
font-weight: 600;
}
.sensor_bottom-nav .social-button {
padding: 0;
}