@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/*common*/
#ideapadslim370 *{ box-sizing: border-box;}
#ideapadslim370 ul, #ideapadslim370 ol, #ideapadslim370 li, #ideapadslim370 dl, #ideapadslim370 dt, #ideapadslim370 dd{ list-style: none; padding: 0; margin: 0;}
#ideapadslim370 figure{ padding: 0; margin: 0;}
#ideapadslim370{ width: 100%; min-width: 960px; margin: 0 auto; height: 100%; font-size: 16px; font-family: "Roboto", 'Noto Sans JP', "Segoe UI", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; color: #000; margin-top: 12px;}
#ideapadslim370 .content_box{ width: 100%; max-width: 840px; margin: 0 auto;}
#ideapadslim370 a{ color: #006ed6;}
#ideapadslim370 a:hover{ opacity: 0.8;}
#ideapadslim370 p{ margin: 0; line-height: 1.5em;}
#ideapadslim370 img{ max-width: 100%; height: auto; vertical-align: bottom;}
#ideapadslim370 h1,#ideapadslim370 h2,#ideapadslim370 h3,#ideapadslim370 h4,#ideapadslim370 h5,#ideapadslim370 h6{ background: none; border: none; padding: 0; margin: 0; font-weight: bold;}
@media screen and (max-width: 767px) {
#ideapadslim370{ min-width: 240px; font-size:3vw; margin-top:2.5%; font-size-adjust: none; -webkit-text-size-adjust: 100%; overflow: hidden;}
#ideapadslim370 .content_box{ width: 90%;}
}


/*hero*/
#ideapadslim370 .hero h1{ background: #fff; text-align: center; padding: 40px;}
#ideapadslim370 .hero h1 img{ width: 690px;}
#ideapadslim370 .hero figure{ background: url("../images/mv_bg.png") center top no-repeat; background-size: 100% 100%; text-align: center; padding: 40px 60px 80px;}
#ideapadslim370 .hero figure img{ width: 750px;}
@media screen and (max-width: 767px) {
#ideapadslim370 .hero h1{ padding: 3.75% 5%;}
#ideapadslim370 .hero h1 img{ width: 90%;}
#ideapadslim370 .hero figure{ padding: 5% 10% 10%;}
#ideapadslim370 .hero figure img{ width: 100%;}
}


/*point*/
#ideapadslim370 #point{ background: #cdedb8; padding: 60px 60px 80px;}
#ideapadslim370 #point figure.follow_btn{ margin-bottom: 40px;}
#ideapadslim370 #point_list .point_cont{ background: #fff; margin: 10px auto; padding: 60px 40px; position: relative;}
#ideapadslim370 #point_list .point_cont h3{ display: inline-block; background: #6ab939; color: #fff; padding: 5px 10px; font-size: 32px; line-height: 1em; font-weight: normal; position: absolute; left: -15px; top: -15px;}
#ideapadslim370 #point_list .point_cont h3 strong{ font-size: 42px; line-height: 1em; font-weight: normal; margin-left: 0.125em;}
#ideapadslim370 #point_list .point_cont dl{ display: flex; align-items: center;}
#ideapadslim370 #point_list .point_cont:nth-child(2n) dl{ flex-direction: row-reverse;}
#ideapadslim370 #point_list .point_cont dl h4{ margin-bottom: 20px;}
#ideapadslim370 #point_list .point_cont dl p{ font-size: 18px; font-weight: 600;}
#ideapadslim370 #point_list .point_cont dl p sup{ vertical-align: super; font-size: 50%; margin-left: -0.5em;}
#ideapadslim370 #point_list .point_cont dl p.att{ font-size: 14px; font-weight: normal; padding-left: 1.25em; position: relative;}
#ideapadslim370 #point_list .point_cont dl p.att:before{ content: "＊"; position: absolute; left: 0; top: 0;}
@media screen and (max-width: 767px) {
#ideapadslim370 #point{ padding: 5% 0 7.5%;}
#ideapadslim370 #point figure.follow_btn{ margin-bottom: 5%;}
#ideapadslim370 #point_list .point_cont{ margin: 2.5% auto; padding: 7.5% 5%;}
#ideapadslim370 #point_list .point_cont h3{ padding: 0.675% 1.25%; font-size: 4vw; left: -2.5vw; top: -2.5vw;}
#ideapadslim370 #point_list .point_cont h3 strong{ font-size: 5vw;}
#ideapadslim370 #point_list .point_cont dl h4{ margin-bottom: 5%;}
#ideapadslim370 #point_list .point_cont dl p{ font-size: 1.8vw;}
#ideapadslim370 #point_list .point_cont dl p.att{ font-size: 1.5vw;}
}
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dt{ width: calc(100% - 320px); padding-right: 20px; position: relative; z-index: 1;}
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dd{ width: 320px;}
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dt h4{ width: calc(100% + 40px);}
@media screen and (max-width: 767px) {
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dt{ width: 60%; padding-right: 2.5vw;}
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dd{ width: 40%;}
#ideapadslim370 #point_list .point_cont:nth-child(1) dl dt h4{ width: calc(100% + 5vw);}
}
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dt{ width: 50%; position: relative; z-index: 1;}
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dd{ width: 50%; padding-right: 20px;}
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dt h4{ width: calc(100% + 40px); margin-left: -40px;}
@media screen and (max-width: 767px) {
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dt{ width: 50%;}
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dd{ width: 50%; padding-right: 2.5vw;}
#ideapadslim370 #point_list .point_cont:nth-child(2) dl dt h4{ width: calc(100% + 5vw); margin-left: -5vw;}
}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl{ align-items: flex-start;}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dt{ width: 50%; position: relative; z-index: 1;}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dd{ width: 50%; padding-left: 20px;}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dt h4{ width: calc(100% + 40px);}
@media screen and (max-width: 767px) {
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dt{ width: 50%;}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dd{ width: 50%; padding-left: 2.5vw;}
#ideapadslim370 #point_list .point_cont:nth-child(3) dl dt h4{ width: calc(100% + 5vw);}
}
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dt{ width: calc(100% - 320px); position: relative; z-index: 1;}
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dd{ width: 320px; padding-right: 60px;}
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dt h4{ width: calc(100% + 40px); margin-left: -40px;}
@media screen and (max-width: 767px) {
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dt{ width: 55%;}
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dd{ width: 45%; padding-right: 5vw;}
#ideapadslim370 #point_list .point_cont:nth-child(4) dl dt h4{ width: calc(100% + 5vw); margin-left: -5vw;}
}

#ideapadslim370 #point_list .point_cont .point_box ul li{ margin-top: 60px;}
#ideapadslim370 #point_list .point_cont .point_box ul li h4{ margin-bottom: 20px;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl{ flex-direction: row;  align-items: flex-start;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl dt{ width: 60%; padding-right: 20px;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl dd{ width: 40%; padding: 0;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl dt p{ font-weight: normal;}
#ideapadslim370 #point_list .point_cont .point_box ul li:nth-child(2n) dl{ flex-direction: row-reverse;}
#ideapadslim370 #point_list .point_cont .point_box ul li:nth-child(2n) dl dt{ padding-right: 0; padding-left: 20px;}
@media screen and (max-width: 767px) {
#ideapadslim370 #point_list .point_cont .point_box ul li{ margin-top: 7.5%;}
#ideapadslim370 #point_list .point_cont .point_box ul li h4{ margin-bottom: 2.5%;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl dt{ width: 57.5%; padding-right: 2.5%;}
#ideapadslim370 #point_list .point_cont .point_box ul li dl dd{ width: 42.5%; padding: 0;}
#ideapadslim370 #point_list .point_cont .point_box ul li:nth-child(2n) dl dt{ padding-right: 0; padding-left: 2.5%;}
}


/*function*/
#ideapadslim370 #function{ background: #eeffe3; padding: 60px 60px 80px; overflow: hidden;}
#ideapadslim370 #function h2{ text-align: center; margin-bottom: 40px;}
#ideapadslim370 #function h2 strong{ display: inline-block; padding-bottom: 10px; position: relative;}
#ideapadslim370 #function h2 strong:after{ content: ""; width: 100vw; height: 2px; background: #6ab939; position: absolute; right: 0; bottom: 0;}
#ideapadslim370 #function .function_list{ margin-bottom: 60px;}
#ideapadslim370 #function .function_list ul{ display: flex; flex-wrap: wrap; width: 750px; margin: auto;}
#ideapadslim370 #function .function_list ul li{ width: calc(50% - 40px); margin: 20px; text-align: center;}
#ideapadslim370 #function .function_list ul li p{ font-size: 20px; margin-top: 1em;}
@media screen and (max-width: 767px) {
#ideapadslim370 #function{ padding: 10% 0;}
#ideapadslim370 #function h2{ margin-bottom: 5%;}
#ideapadslim370 #function h2 strong{ width: 80%; padding-bottom: 1.25%;}
#ideapadslim370 #function .function_list{ margin-bottom: 7.5%;}
#ideapadslim370 #function .function_list ul{ width: 90%;}
#ideapadslim370 #function .function_list ul li{ width: calc(50% - 3.75vw); margin: 1.875vw;}
#ideapadslim370 #function .function_list ul li p{ font-size: 2.5vw;}
#ideapadslim370 #function .function_list ul li img{ width: 50%;}
}


/*lineup*/
#ideapadslim370 #lineup{ background: #fff; padding: 60px; margin-top: 40px;}
#ideapadslim370 #lineup h3{ text-align: center; margin-bottom: 30px;}
#ideapadslim370 #lineup h3 img{ width: 640px;}
#ideapadslim370 #lineup ul{ display: flex; flex-wrap: wrap;}
#ideapadslim370 #lineup ul li{ width: calc(50% - 60px); margin: 30px; text-align: center;}
#ideapadslim370 #lineup ul li h4{ text-align: right; margin-bottom: 10px; padding-left: 90px;}
#ideapadslim370 #lineup ul li figure img{ width: 90%;}
@media screen and (max-width: 767px) {
#ideapadslim370 #lineup{ padding: 5%; margin-top: 3.75%;}
#ideapadslim370 #lineup h3{ margin-bottom: 5%;}
#ideapadslim370 #lineup h3 img{ width: 90%;}
#ideapadslim370 #lineup ul li{ width: calc(50% - 5vw); margin: 2.5vw;}
#ideapadslim370 #lineup ul li h4{ margin-bottom: 1.25%; padding-left: 30%;}
#ideapadslim370 #lineup ul li figure img{ width: 90%;}
}


/*cta*/
#ideapadslim370 #cta{ padding: 40px;}
@media screen and (max-width: 767px) {
#ideapadslim370 #cta{ padding: 5%;}
}



/*切り替え*/
#ideapadslim370 .brsp{ display:none;}
#ideapadslim370 .brpc{ display:block;}
@media print, screen and (min-width:768px){
#ideapadslim370 .sp{ display:none;}
}
@media screen and (max-width: 767px) {
#ideapadslim370 .brsp{ display:block;}
#ideapadslim370 .brpc{ display:none;}
#ideapadslim370 .pc{ display:none;}
}


/*common調整*/
body{ min-width: 1px; width: auto;}
#mains{ min-width: 1px;}
aside{ min-width: 767px;}
@media screen and (max-width: 767px) {
aside{ min-width: 1px;}
}