@charset "utf-8"; /* ========================================================= サイト ： LFV special site タイプ ： コンテンツ 更新日 ： 2021-06-17 ========================================================= */ /* ========================================================= ■各スタイル一覧 0）共通 1）LFVとは 2）特徴 3）メリット 4）User feedback 5）lineup 6）お問い合わせ ========================================================= */ /* 0）共通 ========================================================= */ #mainWrap .commonH2Sty { height: 400px; background-color: rgba(0,0,0,0.7); position: relative; text-align: center; overflow: hidden; } #mainWrap .commonH2Sty .commonH2Wrap { overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #ffffff; font-family: "FB Benton Sans Book", "Helvetica", "Arial"; font-size: 5.4rem; line-height: 6.2rem; letter-spacing: 6px; white-space: nowrap; padding-left: 6px; } #mainWrap .commonH2Sty .commonH2Wrap .commonH2Txt { transform: translateY(100%); opacity: 0; } #mainWrap .commonH2Sty .commonH2Wrap .commonH2Txt br { display: none; } #mainWrap .commonH2Sty .commonH2Wrap .commonH2TxtOn { transform: translateY(0); opacity: 1; transition: all 0.5s ease 0.1s; } #mainWrap .contentsWrap { width: 100%; background-color: #ffffff; padding-right: 25px; padding-left: 25px; overflow: hidden; } #mainWrap .contentsWrap .contentsBox { max-width: 1140px; margin: 0 auto; } @media screen and (max-width: 1279px) { #mainWrap .commonH2Sty { height: 260px; } #mainWrap .commonH2Sty .commonH2Wrap { font-size: 4.2rem; line-height: 5.2rem; letter-spacing: 5px; padding-left: 5px; } } @media screen and (max-width: 1023px) { #mainWrap .commonH2Sty { height: 200px; } #mainWrap .commonH2Sty .commonH2Wrap { font-size: 3.2rem; line-height: 4.6rem; letter-spacing: 4px; padding-left: 4px; } } @media screen and (max-width: 767px) { #mainWrap .commonH2Sty { height: 120px; } #mainWrap .commonH2Sty .commonH2Wrap { font-size: 2.6rem; line-height: 3.6rem; letter-spacing: 3px; padding-left: 3px; } #mainWrap .commonH2Sty .commonH2Wrap .commonH2Txt br { display: block; } #mainWrap #sectionLineup .commonH2Sty .commonH2Wrap { font-size: 2.2rem; line-height: 3.2rem; } } @-moz-document url-prefix() { #mainWrap .commonH2Sty .commonH2Wrap .commonH2Txt { backface-visibility: hidden; } } /* 1）About LFV ========================================================= */ #aboutWrap { width: 100%; background: url(../../images/about_bg.jpg) no-repeat center center #ffffff; background-size: cover; padding-right: 25px; padding-left: 25px; padding-bottom: 140px; } #aboutWrap .aboutBox { max-width: 1140px; margin-right: auto; margin-left: auto; } #aboutWrap .aboutBox .aboutH2Sty { text-align: center; padding-top: 131px; padding-bottom: 65px; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap { overflow: hidden; font-family: "FB Benton Sans Book", "Helvetica", "Arial"; font-size: 5.4rem; line-height: 6.2rem; letter-spacing: 6px; padding-left: 6px; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap .aboutH2Txt { transform: translateY(100%); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap .aboutH2TxtOn { transform: translateY(0); opacity: 1; transition: all 0.5s ease 0.1s; } #aboutWrap .aboutBox .aboutLogo { opacity: 0; transform: translateY(100px); width: 129px; margin-right: auto; margin-left: auto; margin-bottom: 26px; } #aboutWrap .aboutBox .aboutCopy { opacity: 0; transform: translateY(100px); font-size: 2rem; line-height: 4.2rem; text-align: center; margin-bottom: 54px; } #aboutWrap .aboutBox .aboutCopy span { display: none; } #aboutWrap .aboutBox .aboutLogoOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.0s; } #aboutWrap .aboutBox .aboutCopyOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.25s; } #aboutWrap .aboutBox .aboutSlide { opacity: 0; transform: translateY(100px); max-width: 980px; margin-right: auto; margin-left: auto; padding: 0 25px; } #aboutWrap .aboutBox .aboutSlideOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.5s; } #aboutWrap .aboutBox .aboutSlide img { width: 100%;} #aboutWrap .aboutBox .aboutSlide div { margin: 0 5px;} #aboutWrap .aboutBox .aboutSlide .slick-next { right: 0; z-index: 100;} #aboutWrap .aboutBox .aboutSlide .slick-prev { left: 0; z-index: 100;} #aboutWrap .aboutBox .aboutSlide .slick-prev::before { content: url(../../images/slide_arrow_l.png); } #aboutWrap .aboutBox .aboutSlide .slick-next::before { content: url(../../images/slide_arrow_r.png); } #aboutWrap .aboutBox .aboutSlide .slick-dots li button::before { content: url(../../images/slide_dot.png); } #aboutWrap .aboutBox .aboutMaterial { opacity: 0; transform: translateY(100px); max-width: 600px; border: 1px solid #000000; margin-right: auto; margin-left: auto; margin-top: 90px; } #aboutWrap .aboutBox .aboutMaterial dl { padding: 25px 29px 24px 29px; } #aboutWrap .aboutBox .aboutMaterial dl dt { font-size: 1.8rem; font-weight: 700; line-height: 2.6rem; margin-bottom: 9px; } #aboutWrap .aboutBox .aboutMaterial dl dd { font-size: 1.6rem; line-height: 2.4rem; } #aboutWrap .aboutBox .aboutMaterialOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease 1.0s; } @media screen and (max-width: 1279px) { #aboutWrap { padding-bottom: 130px; } #aboutWrap .aboutBox .aboutH2Sty { padding-top: 121px; padding-bottom: 55px; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap { font-size: 4.2rem; line-height: 5.2rem; letter-spacing: 5px; padding-left: 5px; } #aboutWrap .aboutBox .aboutCopy { font-size: 1.8rem; line-height: 4rem; margin-bottom: 48px; } #aboutWrap .aboutBox .aboutMaterial { max-width: 540px; } #aboutWrap .aboutBox .aboutMaterial dl { padding: 21px 25px 20px 25px; } #aboutWrap .aboutBox .aboutMaterial dl dt { font-size: 1.6rem; line-height: 2.4rem; margin-bottom: 7px; } #aboutWrap .aboutBox .aboutMaterial dl dd { font-size: 1.4rem; line-height: 2.2rem; } } @media screen and (max-width: 1023px) { #aboutWrap { padding-bottom: 120px; } #aboutWrap .aboutBox .aboutH2Sty { padding-top: 111px; padding-bottom: 45px; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap { font-size: 3.2rem; line-height: 4.6rem; letter-spacing: 4px; padding-left: 4px; } #aboutWrap .aboutBox .aboutLogo { width: 110px; } #aboutWrap .aboutBox .aboutCopy { font-size: 1.6rem; line-height: 3.6rem; margin-bottom: 38px; } #aboutWrap .aboutBox .aboutMaterial { max-width: 460px; margin-top: 70px; } #aboutWrap .aboutBox .aboutMaterial dl { padding: 16px 20px 14px 20px; } #aboutWrap .aboutBox .aboutMaterial dl dt { font-size: 1.5rem; margin-bottom: 6px; } } @media screen and (max-width: 767px) { #aboutWrap { padding-bottom: 70px; } #aboutWrap .aboutBox .aboutH2Sty { padding-top: 54px; padding-bottom: 30px; } #aboutWrap .aboutBox .aboutH2Sty .aboutH2Wrap { font-size: 2.6rem; line-height: 3.6rem; letter-spacing: 3px; padding-left: 3px; } #aboutWrap .aboutBox .aboutLogo { width: 100px; } #aboutWrap .aboutBox .aboutCopy { font-size: 1.6rem; line-height: 3rem; text-align: left; max-width: 460px; margin-right: auto; margin-left: auto; margin-bottom: 22px; } #aboutWrap .aboutBox .aboutCopy br { display: none; } #aboutWrap .aboutBox .aboutCopy span { display: inline; } #aboutWrap .aboutBox .aboutMaterial { margin-top: 50px; } #aboutWrap .aboutBox .aboutMaterial dl { padding: 12px 15px 10px 15px; } #aboutWrap .aboutBox .aboutMaterial dl dt { font-size: 1.4rem; line-height: 2rem; margin-bottom: 5px; } #aboutWrap .aboutBox .aboutMaterial dl dd { font-size: 1.3rem; line-height: 2rem; } } /* 2）Features ========================================================= */ #featureWrap { width: 100%; } #featureWrap .featureAreaWrap { padding-top: 120px; padding-bottom: 120px; } #featureWrap .featureAreaWrap .feature1Area { width: 100%; } #featureWrap .featureAreaWrap .feature2Area { width: 100%; } #featureWrap .featureAreaWrap .feature3Area { width: 100%; } #featureWrap .featureH3Sty { width: auto; margin-bottom: 70px; } #featureWrap .featureH3Sty > span { display: block; width: 70px; height: 70px; background-color: #000000; border-radius: 50%; color: #ffffff; font-size: 3.6rem; font-weight: 400; line-height: 4.6rem; text-align: center; padding-top: 13px; margin-right: auto; margin-bottom: 26px; margin-left: auto; } #featureWrap .featureH3Sty div { font-size: 3.6rem; line-height: 4.6rem; text-align: center; } #featureWrap .featureH3Sty div span { display: inline-block; border-bottom: solid 2px #000000; padding-bottom: 6px; } #featureWrap .featureH3Sty { opacity: 0; transform: translateY(100px); } #featureWrap .featureH3StyOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } /* (1) A variety of types of machining can be handled ------------------------------------------ */ #featureWrap .featureAreaWrap .feature1Area .feature1Box1 { max-width: 880px; margin: 0 auto 100px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1 { width: 24.659090%; float: left; margin-right: 14.2045465%; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2 { width: 20.795454%; float: left; margin-right: 14.2045465%; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3 { width: 26.136363%; float: left; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4 { width: 22.727272%; float: left; margin-right: 9.0340915%; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5 { width: 30.113636%; float: left; margin-right: 9.0340915%; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 { width: 29.090909%; float: left; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 dl dt { text-align: center; margin-bottom: 40px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 dl dt span { display: inline-block; border: solid 1px #000000; border-radius: 5px; font-size: 1.6rem; line-height: 2.4rem; padding: 6px 18px 6px 20px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1::after { content: ""; clear: both; display: block; } #featureWrap .featureAreaWrap .feature1Area .feature1Box2 { margin-bottom: 72px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box3 { margin-bottom: 122px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 { max-width: 880px; margin-right: auto; margin-left: auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div { text-align: center; margin-bottom: 40px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div span { display: inline-block; border: solid 1px #000000; border-radius: 5px; font-size: 1.6rem; line-height: 2.4rem; padding: 6px 18px 6px 20px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 ul { overflow: hidden; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 ul li:nth-child(1) { width: 47.727272%; float: left; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 ul li:nth-child(2) { width: 47.727272%; float: right; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 p { font-size: 1.8rem; line-height: 3rem; padding-top: 24px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.0s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.1s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.2s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.0s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.1s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.2s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box2 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature1Area .feature1Box3 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature1Area .feature1Box2On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #featureWrap .featureAreaWrap .feature1Area .feature1Box3On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } /* (2) Three vibration modes ------------------------------------------ */ #featureWrap .featureAreaWrap .feature2Area .feature2Box1 { margin-bottom: 80px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box2 { margin-bottom: 80px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box3 { margin-bottom: 130px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 { max-width: 940px; overflow: hidden; margin-right: auto; margin-left: auto; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl { width: 47.87234%; float: left; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt { border-bottom: 1px solid #000000; font-size: 1.6rem; line-height: 2.6rem; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt span { width: 110px; display: inline-block; color: #ffffff; font-size: 1.4rem; font-weight: 700; line-height: 2.6rem; text-align: center; background-color: #8b969c; padding-top: 6px; padding-bottom: 5px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt b { display: block; font-weight: 400; padding-top: 22px; padding-bottom: 14px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dd { font-size: 2.6rem; line-height: 3.8rem; padding-top: 25px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 div { width: 45.74468%; float: right; margin-top: 37px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box1 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature2Area .feature2Box2 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature2Area .feature2Box3 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature2Area .feature2Box1On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #featureWrap .featureAreaWrap .feature2Area .feature2Box2On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #featureWrap .featureAreaWrap .feature2Area .feature2Box3On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } /* (3) Easy to use ------------------------------------------ */ #featureWrap .featureAreaWrap .feature3Area .feature3Box1 { max-width: 620px; margin-right: auto; margin-left: auto; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 p { font-size: 1.8rem; line-height: 3rem; margin-bottom: 50px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 h4 { font-size: 2rem; font-weight: 700; line-height: 3rem; margin-bottom: 24px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 div { background-color: #f2f2f2; padding: 35px 40px 35px 40px; margin-bottom: 53px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 { max-width: 860px; margin-right: auto; margin-left: auto; display: flex; flex-direction: row; justify-content: space-between; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl:nth-child(1) { width: 46.511627%; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl:nth-child(2) { width: 46.511627%; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dt { font-size: 1.7rem; line-height: 3rem; text-align: center; margin-bottom: 12px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a { position: relative; display: block; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a::before { transition: all 0.3s ease; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; margin: auto; width: 61px; height: 61px; border: solid 3px #ffffff; border-radius: 31px; content: ""; z-index: 13; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a::after { transition: all 0.3s ease; position: absolute; top: 0; right: 0; bottom: 0; left: 5px; display: block; margin: auto; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #ffffff; content: ""; z-index: 12; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a span { transition: all 0.3s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.45); content: ""; z-index: 11; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature3Area .feature3Box1On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #featureWrap .featureAreaWrap .feature3Area .feature3Video1 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature3Area .feature3Video2 { opacity: 0; transform: translateY(100px); } #featureWrap .featureAreaWrap .feature3Area .feature3Video1On { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out; } #featureWrap .featureAreaWrap .feature3Area .feature3Video2On { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out; } @media screen and (min-width: 769px) { #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a:hover::before { border: solid 3px #99ffff; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a:hover::after { border-color: transparent transparent transparent #99ffff; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dd a:hover span { background-color: rgba(0,0,0,0.75); } } @media screen and (max-width: 1279px) { #featureWrap .featureH3Sty { margin-bottom: 60px; } #featureWrap .featureH3Sty > span { width: 60px; height: 60px; font-size: 3rem; line-height: 4rem; padding-top: 12px; margin-bottom: 18px; } #featureWrap .featureH3Sty div { font-size: 3rem; line-height: 4rem; } #featureWrap .featureAreaWrap { padding-top: 100px; padding-bottom: 100px; } /* (1) A variety of types of machining can be handled ------------------------------------------ */ #featureWrap .featureAreaWrap .feature1Area .feature1Box1 { max-width: 880px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 dl dt span { font-size: 1.5rem; line-height: 2rem; padding: 6px 8px 6px 10px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box2 { margin-bottom: 62px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box3 { margin-bottom: 112px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 { max-width: 880px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div span { font-size: 1.5rem; line-height: 2rem; padding: 6px 8px 6px 10px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 p { font-size: 1.7rem; line-height: 2.8rem; padding-top: 22px; } /* (2) Three vibration modes ------------------------------------------ */ #featureWrap .featureAreaWrap .feature2Area .feature2Box1 { margin-bottom: 70px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box2 { margin-bottom: 70px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box3 { margin-bottom: 120px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 { max-width: 880px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt b { padding-top: 20px; padding-bottom: 13px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dd { font-size: 2.6rem; line-height: 4rem; padding-top: 22px; } /* (3) Easy to use ------------------------------------------ */ #featureWrap .featureAreaWrap .feature3Area .feature3Box1 p { font-size: 1.7rem; line-height: 2.8rem; margin-bottom: 45px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 h4 { font-size: 1.9rem; line-height: 2.9rem; margin-bottom: 22px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 { max-width: 780px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dt { font-size: 1.6rem; line-height: 2.8rem; } } @media screen and (max-width: 1023px) { #featureWrap .featureH3Sty { margin-bottom: 50px; } #featureWrap .featureH3Sty > span { width: 50px; height: 50px; font-size: 2.8rem; line-height: 3.8rem; padding-top: 9px; margin-bottom: 16px; } #featureWrap .featureH3Sty div { font-size: 2.8rem; line-height: 3.8rem; } #featureWrap .featureAreaWrap { padding-top: 80px; padding-bottom: 80px; } /* (1) A variety of types of machining can be handled ------------------------------------------ */ #featureWrap .featureAreaWrap .feature1Area .feature1Box1 { max-width: 490px; margin-bottom: 80px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1 { width: calc(50% - 7px); margin-right: 14px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2 { width: calc(50% - 7px); margin-right: 0; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3 { width: calc(50% - 7px); margin-right: 14px; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4 { width: calc(50% - 7px); margin-right: 0; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5 { width: 100%; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 { width: 100%; margin-top: 70px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1 dt, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1 dd { width: 94.3478%; max-width: 208px; margin-right: auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2 dt, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2 dd { width: 79.5652%; max-width: 175px; margin-left: auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3 dt, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3 dd { width: 100%; max-width: 220px; margin-right: auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4 dt, #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4 dd { width: 86.9565%; max-width: 191px; margin-left: auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5 dt { width: 80%; max-width: 280px; margin: 0 auto 30px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5 dd { width: 80%; max-width: 280px; margin: 0 auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 dt { width: 76.6603%; max-width: 280px; margin: 0 auto 30px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 dd { width: 76.6603%; max-width: 280px; margin: 0 auto; } #featureWrap .featureAreaWrap .feature1Area .feature1Box2 { max-width: 620px; margin-bottom: 52px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box3 { max-width: 620px; margin-bottom: 102px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div { margin-bottom: 35px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div span { font-size: 1.6rem; line-height: 2.4rem; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 p { font-size: 1.6rem; line-height: 2.6rem; padding-top: 20px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc1On { transition: all 0.5s ease-out 0.0s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc2On { transition: all 0.5s ease-out 0.1s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3On { transition: all 0.5s ease-out 0.0s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4On { transition: all 0.5s ease-out 0.1s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5On { transition: all 0.5s ease-out 0.0s; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6On { transition: all 0.5s ease-out 0.0s; } /* (2) Three vibration modes ------------------------------------------ */ #featureWrap .featureAreaWrap .feature2Area .feature2Box1 { margin-bottom: 60px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box2 { margin-bottom: 60px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box3 { margin-bottom: 110px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 { max-width: 780px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt { font-size: 1.5rem; line-height: 2.4rem; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt span { width: 100px; padding-top: 5px; padding-bottom: 4px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt b { padding-top: 18px; padding-bottom: 12px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dd { font-size: 2.4rem; line-height: 3.6rem; padding-top: 18px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 div { margin-top: 35px; } /* (3) Easy to use ------------------------------------------ */ #featureWrap .featureAreaWrap .feature3Area .feature3Box1 p { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: 40px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 h4 { font-size: 1.8rem; line-height: 2.8rem; margin-bottom: 20px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 div { padding: 25px 30px 25px 30px; margin-bottom: 40px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 { max-width: 620px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dt { font-size: 1.5rem; line-height: 2.6rem; margin-bottom: 10px; } } @media screen and (max-width: 767px) { #featureWrap .featureH3Sty { margin-bottom: 40px; } #featureWrap .featureH3Sty > span { width: 46px; height: 46px; font-size: 2.2rem; line-height: 3.2rem; padding-top: 8px; margin-bottom: 13px; } #featureWrap .featureH3Sty div { font-size: 2rem; line-height: 3rem; } #featureWrap .featureAreaWrap { padding-top: 60px; padding-bottom: 60px; } /* (1) A variety of types of machining can be handled ------------------------------------------ */ #featureWrap .featureAreaWrap .feature1Area .feature1Box1 { margin-bottom: 60px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc3 { margin-top: 50px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc4 { margin-top: 50px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc5 { margin-top: 50px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 .feature1Box1Nc6 { margin-top: 50px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 dl dt { margin-bottom: 30px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box1 dl dt span { font-size: 1.3rem; } #featureWrap .featureAreaWrap .feature1Area .feature1Box2 { margin-bottom: 44px; } #featureWrap .featureAreaWrap .feature1Area .feature1Box3 { margin-bottom: 54px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 { max-width: 460px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div { margin-bottom: 30px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 div span { font-size: 1.3rem; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 ul li:nth-child(1) { width: 100%; float: none; margin-bottom: 20px; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 ul li:nth-child(2) { width: 100%; float: none; } #featureWrap .featureAreaWrap .feature1Area .feature1Type1 p { font-size: 1.5rem; line-height: 2.4rem; padding-top: 15px; } /* (2) Three vibration modes ------------------------------------------ */ #featureWrap .featureAreaWrap .feature2Area .feature2Box1 { margin-bottom: 50px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box2 { margin-bottom: 50px; } #featureWrap .featureAreaWrap .feature2Area .feature2Box3 { margin-bottom: 60px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 { max-width: 460px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl { width: 100%; float: none; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt { font-size: 1.4rem; line-height: 2.2rem; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt span { width: 90px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dt b { padding-top: 13px; padding-bottom: 9px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dd { font-size: 2rem; line-height: 2.8rem; padding-top: 11px; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 dl dd br { display: none; } #featureWrap .featureAreaWrap .feature2Area .feature2Type1 div { width: 100%; float: none; margin-top: 22px; } /* (3) Easy to use ------------------------------------------ */ #featureWrap .featureAreaWrap .feature3Area .feature3Box1 { max-width: 460px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 p { font-size: 1.5rem; line-height: 2.4rem; margin-bottom: 30px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 p br { display: none; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 h4 { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: 13px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box1 div { padding: 15px 15px 15px 15px; margin-bottom: 35px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 { max-width: 460px; flex-direction: column; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl:nth-child(1) { width: 100%; float: none; margin-bottom: 35px; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl:nth-child(2) { width: 100%; float: none; } #featureWrap .featureAreaWrap .feature3Area .feature3Box2 dl dt { font-size: 1.5rem; line-height: 2.6rem; margin-bottom: 10px; } } /* 3）Benefits ========================================================= */ #benefitsWrap { width: 100%; } #benefitsWrap .benefitsAreaWrap { padding-top: 120px; padding-bottom: 120px; } #benefitsWrap .benefitsAreaWrap .benefits1Area { width: 100%; } #benefitsWrap .benefitsAreaWrap .benefits2Area { width: 100%; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box { max-width: 880px; display: flex; flex-direction: row; margin-right: auto; margin-left: auto; margin-bottom: 100px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxL { width: 47.727272%; margin-right: 4.545456%; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxR { width: 47.727272%; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box dl dt { font-size: 1.7rem; font-weight: 700; line-height: 3.2rem; text-align: center; margin-bottom: 11px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box { max-width: 700px; margin-right: auto; margin-left: auto; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl { text-align: center; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt { position: relative; background-color: #efefef; padding-top: 17px; padding-bottom: 17px; padding-right: 15px; padding-left: 15px; margin-bottom: 36px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt::after { position: absolute; bottom: -17px; left: 0; right: 0; z-index: 11; margin-left: auto; margin-right: auto; content: ""; width: 40px; height: 40px; background-color: #efefef; transform: rotate(45deg); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt div { position: relative; z-index: 12; font-size: 2rem; line-height: 3rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt div span { font-weight: 700; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dd { display: inline; font-size: 2.8rem; line-height: 6.2rem; border-bottom: solid 2px #000000; padding-bottom: 6px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point img { max-width: 460px; padding: 16px 20px 13px 20px; position: relative; z-index: 12; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1 { margin-bottom: 60px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2 { margin-bottom: 100px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point3 { margin-bottom: 46px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Arrow { width: 74px; height: 34px; background: url(../../images/benefits_result_arr.png) no-repeat; background-size: 74px 34px; margin-right: auto; margin-left: auto; margin-bottom: 50px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result { width: 100%; border: 5px solid #000000; text-align: center; padding: 26px 15px 24px 15px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span { font-size: 3rem; font-weight: 700; line-height: 4rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span br { display: none; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxL { opacity: 0; transform: translateY(120px); } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxLOn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxR { opacity: 0; transform: translateY(120px); } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxROn { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1 { opacity: 0; transform: translateY(120px); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2 { opacity: 0; transform: translateY(120px); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point3 { opacity: 0; transform: translateY(120px); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point3On { opacity: 1; transform: translateY(0); transition: all 0.5s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Arrow { opacity: 0; transform: translateY(-50px); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2ArrowOn { opacity: 1; transform: translateY(0); transition: all 0.4s ease-out; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result { opacity: 0; transform: translateY(-40px); } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2ResultOn { opacity: 1; transform: translateY(0); transition: all 0.4s ease-out 0.4s; } @media screen and (max-width: 1279px) { #benefitsWrap .benefitsAreaWrap { padding-top: 100px; padding-bottom: 100px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box { max-width: 760px; margin-bottom: 80px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box dl dt { font-size: 1.6rem; line-height: 3rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt { padding-top: 17px; padding-bottom: 15px; margin-bottom: 34px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt div { font-size: 1.8rem; line-height: 2.8rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dd { font-size: 2.6rem; line-height: 6rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1 { margin-bottom: 55px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2 { margin-bottom: 90px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result { padding: 24px 15px 22px 15px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span { font-size: 2.6rem; line-height: 3.6rem; } } @media screen and (max-width: 1023px) { #benefitsWrap .benefitsAreaWrap { padding-top: 80px; padding-bottom: 80px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box { max-width: 660px; margin-bottom: 60px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box dl dt { font-size: 1.5rem; line-height: 2.5rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt { padding-top: 16px; padding-bottom: 15px; margin-bottom: 30px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt div { font-size: 1.7rem; line-height: 2.7rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dd { font-size: 2.4rem; line-height: 5.6rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point img { padding: 12px 20px 13px 20px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1 { margin-bottom: 50px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2 { margin-bottom: 80px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result { border: 4px solid #000000; padding: 22px 15px 20px 15px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span { font-size: 2.4rem; line-height: 3.4rem; } } @media screen and (max-width: 767px) { #benefitsWrap .benefitsAreaWrap { padding-top: 60px; padding-bottom: 60px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box { max-width: 460px; flex-direction: column; margin-bottom: 50px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxL { width: 100%; margin-right: 0; margin-bottom: 35px; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box .benefits1BoxR { width: 100%; } #benefitsWrap .benefitsAreaWrap .benefits1Area .benefits1Box dl dt { font-size: 1.4rem; line-height: 2.2rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt { padding-top: 15px; margin-bottom: 27px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt::after { bottom: -14px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt::after { position: absolute; width: 30px; height: 30px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dt div { font-size: 1.6rem; line-height: 2.4rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dd { font-size: 2rem; line-height: 4.2rem; padding-bottom: 5px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point dl dd br { display: none; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point img { max-width: 240px; padding: 12px 0 0 0; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point1 { margin-bottom: 50px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point2 { margin-bottom: 50px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Box .benefits2Point3 { margin-bottom: 30px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Arrow { width: 50px; height: 24px; background-size: 50px 24px; margin-bottom: 30px; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result { max-width: 400px; border: 3px solid #000000; padding: 15px 15px 13px 15px; margin-right: auto; margin-left: auto; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span { font-size: 2rem; line-height: 3.2rem; } #benefitsWrap .benefitsAreaWrap .benefits2Area .benefits2Result span br { display: block; } } /* 4）User feedback ========================================================= */ #feedbackWrap { width: 100%; } #feedbackWrap .feedbackAreaWrap { padding-top: 120px; padding-bottom: 120px; } #feedbackWrap .feedbackAnswerWrap { max-width: 900px; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackAnswerWrap h3 { font-size: 3.4rem; font-weight: 700; line-height: 4.6rem; text-align: center; position: relative; padding-bottom: 25px; margin-bottom: 60px; } #feedbackWrap .feedbackAnswerWrap h3 span { display: block; font-size: 5.4rem; font-weight: 500; line-height: 6.2rem; padding-bottom: 16px; } #feedbackWrap .feedbackAnswerWrap h3 br { display: none; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox { display: flex; flex-direction: row; max-width: 640px; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul { width: 71.875%; padding-top: 15px; padding-right: 30px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox div { width: 28.125%; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerY { font-size: 2.1rem; line-height: 3.2rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerN { font-size: 1.7rem; line-height: 2.8rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerE { font-size: 1.7rem; line-height: 2.8rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerY { background: url(../../images/feedback_icon_y.png) no-repeat left top; background-size: 47px 40px; padding-left: 72px; padding-top: 2px; padding-bottom: 23px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerN { background: url(../../images/feedback_icon_n.png) no-repeat left top; background-size: 47px 40px; padding-left: 72px; padding-top: 5px; padding-bottom: 24px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerE { background: url(../../images/feedback_icon_e.png) no-repeat left top; background-size: 47px 40px; padding-left: 72px; padding-top: 5px; padding-bottom: 24px; } #feedbackWrap .feedbackAnswerQ1 { margin-bottom: 100px; } #feedbackWrap .feedbackAnswerQ2 { margin-bottom: 100px; } #feedbackWrap .feedbackAnswerQ3 { margin-bottom: 100px; } #feedbackWrap .feedbackAnswerQ4 { margin-bottom: 100px; } #feedbackWrap .feedbackAnswerQ5 { margin-bottom: 60px; } #feedbackWrap .feedbackShareWrap .feedbackShareArr { width: 74px; margin-right: auto; margin-left: auto; margin-bottom: 84px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 { text-align: center; margin-bottom: 53px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 h3 { font-size: 4rem; line-height: 5.2rem; margin-bottom: 26px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p { font-size: 2.4rem; line-height: 4.6rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p span { font-size: 3.2rem; font-weight: 700; vertical-align: top; border-bottom: 2px solid #000000; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p br:nth-child(4) { display: none; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 { display: flex; flex-direction: row; justify-content: space-between; max-width: 800px; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 div:nth-child(1) { width: 49.25%; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 div:nth-child(2) { width: 37.5%; padding-top: 2.7%; } #feedbackWrap .feedbackAnswerQ1 .feedbackAnswerH3, #feedbackWrap .feedbackAnswerQ2 .feedbackAnswerH3, #feedbackWrap .feedbackAnswerQ3 .feedbackAnswerH3, #feedbackWrap .feedbackAnswerQ4 .feedbackAnswerH3, #feedbackWrap .feedbackAnswerQ5 .feedbackAnswerH3 { opacity: 0; transform: translateY(130px); } #feedbackWrap .feedbackAnswerQ1 .feedbackAnswerH3On, #feedbackWrap .feedbackAnswerQ2 .feedbackAnswerH3On, #feedbackWrap .feedbackAnswerQ3 .feedbackAnswerH3On, #feedbackWrap .feedbackAnswerQ4 .feedbackAnswerH3On, #feedbackWrap .feedbackAnswerQ5 .feedbackAnswerH3On { opacity: 1; transform: translateY(0px); transition: all 0.6s ease-out; } #feedbackWrap .feedbackAnswerQ1 .feedbackAnswerBox, #feedbackWrap .feedbackAnswerQ2 .feedbackAnswerBox, #feedbackWrap .feedbackAnswerQ3 .feedbackAnswerBox, #feedbackWrap .feedbackAnswerQ4 .feedbackAnswerBox, #feedbackWrap .feedbackAnswerQ5 .feedbackAnswerBox { opacity: 0; transform: translateY(140px); } #feedbackWrap .feedbackAnswerQ1 .feedbackAnswerBoxOn, #feedbackWrap .feedbackAnswerQ2 .feedbackAnswerBoxOn, #feedbackWrap .feedbackAnswerQ3 .feedbackAnswerBoxOn, #feedbackWrap .feedbackAnswerQ4 .feedbackAnswerBoxOn, #feedbackWrap .feedbackAnswerQ5 .feedbackAnswerBoxOn { opacity: 1; transform: translateY(0px); transition: all 0.4s ease-out 0.4s; } #feedbackWrap .feedbackAnswerH3::after { position: absolute; bottom: 0; right: 0; left: 0; margin-right: auto; margin-left: auto; z-index: 11; content: ""; width: 0%; height: 2px; background-color: #000000; } #feedbackWrap .feedbackAnswerQ1 .feedbackAnswerH3On::after, #feedbackWrap .feedbackAnswerQ2 .feedbackAnswerH3On::after, #feedbackWrap .feedbackAnswerQ3 .feedbackAnswerH3On::after, #feedbackWrap .feedbackAnswerQ4 .feedbackAnswerH3On::after, #feedbackWrap .feedbackAnswerQ5 .feedbackAnswerH3On::after { opacity: 1; width: 100%; transition: all 0.7s ease-out; } #feedbackWrap .feedbackShareWrap .feedbackShareArr { opacity: 0; transform: translateY(-70px); } #feedbackWrap .feedbackShareWrap .feedbackShareArrOn { opacity: 1; transform: translateY(0px); transition: all 0.4s ease-out; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 h3 { opacity: 0; transform: translateY(100px); } #feedbackWrap .feedbackShareWrap .feedbackShareArea1On h3 { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p { opacity: 0; transform: translateY(100px); } #feedbackWrap .feedbackShareWrap .feedbackShareArea1On p { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out 0.4s; } #feedbackWrap .feedbackShareWrap .feedbackShareImg1 { opacity: 0; transform: translateY(100px); } #feedbackWrap .feedbackShareWrap .feedbackShareImg1On { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out; } #feedbackWrap .feedbackShareWrap .feedbackShareImg2 { opacity: 0; transform: translateY(100px); } #feedbackWrap .feedbackShareWrap .feedbackShareImg2On { opacity: 1; transform: translateY(0px); transition: all 0.5s ease-out; } @media screen and (max-width: 1279px) { #feedbackWrap .feedbackAreaWrap { padding-top: 100px; padding-bottom: 100px; } #feedbackWrap .feedbackAnswerWrap h3 { font-size: 3rem; line-height: 4.2rem; padding-bottom: 23px; margin-bottom: 50px; } #feedbackWrap .feedbackAnswerWrap h3 span { font-size: 4.6rem; line-height: 5.4rem; padding-bottom: 14px; } #feedbackWrap .feedbackShareWrap .feedbackShareArr { margin-bottom: 80px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 { margin-bottom: 50px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 h3 { font-size: 3.4rem; line-height: 4.8rem; margin-bottom: 25px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p { font-size: 2rem; line-height: 4rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p span { font-size: 2.7rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 { max-width: 690px; } } @media screen and (max-width: 1023px) { #feedbackWrap .feedbackAreaWrap { padding-top: 80px; padding-bottom: 80px; } #feedbackWrap .feedbackAnswerWrap h3 { font-size: 2.4rem; line-height: 3.6rem; padding-bottom: 18px; margin-bottom: 45px; } #feedbackWrap .feedbackAnswerWrap h3 span { font-size: 4rem; line-height: 4.8rem; padding-bottom: 11px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox { max-width: 600px; } #feedbackWrap .feedbackAnswerQ1 { margin-bottom: 80px; } #feedbackWrap .feedbackAnswerQ2 { margin-bottom: 80px; } #feedbackWrap .feedbackAnswerQ3 { margin-bottom: 80px; } #feedbackWrap .feedbackAnswerQ4 { margin-bottom: 80px; } #feedbackWrap .feedbackAnswerQ5 { margin-bottom: 50px; } #feedbackWrap .feedbackShareWrap .feedbackShareArr { margin-bottom: 70px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 h3 { font-size: 3.2rem; line-height: 4.4rem; margin-bottom: 20px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p { font-size: 1.8rem; line-height: 3.4rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p span { font-size: 2.5rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 { max-width: 590px; } } @media screen and (max-width: 767px) { #feedbackWrap .feedbackAreaWrap { padding-top: 60px; padding-bottom: 60px; } #feedbackWrap .feedbackAnswerWrap h3 { font-size: 1.7rem; line-height: 2.5rem; padding-bottom: 16px; margin-bottom: 30px; } #feedbackWrap .feedbackAnswerWrap h3 span { font-size: 2.8rem; line-height: 3.6rem; padding-bottom: 2px; } #feedbackWrap .feedbackAnswerWrap h3 br { display: block; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerY { font-size: 1.7rem; line-height: 2.6rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerN { font-size: 1.5rem; line-height: 2.4rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerE { font-size: 1.5rem; line-height: 2.4rem; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerY { background-size: 35px 30px; padding-left: 50px; padding-bottom: 17px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerN { background-size: 35px 30px; padding-left: 50px; padding-top: 3px; padding-bottom: 18px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul .feedbackAnswerE { background-size: 35px 30px; padding-left: 50px; padding-top: 3px; padding-bottom: 18px; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul li br { display: none; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox { flex-direction: column; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox ul { width: 100%; max-width: 360px; order: 2; padding-top: 30px; padding-right: 0; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackAnswerWrap .feedbackAnswerBox div { width: 100%; max-width: 140px; order: 1; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackAnswerQ1 { margin-bottom: 50px; } #feedbackWrap .feedbackAnswerQ2 { margin-bottom: 50px; } #feedbackWrap .feedbackAnswerQ3 { margin-bottom: 50px; } #feedbackWrap .feedbackAnswerQ4 { margin-bottom: 50px; } #feedbackWrap .feedbackAnswerQ5 { margin-bottom: 30px; } #feedbackWrap .feedbackShareWrap .feedbackShareArr { width: 50px; margin-bottom: 40px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 { margin-bottom: 20px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 h3 { font-size: 2.5rem; font-weight: 500; line-height: 3.5rem; margin-bottom: 15px; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p { font-size: 1.8rem; line-height: 3.4rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p span { font-size: 1.9rem; } #feedbackWrap .feedbackShareWrap .feedbackShareArea1 p br:nth-child(4) { display: block; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 { flex-direction: column; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 div:nth-child(1) { width: 100%; max-width: 186px; order: 2; margin-right: auto; margin-left: auto; } #feedbackWrap .feedbackShareWrap .feedbackShareArea2 div:nth-child(2) { width: 100%; max-width: 160px; order: 1; padding-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 20px; } } /* 5）lineup ========================================================= */ #lineupWrap { width: 100%; } #lineupWrap .lineupAreaWrap { padding-top: 120px; padding-bottom: 120px; padding-right: 5px; padding-left: 5px; } #lineupWrap .lineupAreaWrap .lineupProductWrap { max-width: 1080px; position: relative; margin-right: auto; margin-left: auto; } #lineupWrap .lineupAreaWrap .lineupProductWrap::after { position: absolute; top: 0; left: 50%; z-index: 10; margin-left: -1px; content: ""; width: 2px; height: 100%; background-color: #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL { width: 50%; position: relative; float: left; clear: left; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR { width: 50%; position: relative; float: right; clear: right; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductPost { width: 74.074%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductPost { width: 74.074%; margin-left: 25.926%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear { position: absolute; left: 100%; z-index: 12; margin-left: -60px; width: 120px; background-color: #ffffff; border: 4px solid #000000; border-radius: 30px; font-size: 2.9rem; font-weight: 700; line-height: 3.2rem; text-align: center; padding-top: 13px; padding-bottom: 11px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear { position: absolute; left: 0; z-index: 12; margin-left: -60px; width: 120px; background-color: #ffffff; border: 4px solid #000000; border-radius: 30px; font-size: 2.9rem; font-weight: 700; line-height: 3.2rem; text-align: center; padding-top: 13px; padding-bottom: 11px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear + .lineupProductPost{ padding-top: 50px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear + .lineupProductPost{ padding-top: 50px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox { width: 100%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h3 { margin-top: 35px; margin-bottom: 25px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h4 { font-size: 2.3rem; font-weight: 700; line-height: 3.2rem; margin-bottom: 19px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox p { font-size: 1.6rem; line-height: 2.8rem; margin-bottom: 33px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a { transition: all 0.3s ease; position: relative; display: block; width: 220px; border: solid 3px #000000; background-color: #ffffff; font-size: 1.6rem; font-weight: 700; line-height: 2.4rem; text-align: center; text-decoration: none; padding: 8px 0 8px 2px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a::before { transition: all 0.3s ease; position: absolute; top: 11px; right: 13px; z-index: 13; content: ""; width: 12px; height: 10px; border-top: solid 2px #000000; border-right: solid 2px #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a::after { transition: all 0.3s ease; position: absolute; top: 15px; right: 17px; z-index: 12; content: ""; width: 15px; height: 12px; border: solid 2px #000000; } /* 20190816 */ #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox.lineupProductL12 a { width: 230px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox.lineupProductL12 a + a { margin-top: 10px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox.lineupProductMC20 a { width: 230px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox.lineupProductMC20 a + a { margin-top: 10px; } /* 20190816end */ #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt150 { margin-top: calc(150 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt200 { margin-top: calc(200 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt250 { margin-top: calc(250 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt300 { margin-top: calc(300 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt350 { margin-top: calc(350 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt450 { margin-top: calc(450 / 1080 * 100%); } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductEnd { clear: both; height: 100px; } #lineupWrap .lineupCatalog { max-width: 920px; margin-top: 80px; margin-right: auto; margin-left: auto; } #lineupWrap .lineupCatalog a { display: block; transition: all 0.3s ease; position: relative; color: #ffffff; text-decoration: none; background-color: #000000; border: solid 3px #000000; padding: 30px 60px 28px 50px; } #lineupWrap .lineupCatalog a::before { transition: all 0.3s ease; position: absolute; bottom: 21px; right: 13px; z-index: 12; content: ""; width: 12px; height: 10px; border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; } #lineupWrap .lineupCatalog a::after { transition: all 0.3s ease; position: absolute; bottom: 15px; right: 17px; z-index: 12; content: ""; width: 15px; height: 12px; border: solid 2px #ffffff; } #lineupWrap .lineupCatalog a dl { display: table; } #lineupWrap .lineupCatalog a dl dt { display: table-cell; vertical-align: middle; font-size: 2.4rem; font-weight: 700; line-height: 3.2rem; width: 300px; } #lineupWrap .lineupCatalog a dl dd { display: table-cell; vertical-align: middle; font-size: 1.6rem; line-height: 2.8rem; } #lineupWrap .lineupProductWrap .lineupProductYear2014, #lineupWrap .lineupProductWrap .lineupProductYear2016, #lineupWrap .lineupProductWrap .lineupProductYear2017, #lineupWrap .lineupProductWrap .lineupProductYear2018, #lineupWrap .lineupProductWrap .lineupProductYear2019, #lineupWrap .lineupProductWrap .lineupProductYear2020, #lineupWrap .lineupProductWrap .lineupProductYear2021 { opacity: 0; transform: translate(0px); } #lineupWrap .lineupProductWrap .lineupProductYear2014On { animation: lineupProductYear2014 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2016On { animation: lineupProductYear2016 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2017On { animation: lineupProductYear2017 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2018On { animation: lineupProductYear2018 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2019On { animation: lineupProductYear2019 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2020On { animation: lineupProductYear2020 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2021On { animation: lineupProductYear2021 ease-out 0.6s 1 forwards; } @keyframes lineupProductYear2014 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2016 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2017 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2018 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2019 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2020 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2021 { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } #lineupWrap .lineupProductWrap .lineupProductVC03 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductL20 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductL12 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductMC20 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductBNA42 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductL32 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductD25 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductA20 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductM32 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductANX42 { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductL20xii { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupProductWrap .lineupProductVC03On { animation: lineupProductVC03 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductL20On { animation: lineupProductL20 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductL12On { animation: lineupProductL12 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductMC20On { animation: lineupProductMC20 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductL32On { animation: lineupProductL32 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductBNA42On { animation: lineupProductBNA42 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductD25On { animation: lineupProductD25 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductA20On { animation: lineupProductA20 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductM32On { animation: lineupProductA20 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductANX42On { animation: lineupProductANX42 ease-out 0.6s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductL20xiiOn { animation: lineupProductL20xii ease-out 0.6s 1 forwards; } @keyframes lineupProductVC03 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductL20 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductL12 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductMC20 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductBNA42 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductL32 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductD25 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductA20 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductM32 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductANX42 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductL20xii { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0px); } } #lineupWrap .lineupCatalog { opacity: 0; transform: translateY(0px); } #lineupWrap .lineupCatalogOn { animation: lineupCatalog ease-out 0.6s 1 forwards; } @keyframes lineupCatalog { 0% { opacity: 0; transform: translateY(180px); } 100% { opacity: 1; transform: translateY(0px); } } @media screen and (min-width: 769px) { #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a:hover { color: #ffffff; background-color: #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a:hover::before { border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a:hover::after { border: solid 2px #ffffff; } #lineupWrap .lineupCatalog a:hover { color: #000000; text-decoration: none; background-color: #ffffff; } #lineupWrap .lineupCatalog a:hover::before { border-top: solid 2px #000000; border-right: solid 2px #000000; } #lineupWrap .lineupCatalog a:hover::after { border: solid 2px #000000; } #lineupWrap .lineupCatalog a:hover dl::after { top: 100%; } } @media screen and (max-width: 1279px) { #lineupWrap .lineupAreaWrap { padding-top: 100px; padding-bottom: 100px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductPost { width: 78%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductPost { width: 78%; margin-left: 22%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear { margin-left: -55px; width: 110px; border-radius: 28px; font-size: 2.5rem; line-height: 2.8rem; padding-top: 12px; padding-bottom: 9px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear { margin-left: -55px; width: 110px; border-radius: 28px; font-size: 2.5rem; line-height: 2.8rem; padding-top: 12px; padding-bottom: 9px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear + .lineupProductPost { padding-top: 40px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear + .lineupProductPost { padding-top: 40px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h4 { font-size: 2rem; line-height: 3rem; margin-bottom: 12px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h4 br { display: none; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox p { font-size: 1.5rem; line-height: 2.7rem; margin-bottom: 28px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a { width: 210px; font-size: 1.5rem; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductEnd { height: 80px; } #lineupWrap .lineupCatalog { margin-top: 60px; } } @media screen and (max-width: 1023px) { #lineupWrap .lineupAreaWrap { padding-top: 80px; padding-bottom: 80px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductPost { width: 79%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductPost { width: 79%; margin-left: 21%; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear { margin-left: -48px; width: 96px; border-radius: 23px; font-size: 2.2rem; line-height: 2.4rem; padding-top: 9px; padding-bottom: 7px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear { margin-left: -48px; width: 96px; border-radius: 23px; font-size: 2.2rem; line-height: 2.4rem; padding-top: 9px; padding-bottom: 7px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear + .lineupProductPost { padding-top: 35px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear + .lineupProductPost { padding-top: 35px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h4 { font-size: 1.9rem; line-height: 2.9rem; margin-bottom: 10px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox p { line-height: 2.6rem; margin-bottom: 25px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a { width: 200px; font-size: 1.4rem; padding: 8px 0 7px 2px; } #lineupWrap .lineupCatalog { max-width: 740px; margin-top: 60px; } #lineupWrap .lineupCatalog a { padding: 30px 40px 28px 35px; } #lineupWrap .lineupCatalog a dl dt { font-size: 2rem; line-height: 2.8rem; width: 230px; } #lineupWrap .lineupCatalog a dl dd { font-size: 1.4rem; line-height: 2.6rem; } } @media screen and (max-width: 767px) { #lineupWrap .lineupAreaWrap { padding-top: 60px; padding-bottom: 60px; padding-right: 0; padding-left: 0; } #lineupWrap .lineupAreaWrap .lineupProductWrap{ padding-top: 20px; } #lineupWrap .lineupAreaWrap .lineupProductWrap::before { position: absolute; top: 0; left: -25px; z-index: 13; content: ""; width: 28px; height: 100%; background-color: #ffffff; } #lineupWrap .lineupAreaWrap .lineupProductWrap::after { left: 4px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL { width: 100%; float: none; clear: none; padding-right: 5px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR { width: 100%; float: none; clear: none; padding-right: 5px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductPost { width: calc(100% - 35px); margin-left: 35px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductPost { width: calc(100% - 35px); margin-left: 35px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear::before { position: absolute; top: 15px; right: 100%; z-index: 11; content: ""; width: 294px; height: 2px; background-color: #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear::before { position: absolute; top: 15px; right: 100%; z-index: 11; content: ""; width: 294px; height: 2px; background-color: #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear { left: 50%; margin-left: -65px; width: 160px; border-radius: 19px; font-size: 1.9rem; line-height: 2rem; padding-top: 6px; padding-bottom: 6px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear { left: 50%; margin-left: -65px; width: 160px; border-radius: 19px; font-size: 1.9rem; line-height: 2rem; padding-top: 6px; padding-bottom: 6px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductL .lineupProductYear + .lineupProductPost { padding-top: 60px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductR .lineupProductYear + .lineupProductPost { padding-top: 60px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPoint::before { position: absolute; top: 15px; left: -1px; z-index: 111; content: ""; width: 10px; height: 10px; background-color: #000000; border-radius: 5px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPoint::after { position: absolute; top: 17px; left: 1px; z-index: 112; content: ""; width: 6px; height: 6px; background-color: #ffffff; border-radius: 3px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox > div:first-child { max-width: 300px; margin-right: auto; margin-left: auto; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h3 { margin-top: 15px; margin-bottom: 20px; max-width: 280px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox h4 { font-size: 1.7rem; line-height: 2.5rem; margin-bottom: 9px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox p { font-size: 1.4rem; line-height: 2.4rem; margin-bottom: 19px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a { width: 140px; font-size: 1.3rem; border: solid 2px #000000; padding: 7px 6px 5px 0; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a::before { top: 9px; right: 7px; width: 10px; height: 9px; border-top: solid 2px #000000; border-right: solid 2px #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductPost .lineupProductBox a::after { top: 13px; right: 11px; width: 12px; height: 11px; border: solid 2px #000000; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt150, #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt200, #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt250, #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt300, #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt350, #lineupWrap .lineupAreaWrap .lineupProductWrap .lpMt450 { margin-top: 80px; } #lineupWrap .lineupAreaWrap .lineupProductWrap .lineupProductEnd { height: 40px; } #lineupWrap .lineupCatalog { max-width: 430px; margin-top: 20px; } #lineupWrap .lineupCatalog a { padding: 17px 25px 17px 25px; } #lineupWrap .lineupCatalog a dl { display: block; } #lineupWrap .lineupCatalog a dl dt { display: block; font-size: 1.6rem; line-height: 2.6rem; width: 100%; margin-bottom: 8px; } #lineupWrap .lineupCatalog a dl dd { display: block; font-size: 1.3rem; line-height: 2.2rem; } #lineupWrap .lineupCatalog a dl dt span { padding-right: 29px; position: relative; } #lineupWrap .lineupCatalog a dl dt span::before { position: absolute; top: 2px; right: 0px; content: ""; width: 11px; height: 9px; border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; } #lineupWrap .lineupCatalog a dl dt span::after { position: absolute; top: 6px; right: 4px; content: ""; width: 14px; height: 11px; border: solid 2px #ffffff; } #lineupWrap .lineupCatalog a dl dd br { display: none; } #lineupWrap .lineupCatalog a::before { display: none; } #lineupWrap .lineupCatalog a::after { display: none; } #lineupWrap .lineupProductWrap .lineupProductYear2014, #lineupWrap .lineupProductWrap .lineupProductYear2016, #lineupWrap .lineupProductWrap .lineupProductYear2017, #lineupWrap .lineupProductWrap .lineupProductYear2018, #lineupWrap .lineupProductWrap .lineupProductYear2019 { opacity: 1; transform: translate(0px); } #lineupWrap .lineupProductWrap .lineupProductYear2020 { opacity: 1; transform: translate(0px); } #lineupWrap .lineupProductWrap .lineupProductYear2014On { animation: lineupProductYear2014 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2016On { animation: lineupProductYear2016 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2017On { animation: lineupProductYear2017 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2018On { animation: lineupProductYear2018 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2019On { animation: lineupProductYear2019 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2020On { animation: lineupProductYear2020 ease-out 0s 1 forwards; } #lineupWrap .lineupProductWrap .lineupProductYear2021On { animation: lineupProductYear2021 ease-out 0s 1 forwards; } @keyframes lineupProductYear2014 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2016 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2017 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2018 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2019 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2020 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes lineupProductYear2021 { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } } } /* 6）お問い合わせ ========================================================= */ #inquiryWrap { width: 100%; padding-right: 25px; padding-left: 25px; background-color: #eeeeee; } #inquiryWrap #inquiryBox { max-width: 1140px; margin: 0 auto; padding-top: 56px; padding-bottom: 73px; } #inquiryWrap #inquiryBox .inquirySummary { text-align: center; margin-bottom: 30px; } #inquiryWrap #inquiryBox .inquirySummary h2 { font-size: 3rem; line-height: 3.6rem; margin-bottom: 17px; } #inquiryWrap #inquiryBox .inquirySummary p { font-size: 1.7rem; line-height: 3.2rem; } #inquiryWrap #inquiryBox .inquiryInfo { max-width: 300px; margin: 0 auto; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox { width: 100%; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a { position: relative; display: block; max-width: 300px; border: solid 2px #000000; background-color: #000000; color: #ffffff; font-size: 1.6rem; font-weight: 700; line-height: 2.6rem; text-align: center; text-decoration: none; padding-top: 11px; padding-bottom: 11px; margin-top: 40px; margin-right: auto; margin-left: auto; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a::before { position: absolute; top: 15px; right: 14px; content: ""; width: 12px; height: 10px; border-top: solid 2px #ffffff; border-right: solid 2px #ffffff; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a::after { position: absolute; top: 19px; right: 18px; content: ""; width: 15px; height: 12px; border: solid 2px #ffffff; } @media screen and (min-width: 769px) { #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a:hover { color: #111111; background-color: transparent; transition: all 0.3s ease; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a:hover::before { border-top: solid 2px #000000; border-right: solid 2px #000000; transition: all 0.3s ease; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a:hover::after { border: solid 2px #000000; transition: all 0.3s ease; } } @media screen and (max-width: 1023px) { #inquiryWrap #inquiryBox .inquirySummary { text-align: center; margin-bottom: 25px; } #inquiryWrap #inquiryBox .inquirySummary p { font-size: 1.6rem; line-height: 3rem; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox { width: 100%; max-width: 600px; margin-right: auto; margin-left: auto; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a { margin-top: 35px; } } @media screen and (max-width: 767px) { #inquiryWrap #inquiryBox { padding-top: 34px; padding-bottom: 50px; } #inquiryWrap #inquiryBox .inquirySummary { margin-bottom: 20px; } #inquiryWrap #inquiryBox .inquirySummary h2 { font-size: 2.2rem; line-height: 2.8rem; margin-bottom: 14px; } #inquiryWrap #inquiryBox .inquirySummary p { font-size: 1.4rem; line-height: 2.4rem; text-align: left; } #inquiryWrap #inquiryBox .inquirySummary p br { display: none; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a { max-width: 230px; font-size: 1.3rem; line-height: 2.4rem; padding-top: 8px; padding-bottom: 8px; margin-top: 20px; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a::before { top: 12px; right: 12px; width: 11px; height: 9px; } #inquiryWrap #inquiryBox .inquiryInfo .inquiryInfoBox a::after { top: 16px; right: 16px; width: 12px; height: 11px; } }