@charset "UTF-8"; /* キービジュアル --------------------------------------------------- */ #TopKeyVisual { width: 100%; } #TopKeyVisual .TopKeyVisual_SlideEach { position: relative; width: 100%; background-color: #333; background-repeat: no-repeat; background-position: 50% 100%; background-size: cover; } /* 中身 */ #TopKeyVisual .SlideWrap { display: flex; flex-wrap: wrap; position: relative; z-index: 1000; } /* 背景:半調 */ #TopKeyVisual .Slide2:before { position: absolute; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); content: ''; } @media only screen and (max-width: 767px) { /* 高さ */ #TopKeyVisual .TopKeyVisual_SlideEach { height: 600px; } /* 背景 */ #TopKeyVisual .Slide1 { background-image: url(/img/home/slide/jireibanner_v2_sp.png?ver=220922); } #TopKeyVisual .Slide2 { background-image: url(/img/home/slide/banner_back-FA-1616_SP.png?ver=231016); } #TopKeyVisual .Slide3 { background-image: url(/img/home/slide/IEP-500_banner_back_sp.png?ver=220308); } #TopKeyVisual .Slide4 { background-image: url(/img/home/slide/ceacaa_SP.png?ver=230112); } #TopKeyVisual .Slide5 { background-image: url(/img/home/slide/banner_5yearwarranty_white_SP.png?ver=230901); } #TopKeyVisual .Slide6 { background-image: url(/img/home/slide/banner_back_kowa_webinar_sp.png?ver=240117); } /* 中身:スライド1 *暗め背景に白文字*/ #TopKeyVisual .Slide1 .SlideWrap { margin-top: 50px; padding: 0 30px; } #TopKeyVisual .Slide1 .LeadUnit { order: 2; width: 100%; color: #fff; } #TopKeyVisual .Slide1 .Photo { order: 1; width: 100%; } #TopKeyVisual .Slide1 .Photo img { max-width: 300px; margin: 0 auto; } #TopKeyVisual .Slide1 .Logo { margin-top: 20px; } #TopKeyVisual .Slide1 .Logo img { width: 150px; } #TopKeyVisual .Slide1 .Lead1 { margin-top: 230px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide1 .Lead2 { margin-top: 10px; font-size: 1.5rem; line-height: 1.3em; } #TopKeyVisual .Slide1 .Lead3 { margin-top: 10px; font-size: 2.0rem; } #TopKeyVisual .Slide1 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide1 .BtnTo a { margin-top: 10px; font-size: 1.4rem; } #TopKeyVisual .Slide1 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド2 *暗め背景に白文字*/ #TopKeyVisual .Slide2 .SlideWrap { margin-top: 15px; padding: 0 30px; } #TopKeyVisual .Slide2 .LeadUnit { order: 2; width: 100%; color: #fff; } #TopKeyVisual .Slide2 .Photo { order: 1; width: 100%; } #TopKeyVisual .Slide2 .Photo img { max-width: 400px; margin: 0 auto; } #TopKeyVisual .Slide2 .Logo { margin-top: 20px; } #TopKeyVisual .Slide2 .Logo img { width: 150px; } #TopKeyVisual .Slide2 .Lead1 { margin-top: 10px; font-size: 3.0rem; line-height: 1.2em; } #TopKeyVisual .Slide2 .Lead2 { margin-top: 10px; font-size: 1.5rem; } #TopKeyVisual .Slide2 .Lead3 { margin-top: 10px; font-size: 1.5rem; } #TopKeyVisual .Slide1 .Lead4 { margin-top: 10px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide2 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide2 .BtnTo a { margin-top: 10px; font-size: 1.4rem; } #TopKeyVisual .Slide2 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド3 明るめ背景に黒字*/ #TopKeyVisual .Slide3 .SlideWrap { margin-top: 15px; padding: 0 30px; } #TopKeyVisual .Slide3 .LeadUnit { order: 2; width: 100%; } #TopKeyVisual .Slide3 .Photo { order: 1; width: 100%; } #TopKeyVisual .Slide3 .Photo img { max-width: 300px; margin: 0 auto; } #TopKeyVisual .Slide3 .Logo { margin-top: 20px; } #TopKeyVisual .Slide3 .Logo img { width: 150px; } #TopKeyVisual .Slide3 .Lead1 { margin-top: 10px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide3 .Lead2 { margin-top: 10px; font-size: 1.5rem; line-height: 1.3em; } #TopKeyVisual .Slide3 .Lead3 { margin-top: 10px; font-size: 1.5rem; } #TopKeyVisual .Slide3 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide3 .BtnTo a { margin-top: 10px; font-size: 1.4rem; } #TopKeyVisual .Slide3 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド4 明るめ背景に黒字*/ #TopKeyVisual .Slide4 .SlideWrap { margin-top: 20px; padding: 0 30px; } #TopKeyVisual .Slide4 .LeadUnit { order: 2; width: 100%; } #TopKeyVisual .Slide4 .Photo { order: 1; width: 100%; } #TopKeyVisual .Slide4 .Photo img { max-width: 300px; margin: 0 auto; } #TopKeyVisual .Slide4 .Logo { margin-top: 20px; } #TopKeyVisual .Slide4 .Logo img { width: 150px; } #TopKeyVisual .Slide4 .Lead1 { margin-top: 10px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide4 .Lead2 { margin-top: 10px; font-size: 1.5rem; line-height: 1.3em; } #TopKeyVisual .Slide4 .Lead3 { margin-top: 10px; font-size: 1.5rem; } #TopKeyVisual .Slide4 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide4 .BtnTo a { margin-top: 5px; font-size: 1.4rem; } #TopKeyVisual .Slide4 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド5 明るめ背景に黒字*/ #TopKeyVisual .Slide5 .SlideWrap { margin-top: 20px; padding: 0 30px; } #TopKeyVisual .Slide5 .LeadUnit { order: 1; width: 100%; } #TopKeyVisual .Slide5 .Photo { order: 2; width: 90%; } #TopKeyVisual .Slide5 .Photo img { max-width: 300px; margin: 0 auto; } #TopKeyVisual .Slide5 .Logo { margin-top: 20px; } #TopKeyVisual .Slide5 .Logo img { width: 150px; } #TopKeyVisual .Slide5 .Lead1 { margin-top: 60px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide5 .Lead3 { margin-top: 10px; font-size: 1.5rem; } #TopKeyVisual .Slide5 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide5 .BtnTo a { margin-top: 10px; font-size: 1.4rem; } #TopKeyVisual .Slide5 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド6 *暗め背景に白文字*/ #TopKeyVisual .Slide6 .SlideWrap { margin-top: 50px; padding: 0 30px; } #TopKeyVisual .Slide6 .LeadUnit { order: 2; width: 100%; color: #fff; } #TopKeyVisual .Slide6 .Photo { order: 1; width: 100%; } #TopKeyVisual .Slide6 .Photo img { max-width: 300px; margin: 0 auto; } #TopKeyVisual .Slide6 .Logo { margin-top: 20px; } #TopKeyVisual .Slide6 .Logo img { width: 150px; } #TopKeyVisual .Slide6 .Lead1 { margin-top: 230px; font-size: 2.5rem; line-height: 1.4em; } #TopKeyVisual .Slide6 .Lead2 { margin-top: 10px; font-size: 1.5rem; line-height: 1.3em; } #TopKeyVisual .Slide6 .Lead3 { margin-top: 10px; font-size: 2.0rem; } #TopKeyVisual .Slide6 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide6 .BtnTo a { margin-top: 10px; font-size: 1.4rem; } #TopKeyVisual .Slide6 .Lead4 { margin-top: 15px; font-size: 1.1rem; line-height: 1.5em; } } @media only screen and (max-width: 372px) { /* 中身:スライド1 */ #TopKeyVisual .Slide1 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide1 .BtnTo a { font-size: 1.1rem; } /* 中身:スライド2 */ #TopKeyVisual .Slide2 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide2 .BtnTo a { font-size: 1.1rem; } /* 中身:スライド3 */ #TopKeyVisual .Slide3 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide3 .BtnTo a { font-size: 1.1rem; } /* 中身:スライド4 */ #TopKeyVisual .Slide4 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide4 .BtnTo a { font-size: 1.1rem; } /* 中身:スライド5 */ #TopKeyVisual .Slide5 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide5 .BtnTo a { font-size: 1.1rem; } /* 中身:スライド6 */ #TopKeyVisual .Slide6 .Lead1 { font-size: 1.8rem; } #TopKeyVisual .Slide6 .BtnTo a { font-size: 1.1rem; } } @media print, screen and (min-width: 768px) { /* 高さ */ #TopKeyVisual .TopKeyVisual_SlideEach { height: 580px; } /* 背景 */ #TopKeyVisual .Slide1 { background-image: url(/img/home/slide/jireibanner_v2_pc.png?ver=220922); } #TopKeyVisual .Slide2 { background-image: url(/img/home/slide/banner_back-FA-1616_PC.png?ver=231016); } #TopKeyVisual .Slide3 { background-image: url(/img/home/slide/IEP-500_banner_back_pc.png?ver=220308); } #TopKeyVisual .Slide4 { background-image: url(/img/home/slide/ceacaa_PC.png?ver=230112); } #TopKeyVisual .Slide5 { background-image: url(/img/home/slide/banner_5yearwarranty_white_PC.png?ver=230901); } #TopKeyVisual .Slide6 { background-image: url(/img/home/slide/banner_back_nairankai2023_pc.png?ver=230526); } /* 中身:スライド1 暗め背景に白文字*/ #TopKeyVisual .Slide1 .SlideWrap { max-width: 1400px; margin: 30px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide1 .LeadUnit { width: 70%; color: #fff; } #TopKeyVisual .Slide1 .Photo { width: 30%; padding-left: 20px; } #TopKeyVisual .Slide1 .Logo { } #TopKeyVisual .Slide1 .Logo img { width: 200px; } #TopKeyVisual .Slide1 .Lead1 { margin-top: 80px; font-size: 3.5rem; line-height: 1.2em; } #TopKeyVisual .Slide1 .Lead2 { margin-top: 20px; line-height: 1.8em; } #TopKeyVisual .Slide1 .Lead3 { margin-top: 15px; font-size: 2.5rem; } #TopKeyVisual .Slide1 .BtnTo { margin-top: 20px; } #TopKeyVisual .Slide1 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide1 .Lead4 { margin-top: 20px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド2 暗め背景に白文字*/ #TopKeyVisual .Slide2 .SlideWrap { max-width: 1400px; margin: 10px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide2 .LeadUnit { width: 60%; color: #fff; } #TopKeyVisual .Slide2 .Photo { width: 40%; padding-left: 5px; } #TopKeyVisual .Slide2 .Logo { } #TopKeyVisual .Slide2 .Logo img { width: 200px; } #TopKeyVisual .Slide2 .Lead1 { margin-top: 10px; font-size: 3.5rem; line-height: 1.2em; } #TopKeyVisual .Slide2 .Lead2 { margin-top: 10px; line-height: 1.5em; } #TopKeyVisual .Slide2 .Lead3 { margin-top: 10px; font-size: 2.5rem; line-height: 1.5em; } #TopKeyVisual .Slide2 .Lead4 { margin-top: 10px; font-size: 2.5rem; line-height: 1.5em; } #TopKeyVisual .Slide2 .BtnTo { margin-top: 10px; } #TopKeyVisual .Slide2 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide2 .Lead4 { margin-top: 10px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド3 明るめ背景に黒字 */ #TopKeyVisual .Slide3 .SlideWrap { max-width: 1400px; margin: 40px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide3 .LeadUnit { width: 60%; padding-right: 10px; } #TopKeyVisual .Slide3 .Photo { width: 40%; } #TopKeyVisual .Slide3 .Logo { } #TopKeyVisual .Slide3 .Logo img { width: 200px; } #TopKeyVisual .Slide3 .Lead1 { margin-top: 10px; font-size: 3.5rem; line-height: 1.3em; } #TopKeyVisual .Slide3 .Lead2 { margin-top: 10px; line-height: 1.5em; } #TopKeyVisual .Slide3 .Lead3 { margin-top: 10px; font-size: 2.5rem; line-height: 1.5em; } #TopKeyVisual .Slide3 .BtnTo { margin-top: 20px; } #TopKeyVisual .Slide3 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide3 .Lead4 { margin-top: 20px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド4 明るめ背景に黒字 */ #TopKeyVisual .Slide4 .SlideWrap { max-width: 1400px; margin: 40px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide4 .LeadUnit { width: 55%; padding-right: 10px; } #TopKeyVisual .Slide4 .Photo { width: 45%; } #TopKeyVisual .Slide4 .Logo { } #TopKeyVisual .Slide4 .Logo img { width: 200px; } #TopKeyVisual .Slide4 .Lead1 { margin-top: 10px; font-size: 3.5rem; line-height: 1.2em; } #TopKeyVisual .Slide4 .Lead2 { margin-top: 10px; line-height: 1.5em; } #TopKeyVisual .Slide4 .Lead3 { margin-top: 5px; font-size: 2.5rem; } #TopKeyVisual .Slide4 .BtnTo { margin-top: 20px; } #TopKeyVisual .Slide4 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide4 .Lead4 { margin-top: 20px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド5 明るめ背景に黒字 */ #TopKeyVisual .Slide5 .SlideWrap { max-width: 1400px; margin: 40px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide5 .LeadUnit { width: 55%; padding-right: 10px; } #TopKeyVisual .Slide5 .Photo { width: 45%; } #TopKeyVisual .Slide5 .Logo { } #TopKeyVisual .Slide5 .Logo img { width: 200px; } #TopKeyVisual .Slide5 .Lead1 { margin-top: 60px; font-size: 3.5rem; line-height: 1.2em; } #TopKeyVisual .Slide5 .Lead2 { margin-top: 10px; line-height: 1.5em; } #TopKeyVisual .Slide5 .Lead3 { margin-top: 5px; font-size: 2.5rem; line-height: 1.5em; } #TopKeyVisual .Slide5 .BtnTo { margin-top: 20px; } #TopKeyVisual .Slide5 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide5 .Lead4 { margin-top: 20px; font-size: 1.1rem; line-height: 1.5em; } /* 中身:スライド6 暗め背景に白文字*/ #TopKeyVisual .Slide6 .SlideWrap { max-width: 1400px; margin: 30px auto 0 auto; padding: 0 70px; align-items: center; } #TopKeyVisual .Slide6 .LeadUnit { width: 70%; color: #fff; } #TopKeyVisual .Slide6 .Photo { width: 30%; padding-left: 20px; } #TopKeyVisual .Slide6 .Logo { } #TopKeyVisual .Slide6 .Logo img { width: 200px; } #TopKeyVisual .Slide6 .Lead1 { margin-top: 40px; font-size: 4.5rem; line-height: 1.3em; } #TopKeyVisual .Slide6 .Lead2 { margin-top: 10px; line-height: 1.5em; } #TopKeyVisual .Slide6 .Lead3 { margin-top: 5px; font-size: 2.5rem; line-height: 1.5em; } #TopKeyVisual .Slide6 .BtnTo { margin-top: 20px; } #TopKeyVisual .Slide6 .BtnTo a { margin-top: 10px; margin-right: 10px; } #TopKeyVisual .Slide6 .Lead4 { margin-top: 20px; font-size: 1.1rem; line-height: 1.5em; } } @media print, screen and (min-width: 1090px) { /* 高さ */ #TopKeyVisual .TopKeyVisual_SlideEach { height: 610px; } /* 中身:スライド1 */ #TopKeyVisual .Slide1 .SlideWrap { margin: 90px auto 0 auto; } /* 中身:スライド2 */ #TopKeyVisual .Slide2 .SlideWrap { margin: 90px auto 0 auto; } /* 中身:スライド3 */ #TopKeyVisual .Slide3 .SlideWrap { margin: 100px auto 0 auto; } /* 中身:スライド4 */ #TopKeyVisual .Slide4 .SlideWrap { margin: 90px auto 0 auto; } /* 中身:スライド5 */ #TopKeyVisual .Slide5 .SlideWrap { margin: 90px auto 0 auto; } /* 中身:スライド6 */ #TopKeyVisual .Slide6 .SlideWrap { margin: 90px auto 0 auto; } }