/*極薄グレー #f2f2f2*/ /*グレーっぽい文字 #5A5959*/ /*シアン #3A8CEA*/ body{ width:100%; } .pcOnly{ display:none !important; } .pict img{ width:100%; height:auto; } a{ transition:.2s; font-weight:500; } a:hover{ opacity:.6; } .contSec{ margin-bottom:25vw; } section > .innerBlock{ position:relative; } .text.nega{ color:#fff; } .bold{ font-weight:500; } .secTitle{ text-align:center; margin-bottom:8.2vw; } .secTitle .main{ font-size:5.5vw; font-weight:500; margin-bottom:6px;} .secTitle .sub{ font-size:3vw; } .secTitle.nega{ color:#fff; } /*ボタン*/ .btnType-1{ width:50vw; height:10vw; margin:0 auto; } .btnType-1 a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px solid #1e1e1e; font-size:3.2vw; font-weight:500; } .btnType-1.nega a{ border-color:#fff; color:#fff; } .btnType-1-{ width:50vw; height:10vw; margin:0 auto; } .btnType-1- a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px solid #1e1e1e; font-size:3.2vw; font-weight:500; background:#1e1e1e; color:#fff; } /****/ a .btnType-1{ display:flex; align-items:center; justify-content:center; border:1px solid #1e1e1e; font-size:3.2vw; font-weight:500; } /****/ a.btnType-2, .btnType-2{ color:#3A8CEA; display:flex; align-items:center; font-size:3.46vw; line-height:1; } a.btnType-2::after, .btnType-2::after{ font-family: 'Material Icons'; content:'\e5cc'; margin-left:5px; font-size:4vw; line-height:1; padding-top:2px; } .btnType-3{ color:#333; display:flex; align-items:center; font-size:.85rem; line-height:1; } .btnType-3 input::before{ font-family: 'Material Icons'; content:'\e5cb'; margin-left:5px; font-size:1.4rem; line-height:1; padding-top:2px; color:#6e6e6e; } .btnType-3 input{ background-color:transparent; font-weight:500; color:#333; cursor:pointer; } .btnType-4{ width:; height:15vw; margin:0 auto; } .btnType-4 a{ display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; border:1px solid #1e1e1e; font-size:3.5vw; font-weight:500; } .btnType-4.nega a{ display:flex; align-items:center; justify-content:center; position:relative; color:#fff; width:100%; height:100%; border:1px solid #fff; font-size:3.5vw; font-weight:500; } .btnType-4 a::after{ font-family:'Material Icons'; content:'\e5cc'; font-size:6.5vw; line-height:1; position:absolute; top:50%; right:1vw; transform:translateY(-50%); color:#6e6e6e; } .btnType-5{ width:; height:15vw; margin:0 auto; } .btnType-5 a{ display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; border:1px solid #1e1e1e; font-size:3.5vw; font-weight:500; } .btnType-5 a::after{ font-family:'Material Icons'; content:'\e5cb'; font-size:6.5vw; line-height:1; position:absolute; top:50%; left:1vw; transform:translateY(-50%); color:#6e6e6e; } .btnType-5.nega a{ border-color:#fff; color:#fff; } .btnType-5.nega a:hover{ background-color:#f6f6f6; color:#333; opacity:1; } .btnType-6{ width:242px; height:42px; } .btnType-6 a, .btnType-6 input{ border-radius:21px !important; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; line-height:1; background-color:#3A8CEA; width:100%; height:100%; } .btnType-7{ width:242px; height:42px; } .btnType-7 a{ color:#3A8CEA; display:flex; align-items:center; justify-content:center; font-size:.85rem; line-height:1; background-color:#fff; border:1px solid #3A8CEA; border-radius:21px; width:100%; height:100%; } .btnType-8{ width:100%; height:14vw; } .btnType-8 a{ display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; border:1px solid #42579D; font-size:3.45vw; color:#42579D; } .btnType-8 a:hover{ background-color:#42579D; color:#fff; opacity:1; } a.btnType-9, .btnType-9{ color:#1e1e1e; display:flex; align-items:center; font-size:3.2vw; line-height:1; justify-content:center; } a.btnType-9::before, .btnType-9::before{ font-family: 'Material Icons'; content:'\e5cb'; margin-left:5px; font-size:4vw; line-height:1; padding-top:2px; } .dotsPanel{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background-image:url(../images/dotforscreen.png); } .overrayPanel{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; mix-blend-mode:multiply; background-color:#333; opacity:.5; } #darkSchreen{ position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(0,0,0,0); z-index:9900; pointer-events:none; transition:.15s; } #darkSchreen.active{ pointer-events:auto; background-color:rgba(0,0,0,.75); } header{ width:100%; height:12vw; position:fixed;top:0; left:0; z-index:10000; background-color:rgba(255,255,255,1); transition:.2s; } .homePage section{ background-color:#fff; } /*.homePage header{ background-color:rgba(255,255,255,0);}*/ .homePage header.addWhite{ background-color:rgba(255,255,255,1); } header.active{ width:80%; margin-left:20%; } header .innerBlock{ width:100%; height:100%; display:flex; align-items:center; } header .logo{ width:32vw; margin:0 auto; line-height:1; } header .logo > a{ display:block; } header .logo svg{ fill:#1e1e1e; transition:.3s; } .homePage header .logo svg{ fill:#1e1e1e; transition:.3s; } header #hbgBtn{ width:8vw; height:4.5vw; display:flex; flex-wrap:wrap; align-content:space-between; position:absolute; top:5vw; right:4vw; cursor:pointer; /*background-color:#efefef;*/ } header #hbgBtn *{ transition:.2s; } header #hbgBtn .bar{ width:100%; height:1px; background-color:#333; position:relative; margin-top:5px; } header #hbgBtn .bar::before, header #hbgBtn .bar::after{ content:''; width:100%; height:1px; background-color:#333; position:absolute; left:0; } header #hbgBtn .bar::before{ top:-6px; } header #hbgBtn .bar::after{ top:6px; } header #hbgBtn .title{ display:none; } /**/ .homePage header #hbgBtn .bar{ width:100%; height:1px; background-color:#1e1e1e; position:relative; margin-top:5px; } .homePage header #hbgBtn .bar::before, .homePage header #hbgBtn .bar::after{ background-color:#1e1e1e; } .homePage header #hbgBtn .title{ color:#1e1e1e; } /*スクロール色変更*/ .homePage header.addWhite, .homePage header.active{ background-color:rgba(255,255,255,1); } .homePage header.addWhite .logo svg, .homePage header.active .logo svg{ fill:#1e1e1e; } .homePage header.addWhite #hbgBtn .bar, .homePage header.active #hbgBtn .bar{ background-color:#1e1e1e; } .homePage header.addWhite #hbgBtn .bar::before, .homePage header.addWhite #hbgBtn .bar::after, .homePage header.active #hbgBtn .bar::before, .homePage header.active #hbgBtn .bar::after{ background-color:#1e1e1e; } .homePage header.addWhite #hbgBtn .title, .homePage header.active #hbgBtn .title{ color:#1e1e1e; } /*スクロール色変更*/ /**/ /*hbgBtn active*/ header #hbgBtn.active .bar{ transform:rotate(45deg); margin-top:10px; } header #hbgBtn.active .bar::before{ top:0; transform:rotate(90deg); } header #hbgBtn.active .bar::after{ content:none; } header #hbgBtn.active .title{ opacity:0; } /*hbgBtn active*/ header + nav .navMenu{ position:fixed; top:12vw; right:-80vw; width:80vw; height:calc(100vh - 12vw); overflow:auto; z-index:9999; pointer-events:none; padding:0 0 0 9vw; display:flex; flex-wrap:wrap; background-color:#fff; opacity:0; transition:.2s; } header + .gNav.active .navMenu{ right:0; } header + nav .navMenu .order-01{ order:1; } .navListBox{ width:100%; } .navListBox .boxTitle{ margin-bottom:30px; font-weight:500; } header + nav .boxTitle{ font-size:4.5vw; margin-bottom:22px; font-weight:500; } header + nav .navMenu .navListCase{ width:100%; } header + nav .navMenu #majorCategoryCase{ margin:0 0 3vw; order:0; } header + nav .navMenu #majorCategoryCase .text{ font-weight:400; } header + nav .navMenu #innerCategory{ width:100%; height:/*110vw;*/ } header + nav .navMenu .inWrap{ order:0; min-height:100%; padding-right:4vw; padding-top:5vw; } header + nav .navMenu .inWrap #innerCategory{ display:flex; flex-wrap:wrap; margin-bottom:7vw; } header + nav .navMenu .outerCategory{ width:100%; } header + nav .navMenu .outerCategory .header{ position:relative; font-size:4vw; margin-bottom:4.5vw; width:100%; font-weight:400; } header + nav .navMenu .outerCategory .header::after{ font-family: 'Material Icons'; content:'\e5e1'; font-size:5vw; color:#999; position:absolute; right:0; top:50%; transform:translateY(-50%); } header + nav .navMenu #innerCategory .navListCase{ position:fixed; top:12vw; width:80vw; height:100%; padding:4vw 4vw 0 9vw; display:block; flex-wrap:wrap; transition:.3s; background-color:#fff; z-index:9998; } header + nav .navMenu #innerCategory .navListCase{ left:100vw; } header.active + nav .navMenu #innerCategory .outerCategory + .navListCase{ left:100vw; } header + nav .navMenu #innerCategory .outerCategory.comein + .navListCase{ left:100vw } header.active + nav .navMenu #innerCategory .outerCategory.comein + .navListCase{ left:20vw } header + nav .navMenu #innerCategory .navListCase .subete{ position:relative; font-size:3.5vw; margin-bottom:12vw; margin-left:-1.5vw; display:flex; align-items:center; } header + nav .navMenu #innerCategory .navListCase .subete::before{ font-family: 'Material Icons'; content:'\e5cb'; font-size:5.5vw; line-height:1; padding-top:2px; } header + nav .navMenu #innerCategory .navList{ display:block; } header + nav .navMenu #innerCategory .navList .topic{ margin-bottom:4vw } header + nav .navMenu #innerCategory .navList .topic a{ font-size:3.5vw; } .active .navListBox.left{ width:100%; order:0; padding-left:6vw } .active .navListBox.right{ width:100%; order:0; padding-left:6vw; } header + nav.navListBox .topic{ font-size:3.2vw; margin-bottom:5px; width:210px; } header + nav .navMenu .navList{ display:flex; flex-wrap:wrap; width:100%; } header + nav.gNav .navCateTitle{ display:none; } header + nav.gNav .navList .topic a .cap{ margin-left:10px; } header + nav.gNav .navMenu{ opacity:1; pointer-events:all; }/*.active 追加する*/ header + nav.gNav .navMenu #majorCategory{ justify-content:space-between; width:100%; } header + nav.gNav .navMenu #majorCategory .topic{ width:100%; text-align:center; margin-bottom:5vw; } header + nav.gNav .navMenu #majorCategory .topic a{ display:flex; align-items:center; font-size:4.26vw; font-weight:500; } header + nav.gNav .navMenu #majorCategory .topic .pict img{ /*margin-right:20px;*/ } header + nav.gNav .navMenu #majorCategory .topic#kuhloneLink .pict img{ width:7vw; } header + nav.gNav .navMenu #majorCategory .topic#kuhlmallLink .pict img{ width:6vw; } header + nav.gNav .navMenu #majorCategory .topic .title{ font-size:1.2rem; font-weight:500; width:9vw; height:9vw; margin-right:5px; display:flex; align-items:center; justify-content:flex-start; position:relative; } header + nav.gNav .navMenu .navList.bnrNav{ display:flex; justify-content:center; border-bottom:1px solid #c4c4c4; margin-bottom:20px; padding-bottom:30px; } header + nav.gNav .navMenu .navList.bnrNav .topic{ margin:0 15px } header + nav.gNav .navMenu .navList.gNavMenu{ justify-content:space-between; display:flex; } header + nav.gNav .navMenu .navList.gNavMenu .topic{ font-size:3.2vw; width:50%; margin-bottom:4vw; } header + nav.gNav .navMenu .navListCase.snsLinks{ margin:10vw 0 48vw; } @media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, header + nav.gNav .navMenu .navListCase.snsLinks { margin-bottom:48vw; } } header + nav.gNav .navMenu .navList.snsIcons{ display:flex !important; justify-content:center; align-items:center; } /*各子メニュー内SNS*/ header + nav .navMenu #innerCategory .navList.snsIcons{ width:100%; margin-top:10vw; padding-right:5vw; padding-bottom:19vw; } /*各子メニュー内SNS*/ header + nav.gNav .navMenu .navList.snsIcons .topic{ margin:0 12px; } header + nav.gNav .navMenu .navList.snsIcons .topic a{ display:flex; align-items:center; } header + nav.gNav .navMenu .navList.snsIcons .topic:first-of-type a img{ width:5.6vw; } header + nav.gNav .navMenu .navList.snsIcons .topic:nth-of-type(2) a img{ width:5.7vw; } header + nav.gNav .navMenu .navList.snsIcons .topic:nth-of-type(3) a img{ width:6.2vw; } /*再構築*/ html.active .wrapper{ position:fixed; top:0; left:0; z-index:-1; width:100vw; height:100vh; overflow:hidden; } html.active footer{ display:none; } /*html.active section{filter: blur(4px);}*//*←重くなる？　一旦解除220804*/ /**/ #floatNav{ width:100%; position:fixed; bottom:0; left:0; z-index:10002; background-color:#fff; } #floatNav.up{ bottom:0; } #floatNav .list{ display:flex; } #floatNav .topic{ height:18vw; width:calc(100% / 3); } #floatNav .topic:first-of-type{ border-right:1px solid #fff; } #floatNav .topic a{ display:flex; align-items:center; align-content:center; flex-wrap:wrap; width:100%; height:100%; background-color:#1e1e1e; color:#fff; font-size:3vw; text-align:center; } #floatNav .topic:nth-of-type(3) a{ background:#fff; border-top:1px solid #1e1e1e; } #floatNav .topic a .icon{ width:72%; text-align:center; margin:0 auto 3px; } #floatNav .topic a .icon img{ width:100%; height:5.5vw; margin-bottom:3px; } #floatNav .topic a .text{ font-feature-settings:'palt'; line-height:1.2; width:100%; } #floatNav .topic:nth-of-type(3) a .text{ color:#1e1e1e; } #floatNav .goTop{ display:none; } /* 2026.02.19 追加 */ #floatNav_b { width: 100%; position: fixed; bottom: 0px; left: 50%; transform: translate(-50%, 0); z-index: 9000; } #floatNav_b .floatNav_b-upper { padding: 10px 15px; position: relative; transition: 0.2s; background: #1e1e1e; } #floatNav_b .floatNav_b-upper .list { display: flex; justify-content: center; gap: 10px; } #floatNav_b .floatNav_b-upper .list > li { width: calc((100% - 20px) / 3); } #floatNav_b .floatNav_b-upper .list > li a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: #ffffff; height: 63px; padding-top: 2px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); border-radius: 3px; } #floatNav_b .floatNav_b-upper .list > li a:hover { } #floatNav_b .floatNav_b-upper .list > li a:hover .icon svg path, #floatNav_b .floatNav_b-upper .list > li a:hover .icon svg rect { } #floatNav_b .floatNav_b-upper .list > li.contact a { background: #3a8cea; color: #fff; } #floatNav_b .floatNav_b-upper .list > li a .icon { display: flex; align-items: center; height: 24px; } #floatNav_b .floatNav_b-upper .list > li a .text { font-size: 12px; font-weight: bold; } #floatNav_b .floatNav_b-lower { position: relative; transition: 0.2s; background: #c4c4c4; } #floatNav_b .floatNav_b-lower .list { display: flex; gap: 1px; padding-top: 1px; } #floatNav_b .floatNav_b-lower .list > li { width: calc((100% - 1px) / 2); } #floatNav_b .floatNav_b-lower .list > li a { display: flex; justify-content: center; align-items: center; gap: 7px; height: 50px; background: #1e1e1e; color: #fff; } #floatNav_b .floatNav_b-lower .list > li.goTop { display: none; } #floatNav_b .floatNav_b-lower .list > li a .icon { position: relative; top: -3px; } #floatNav_b .floatNav_b-lower .list > li a .icon img.w-27 { width: 27px; } #floatNav_b .floatNav_b-lower .list > li a .icon img.w-18 { width: 18px; } #floatNav_b .floatNav_b-lower .list > li a .text { font-size: 12px; font-weight: bold; } /* 2026.02.19 追加 */ section .innerBlock{ width:100%; padding:0 4vw; } footer{ background:#1e1e1e; padding-bottom:18vw; position:relative; z-index:1;} /*footer::after{ content:''; position:absolute; display:block; width:100%; height:100vh; background-color:#1e1e1e; top:100vh; left:0; z-index:-1; }*/ footer .innerBlock{ width:100%; padding:0 4vw 5vw; } footer .innerBlock .navListBox{ margin-bottom:3vw; padding:0; display:flex;flex-wrap:wrap; position:relative; } footer .innerBlock .navListBox .footerMainNav{ width:100%; order:0; } footer .navListBox .navListCase{ width:100%; transition:.2s; } footer .innerBlock .navListBox .footerMainNav .navListCase.open{ margin-bottom:5vw; } footer .navListBox .navListCase .boxTitle{ color:#fff; background-color:#1e1e1e; position:relative; z-index:10; margin-bottom:0; display:flex; padding:5.2vw ; font-weight:300; border-bottom:1px solid #5A5959; transition:.2s; } footer .navListBox .navListCase.open .boxTitle{ margin-bottom:5vw;} footer .navListBox .navListCase .boxTitle::before, footer .navListBox .navListCase .boxTitle::after{ content:''; display:block; width:3vw; height:1px; background-color:#5A5959; position:absolute; left:0; top:50%; transition:.2s; } footer .navListBox .navListCase .boxTitle::after{ transform:rotate(90deg); } footer .navListBox .navListCase.open .boxTitle::after{ transform:rotate(180deg); } footer .navListBox .footerMainNav .navListCase .navList{ position:relative; z-index:1; opacity:0; pointer-events: none; display:flex;flex-wrap:wrap; transition:.2s; transition-timing-function:linear; } footer .navListBox .footerMainNav .navListCase .topic{ font-size:3.2vw; line-height:0; margin-bottom:0; padding-left:5vw; width:50%; transition:.2s; } footer .navListBox .navListCase.open .navList{ opacity:1; pointer-events:auto; /*background-color:#5A5959; padding:5vw 0;*/ } footer .navListBox .navListCase.open .topic{ margin-bottom:5vw; line-height:1; opacity:1; } footer .navList a{ color:#fff; font-weight:300; } footer .navList.snsIcons{ display:flex; justify-content:center; align-items:center; width:100%; order:1; margin:4.2vw 0 5vw; } footer .navList.snsIcons .topic{ margin:0; width:11vw; } footer .navList.snsIcons .topic a{ display:flex; align-items:center; justify-content:center; height:100%; } footer .navListBox .under{ padding:7vw 0 0; } footer .navListBox .navListCase.under{ width:100%; margin-bottom:8vw; order:1; } footer .navListBox .navListCase.under .navList{ display:flex; width:100%; flex-wrap:wrap; } footer .navListBox .navListCase.under .navList .topic{ width:50%; padding-left:6vw; margin-bottom:3vw; height:7vw; } footer .navListBox .navListCase.under .navList .topic a{ display:block; height:100%; } footer .logo{ width:34vw; margin:0 auto 20px; } footer .gNavMenu a{ font-size:3.1vw; } footer .under .text{ color:#a7a7a7; font-size:2.8vw; width:100%; margin-bottom:30px; line-height:1.4; } footer .under .copyright{ color:#fff; font-size:2.8vw; font-weight:300; width:100%; text-align:center; } footer .linkText{ text-decoration:underline; color:#a7a7a7; font-weight:300; } .mainImageSec .innerBlock .mainImage img{ width:100%; height:auto; } .homePage .mainImageSec{ height:137vw; } .homePage .mainImageSec .mainImage{ /*background-image:url(../../images/home/poster_sp.jpg); */ background-size:cover; background-position:center; } /*.homePage */ .homePage #hp-firstView{ height:100vw; margin:12vw 0 8vw; position:relative; } #hp-firstView #mainSlider{ width:100%; height:100%; } #hp-firstView #mainSlider .slick-arrow{ position:absolute; top:50%; width:4vw; height:8vw; z-index:1000; display:none !important; } #hp-firstView #mainSlider .slick-arrow::before{ width:100%; height:100%; display:block; } #hp-firstView #mainSlider .slick-arrow.slick-prev{left:3vw; } #hp-firstView #mainSlider .slick-arrow.slick-prev::before{ content:url(../images/FVslide-arrow-left.svg); opacity:1; } #hp-firstView #mainSlider .slick-arrow.slick-next{right:3vw;} #hp-firstView #mainSlider .slick-arrow.slick-next::before{ content:url(../images/FVslide-arrow-right.svg); opacity:1; } #hp-firstView #mainSlider .slick-dots{ bottom:0; z-index:10; } #hp-firstView #mainSlider .slick-dots li{ width:13vw; margin:0 .8vw; } #hp-firstView #mainSlider .slick-dots li button{ width:100%; } #hp-firstView #mainSlider .slick-dots li button::before{ content:''; width:100%; display:block; height:5px; background-color:#fff; opacity:1; } #hp-firstView #mainSlider .slick-dots li.slick-active button::before{ background-color:#f00; } #hp-firstView #mainSlider .slick-list, #hp-firstView #mainSlider .slick-list .slick-track{ height:100%; } #hp-firstView .slide{ position:relative; width:100vw; } #hp-firstView .slide .meshPanel{ position:absolute; top:0; left:0; display:none; } .mainImageSec .mainImage{ height:100%; /*background-color:#333;*/ } .homePage .innerBlock{ width:100%; } .homePage .mainImage{ position:relative; height:100%; background-color:#333; overflow:hidden; } .homePage .mainImageSec .innerBlock .mainImage video{ width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); } .homePage .mainImageSec{ /*margin-bottom:22vw;*/ padding-bottom:19vw; } .homePage .mainImageSec .innerBlock{ padding:0; } .homePage .mainImage h1.copy{ width:100%; position:absolute; top:44%; left:50%; z-index:5; transform:translate(-50%, -50%); color:#fff; text-align:center; font-size:5.6vw; line-height:1.4; font-family:serif; font-weight:300; } .homePage .mainImage #scrollArrow{ display:flex; flex-wrap:wrap; justify-content:center; position:absolute; left:50%; bottom:30vw; transform:translateX(-50%); z-index:2; } .homePage .mainImage #scrollArrow .text{ width:100%; text-align:center; font-size:2.5vw; color:#fff; } .homePage .mainImage #scrollArrow .arrow1, .homePage .mainImage #scrollArrow .arrow2, .homePage .mainImage #scrollArrow .arrow3{ display:block; width:11px; height:11px; border:1px solid transparent; border-right-color:rgba(255,255,255,.25); border-bottom-color:rgba(255,255,255,.25); position:absolute; top:17px; left:50%; transform:rotate(45deg) translateX(-50%); animation-name: scrollArrow1; animation-iteration-count: infinite; animation-duration: 2s; } .homePage .mainImage #scrollArrow .arrow2{ top:24px; border-right-color:rgba(255,255,255,.5); border-bottom-color:rgba(255,255,255,.5); animation-name: scrollArrow2; } .homePage .mainImage #scrollArrow .arrow3{ top:31px; border-right-color:rgba(255,255,255,.8); border-bottom-color:rgba(255,255,255,.8); animation-name: scrollArrow3; } .homePage #picUpSec{ margin-bottom:0; padding-bottom:12vw; } .homePage #completeSec{margin-bottom:10vw; padding-bottom:1px; position:relative; } .homePage #kuhlFam{ margin-bottom:0; padding-bottom:25vw; } .homePage #completeSec .innerBlock{ padding:0; position:static; } .homePage #completeSec .btns{ position:absolute; bottom:0; width:100%; } .homePage #completeSec .btns .btnType-1{ margin:0 auto 6vw; } .homePage #completeSec .btns .btnType-2{ justify-content:center; } /*swiper*/ #picUpSec .innerBlock{ padding:0; } /*slider1 Pickup car***/ #picupcarSlider{ position:relative; height:34.5vw; } #picupcarSlider .swiper-container{ position:relative; width:100%; margin:0 auto; height:100%; overflow:hidden; } #picupcarSlider .swiper-wrapper{ width:100%; height:; } #picupcarSlider .swiper-slide{ color: #ffffff; width:100%; height: 100%; text-align: center; line-height:; } #picupcarSlider .swiper-slide a{ display:block; } #picupcarSlider .swiper-slide a img{ width:100%; height:auto; } #picupcarSlider .swiper-pagination{ bottom:0; } #picupcarSlider .swiper-pagination-bullet{ width:7px !important; height:7px !important; margin:0 0 0 10px !important; background:#333 !important; } #picupcarSlider .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#f30 !important; } #picupcarSlider .swiper-pagination-bullet:first-child { margin:0 !important; } /*slider1 Pickup car***/ /*slider2 Complete car***/ #completeSlider{ position:relative; min-height:75vw; margin-bottom:22vw; } #completeSlider .swiper-container{ position:relative; width:100%; margin:0 auto; overflow:hidden; } #completeSlider .swiper-wrapper{ width:100%; height:; } #completeSlider .swiper-slide{ color: #ffffff; width:100%; height: 100%; text-align: center; line-height: ; } #completeSlider .swiper-slide a{ position:relative; } #completeSlider .swiper-slide.new a::after{ content:''; display:block; width:10.5vw; height:10.5vw; background-image:url(../images/compSlideNew.png); position:absolute; top:0; left:0; background-size:cover; } #completeSlider .swiper-slide:first-of-type{ padding-left:0; width:; } #completeSlider .swiper-pagination{ bottom:0; } #completeSlider .swiper-pagination-bullet{ width:7px !important; height:7px !important; margin:0 0 0 10px !important; background:#333 !important; } #completeSlider .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#f30 !important; } #completeSlider .swiper-pagination-bullet:first-child { margin:0 !important; } /*slider2 Complete car***/ #completeSlider .swiper-slide a{ display:block; width:100%; padding:0;} #completeSlider .swiper-slide .pict{ margin-bottom:1.75vw; } #completeSlider .swiper-slide .goodsName{ font-size:3.6vw; font-weight:700; line-height:1.2; } #completeSlider .swiper-slide .carName{ font-size:2.5vw; font-weight:500; } /**/ .homePage #linkSec{ margin-bottom:0; padding-bottom:9.3vw; } .homePage #linkSec .innerBlock{ padding:0 4vw; } .homePage #linkSec .list{ display:flex; flex-wrap:wrap; justify-content:space-between; } .homePage #linkSec .list .topic{ width:100%; height:30vw; overflow:hidden; margin-bottom:4vw; } .homePage #linkSec .list .topic:last-of-type{ margin-bottom:0; } .homePage #linkSec .list .topic.bigger{ height:55vw; } .homePage #linkSec .list .topic a{ display:flex; align-items:center; width:100%; height:100%; position:relative; padding:5vw; background-color:#1e1e1e; } .homePage #linkSec .list .topic a .pict{ position:absolute; z-index:1; width:100%; height:100%; top:0; left:0; } .homePage #linkSec .list .topic a .cont{ position:relative; z-index:2; color:#fff; } .homePage #linkSec .list .topic a .cont .main{ font-size:4.5vw; font-weight:500; } .homePage #linkSec .list .topic a .cont .sub{ font-size:2.5vw; line-height:1; } .homePage #kuhlFam{ background-color:#000; padding:0; } .homePage #kuhlFam .innerBlock{ padding:8.53vw 0 0; color:#fff; } .homePage #kuhlFam .secTitle{ padding: 0 4vw; margin-bottom:5.3vw; } .homePage #kuhlFam .secTitle .main{ /*width:100%;*/ margin:0 12vw 6.4vw; position:relative; display:flex; justify-content:center; } .homePage #kuhlFam .secTitle .main img{ width:48vw } .homePage #kuhlFam .secTitle .sub{ font-size:3.5vw; letter-spacing:.1rem; line-height:1.3; text-align:left; } .homePage #kuhlFam .secTitle .sub img{ width:20vw; margin-right:5px; } .homePage #famSlider .swiper-container{ width:100%; overflow:hidden; margin:0 auto; } .homePage #kuhlFam .list{ margin-bottom:1vw; display:flex; justify-content:space-between; flex-wrap:wrap; padding:0 4vw; } .homePage #kuhlFam .list .topic{ width:48%; position:relative; margin-bottom:7.46vw; } .homePage #kuhlFam .list .topic.new::after{ content:url(../images/icon-new.png); position:absolute; top:0; left:0; width:59px; height:25px; z-index:3; } .homePage #kuhlFam .list .topic .pict{ margin-bottom:2.4vw; height:28vw; overflow:hidden;} .homePage #kuhlFam .list .topic .text{ margin-bottom:5px; color:#fff; font-size:4vw; font-weight:400; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .homePage #kuhlFam .list .topic .date{ font-size:3vw; color:#fff; margin-bottom:5px; } .homePage #kuhlFam .list .topic .bottom{ display:flex; justify-content:flex-end;} .homePage #kuhlFam .list .topic .bottom .btnType-2{ font-size:3.46vw } .homePage #kuhlFam .movieLinks{ display:flex; margin-top:9.6vw; } .homePage #kuhlFam .movieLinks .topic{ width:50%; position:relative;} .homePage #kuhlFam .movieLinks .topic a{ display:flex; width:100%; height:100%; align-content:center; justify-content:center; } .homePage #kuhlFam .movieLinks .topic .image{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:.65; z-index:1; } .homePage #kuhlFam .movieLinks .topic .image img{ object-fit:cover; height:100%; width:100%; } .homePage #kuhlFam .movieLinks .topic:first-of-type .image img{ object-position:right; } .homePage #kuhlFam .movieLinks .topic .cont{ padding:8vw 2.5vw 6.5vw; position:relative; z-index:2; color:#fff; font-size:3vw; } .homePage #kuhlFam .movieLinks .topic .cont .icon{ width:45px; margin:0 auto 2.5vw } .homePage #kuhlFam .movieLinks .topic .cont .name{ width:100%; margin-bottom:12px; } .homePage #kuhlFam .movieLinks .topic .cont .name img{ height:11px; } .homePage #stockcarSec{ padding:16vw 0 12vw; margin-bottom:0; } .homePage footer{ position:relative; z-index:5;} #stockcarSec .innerBlock{ padding:0; } /*slider3 stockcar***/ #stockcarSlider{ position:relative; padding-bottom:0; } #stockcarSlider .swiper-container{ position:relative; width:100%; margin:0 auto; height:100%; overflow:hidden; padding-bottom:10vw; } #stockcarSlider .swiper-wrapper{ width:100%; height:; } #stockcarSlider .swiper-slide{ color: #ffffff; width:100%; height: 100%; text-align: center; line-height: ; } #stockcarSlider .swiper-slide:first-of-type{ padding-left:0; width:; } #stockcarSlider .swiper-pagination{ bottom:0; } #stockcarSlider .swiper-pagination-bullet{ width:8px !important; height:8px !important; margin:0 0 0 10px !important; background:#333 !important; } #stockcarSlider .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#f30 !important; } #stockcarSlider .swiper-pagination-bullet:first-child { margin:0 !important; } #stockcarSlider .swiper-button-next, #stockcarSlider .swiper-button-prev{ width:31px; height:60px; z-index:100; } #stockcarSlider .swiper-button-prev{ top:50%; left:0; } #stockcarSlider .swiper-button-next{ top:50%; right:0;} #stockcarSlider .swiper-button-next::after{ content:none; content:url(../images/slide-arrow-right.svg); width:31px; height:60px; } #stockcarSlider .swiper-button-prev::after{ content:none; content:url(../images/slide-arrow-left.svg); width:31px; height:60px; } /*slider3 stockcar***/ #stockcarSlider .swiper-slide{ } #stockcarSlider .swiper-slide p{ text-align:left; } #stockcarSlider .swiper-slide .pict{ width:100; height:auto; margin-bottom:10px; } #stockcarSlider .swiper-slide .carName{ font-size:1.1rem; font-weight:500; } #stockcarSlider .swiper-slide.new .carName::after{ content:'New!'; color:red; font-size:.85rem; margin-left:6px; } #stockcarSlider .swiper-slide .goodsName{ font-size:3.5vw; font-weight:500; line-height:1.4; margin-bottom:5px; } #stockcarSlider .data{ font-size:.7rem; } #stockcarSlider .data li{ display:flex; align-items:baseline;} #stockcarSlider .data li:last-of-type{ margin-bottom:0; } #stockcarSlider .data li.price .cont{ font-size:1.1rem; font-weight:700; } #dealerSec{ background-color:transparent; position:relative; height:auto; padding:9.86vw 0; overflow:hidden; margin-bottom:9.3vw;/*background-attachment:fixed; パララックス*/ } .homePage #dealerSec .overrayPanel{ display:none; } .homePage #dealerSec .bgMovie{ position:absolute; top:0; left:0; } /*iPone用パララックス*/ .homePage #dealerSec{position: relative; height:128vw;} #dealerSecParaImage::after{ content:''; background-image:url(../../images/home/dealer-bg.jpg); background-size:300%; background-position:center; background-repeat: no-repeat; position:absolute; top:0; left:0; width:100%; height:100%; } #dealerSec .innerBlock{ z-index:10; position: absolute;} #dealerSec .innerBlock .secTitle{ color:#fff; } #dealerSec .list{ display:flex; flex-wrap:wrap; justify-content:space-between } #dealerSec .list .topic{ width:43.5vw; height:20vw; margin-bottom:4vw; } #dealerSec .list .topic:nth-of-type(3n){ margin-right:0; } #dealerSec .list .topic:last-of-type{ margin-bottom:0; } #dealerSec .list .topic a{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; border:1px solid #fff; font-size:4vw; background-color:rgba(0,0,0,.25); text-align:center; line-height:1.5; } #onlinesurvice{ margin-bottom:0; padding:10.6vw 0 0; } #onlinesurvice .list{ display:; justify-content:center; } #onlinesurvice .list .topic{ width:100%; margin-bottom:9.3vw; padding:0 4vw; } #onlinesurvice .list .topic:last-of-type{ margin-bottom:0; } #onlinesurvice .list .topic a{ text-align:center; display:block; } #onlinesurvice .list .topic .pict{ position:relative; background:#000; margin-bottom:3.6vw; } #onlinesurvice .list .topic .pict > img{ opacity:.75; } #onlinesurvice .list .topic .text{ margin-bottom:20px; transition:.2s; font-weight:500;} #onlinesurvice .list .topic .logo{ width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; } #onlinesurvice .list .topic .logo img{ height:6.5vw } #onlinesurvice .list .topic a .btnType-1{ width:; height:; margin:0 auto; transition:.2s; display:flex; align-items:center; justify-content:center; border:1px solid #1e1e1e; } #dualstyleSec{ margin-bottom:0; padding:0 4vw 3vw; height:63.4vw; } #dualstyleSec .innerBlock{ padding:0; height:100%; } #dualstyleSec .overrayPanel{ opacity:.3; } #dualstyleSec .bgPanel{ position:absolute; top:0; left:0; width:100%; height:100%; } #dualstyleSec .bgPanel img{ height:100%; object-fit:cover; } #dualstyleSec .cont{ position:relative; z-index:1; height:100%; display:flex; flex-wrap:wrap; align-content:center; color:#fff; } #dualstyleSec .cont .case{ width:50%; margin-top:23vw; margin-bottom:8vw; } #dualstyleSec .cont .case .logo{ height:6.5vw; margin-bottom:5px; text-align:center; } #dualstyleSec .cont .case .logo + .text{ font-size:2.5vw; text-align:center; } #dualstyleSec .cont .case .logo img{ width:auto; height:100%; } #dualstyleSec .cont > .text{ width:100%; text-align:center; margin-bottom:6vw; font-size:4.5vw; font-family:serif; } #verzSec, #vrarvaSec{ padding:0 0 3vw; margin-bottom:0; } #verzSec .innerBlock, #vrarvaSec .innerBlock{ height:100%; padding-bottom:px; } #verzSec .bgPanel, #vrarvaSec .bgPanel{ position:absolute; left:0; top:0; width:100%; padding:0 4vw; } #verzSec .cont, #vrarvaSec .cont{ position:relative; bottom:0; right:0; height:34.5vw; width:100%; padding:0 3vw; display:flex; justify-content:flex-end; align-content:flex-end; flex-wrap:wrap; } #verzSec .cont .text, #vrarvaSec .cont .text{ color:#fff; width:100%; text-align:right; font-family:serif; } #verzSec .cont .text.main, #vrarvaSec .cont .text.main{ font-size:4vw; line-height:1; margin-bottom:2px; } #verzSec .cont .text.sub, #vrarvaSec .cont .text.sub{ font-size:3vw; margin-bottom:1.5vw; } #vrarvaSec .cont .text{ text-align:center; } #custom-kaitoriSec{ margin-bottom:0; } #custom-kaitoriSec .innerBlock a{ display:block; width:100%; height:; padding-bottom:9.3vw; background-image:url(../../images/home/custom-kaitori_sp.jpg); background-repeat:no-repeat; background-size:100%; } #custom-kaitoriSec .innerBlock a img{ width:100%; } #bnrSec{ margin-bottom:0; } #bnrSec .innerBlock{ padding:0 4vw 5.8vw; } #bnrSec .list{ display:flex; flex-wrap:wrap; justify-content:space-between; } #bnrSec .list .topic{ width:44.5vw; margin-bottom:3.5vw; } #recruitSec{ background-image:url(../../images/home/recruit-bg.jpg); background-size:100%; background-position:center top -6vw; background-repeat:no-repeat; position:relative; margin-bottom:0; padding-top:52vw; } #recruitSec .overrayPanel{ display:none; } #recruitSec .innerBlock{ display:flex; flex-wrap:wrap; justify-content:center; align-content:center; z-index:2; background-color:#fff; height:55vw; } #recruitSec .nega, #recruitSec .nega a{ color:#333; border-color:#333; } #recruitSec .secTitle{ margin-bottom:3vw; } #recruitSec .text{ font-size:.85rem; font-weight:300; text-align:center; margin-bottom:20px; } /*下層一般******************************************************/ .kasouPage .wrapper{ margin-top:15vw; position:relative; } .kasouPage .wrapper section:first-of-type{ padding-top:4vw } .kasouPage #pageTopSec{ margin-bottom:0; } .kasouPage #pageTopSec .innerBlock{ padding-bottom:14vw; } .kasouPage section{ background-color:#fff; margin-bottom:26vw; } .kasouPage section.mainImageSec{ background-color:rgba(255,255,255,0); } .kasouPage .mainImageSec .innerBlock{ width:100%; padding:0; } .paraImageContainer{ position:relative; overflow:hidden; width:100%; height:48vw; } .paraImageContainer .paraImageCase{ position:absolute; top:0; width:100%; height:100%; clip:rect(auto,auto,auto,auto); } .paraImageContainer .paraImageContainer .paraImage{ position:fixed; z-index:-1; top:0; left:0; display:block; width:100%; height:100%; background-size:cover; background-position:center; } /*見出し*/ .kasouPage .pageTitle{ text-align:center; font-weight:500; } .kasouPage .pageTitle .main{ font-size:5.86vw; font-weight:500; line-height:1; margin-bottom:.75vw;} .kasouPage .pageTitle .main img{ height:6vw; } .kasouPage .pageTitle .sub{ font-size:11px; } .kasouPage .bigHeader, .kasouPage .text.bigHeader{ font-size:6.4vw; font-weight:500; margin-bottom:20px; line-height:1.5;} .kasouPage .middleHeader, .kasouPage .text.middleHeader{ font-size:6.4vw; font-weight:500; line-height:1.5;} .kasouPage .smallHeader, .kasouPage .text.smallHeader{ font-size:5.6vw; font-weight:500; line-height:1.5;} .kasouPage .objHeader, .kasouPage .text.objHeader{ font-size:4.8vw; font-weight:500; line-height:1.5;} .kasouPage .objHeader.deco{ position:relative; padding-left:11px; font-weight:500;} .kasouPage .objHeader.deco::before{ content:''; display:block; width:8px; background:#BEBEBE; position:absolute; left:0; top:50%; transform:translateY(-50%); } .secTitle.deco-01{ margin-bottom:14vw; } .secTitle.deco-01 .main{ display:flex; justify-content:center; align-items:center; font-size:3.4vw } .secTitle.deco-01 .main::before, .secTitle.deco-01 .main::after{ content:''; margin: 0 10px; display:inline-block; width:8px; height:1px; background-color:#333; } .secTitle.deco-02{ background-color:#F2F2F2; height:60px; font-weight:500; display:flex; justify-content:center; align-items:center; } /*本文*/ .kasouPage .text{ line-height:1.8; } .kasouPage .text-01{ font-size:4.25vw; } .kasouPage .text-02{ font-size:4vw; } .kasouPage .text-03{ font-size:3.4vw; } .kasouPage .text-04{ font-size:3vw; line-height:1.6; } /*パンくず*/ #breadcrumb{ display:; margin-bottom:15vw; padding:0 4vw; line-height:11px } #breadcrumb .topic{ height:; line-height:10px; font-size:11px; } #breadcrumb .topic a{ font-size:10px; color:#9B9B9B; line-height:11px; } #breadcrumb .topic a::after{ content:'/'; margin:0 3px; } #breadcrumb .topic:last-of-type a{ color:#333; } #breadcrumb.nega .topic:last-of-type a{ color:#fff; } #breadcrumb .topic:last-of-type a::after{ content:none; } /*下層一般******************************************************/ .kasouPage .wrapper{ margin-top:15vw;/*74px;*/ position:relative; } .kasouPage #pageTopSec{} .kasouPage #pageTopSec .innerBlock{ padding:0 0 13.3vw } .kasouPage section{ background-color:#fff; margin-bottom:26.6vw; } .kasouPage section:last-of-type{ margin-bottom:0; } .kasouPage .blackSec{ background-color:#1E1E1E; } .kasouPage .mainImageSec{ height:48vw; overflow:hidden; margin-bottom:/*20vw;*/13.3vw; } #bottomBtnSec{ padding:16vw 4vw; } #bottomBtnSec .list .btnType-4{ margin-bottom:8vw; } #bottomBtnSec .list .btnType-4:last-of-type{ margin-bottom:0; } .paraImage{ /*background-attachment:fixed;*/ background-position:center; /*background-size:cover;*/ background-repeat:no-repeat; height:100%; } .tempCorner .contBoxImage{ height:134vw; } .tempCorner .secTitle{ margin-bottom:11.4vw; } .tempCorner .secTitle.deco-01 .main{ font-size:18px; } .tempCorner .contBox{ background-color:#F2F2F2; padding:0; } .tempCorner .contBox .innerBlock{ display:; padding:12vw 8vw; } .tempCorner .contBox .innerBlock .left{ width:100%; text-align:left; } .tempCorner .contBox .innerBlock .left .smallHeader{ text-align:left; margin-bottom:5vw; line-height:1.5; } .tempCorner .contBox .innerBlock .left .btnType-1{ margin:80px 0 0; } .tempCorner .contBox .innerBlock .right{ width:100%; } .alternateCorner .innerBlock{ width:100%; display:flex; flex-wrap:wrap; padding:0; position:relative; height:; margin-bottom:10vw; } .alternateCorner .innerBlock:alast-of-type{ margin-bottom:0; } .alternateCorner .innerBlock .left{ width:100%; height:%; } .alternateCorner .innerBlock .left .pict{ height:100%; } .alternateCorner .innerBlock .right{ width:100%; padding:12vw 8vw; display:flex; flex-wrap:wrap; align-content:center; } .grayText{ color:#4E4E4E; } .discHeader{ display:flex; align-items:center; font-weight:500; } .discHeader::before{ content:''; display:block; border-radius:50%; background-color:#333; } .redText{ color:#f00; } .cap{ font-size:80%; } .flexBox{ display:flex; justify-content:space-between; align-items:center; } .flexBox.wrap{ flex-wrap:wrap; } /*Product**/ .completecarPage.detailPage #breadcrumb{ margin-bottom:9.6vw; } #leadSec .cont{ width:100%; } .conceptSec .smallHeader{ text-align:center; margin-bottom:5vw; } .conceptSec .conceptText{ } .productsPage .mainImageSec .parallax-window{} .productsPage .mainImageSec .parallax-window::after{ content:''; display:block; width:100%; height:100%; background-image:url(../../images/products/products-main--848.jpg); /*background-attachment:local; background-attachment:fixed;←パララックス*/ width:100%; height:100%; background-size:108%; background-position:70% 57.5% } .mainImageSec .innerBlock{ height:100%; } #productListSec{ margin-bottom:18.6vw; } #productListSec .secTitle{ margin-bottom:12vw; } .secTitle .main{ font-size:5.5vw; font-weight:500; margin-bottom:6px;} .productsPage #productListSec .secTitle .main{ font-size:4vw; } #productList{ display:flex; flex-wrap:wrap; justify-content:space-between; } #productList .topic{ width:100%; margin-bottom:10vw; position:relative;} #productList .topic:last-of-type{ margin-bottom:0; } #productList .topic .data{ display:flex; flex-wrap:wrap; align-content:space-between; background:#F0EFEF; padding:10vw 6vw; min-height:95vw; } #productList .topic .data .cont{ width:100%; } #productList .topic .data .cont h3{ margin-bottom:3.5vw; } #productList .topic .data .cont .btnType-2{ position:absolute; left:50%; bottom:24vw; transform:translateX(-50%); } .kasouPage #stockcarSec{ margin-bottom:16vw; } .kasouPage #kuhlFam{ background:#f2f2f2; padding:20vw 0 5vw; margin-bottom:0; } .kasouPage #kuhlFam .innerBlock{ } .kasouPage #kuhlFam .innerBlock .left{ width:; margin-bottom:12vw; padding:0 5vw; } .kasouPage #kuhlFam .innerBlock .right{ width:; } .kasouPage #kuhlFam .innerBlock .right .secTitle{ position:relative;} .kasouPage #kuhlFam .innerBlock .right .secTitle .main{ width:45.3vw; margin-bottom:3.2vw; margin-left:35vw } .kasouPage #kuhlFam .innerBlock .right .secTitle .sub{ font-size:2.8vw; line-height:1.5; letter-spacing:.45vw; text-align:left; margin-left:35vw; font-weight:400; } .kasouPage #kuhlFam .innerBlock .right .secTitle::before{ content:''; display:block; width:25vw; height:25vw; border-radius:50%; overflow:hidden; position:absolute;left:7vw; bottom:-2vw; background-image:url(../../images/products/kuhlfam-title-icon.jpg); background-size:cover; } .kasouPage #kuhlFam .innerBlock .right .btnType-1{ margin:10vw auto; } .kasouPage #kuhlFam .innerBlock .right .text{ width:87%; margin:0 auto; } #completeCarListSec{background-color:#f2f2f2; padding:15vw 0; } #completeCarListSec .innerBlock{ padding:0 20px; } .blockHeader{ margin-bottom:10vw; } .blockHeader .main{ font-size:25px; font-weight:600; text-align:center; } #completeCarListSec .lineupBlock{ margin-bottom:20vw; } #completeCarListSec .lineupBlock:last-of-type{ margin-bottom:0; } .lineupBlock .carTypeBox{ margin:0 auto; } .lineupBlock .carTypeBox:last-of-type{ border-bottom:none; } .lineupBlock .carTypeList{ width:100%; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; } .lineupBlock .carTypeBox .carTypeList:last-of-type{ margin-bottom:0; } .lineupBlock .carTypeList .carType{ width:45%; min-height:40vw;} .lineupBlock .carTypeList .carType a{ display:block; text-align:center; width:100%; height:100%; } .lineupBlock .carTypeList .carType .carForm{ text-align:center; width:100%; } .lineupBlock .carTypeList .carType .carForm img{ margin: 0 auto; width:90%; max-width:100%; } .lineupBlock .carTypeList .carType .carName{ font-size:4.5vw; font-weight:500; line-height:1.1; margin-bottom:3px; } .lineupBlock .carTypeList .carType .carName.sub{ font-size:11px; font-weight:500; text-align:center; } .lineupBlock .carTypeList .carType:hover .carName{ color:#3A8CEA; } .lineupBlock .carTypeBox .linkText{ display:block; text-align:right; margin-top:5px; } .lineupBlock .carTypeBox .linkText:hover{ color:#de0012; } .lineupBlock .carTypeBox .linkText::after{ content:'＞'; margin-left:10px; } #pageTopSec.type-B .innerBlock{} /*#pageTopSec.type-B .pageTitle{ margin-bottom:; }*/ #canplateTypeSec{ margin:30px auto 0 auto; overflow:hidden; padding-bottom:1vw; } #canplateTypeSec .innerBlock{ padding:0; } /**/ #canplateTypeSec #completeDitaleSlider{ height:82vw; background-color:; } #canplateTypeSec #completeDitaleSlider .swiper-container, #canplateTypeSec #completeDitaleSlider .swiper-pagination{ display:none; } #canplateTypeSec #completeDitaleSlider.apeal .swiper-container, #canplateTypeSec #completeDitaleSlider.apeal .swiper-pagination{ display:block;} #canplateTypeSec #completeDitaleSlider .swiper-wrapper{ height:65vw; } #canplateTypeSec #completeDitaleSlider .swiper-slide{ height:100%; } #canplateTypeSec #completeDitaleSlider .swiper-slide .pict{ height:100%; overflow:hidden; } #canplateTypeSec #completeDitaleSlider .swiper-slide .pict img{ height:100%; } /**/ #canplateTypeSec .swiper-container{ overflow:; height:100%; } #canplateTypeSec .swiper-slide .pict{ height:100%; } #canplateTypeSec .innerBlock .swiper-pagination{ bottom:6vw; } #canplateTypeSec .innerBlock .swiper-pagination span{ font-weight:500; } #canplateTypeSec .innerBlock .swiper-button-prev{ top:calc(100% - 9vw); left:50%; transform:translateX(-140px); } #canplateTypeSec .innerBlock .swiper-button-prev::after{ font-family: 'Material Icons'; content:'\e5cb'; font-size:1.8rem; line-height:1; color:#6f6f6f; } #canplateTypeSec .innerBlock .swiper-button-next{ top:calc(100% - 9vw); right:50%; transform:translateX(140px); } #canplateTypeSec .innerBlock .swiper-button-next::after{ font-family: 'Material Icons'; content:'\e5cc'; font-size:1.8rem; line-height:1; color:#6f6f6f; } #canplateTypeSec .carBlock{ position:relative; margin-bottom:10vw; } #canplateTypeSec .carBlock:last-of-type{ margin-bottom:0; } #canplateTypeSec .carBlock .pict{ width:100%; height:60vw; } #canplateTypeSec .carBlock .pict img{ height:100%; } #canplateTypeSec .carBlock .dateBoard{ position:relative; width:92vw; padding:7vw; margin-top:-8vw; margin-left:4vw; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,.15); } #canplateTypeSec .carBlock .dateBoard .title{ width:calc(100% - 9vw); margin-bottom:4vw } #canplateTypeSec .carBlock .dateBoard .title .main{ font-size:5.86vw; line-height:1.2; margin-bottom:5px; font-weight:500; } #canplateTypeSec .carBlock .dateBoard .title .sub{ font-size:3.2vw; } #canplateTypeSec .carBlock .dateBoard .logo{ width:11.2vw; position:absolute; top:7vw; right:5vw } #canplateTypeSec .carBlock .dateBoard .priceCase .header{ font-size:2.4vw; } #canplateTypeSec .carBlock .dateBoard .priceCase .price{ font-size:4.8vw; font-weight:500; } #canplateTypeSec .carBlock .dateBoard .btnType-1.cyanBtn{ margin:9.86vw auto 0; } #canplateTypeSec .carBlock .dateBoard .btnType-1.cyanBtn a{ border:1px solid #3A8CEA; color:#3A8CEA; } #canplateTypeSec + .arrowLink-L{ width:100%; justify-content:center; margin-bottom:20vw; } .carIdentity{ display:inline-block; color:#fff; background:#c4c4c4; border-radius:7px; font-size:3.2vw; font-weight:400; padding:.3vw 2vw .75vw; margin-top:2.4vw; line-height:1.6; } .detailPage .carIdentity{ margin-top:3vw; } #conplatedateSec .productName{ text-align:center; margin-bottom:5.5vw; } #conplatedateSec .productName .logo{ margin-bottom:3vw; } #conplatedateSec .productName .logo img{ width:11.3vw; } #conplatedateSec .productName .main{ font-size:6.9vw; margin-bottom:3vw; font-weight:500; } #conplatedateSec .productName .sub{ font-size:; } #conplatedateSec .flexCont{ display:flex; justify-content:space-between; margin-bottom:50px; flex-wrap:wrap; } #conplatedateSec .flexCont:last-of-type{ margin-bottom:0; } #conplatedateSec .flexCont .left, #conplatedateSec .flexCont .right{ width:100%; } #conplatedateSec .flexCont .left{ margin-bottom:10vw } #conplatedateSec .flexCont .price li{ display:flex; align-items:flex-end; margin-bottom:3px; font-size:3.7vw; } #conplatedateSec .flexCont .price .header{ margin-right:15px; } #conplatedateSec .flexCont .price .suji .strong{ font-size:6.4vw; font-weight:500; line-height:1; } #conplatedateSec .flexCont .right .btnBlock div{ margin:0 auto 4vw; } .completecarPage.detailPage .pageTitle{ margin-bottom:6.93vw; } .completecarPage .cornerHeader{ font-weight:500; font-size:4vw; display:flex; align-items:center; margin-bottom:20px; width:100%;} .completecarPage .cornerHeader::before{ content:''; display:inline-block; width:8px; height:4.5vw; background-color:#BEBEBE; margin-right:5px; } #conplatedateSec .flexCont .block{ margin-bottom:30px; font-size:3.8vw; } #conplatedateSec .flexCont .block:last-of-type{ margin-bottom:0; } #conplatedateSec .flexCont .block .title{ font-weight:500; } #conplatedateSec .flexCont .block .baseCarSpec{ display:flex; } #conplatedateSec .flexCont .block .baseCarSpec p::after{ content:'/'; padding:0 12px; } #conplatedateSec .flexCont .partsList{ background-color:#F2F2F2; padding:8px 10px; margin-bottom:3px; } #conplatedateSec .flexCont .partsList + .cap.optionPartsCap{ font-size:3.2vw; margin-top:3vw; } #conplatedateSec .flexCont#equipmentList{ flex-wrap:wrap; justify-content:flex-start; } #conplatedateSec .flexCont#equipmentList .card{ width:48%; margin-right:4%; margin-bottom:10vw;} #conplatedateSec .flexCont#equipmentList .card:nth-of-type(2n){ margin-right:0; } #conplatedateSec .flexCont#equipmentList .card .pict{ margin-bottom:10px; } #conplatedateSec .flexCont#equipmentList .btnBlock{ width:100%; margin-top:12vw;} #conplatedateSec .flexCont#equipmentList .btnBlock div{ margin:0 auto 5vw; } /* モーダル ************************************/ .modal { position: fixed; top:0; left:0; width: 100%; height:100vh; padding:30px; display: flex; align-items: center; justify-content: center; transition: opacity .6s; transition-delay:.2s; pointer-events: none; opacity: 0; z-index: 100; background-color:rgba(0, 0, 0, 0.85); } /* モーダルがactiveの時 */ .modal.is-active { opacity: 1; pointer-events: auto; } /* モーダル背景のオーバーレイ部分 */ .modal__overlay { position: absolute; width:100%; height:100%; cursor:pointer; } /* モーダルのコンテンツ */ .modal__content { position: relative; width:100%; height:55vh; pointer-events:none; } .modal_inner { /*filter: drop-shadow(0px 0px 4px #ddd);*/ width: 90%; margin: 0 auto; border-radius: 2px; display: flex; justify-content: flex-start; align-items: center; align-content:center; width:100%; height:100%; position:relative; pointer-events:none; } .modal_inner .swiper-slide{ height:100%; } .modal_inner .swiper-slide .pict{ width:100%; max-height:60vw; overflow:hidden; margin-bottom:10px; } /* 閉じるボタン */ .modal__close-btn{ position:absolute; right:0; top:-40px; width:40px; height:40px; cursor:pointer; z-index:20; } .modal__close-btn:hover {opacity: 0.8;} /* 閉じるボタンのX */ .lineClose { display: inline-block; vertical-align: middle; color:#666; line-height: 1; width: 2rem; height:0.1rem; background:currentColor; border-radius: 0.1rem;position: relative;transform: rotate(45deg); } .lineClose::before { content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; border-radius: inherit; transform: rotate(90deg); } p.swiperText { margin: 0; text-align: center; } .swiper-pics{ width:100%; height:100%; pointer-events:none; display:flex; align-content:center; } .swiper-pics .swiper-pagination{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); color:#fff;} .modalCardList .modalInSlider .text{ color:#fff; } .modalCardList .swiper-pagination{ width:350px; } .modalCardList .swiper-pagination, .modalCardList .swiper-pagination span{ color:#fff; pointer-events:all; } #conplatedateSec .innerBlock .swiper-button-prev{ top:calc(100% - 12px); left:50%; transform:translateX(-140px); pointer-events:all; } #conplatedateSec .innerBlock .swiper-button-prev::after{ font-family: 'Material Icons'; content:'\e5cb'; font-size:1.8rem; line-height:1; color:#fff; } #conplatedateSec .innerBlock .swiper-button-next{ top:calc(100% - 12px); right:50%; transform:translateX(140px); pointer-events:all; } #conplatedateSec .innerBlock .swiper-button-next::after{ font-family: 'Material Icons'; content:'\e5cc'; font-size:1.8rem; line-height:1; color:#fff; } /* モーダル ************************************/ #complateYoutubeBlock{ overflow:hidden; margin-bottom:10vw; } #complateYoutubeBlock .innerBlock{ padding:0; } #complateYoutubeBlock .innerBlock .cornerHeader{ padding:0 4vw; } #youtubeSliderCase{ position:relative; padding:0; } #youtubeSliderCase .youtube-slider{ overflow: hidden; width:92vw; margin:0 auto; margin-bottom:2vw; } .youtube-slider .swiper-slide{ background-color:#ccc; width:100%; height:52vw; } .youtube-slider .swiper-slide iframe{ width:100%; height:100%; } .youtube-slider .swiper-button-prev, .youtube-slider .swiper-button-next{ display:none; } #youtube-thumbsCase{ width:100%; position:relative; } .youtube-thumbs{ width:100%; margin:0 auto; overflow:hidden; } .youtube-thumbs .swiper-wrapper{ height:95px; } .youtube-thumbs .swiper-slide{ width:120px; height:90px; position:relative; margin-top:2px; padding:5px; } .youtube-thumbs .swiper-slide img{ width:100%; } .youtube-thumbs .swiper-slide-active::after{ content:''; display:block; top:-1px; left:-1px; position:absolute; width:100%; height:100%; border:2px solid #f00; border-radius:3px; } #complateYoutubeBlock .btnBlock{ width:100%; margin-top:12vw;} #complateYoutubeBlock .btnBlock div{ margin:0 auto 5vw; } .productsPage .arrowLink-L.btnType-3{ justify-content:center; margin-bottom:30vw; } /*その他のコンプリートカー**********/ #otheComplateCarListSec{ padding-bottom:19.2vw; } #otheComplateCarListSec .cardList{ display:flex; flex-wrap:wrap; margin-bottom:40px; } #otheComplateCarListSec .cardList .card{ width:100%; margin-bottom:13.5vw; } #otheComplateCarListSec .cardList .card:nth-of-type(3n){ margin-right:0; } #otheComplateCarListSec .cardList .card .pict{ width:100%; height:213px; overflow:hidden; margin-bottom:20px; } #otheComplateCarListSec .cardList .card .dateBox{ position:relative; } #otheComplateCarListSec .cardList .card .title{ width:calc(100% - 13vw); margin-bottom:18px; } #otheComplateCarListSec .cardList .card .title .main{ font-size:22px; margin-bottom:5px; font-weight:500; line-height:1.2; } #otheComplateCarListSec .cardList .card .title .sub{ font-size:13px; } #otheComplateCarListSec .cardList .card .logo{ width:11.2vw; height:42px; position:absolute; right:0; top:0; } #otheComplateCarListSec .cardList .card .flexCont{ display:flex; justify-content:space-between; align-items:flex-end; } #otheComplateCarListSec .cardList .card .priceCase{} #otheComplateCarListSec .cardList .card .priceCase .header{ font-size:2.4vw; line-height:1 } #otheComplateCarListSec .cardList .card .priceCase .price{ font-size:4.8vw; font-weight:500; } #otheComplateCarListSec .cardList .card .btnType-1.cyanBtn{ margin:30px auto 0; position:relative; } #otheComplateCarListSec .cardList .card .btnType-1.cyanBtn a{ border:1px solid #3A8CEA; color:#3A8CEA; } #otheComplateCarListSec .carIdentity{ margin-top:0; } /*その他のコンプリートカー**********/ /*Product** /*How to Buy**/ .howtobuyPage .mainImageSec .mainImage{ } .howtobuyPage .mainImageSec .parallax-window::after{ content:''; display:block; width:100%; height:100%; background-image:url(../../images/howto/howto-main--848.jpg); background-position:center; background-size:100%; height:100%; } .howtobuyPage.meritPage .mainImageSec{ position:relative; height:33vw; } .howtobuyPage.meritPage .mainImageSec::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/howto/merit-main.jpg); background-size:110%; background-position:center -10px; height:35vw; } .howtobuyPage.flowPage .mainImageSec{ background-image:url(../../images/howto/flow-main.jpg); background-size:cover; } .howtobuyPage #onemyorderSec{ margin-bottom:10vw; } .howtobuyPage .tempCorner .contBox .innerBlock .btnType-1{ margin-top:10vw; } .howtobuyPage #onemyorderSec .contBoxImage{ position:relative; } .howtobuyPage #onemyorderSec .contBoxImage::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/howto/howto-order.jpg); background-position:left -20vw top; background-size:205%; } .howtobuyPage #onemypackageSec .contBoxImage{ position:relative; } .howtobuyPage #onemypackageSec .contBoxImage::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/howto/howto-package.jpg); background-position:left -20vw top; background-size:205%; } .howtobuyPage #stockcarSec-howto .paraImage{ background-image:url(../../images/howto/howto-stock.jpg); background-position:right -20vw top; background-size:150%; } .howtobuyPage .contBoxImage{ padding:6vw 4vw; } .howtobuyPage .contBoxImage .titleBoad{ width:80%; height:50vw; background-color:#fff; padding:5vw 7vw; display:flex; flex-wrap:wrap; align-content: flex-end; position:relative; z-index:1; } .howtobuyPage .contBoxImage .titleBoad .barCode{ width:60px; margin-bottom:16px; } .howtobuyPage .contBoxImage .titleBoad .main{ width:100%; } .howtobuyPage .contBoxImage .titleBoad .main img{ height:8.2vw; } .howtobuyPage .contBoxImage .titleBoad .sub{ line-height:1.5; } .howtobuyPage .tempCorner .right{ display:flex; justify-content:space-between; align-content:center; } .howtobuyPage .tempCorner .contBox .left{ margin-bottom:10vw; } .tempCorner#onemyorderSec .contBox .innerBlock, .tempCorner#onemypackageSec .contBox .innerBlock{ position:relative; padding-bottom:40vw; } .tempCorner#stockcarSec-howto .contBox .innerBlock{ position:relative; padding-bottom:40vw; } .tempCorner#onemyorderSec .btnBox, .tempCorner#onemypackageSec .btnBox, .tempCorner#stockcarSec-howto .btnBox{ position:absolute; left:0; bottom:0; width:100%; padding-bottom:10vw; display:flex; flex-wrap:wrap; justify-content:center; } .tempCorner#stockcarSec-howto .btnBox .btnType-1{ margin:30px auto 5vw auto; width:60%;} .tempCorner#onemyorderSec .btnBox .btnType-1, .tempCorner#onemypackageSec .btnBox .btnType-1{ margin:0 auto 5vw auto; width:60%;} .howtobuyPage #onemyorderSec .right .pict{ width:31.5% } /*.howtobuyPage #onemyorderSec .right .pict img{ height:auto; }*/ .howtobuyPage #stockcarSec-howto .right .pict{ width:48%; } .howtobuyPage .alternateCorner{ margin-bottom:0; } .howtobuyPage .alternateCorner .innerBlock .right .smallHeader{ margin-bottom:15vw; } .howtobuyPage .alternateCorner .innerBlock .right .objHeader{ margin-bottom:10px; } .howtobuyPage .alternateCorner .innerBlock .right .btnType-1{ margin:10vw auto 0; } /*メリット***/ .howtobuyPage.meritPage .conceptSec{ margin-bottom:18vw; } #customRuteHeader{ width:100%; position:relative; margin-bottom:32vw; } #customRuteHeader::after{ font-family: 'Material Icons'; content:'\e313'; color:#5A5959; font-size:24vw; position:absolute; bottom:-30vw; left:50%; transform:translateX(-50%); } #customRuteHeader .pict{ width:82%; margin:0 auto; } .howtobuyPage.meritPage #customRute .steps{ width:100%; position:relative; } .howtobuyPage.meritPage #customRute .steps .header{ position:relative; padding-top:7vw; margin-bottom:25px; } .howtobuyPage.meritPage #customRute .steps .header::before{ content:''; position:absolute; top:0; left:0; background-color:#5A5959; width:100%; height:22vw; z-index:0; } .howtobuyPage.meritPage #customRute .steps .header .inner{ position:relative; z-index:1; } .howtobuyPage.meritPage #customRute .steps .header .pict{ width:38vw; margin:0 auto; position:absolute; bottom:12vw; left:50%; transform:translateX(-50%); } .howtobuyPage.meritPage #customRute .steps .header .text{ font-size:4vw; font-weight:700; text-align:center; color:#fff; } .howtobuyPage.meritPage #customRute .steps .header .text .strong{ font-size:6.4vw;; font-weight:700;} .howtobuyPage.meritPage #customRute .steps .header + .text{ font-size:3.5vw; text-align:center; margin-bottom:10vw; font-weight:500; } .howtobuyPage.meritPage #customRute .topic{ width:100%; position:relative;} .howtobuyPage.meritPage #customRute .steps .topic:last-of-type{ margin-bottom:0; } .howtobuyPage.meritPage #customRute .topic .buyCar{ margin-bottom:30px; justify-content:space-between; width:100%; padding:0 3vw; } /* .howtobuyPage.meritPage #customRute .topic:first-of-type .flexBox{ justify-content:center; } */ .howtobuyPage.meritPage #customRute .inset{ } .howtobuyPage.meritPage #customRute .topic .flexBox .pict.car{ width:36%; text-align:center; margin-bottom:; } .howtobuyPage.meritPage #customRute .topic .flexBox .pict.car img{ width:100%; } .howtobuyPage.meritPage #customRute .buyCar .bk-yellow{ width:60% } .howtobuyPage.meritPage #customRute .buyCar .bk-yellow{ margin:0; } .howtobuyPage.meritPage #customRute .bk-yellow{ display:flex; width:70%; height:55px; margin:0 auto; } .howtobuyPage.meritPage #customRute .bk-yellow .black{ text-align:center; line-height:55px; font-size:3.7vw } .howtobuyPage.meritPage #customRute .bk-yellow .yellow{ text-align:center; line-height:52px; } .howtobuyPage.meritPage #customRute .bk-yellow .black{ width:42%; background-color:#000000; color:#fff; font-weight:400; } .howtobuyPage.meritPage #customRute .bk-yellow .yellow{ width:58%; background-color:yellow; } .howtobuyPage.meritPage #customRute .bk-yellow .price{ font-weight:700; } .howtobuyPage.meritPage #customRute .bk-yellow .price .figure{ font-size:200%; font-weight:400; } .howtobuyPage.meritPage #customRute .text-03{line-height:1.5;} .howtobuyPage.meritPage #customRute .marubatsu{ width:85%; margin:0 auto; } .howtobuyPage.meritPage #customRute .marubatsu .kigo{ width:8.5vw; margin-right:10px; } .howtobuyPage.meritPage #customRute .marubatsu .text{ width:calc(100% - 10vw); text-align:;} .howtobuyPage.meritPage #customRute .secTitle.deco-02{ margin-bottom:20px; } .howtobuyPage.meritPage #customRute .mochikomi{ flex-wrap:wrap; } .howtobuyPage.meritPage #customRute .mochikomi .factory{ margin:5vw auto; } .howtobuyPage.meritPage #customRute .topic .bk-yellow.center{ margin:0 auto; } .howtobuyPage.meritPage #customRute #dealerRute{ border-bottom:1px solid #9B9B9B; margin-bottom:20vw; padding-bottom:16vw; } .howtobuyPage.meritPage #customRute .topic .kanso{ margin:0 auto 10px; width:85%; } .howtobuyPage.meritPage #customRute .marubatsu{ margin-bottom:20px; } .howtobuyPage.meritPage #customRute #kuhlRute .marubatsu .text{ font-weight:500; line-height:1.3; } .howtobuyPage.meritPage #customRute #kuhlRute .topic:first-of-type .marubatsu .text{3.7vw;} .howtobuyPage.meritPage #customRute .nego{ width:240px; margin:0 auto 15px; } .howtobuyPage.meritPage #customRute #kuhlRute .list{ display:flex; justify-content:center; margin-bottom:20px; } .howtobuyPage.meritPage #customRute #kuhlRute .list .komoku{ width:calc((100% / 3) - 5px); height:24px; line-height:24px; color:#fff; background-color:#9B9B9B; border-radius:12px; text-align:center; font-size:3.2vw; margin:0 3px; } .howtobuyPage.meritPage #customRute #kuhlRute .cardList{ margin-bottom:5vw; } .howtobuyPage.meritPage #customRute #kuhlRute .cardList .card{ width:calc((100% / 3) - 5px); background-color:#E6E4E4; text-align:center; margin:0 3px; } .howtobuyPage.meritPage #customRute #kuhlRute .cardList .card .upper{ background-color:#F2F2F2; height:21.6vw; display:flex; align-items:center; justify-content:center; } .howtobuyPage.meritPage #customRute #kuhlRute .cardList .card .text{ background-color:#E6E4E4; font-weight:500; line-height:1.3; height:18vw; display:flex; align-items:center; justify-content:center; font-size:3.2vw; } .howtobuyPage.meritPage #customRute .topic{ margin-bottom:16vw; } .howtobuyPage.meritPage #customRute .topic::after{ font-family: 'Material Icons'; content:'\e313'; color:#1E1E1E; font-size:2.5rem; position:absolute; bottom:-17vw; left:50%; transform:translateX(-50%); } .howtobuyPage.meritPage #customRute .steps .topic:last-of-type::after{ content:none; } .howtobuyPage.meritPage #customRute #dealerRute .topic::after{ margin-top:30px; } .howtobuyPage.meritPage #customRute .sogakuBlock{ width:100%; height:25vw; } .howtobuyPage.meritPage #customRute #dealerRute .ketsuron .text{ line-height:1.4; } .howtobuyPage.meritPage #customRute .sogakuBlock .yellow{ width:70%; font-size:5vw; line-height:1.1; display:flex; align-content:center; justify-content:center; flex-wrap:wrap; } .howtobuyPage.meritPage #customRute .sogakuBlock .yellow p{ font-weight:500; } .howtobuyPage.meritPage #customRute .sogakuBlock .black{ width:30%; font-size:17px; line-height:1.1; display:flex; align-content:center; justify-content:center; flex-wrap:wrap; } .howtobuyPage.meritPage #customRute .sogakuBlock .black.price .figure{ font-size:200% } .howtobuyPage.meritPage #customRute .sogakuBlock .black p{ width:100%; font-weight:500; } .howtobuyPage.meritPage #customRute .sogakuBlock .black .oswald{ color:yellow; } .howtobuyPage.meritPage #customRute .ketsuron{ padding:6vw; background-color:#F2F2F2; } .howtobuyPage.meritPage #customRute #kuhlRute .ketsuron .marubatsu{ margin-bottom:22px; } .howtobuyPage.meritPage #customRute .ketsuron .marubatsu .kigo{ margin-right:2vw; } .howtobuyPage.meritPage #customRute .ketsuron .marubatsu .sankaku{ width:9vw; } .howtobuyPage.meritPage #customRute .ketsuron .marubatsu .batsu{ width:8vw; } .howtobuyPage.meritPage #customRute .ketsuron .marubatsu .maru{ width:9vw; } .howtobuyPage.meritPage #customRute .ketsuron .marubatsu .text{ width:calc(100% - 13vw); text-align:left; } .howtobuyPage.meritPage #customRute .resultBox .sogakuBlock .yellow .figure{ font-size:250%; } .howtobuyPage.meritPage #customRute .resultBox .marubatsu{ width:100%; } .howtobuyPage.meritPage #customRute #kuhlRute .topic .kanso{ width:100%; } .howtobuyPage.meritPage .resultBox .ketsuron .marubatsu .text{ font-size:3.7vw; font-weight:300; } /*メリット***/ /*納車までの流れ***/ .flowPage .conceptSec{ margin-bottom:5vw; } /**/ .alternateCorner.inset .innerBlock{ width:100%; height:; margin-bottom:95px;display:block; padding:0 4vw; } .alternateCorner.inset .innerBlock:last-of-type{ margin-bottom:0; } .alternateCorner.inset .innerBlock::after{ font-family: 'Material Icons'; content:'\e313'; color:#999; position:absolute; left:50%; bottom:-25vw; transform:translateX(-50%); font-size:16vw; } .alternateCorner.inset .innerBlock:last-of-type::after{ content:none; } .alternateCorner.inset .innerBlock:nth-of-type(odd) .left{ order:1; } .alternateCorner.inset .innerBlock:nth-of-type(odd) .right{ order:0; } .alternateCorner.inset .innerBlock:nth-of-type(even) .left{ order:0; } .alternateCorner.inset .innerBlock:nth-of-type(even) .right{ order:1; } .alternateCorner.inset .innerBlock .left{ width:100%; } .alternateCorner.inset .innerBlock .right{ width:; background-color:#F2F2F2; padding:10vw 5vw; } .alternateCorner.inset .innerBlock .right .objHeader{ display:flex; align-items:flex-start; margin-bottom:5vw; font-size:5.6vw } .alternateCorner.inset .objHeader *{ font-weight:500; line-height:7.5vw; } .alternateCorner.inset .objHeader .num{ margin-right:5vw; font-size:6.2vw; } .alternateCorner.inset .objHeader .num span{ font-size:3vw; } .alternateCorner.inset .right .text-02{ /*line-height:1.8;*/ } /**/ /*納車までの流れ***/ /*How to Buy**/ /*Support**/ .supportPage .mainImageSec .mainImage{ background-image:url(../../images/support/support-main.jpg); background-size:100%; } .supportPage #surviceListSec .paraImage{ background-image:url(../../images/support/support-survicelist.jpg); background-size:cover; background-position:95% 50%; } .supportPage #hokenSec .paraImage{ background-image:url(../../images/support/support-hoken.jpg); background-size:170%; background-position:40% 85% } .supportPage .contBoxImage { position:relative; height:88.5vw; } .supportPage .contBoxImage .titleBoad{ width:78%; height:; background-color:#fff; padding:6.5vw 8vw; position:absolute; top:70vw; right:4vw; } .supportPage .contBoxImage .titleBoad .barCode{ width:60px; margin-bottom:16px; } .supportPage .contBoxImage .titleBoad .main{ width:100%; font-size:5.4vw; font-weight:500; margin-bottom:15px; } .supportPage .contBoxImage .titleBoad .sub{ line-height:1.5; } .supportPage .contBoxImage .titleBoad .text{ font-size:3.46vw; } .supportPage .tempCorner .contBox{ padding-top:45vw; } .supportPage .tempCorner .contBox .innerBlock{ flex-wrap:wrap; border-bottom:1px solid #9B9B9B; padding:0 4vw 10vw; margin-bottom:10vw; } .supportPage .tempCorner .contBox .innerBlock:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; } .supportPage .tempCorner .contBox .cornetTitle{ width:100%; text-align:center; margin-bottom:8vw; } .supportPage #surviceListSec .contBox .innerBlock .left .text{ font-size:3.46vw; } #surviceListSec.tempCorner .contBox .left .bnrCase{ display:block; width:85%; margin:8vw auto; } #surviceListSec.tempCorner .contBox .right .discHeader{ margin-bottom:10px; } #surviceListSec.tempCorner .contBox .right .discHeader::before{ width:12px; height:12px; margin-right:2px; } #surviceListSec.tempCorner .contBox .right .list .topic{ display:flex; align-items:flex-start; align-content:flex-start; margin-bottom:2vw; } #surviceListSec.tempCorner .contBox .right .list .topic .num{ width:30px; line-height:2; } #surviceListSec.tempCorner .contBox .right .list .topic .text{ font-weight:500; width:calc(100% - 30px); } #surviceListSec.tempCorner .contBox .right .list .topic .text-04.grayText{ display:inline-block; line-height:1.5; font-weight:300; } #surviceListSec.tempCorner .block{ margin-bottom:10vw; } #surviceListSec.tempCorner .block .header{ font-size:17px; background-color:#fff; padding:0 0 3px 6px; font-weight:500; margin-bottom:10px; } #surviceListSec.tempCorner .block .objHeader{ margin-bottom:5px; } #surviceListSec.tempCorner .innerBlock:nth-of-type(2) .left{ margin-bottom:15vw } #surviceListSec.tempCorner .innerBlock:nth-of-type(2) .right{ padding:0 6vw 3vw; } #surviceListSec .pictBox{ flex-wrap:wrap; margin-top:5vw;} #surviceListSec .pictBox .pict{ width:49%; } #surviceListSec .pictBox .pict:first-of-type{ width:100%; text-align:center; margin-bottom:1.75vw; } #surviceListSec .pictBox .pict:first-of-type img{ width:49%; } #hokenSec .contBox{ padding-bottom:13.3vw; } #hokenSec .contBox .left{ margin-bottom:10vw; } #hokenSec .contBox .left .title{ font-size:11px; font-weight:500; margin-bottom:2vw; } #hokenSec .contBox .text{ font-size:3.46vw; } #hokenSec .contBox .upper{ width:100%; margin:0 auto 14.6vw; padding-bottom:14.6vw; flex-wrap:wrap; border-bottom:1px solid #9B9B9B; } #hokenSec .contBox .upper .right{ width:57.6vw; margin:0 auto; } #hokenSec .contBox .upper .right .title{ font-size:2.5vw; margin-bottom:8px; font-weight:400; } #hokenSec .contBox .right .smallHeader{ margin-bottom:20px; } #hokenSec .contBox .under{ flex-wrap:wrap; } #hokenSec .contBox .innerBlock .under .right .list{ display:flex; justify-content:space-between; width:100%; margin-bottom:6vw; } #hokenSec .contBox .innerBlock .under .right .list .topic{ width:18.5%; text-align:center; position:relative; } #hokenSec .contBox .innerBlock .under .smallHeader{ font-size:4.8vw; margin-bottom:3vw; } #hokenSec .contBox .innerBlock .under .right .list .icon{ margin-bottom:10px; } #hokenSec .contBox .innerBlock .under .right .list .icon img{ width:100% } #hokenSec .contBox .innerBlock .under .right .list .title{ font-weight:500; font-size:3vw; position:absolute;left:50%; top:18vw; transform:translateX(-50%); white-space:nowrap; } #hokenSec .contBox .innerBlock .right .under .list + .text{ font-size:3vw;} /*Support**/ /*Brand**/ .brandPage .mainImageSec .parallax-window{ position:relative; } .brandPage .mainImageSec .parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:#1e1e1e; background-image:url(../../images/brand/brand-main--848.jpg); background-size:100%; background-position:center 65%; } .brandPage.aeroBrand .mainImageSec .mainImage.parallax-window::after{ content:none; /*background-image:url(../../images/brand/aero-main.jpg); background-position:bottom; background-size:125%; background-position:-15vw center;*/ } .brandPage.historyPage .mainImageSec{ height:33vw; } .brandPage.historyPage .mainImageSec .mainImage{ background-image:url(../../images/brand/history-main--848.jpg); background-position:center; background-size:cover } .brandPage #cormpanyAboutSec{ margin-bottom:16vw; } #cormpanyAboutSec .cardList{ } #cormpanyAboutSec .cardList .card{ width:100%; margin-bottom:13.3vw; } #cormpanyAboutSec .cardList .card:last-of-type{ margin-bottom:0; } #cormpanyAboutSec .cardList .card .pict{ margin-bottom:6vw; } #cormpanyAboutSec .cardList .card .title{ font-size:18px; font-weight:500; text-align:center; margin-bottom:8vw; } #cormpanyAboutSec .cardList .card a:hover{ opacity:1; } #cormpanyAboutSec .cardList .card a:hover .pict, #cormpanyAboutSec .cardList .card a:hover .title{ opacity:.6; transition:.2s; } .aeroBrand #aeroBrandSec{ margin-bottom:0; } .aeroBrand #aeroBrandSec .innerBlock{ padding:0; width:100%; } .aeroBrand #aeroBrandSec .dualBlock{ } .aeroBrand #aeroBrandSec .dualBlock .left, .aeroBrand #aeroBrandSec .dualBlock .right{ width:100%; } .aeroBrand #aeroBrandSec .dualBlock .left{ width:100%; height:90vw; } .aeroBrand #aeroBrandSec .dualBlock .left .pict{ width:100%; height:100%; overflow:hidden; } .aeroBrand #aeroBrandSec .dualBlock .left .pict img{ width:%;} .aeroBrand #aeroBrandSec .dualBlock#kuhlracingBlodk .left .pict img{ object-position:-16vw -2vw;} .aeroBrand #aeroBrandSec .dualBlock#kruiseBlodk .left .pict img{ object-position:-32vw -1vw; } .aeroBrand #aeroBrandSec .dualBlock .right{ padding:11vw 0 14vw; } .aeroBrand #aeroBrandSec .dualBlock .right .innerWrap{ width:82%; margin:0 auto; } .aeroBrand #aeroBrandSec .dualBlock .right .smallHeader{ font-size:4.8vw; line-height:2; } .aeroBrand #aeroBrandSec .dualBlock .right .logo{ height:11vw; margin:15vw auto; } .aeroBrand #aeroBrandSec .dualBlock .right .logo img{ height:100%; } .aeroBrand #aeroBrandSec .dualBlock#kuhlracingBlock{ background-color:#1E1E1E; color:#fff; margin-bottom:18vw; } .aeroBrand #aeroBrandSec .dualBlock#kuhlracingBlock .left .pict img{ object-position:-15vw -5vw; width:140%; } .aeroBrand #aeroBrandSec .dualBlock#kruiseBlock{ background-color:#F2F2F2; } .aeroBrand #aeroBrandSec .dualBlock#kruiseBlock .left .pict img{ object-position:75% center; width:105%; } /*エアロブランド**/ .brandPage.aeroBrand.indiviBrandPage .mainImageSec{ height:150vw; margin-bottom:13.3vw; } .brandPage.aeroBrand.indiviBrandPage .mainImageSec .inner{ padding:21.3vw 0 0; color:#fff; } .brandPage.aeroBrand.indiviBrandPage section .innerBlock{ width:100%; padding:0; } .brandPage.aeroBrand .mainImageSec .logo{ margin:0 auto 40px; } .brandPage.aeroBrand .mainImageSec .text{ text-align:center; } .brandPage.aeroBrand.indiviBrandPage .conceptSec{ margin-bottom:8vw; } /* .brandPage.aeroBrand .swiperSec .innerBlock, .brandPage.aeroBrand .swiperSec .aeroBrandSlider, .brandPage.aeroBrand .swiperSec .aeroBrandSlider .container, .brandPage.aeroBrand .swiperSec .aeroBrandSlider .cont, .brandPage.aeroBrand .swiperSec .aeroBrandSlider .swiper, .brandPage.aeroBrand .swiperSec .aeroBrandSlider .swiper-slide, */ .brandPage.aeroBrand .swiperSec .swiper .swiper-slide .pict{ height:100%; } .brandPage.aeroBrand .swiperSec{ margin-bottom:16vw; } .brandPage.aeroBrand .sliderNavSet{ position:relative; width:45vw; height:26px; margin:8vw auto 13.3vw; } .brandPage.aeroBrand .sliderNavSet .swiper-button-prev{ left:0; height:20px; } .brandPage.aeroBrand .sliderNavSet .swiper-button-next{ right:0; height:20px; } .brandPage.aeroBrand .sliderNavSet .swiper-button-prev::after{ font-family: 'Material Icons'; content:'\e5cb'; color:#999; font-size:1.6rem; line-height:; padding-top:2px; left:0; } .brandPage.aeroBrand .sliderNavSet .swiper-button-next::after{ font-family: 'Material Icons'; content:'\e5cc'; color:#999; font-size:1.6rem; line-height:; padding-top:2px; } .aeroBrandSlider .container{ display:flex; flex-wrap:wrap; width:100%;} .aeroBrandSlider .container .cont{ display:flex; flex-wrap:wrap; align-content:center; order:1; padding:0 4vw; } .aeroBrandSlider .container .cont .title{ margin-bottom:5.3vw; width:100%; line-height:1.5 } .aeroBrandSlider .container .swiper{ margin:0; width:auto; order:0; height:61.8vw; } .aeroBrandSlider .container .swiper-pagination{ width:100%; } .aeroBrandSlider .container .swiper-pagination .swiper-pagination-bullet{ display:inline; background-color:transparent; opacity:1; margin:0 3vw; } .aeroBrandSlider .container .swiper-pagination .swiper-pagination-bullet:first-of-type::before{ content:'1'; font-size:20px; } .aeroBrandSlider .container .swiper-pagination .swiper-pagination-bullet:nth-of-type(2)::before{ content:'2'; font-size:20px; } .aeroBrandSlider .container .swiper-pagination .swiper-pagination-bullet:nth-of-type(3)::before{ content:'3'; font-size:20px; } .aeroBrandSlider .container .swiper-pagination-bullet-active{ text-decoration:underline; font-weight:500; } .brandPage.aeroBrand.kuhlracingPage .mainImageSec .parallax-window{ position:relative;} .brandPage.aeroBrand.kuhlracingPage .mainImageSec .parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/brand/aero-main-kuhlracing.jpg); background-size:cover; background-position:-40vw top; } .brandPage.aeroBrand.kuhlracingPage .mainImageSec .inner{ position:relative; z-index:1; } .brandPage.aeroBrand.kruisePage .mainImageSec .parallax-window{ position:relative; } .brandPage.aeroBrand.kruisePage .mainImageSec .parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/brand/aero-main-kruise.jpg); background-size:260%; background-position:60% 0; } .brandPage.aeroBrand.kruisePage .mainImageSec .inner{ position:relative; z-index:1;} .brandPage.aeroBrand.kuhlracingPage .mainImageSec .logo{ width:78vw; } .brandPage.aeroBrand.kruisePage .mainImageSec .logo{ width:60vw; } .brandPage.aeroBrand.indiviBrandPage .mainImageSec .text{ width:74vw; margin:0 auto; text-align:left; } .brandPage.aeroBrand .swiperSec .cont .title{ font-size:5.8vw; } #swiper-sonzaikan .cont{ width:100%; height:100%; } .brandPage.aeroBrand .swiper.slider1{ width:100%; } .brandPage.aeroBrand.indiviBrandPage .brandCharactorSec{ background-color:#1E1E1E; } .brandCharactorSec .header{ position:relative; /*height:88.5vw;*/ padding-top:80vw; } .brandPage.aeroBrand .brandCharactorSec .header .innerBlock{ margin:0 auto; } .kuhlracingPage #brandCharactorSec .header.parallax-window{ position:relative; } .kuhlracingPage #brandCharactorSec .header.parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:#1e1e1e; background-image:url(../../images/brand/aero-brandChara-kuhlracing.jpg); background-size:138%; background-position:-26vw -14vw; background-repeat:no-repeat; } .kruisePage #brandCharactorSec .header.parallax-window{ position:relative; } .kruisePage #brandCharactorSec .header.parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../../images/brand/aero-brandChara-kruise.jpg); background-size:140%; background-position:42% top; background-repeat:no-repeat; background-color:#1e1e1e; } .kruisePage #brandCharactorSec .innerBlock{ position:relative; z-index:1;} .brandPage.aeroBrand.indiviBrandPage #articleColumn .article > .header{ margin-bottom:70px; padding-top:80vw; } .brandPage.aeroBrand.indiviBrandPage #articleColumn .header .title{ margin-bottom:10px; } /*詳細*/ .brandCharactorSec .header .innerBlock{ margin:0 auto; position:relative; z-index:1;} .brandCharactorSec .header .titleBoad{ width:77.6vw; padding:8vw; background-color:#fff; position:relative; margin-left:auto; margin-bottom:4vw; margin-right:4vw } .kruisePage .brandCharactorSec#brandCharactorSec .header .innerBlock{ height:100%; } .brandCharactorSec .header .titleBoad .title{ font-size:5.3vw; line-height:1.4; font-weight:500; margin-bottom:12px; } .brandCharactorSec .cont{ width:100%; } #swiper-chara, #swiper-chara2{ background-color:#1E1E1E; margin-bottom:0; padding-bottom:20vw; } #swiper-chara .cont, #swiper-chara2 .cont{ color:#fff; } /* .kruisePage.brandPage.aeroBrand .swiper.slider4 .swiper-slide img{ object-position:center -20vw; } */ /*alter********/ /*alter********/ #brandCharactorSec2{ margin-bottom:0; } #brandCharactorSec2 .cont{ width:100%; } .kruisePage #brandCharactorSec2 .cont{ width:100%; } .kuhlracingPage #brandCharactorSec2 .header.parallax-window{ position:relative; } .kuhlracingPage #brandCharactorSec2 .header.parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:#1e1e1e; background-image:url(../../images/brand/aero-brandChara2-kuhlracing.jpg); background-size:105%; background-position:center -5vw; background-repeat:no-repeat; } .kruisePage #brandCharactorSec2 .header.parallax-window{ position:relative; } .kruisePage #brandCharactorSec2 .header.parallax-window::after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-color:#1e1e1e; background-image:url(../../images/brand/aero-brandChara2-kruise.jpg); background-size:104%; background-position:center -6.5vw; background-repeat:no-repeat; } .kruisePage #brandCharactorSec2 .innerBlock{ position:relative; z-index:1;} .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec{ margin-bottom:16vw; } .brandPage.aeroBrand #aeroBrandSec.indiviBrandPage .dualBlock .right{ padding:0; } .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec .dualBlock .innerWrap{ width:100%; padding:0 9.8vw; } .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec{ padding:0 4vw; } .brandPage.aeroBrand.kruisePage #aeroBrandSec .dualBlock{ background-color:#1E1E1E; color:#fff; } .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec .left{ height:65.5vw } .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec #kruiseBlock .left .pict img{ width:113%; height:auto; object-position:-12vw center; } .brandPage.aeroBrand.kuhlracingPage #aeroBrandSec .right{ background-color:#F2F2F2; } .brandPage.aeroBrand.indiviBrandPage #aeroBrandSec .right .logo{ margin:8vw auto; } .brandPage.aeroBrand.kruisePage #aeroBrandSec #kuhlracingBlodk .left .pict img{ width:110%; object-position:center; } /*エアロブランド**/ /*カタログ請求**/ .blackSec .linkText{ color:#3A8CEA; /*text-decoration:underline;*/ } .blackSec p{ color:#fff; } #catalogSec .text-01.header{ width:80%; margin: 0 auto 20vw; } #catalogSec{ margin-bottom:0; padding:18vw 0 30vw; } #catalogSec .innerBlock{ width:100%; } #catalogSec .list .topic{ display:; justify-content:space-between; margin-bottom:130px; } #catalogSec .list .topic:last-of-type{ margin-bottom:0;} #catalogSec .list .topic .left{ width:100%; margin-bottom:15vw; } #catalogSec .list .topic .left .pict{ width:70%; margin:0 auto; } #catalogSec .list .topic .right{ width:100%; } #catalogSec .list .topic .right .title{ font-weight:500; margin-bottom:15px; } #catalogSec .list .topic .right .text-02{ line-height:1.8; } #catalogSec .list .topic .right .btnType-4{ margin:18vw 0 0; } /*カタログ請求**/ /*ヒストリー*/ .historyPage .conceptSec{ margin-bottom:16vw; } #historySec{ background-color:#1E1E1E; padding-bottom:16vw; margin-bottom:0; } #historySec .historyHeader{ background-image:url(../../images/brand/history-para-01--848.jpg); background-position:70% 35%; background-size:120%; height:72vw; position:relative; } #historySec .historyHeader .cont{ position:relative; z-index:10; width:100%; height:100%; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; } #historySec .historyHeader .secTitle{ color:#fff; width:100%; margin-bottom:5.3vw; } #historySec .historyHeader .secTitle .main{ font-size:10.5vw; font-weight:500; } #historySec .historyHeader .text{ text-align:center; color:#fff; font-size:3.4vw; } #historySec .historyChart{ width:100%; margin:21vw auto; padding:0 2vw 0 8vw; position:relative; } #historySec .historyChart #centerLine{ content:''; display:block; background-color:#9B9B9B; width:1px; height:calc(100% - 8vw); position:absolute; left:2.5vw; bottom:0; transform:translateX(-50%); } #historySec .historyChart .unit .yearNum::before{ content:''; display:block; width:3vw; height:3vw; background-color:#9B9B9B; position:absolute; left:-12vw; top:1.25vw; border-radius:50%; } #historySec .historyChart .unit .yearNum::after{ content:''; display:block; width:6vw; height:6vw; border:1px solid #9b9b9b; position:absolute; left:-13.8vw; top:-.4vw; border-radius:50%; } #historySec .historyChart .unit{ display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:5.3vw; } #historySec .historyChart .unit:first-of-type .year{ margin-top:-15px; } #historySec .historyChart .unit .year{ display:none; padding:0 5vw 5vw; width:100%; } #historySec .historyChart .unit.active .year{ display:block; } #historySec .historyChart .unit.active .year .yearNum::before, #historySec .historyChart .unit.active .year .yearNum::after{ content:none; } #historySec .historyChart .unit .year .award{ position:relative; width:100%; } #historySec .historyChart .unit .year .award::before{ content:''; display:block; width:13px; height:13px; background-color:#9B9B9B; border-radius:50%; position:absolute; top:-7vw; left:-12.5vw; transform:translateY(-50%); } #historySec .historyChart .unit .year .text{ color:#fff; margin-bottom:2vw; } #historySec .historyChart .unit .year .medal{ width:35vw; margin:0 auto; } #historySec .historyChart .unit .year .medal.solo{ width:26.5vw; } #historySec .historyChart .unit .yearNum{ color:#9B9B9B; font-family:'Oswald', sans-serif; font-size:7.2vw; position:relative; } #historySec .historyChart .unit .topic{ width:100%; padding:4.5vw 5vw; background-color:#4E4E4E; color:#fff } #historySec .historyChart .unit .topic .header{ margin-bottom:5vw} #historySec .historyChart .unit .yearNum{ line-height:1; margin-bottom:4vw; } #historySec .historyChart .unit .topic .header .text{ width:100%; } #historySec .historyChart .unit .topic .pics{ display:flex; flex-wrap:wrap; justify-content:space-between; } #historySec .historyChart .unit .topic .pics .pict{ margin-bottom:5px } #historySec .historyChart .unit .topic .pics .mini{ width:48.5%; } #historySec .historyChart .lineTail{ z-index:100; position:relative; } #historySec .historyChart .lineTail .pict{ width:4px; margin:0 auto; position:absolute; top:-5vw; left:-6.25vw; } /*ヒストリー*/ /*アワード*/ #awardSec{ padding-bottom:26.5vw; background-color:#F2F2F2; } #awardSec .awardHeader{ background-image:url(../../images/brand/history-awardBG--848.jpg); height:72vw; position:relative; background-size:cover; } #awardSec .awardHeader .cont{ position:relative; z-index:10; width:100%; height:100%; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; } #awardSec .awardHeader .secTitle{ color:#fff; width:100%; margin-bottom:5.3vw; } #awardSec .awardHeader .secTitle .main{ font-size:10.5vw; font-weight:500; } #awardSec .awardHeader .text{ text-align:center; color:#fff; font-size:3.4vw; } #awardSec .cornerTitle{ display:flex; justify-content:center; align-items:center; margin:22.5vw 0 17vw; } #awardSec .awardList{ display:flex; flex-wrap:wrap; } #awardSec .awardList .card{ width:100%; margin-bottom:10.6vw; height:43vw; position:relative; padding-left:40vw; } #awardSec .awardList .card:last-of-type{ margin-bottom:0; } #awardSec .awardList .card a{ display:flex; flex-wrap:wrap; align-content:space-between; width:100%; height:100%; } #awardSec .awardList .card a p{ width:100%; } #awardSec .awardList .card:nth-of-type(3n){ margin-right:0; } #awardSec .awardList .card .pict{ margin-bottom:15px; position:absolute; left:0; top:0; width:36vw; height:43vw; } #awardSec .awardList .card .pict img{ object-fit:cover; width:100%; height:100%; } #awardSec .awardList .card .pict .medal{ width:21vw; position:absolute; right:2px; bottom:2px;} #awardSec .awardList .card .pict .medal.solo{ width:18.5vw; height:auto; } #awardSec .awardList .card .title{ font-size:5.6vw; font-weight:500; margin-bottom:1vw; line-height:1; } #awardSec .awardList .card .text{ font-size:3.4vw; margin-bottom:; } #awardSec .awardList .card .btnType-1{ color:#3A8CEA; display:flex; align-items:center; justify-content:flex-end; font-size:3.2vw; line-height:1; border:0; padding:0; height:4vw; font-weight:400; } #awardSec .awardList .card .btnType-1::after{ font-family: 'Material Icons'; content:'\e5cc'; margin-left:5px; font-size:1.4rem; line-height:1; padding-top:2px; } #awardSec .awardList .card a:hover .btnType-1, #awardSec .awardList .card a:active .btnType-1{background-color:transparent;} #awardSec .awardList .card .btnType-1:hover, #awardSec .awardList .card .btnType-1:active{ background-color:transparent;} /*アワード*/ /*イベント*/ .brandPage.eventPage #pageTopSec .innerBlock{ padding-bottom:15px; } .brandPage.eventPage #breadcrumb{ margin-bottom:0; } .brandPage.eventPage .mainImageSec{ height:33.5vw; margin-bottom:15vw; } .brandPage.eventPage .mainImageSec .mainImage{ background-repeat:no-repeat; background-size:100%; position:relative; background-position:center; height:100%; } .brandPage.eventPage #leadSec{ margin-bottom:15vw; } .brandPage.eventPage #leadSec h1{ margin-bottom:6vw; } .brandPage.eventPage #leadSec h1 .bigHeader{ line-height:1.25; margin-bottom:10px; } .brandPage.eventPage #leadSec h1 .sub{ margin-bottom:0; line-height:1; font-size:3.5vw} .brandPage.eventPage.TAS2015 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2015/event-main-tokyocustom2015.jpg); } .brandPage.eventPage.TAS2016 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2016/event-main-tokyocustom2016.jpg); } .brandPage.eventPage.TAS2018 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2018/event-main-tokyocustom2018.jpg); } .brandPage.eventPage.TAS2019 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2019/event-main-tokyocustom2019.jpg); } .brandPage.eventPage.TAS2020 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2020/event-main-tokyocustom2020.jpg); } .brandPage.eventPage.TAS2022 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-TAS2022/event-main-tokyocustom2022.jpg); } .brandPage.eventPage.TAS2022 .mainImageSec .mainImage{ background-image:url(../../images/brand/event-OAM2022/event-main-osakaautomesse2022.jpg); } .brandPage.eventPage .mainImageSec .mainImage .medal{ width:22vw; position:absolute; right:3vw; bottom:2vw; } .brandPage.eventPage #gallerySec .galleryList{ display:flex; flex-wrap:wrap; } .brandPage.eventPage #gallerySec .galleryList .topic{ width:100%; margin-bottom:5vw; } .brandPage.eventPage #gallerySec .galleryList .topic a img{ width:100%; } .brandPage.eventPage #gallerySec .galleryList .topic:nth-of-type(3n){ margin-right:0; } /*イベント*/ /*代表メッセージ*/ .brandPage.messagePage .mainImageSec{ height:92vw; max-height:92vw; } .brandPage.messagePage .mainImageSec .parallax-window::after{ background-image:url(../../images/brand/message-main--848.jpg); background-position:35% center; background-size:150%; } .brandPage.messagePage .conceptSec{ margin-bottom:16vw; } .brandPage.messagePage .conceptSec h1{ text-align:left; font-size:7.2vw; margin-bottom:0; } .brandPage.messagePage #messageCont{ margin-bottom:16vw; } .brandPage.messagePage #messageCont .innerBlock{ width:100%; padding:0; } .brandPage.messagePage #messageCont .contBox{ width:100%; padding:0 4vw; align-items:flex-start; margin:0 auto 16vw; display:block; } .brandPage.messagePage #messageCont .contBox .smallHeader{ line-height:1.5; margin-bottom:5.3vw; } .brandPage.messagePage #messageCont .contBox .texts{ width:%; } .brandPage.messagePage #messageCont .contBox .texts .smallHeader{ letter-spacing:-1px; } .brandPage.messagePage #messageCont .contBox .texts .text{ margin-bottom:10.6vw; text-align:justify; } .brandPage.messagePage #messageCont .contBox .texts .text:last-of-type{ } .brandPage.messagePage #messageCont .contBox .picts{ width:100%; } .brandPage.messagePage #messageCont .contBox .picts .pict{ margin-bottom:25px; } .brandPage.messagePage #messageCont .contBox .picts .pict:last-of-type{ margin-bottom:0; } .brandPage.messagePage #messageCont .contBox .picts .pict.min{ width:48%; } .brandPage.messagePage #messageCont .contBox:nth-of-type(3) .picts .pict{ margin-bottom:3.2vw; } .brandPage.messagePage #messageCont .contBox:nth-of-type(4){ display:flex; flex-wrap:wrap; } .brandPage.messagePage #messageCont .contBox:nth-of-type(4) .picts{ order:1; display:flex; justify-content:space-between; } .brandPage.messagePage #messageCont .contBox:nth-of-type(4) .picts .pict{ width:49%; margin-bottom:0; } .brandPage.messagePage #messageCont .contBox.parallax-window{ width:100%; background-color:#1e1e1e; background-image:url(../../images/brand/message-paraImage--848.jpg); background-size:160% !important; background-position:center top !important; background-repeat:no-repeat; } .brandPage.messagePage #messageCont .contBox.parallax-window .innerBlock{ position:relative; width:100%; height:100%; margin:0 auto; padding:85vw 0 10vw; display:flex; justify-content:flex-end; align-items:flex-end; } .brandPage.messagePage #messageCont .contBox.parallax-window .texts{ } .brandPage.messagePage #messageCont .contBox.parallax-window h2, .brandPage.messagePage #messageCont .contBox.parallax-window p{ color:#fff; } .brandPage.messagePage #messageCont .prof{ } .brandPage.messagePage #messageCont .prof .pict{ width:100%; margin-bottom:5vw; } .brandPage.messagePage #messageCont .prof p{ text-align:center; } .brandPage.messagePage #messageCont .prof .nameCase{ width:66.6vw; margin:0 auto 5vw; text-align:left; font-weight:400; } .brandPage.messagePage #messageCont .prof .name{ font-size:25px; margin-left:10px; line-height:1.2; font-weight:400; } .brandPage.messagePage #messageCont .prof .text-03{ width:100%; margin:0 auto; text-align:left; padding:0 4vw; } /*代表メッセージ*/ /*商品開発*/ .brandPage.developPage .mainImageSec{ height:62vw; } .brandPage.developPage .mainImageSec .parallax-window::after{ background-image:url(../../images/brand/develop-main.jpg); background-position:35% center; background-size:150%; } .brandPage.developPage .conceptSec{ margin-bottom:16vw; } .brandPage.developPage .conceptSec h1{ text-align:left; font-size:7.2vw; margin-bottom:0; } .brandPage.developPage #developCont{ margin-bottom:16vw; } .brandPage.developPage #developCont .innerBlock{ width:100%; padding:0; } .brandPage.developPage #developCont .contBox{ width:100%; padding:0 4vw; align-items:flex-start; margin:0 auto 16vw; display:block; } .brandPage.developPage #developCont .contBox:last-of-type{ margin-bottom:0; } .brandPage.developPage #developCont .contBox .smallHeader{ line-height:1.5; margin-bottom:5.3vw; } .brandPage.developPage #developCont .contBox .card{ margin-bottom:11vw; } .brandPage.developPage #developCont .contBox .card:last-of-type{ margin-bottom:0; } .brandPage.developPage #developCont .contBox .texts{ width:100%; margin:0 auto; } .brandPage.developPage #developCont .contBox .texts .text{ margin-bottom:10.6vw; } .brandPage.developPage #developCont .contBox .texts .text:last-of-type{ } .brandPage.developPage #developCont .contBox .picts{ width:100%; } .brandPage.developPage #developCont .contBox .picts.flexBox{ flex-wrap:wrap; } .brandPage.developPage #developCont .contBox .picts .pict{ margin-bottom:5.6vw; } .brandPage.developPage #developCont .contBox .picts .pict:last-of-type{ margin-bottom:0; } .brandPage.developPage #factorysec{ margin-bottom:16vw; } .brandPage.developPage #factorysec .header{ font-size:5.6vw; font-weight:500; text-align:center; margin-bottom:5.3vw; } .brandPage.developPage #factorysec .contBox{ } .brandPage.developPage #factorysec .contBox.flexBox{ align-items:flex-start; flex-wrap:wrap; } .brandPage.developPage #factorysec .card{ width:100%; margin-bottom:11vw; } .brandPage.developPage #factorysec .card .pict{ margin-bottom:6vw; } .brandPage.developPage #factorysec .card .name{ text-align:center; margin-bottom:6vw; } .brandPage.developPage #factorysec .card .name .sub{ color:#4E4E4E; } .brandPage.developPage #factorysec .card .name .main{ font-size:4vw; font-weight:500; } .brandPage.developPage #factorysec .card .text{ margin-bottom:6.6vw; } .brandPage.developPage #factorysec .card .text:last-of-type{ margin-bottom:0; } /*商品開発*/ /*Brand**/ /*Blogs**/ #blogList{width:90%; margin:0 auto 100px auto;} #blogList ul {display: flex; flex-wrap: wrap; justify-content: flex-start;} #blogList ul li {width:48%; margin:0 4% 30px 0;} #blogList ul li:nth-child(2n) {margin-right:0;} #blogList ul li p {text-align: center;} #blogList ul li .blogThumb {margin:0 auto 10px auto;} #blogList ul li .blogThumb img {width: 100%; height:auto;} #blogList ul li .blogName {font-size:3.73vw; font-weight:500; line-height:1.3;} #blogList ul li .blogNameEng {font-size:3vw; margin:5px auto;} #blogList ul li div {display: flex; flex-wrap: wrap; justify-content: center;} #blogList ul li a { color:#3A8CEA;} /*Dealer**/ .dealerPage .mainImageSec .mainImage{ background-image:url(../../images/dealer/dealer-main.jpg); background-position:-25vw 52%; background-size:135%; /*▲写真高さ足りない*/ background-attachment:local;/*パララックス*/ } .dealerPage #leadSec .goBlogs{ margin-top:5vw; } .dealerPage .contSec{ margin-bottom:21.3vw; } #staffBlogSec{ margin-bottom:21.3vw; } #staffBlogSec .innerBlock{ padding:0 4vw; display:flex; flex-wrap:wrap; justify-content:space-between; } #staffBlogSec .innerBlock .objHeader{ width:48%; font-size:4.26vw; display:flex; align-items:center; } #staffBlogSec .pict{ width:48%; height:26.1vw; padding-bottom:5vw; background-repeat:no-repeat; background-size:cover; background-image:url(../../images/dealer/staffBlog.jpg); display:flex; justify-content:center; align-items:flex-end; } #staffBlogSec .pict .title{ width:42%; } #staffBlogSec .cont{ width:100%; margin-top:5vw} #staffBlogSec .cont .text{ font-weight:500; margin-bottom:13px } #staffBlogSec .cont .list{ display:flex; flex-wrap:wrap; width:100%; justify-content:space-between; } #staffBlogSec .cont .list .topic{ width:48%; height:8.85vw; margin-bottom:4vw; background-color:#F2F2F2; } #staffBlogSec .cont .list .topic:last-of-type{ margin-bottom:0; } #staffBlogSec .cont .list .topic a, #staffBlogSec .cont .list .topic p{ color:#3A8CEA; font-size:3.2vw; display:flex; align-items:center; justify-content: center; height:100%; } #staffBlogSec .cont .list .topic.long a, #staffBlogSec .cont .list .topic.long p{ font-size:2.8vw; text-align:center; line-height:8.85vw; } #staffBlogSec .cont .list .topic p{ font-weight:400; color:#C4C4C4; } #dealerAccessSec{ margin-bottom:0; } #dealerAccessSec .dealerList{ } #dealerAccessSec .dealerList .topic{ display:flex; justify-content:space-between; flex-wrap:wrap; width:100%; margin-bottom:30vw; } /*#dealerAccessSec .dealerList .topic:last-of-type{ margin-bottom:0; }*/ #dealerAccessSec .dealerList .topic .left{ width:100%; margin-bottom:8vw; } #dealerAccessSec .dealerList .topic .left .btnType-1-{ margin-bottom:3vw; } #dealerAccessSec .dealerList .topic .right{ width:100%; } #dealerAccessSec .dealerList .topic .left .shopPic{ margin-bottom:6vw; position:relative; } #dealerAccessSec .dealerList .topic .left .title{ margin-bottom:4vw; } #dealerAccessSec .dealerList .topic .left .data{ margin-bottom:4vw; } #dealerAccessSec .dealerList .topic .left .btnType-1{ margin:; } #dealerAccessSec .dealerList .topic .right .map{ width:100%; height:70vw;margin-bottom:30px; } #dealerAccessSec .dealerList .topic .right .access .header{ font-weight:500; } #dealerAccessSec .dealerList .topic .btnBlock{ width:; margin:8vw auto 0; } #dealerAccessSec .dealerList .topic .btnBlock .btnType-6:first-of-type{ margin-bottom:4vw; } #dealerAccessSec .dealerList .topic#shop-fukuoka .shopPic{ } /*構造無視改変（ディーラー一覧ページ）*/ .dealerPage #dealerAccessSec .dealerList .topic .left{ order:0;} .dealerPage #dealerAccessSec .dealerList .topic .right{ order:1;} .dealerPage #dealerAccessSec .dealerList .topic .btnBox{ order:2; } #dealerAccessSec .dealerList .topic .btnBox{ margin:8vw auto 0; } #dealerAccessSec .dealerList .topic .btnBox .btnType-1-{ margin-bottom:3vw; } /*構造無視改変（ディーラー一覧ページ）*/ /*個別店舗ページ**/ .dealerPage.shopPage #breadcrumb{ margin-bottom:30px; } .dealerPage.shopPage #pageTopSec .innerBlock{ width:100%; padding:0; } .dealerPage.shopPage #shopPageHeader{ position:relative; } .dealerPage.shopPage #shopPageHeader .left{ width:100%; height:27vw; background-color:#1E1E1E; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; } .dealerPage.shopPage #shopPageHeader .left .logo{ width:18vw; margin-right:5.5vw; } .dealerPage.shopPage #shopPageHeader .left .shopTitle{ width:%; color:#fff; text-align:center; } .dealerPage.shopPage #shopPageHeader .left .shopTitle .main{ font-size:4.8vw; margin-bottom:6px; font-weight:500; } .dealerPage.shopPage #shopPageHeader .left .shopTitle .sub{ font-size:2.8vw;} .dealerPage.shopPage #shopPageHeader .right{ width:100%; height:56vw } .dealerPage #openGnav{ position:relative; } #slideLine{ position: absolute; bottom: 0; height: 2px; background-color:#75C2FF; -webkit-transition: all .3s ease; transition: all .3s ease; } .dealerPage #openGnav .navList{ display:flex; flex-wrap:wrap; background-color:#F2F2F2; } .dealerPage #openGnav .navList .topic{ width:50% !important; border-bottom:1px solid #9B9B9B; } .dealerPage #openGnav .navList .topic:nth-of-type(odd){ border-right:1px solid #9B9B9B; } .dealerPage #openGnav .navList .topic:nth-of-type(3), .dealerPage #openGnav .navList .topic:last-of-type{ border-bottom:none; } .dealerPage #openGnav .navList .topic a{ display:flex; justify-content:center; align-items:center; height:13vw; font-size:3.5vw; } .dealerPage #openGnav .navList .topic last-of-type{ margin-right:0; } .dealerPage.shopPage #staffBlog{ padding:17.2vw 0 0; margin-bottom:0; position:relative; } .dealerPage.shopPage #staffBlogAnchor{ position:absolute; left:0; top:-9vw; } .dealerPage.shopPage .secTitle{ line-height:1; } .dealerPage.shopPage .secTitle .main{ font-size:21px; } .dealerPage.shopPage #staffBlog .list { display:flex; flex-wrap:wrap; margin-bottom:16vw;/*←50px相当*/} .dealerPage.shopPage #staffBlog .list .topic{ width:100%; margin-bottom:15vw } .dealerPage.shopPage #staffBlog .list .topic:last-of-type{ margin-bottom:0; } .dealerPage.shopPage #staffBlog .list .topic .pict{ margin-bottom:15px; } .dealerPage #staffBlog .list .topic .category{ font-size:13px; margin-bottom:10px; font-weight:500; } .dealerPage #staffBlog .list .topic .title{ font-size:17px; margin-bottom:10px; } .dealerPage #staffBlog .list .topic .text{ margin-bottom:15px; } .dealerPage #staffBlog .list .topic .bottom{ display:flex; justify-content:space-between; } .dealerPage #staffBlog .list .topic .bottom .date{ font-size:3.2vw; } .dealerPage #staffBlog .list .topic .bottom .btnType-2{ font-size:3.5vw; } .dealerPage.shopPage #staffBlog .list .topic.primal{ width:100%; margin-bottom:60px; } .dealerPage.shopPage #staffBlog .list .topic.primal a{ :; } .dealerPage.shopPage #staffBlog .list .topic.primal .cont{ width:100%; } .dealerPage.shopPage #staffBlog .list .topic.primal .title{ font-size:20px; margin-bottom:15px; } .dealerPage.shopPage #staffBlog .list .topic.primal .text{ font-size:15px; margin-bottom:30px; } .dealerPage.shopPage #stockcarSec{ padding-top:22.5vw; } .dealerPage.shopPage #stockcarSec, .dealerPage.shopPage .alternateCorner{ margin-bottom:0/*22.5vw;*//*←85px相当*/ } .dealerPage.shopPage .alternateCorner .innerBlock{ height:; margin-bottom:12vw; } .dealerPage.shopPage .alternateCorner .innerBlock .right{ background-color:#F2F2F2; } .dealerPage.shopPage .alternateCorner .innerBlock .right .smallHeader{ margin-bottom:20px; line-height:1.6; } .dealerPage.shopPage #shopIntro{ padding-top:22.5vw } .dealerPage.shopPage #shopIntro .innerBlock:last-of-type{ margin-bottom:0; } .dealerPage.shopPage #staffList{ padding-top:22.5vw; margin-bottom:20vw; } .dealerPage.shopPage #staffList .cardList{ display:flex; flex-wrap:wrap; width:85%; margin:0 auto; } .dealerPage.shopPage #staffList .cardList .card{ width:100%; margin-bottom:25vw; /*←93.5px相当 あえて原稿より大きく（上下の区別がつきにくいため）*/ } .dealerPage.shopPage #staffList .cardList .card:last-of-type{ margin-bottom:0; } .dealerPage.shopPage #staffList .cardList .card .pict{ margin-bottom:10vw; } .dealerPage.shopPage #staffList .cardList .card .name{ font-size:20px; font-weight:500; margin-bottom:15px; text-align:center; } .dealerPage.shopPage #accessSec{ background-color:#F2F2F2; padding:20vw 0; } .dealerPage.shopPage #accessSec .innerBlock{ width:100%; } .dealerPage.shopPage #accessSec .upper{ margin-bottom:14vw; } .dealerPage.shopPage #accessSec .upper .access .header{ font-weight:500; } .dealerPage.shopPage #accessSec .mapCase{ height:67vw; margin-bottom:5vw; } .dealerPage.shopPage #accessSec .mapCase iframe{ width:100%; height:100%; } .dealerPage.shopPage #accessSec .shopData .left{ width:100%; margin-bottom:10vw; } .dealerPage.shopPage #accessSec .shopData .left .pict img{ height:189px; } .dealerPage.shopPage #accessSec .shopData .right{ width:85%; margin:0 auto; } .dealerPage.shopPage #accessSec .shopData .title, .dealerPage.negoPage #accessSec .shopData .title{ margin-bottom:10vw; text-align:center; } .dealerPage.shopPage #accessSec .shopData .middleHeader, .dealerPage.negoPage #accessSec .shopData .middleHeader{ line-height:1; margin-bottom:5px; } .dealerPage.shopPage #accessSec .shopData .sub, .dealerPage.negoPage #accessSec .shopData .sub{ font-size:10px; } .dealerPage.shopPage #accessSec .shopData .phoneNum, .dealerPage.negoPage #accessSec .shopData .phoneNum{ display:flex; align-items:center; font-size:6.6vw; font-weight:500; margin-bottom:10px; width:100%; } .dealerPage #accessSec .shopData .phoneNum span img{ margin-right:5px; width:6.1vw; vertical-align:middle; } .dealerPage.shopPage #accessSec .btnBlock{ margin-top:12vw; } .dealerPage.shopPage #accessSec .btnBlock div{ margin:0 auto 5vw; } /*VRARVA 名古屋*/ /* .dealerPage.shopPage.vrarva #stockcarSec, .dealerPage.shopPage.vrarva #shopIntro, .dealerPage.shopPage.vrarva #staffList{ display:none; } .dealerPage.shopPage.vrarva #staffBlog{ margin-bottom:21.3vw; } */ .dealerPage.shopPage.vrarva .openDay{ text-align:center; font-size:4.8vw; margin-top:30px; font-weight:400; } /*VRARVA 名古屋*/ /*個別店舗ページ**/ /*個別店舗ページ -ブログ***/ .dealerPage.blogPage .wrapper{ margin-top:15vw; } .dealerPage.blogPage .wrapper #pageTopSec{ padding-top:0; } /*shopPageHeader ブログ下層・商談**********/ .dealerPage.blogPage #shopPageHeader, .dealerPage.negoPage #shopPageHeader{ height:20vw; background-color:#1E1E1E; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; } .dealerPage.blogPage #pageTopSec, .dealerPage.negoPage #pageTopSec{ height:100% } .dealerPage.blogPage #pageTopSec #openGnav, .dealerPage.negoPage #pageTopSec #openGnav{ margin-bottom:3vw; } .dealerPage.blogPage #shopPageHeader .shopTitle, .dealerPage.negoPage #shopPageHeader .shopTitle{ width:100%; color:#fff; text-align:center; } .dealerPage.blogPage #shopPageHeader .shopTitle .main, .dealerPage.negoPage #shopPageHeader .shopTitle .main{ font-size:5.6vw; margin-bottom:5px; font-weight:500; } .dealerPage.blogPage #shopPageHeader .shopTitle .sub, .dealerPage.negoPage #shopPageHeader .shopTitle .sub{ font-size:10px;} /*shopPageHeader ブログ下層・商談**********/ .dealerPage.blogPage #staffBlog{ margin-bottom:20vw; } .dealerPage.blogPage #staffBlog .secTitle{ margin-bottom:12vw; } .blogList #archiveColumn .toggle_btn {cursor:pointer; position:relative; padding:10px 0 0 25px; font-weight:bolder; font-size:1rem;} .blogList #archiveColumn .toggle_btn::before {font-family: 'Material Icons'; content:'\e5cf'; margin:0; font-size:1.5rem; line-height:1; color:#fff; position:absolute; top:11px; left:0;} .blogList #archiveColumn .toggle_btn.black::before {font-family: 'Material Icons'; content:'\e5cf'; margin:; font-size:1.5rem; line-height:1; color:#000; position:absolute; top:5px; left:0;} .child { display: none;} .blogList #archiveColumn .archiveBlock:first-of-type{ border-top:1px solid #C4C4C4; } .blogList #archiveColumn .archiveBlock:nth-of-type(2){ border-bottom:1px solid #C4C4C4; margin-bottom:12vw; } .blogList #archiveColumn #sideArchive{ } .blogList #archiveColumn #sideArchive dt{} .blogList #archiveColumn #sideArchive dt::after{ font-family: 'Material Icons'; content:'\e5cf'; margin-left:20px; font-size:2.5rem; line-height:1; color:#fff; } .dealerPage .blogList #archiveColumn #sideArchive dt::after{ color:#1e1e1e; } .blogList .articleList .topic{ margin-bottom:25vw; }/*border-bottom推奨*/ .blogList .articleList .topic .pict{ position:relative; margin-bottom:4vw} .blogList .articleList .topic.new .pict::after{ content:url(../images/icon-new.png); position:absolute; top:0; left:0; width:59px; height:25px; z-index:3; } .blogList .articleList .topic .cont .title{ margin-bottom:25px; } .blogList .articleList .topic .cont .date{ font-size:13px; } .blogList .archiveBlock{ border-bottom:1px solid #C4C4C4; padding:10vw 0; } .blogList .archiveBlock .objHeader{ margin-bottom:15px; } .blogList .archiveList .topic a{ display:block; padding:10px 0; } /* .dealerPage.blogPage #archiveColumn .serchWin{ margin-bottom:80px; } .serchWin input{ font-size:14px; } .serchWin input[type="search"]{ width:170px; border:1px solid #1E1E1E; padding-left:5px; } .serchWin input[type="submit"]{ width:42px; border:1px solid #1E1E1E; background-color:#E6E4.kuhlfamPage E4; cursor:pointer; font-weight:500; } */ .dealerPage.blogPage .shopBnrList{ width:80%; margin:0 auto; } .dealerPage.blogPage .shopBnrList .topic{ position:relative; margin-bottom:20px; } .dealerPage.blogPage .shopBnrList .topic:last-of-type{ margin-bottom:0; } .dealerPage.blogPage .shopBnrList .topic .cont{ position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; display:flex; justify-content:center; align-content:center; flex-wrap:wrap; z-index:10; } .dealerPage.blogPage .shopBnrList .topic .cont p{ width:100%; text-align:center; line-height:1.5;} .dealerPage.blogPage .shopBnrList .topic .cont .main{ font-size:4.8vw;font-weight:500; } .dealerPage.blogPage .shopBnrList .topic .cont .sub{ font-size:3.5vw; } .blogList .paging{ margin:20vw 0 15vw; } .dealerPage.blogPage #staffBlog .paging a{ line-height:11.2vw; } /**/ .paging{ display:flex; align-items:center; justify-content:center; align-items:flex-start;} .paging a { padding:0 10px; color:#4E4E4E; font-weight:300; } .paging a:hover {text-decoration:underline !important;} .paging span.current { padding:0 10px; color:#4E4E4E; font-weight:bolder; font-size:120% } .startEdge,.terminal{ display:flex; align-items:center; } .startEdge::before{ font-family: 'Material Icons'; content:'\eac3'; color:#999; margin-right:5px; font-size:1.6rem; padding-top:2px; margin-right:5px; } .terminal::after{ font-family: 'Material Icons'; content:'\eac9'; color:#999; margin-left:5px; font-size:1.6rem; padding-top:2px; margin-left:5px; } /**/ /*個別店舗ページ -ブログ***//*個別店舗ページ -ブログ -詳細****/ .detailPage #articleColumn .header{ display:flex; flex-wrap:wrap; justify-content:space-between; } .detailPage #articleColumn .header .category{ font-weight:500; } .detailPage #articleColumn .title{ margin:8vw 0 18vw; position:relative; width:100% } .detailPage #articleColumn .article.new .title::before{content:url(../images/icon-new.png); width:59px; height:25px; z-index:3; margin-right:5px;vertical-align:middle;} .detailPage #articleColumn .cont {word-break: break-all ;} .detailPage #articleColumn img{ display:block; max-width:100%; margin:15px auto; } .detailPage #articleColumn .text{ margin-bottom:18vw; } .detailPage #articleColumn .paging{ width:100%; margin-bottom:0; } .detailPage #articleColumn .paging .otherArticles{ width:50%; } .detailPage #articleColumn .paging .otherArticles:first-of-type .cont{border-right:1px solid #9B9B9B ;} .detailPage #articleColumn .paging .startEdge, .detailPage #articleColumn .paging .terminal{ font-size:3.2vw; } .detailPage #articleColumn .paging .next .title{ order:0; } .detailPage #articleColumn .paging .next .pict{ order:1; } .detailPage #articleColumn .paging a{ width:100%; padding:0; } .detailPage #articleColumn .paging .prev *{ float:left; } .detailPage #articleColumn .paging .next *{ float:right; } .detailPage #articleColumn .paging a .cont .pict{ width:33vw; height:33vw; } .detailPage #articleColumn .paging a .cont .pict img{width:100%; height:100%; margin:0; } .detailPage #articleColumn .paging a .cont .title{font-size:4.5vw; font-weight:500; width:92%; margin:3vw 0 0;} .detailPage #archiveColumn{ display:none; } /*ブログ詳細ページ下の他のブログへの誘導用*/ #articleColumn .kuhlBlogList {width:100%;} #articleColumn .kuhlBlogList ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 auto 30px auto; padding-bottom:30px;} #articleColumn .kuhlBlogList ul li {width:48%; margin-bottom:4%;} #articleColumn .kuhlBlogList ul li a { height:10.38vw; line-height:1; color:#3A8CEA; font-size:2.66vw; background-color:#F2F2F2; display:flex; align-items:center; justify-content:center; } #articleColumn .kuhlBlogList h4 {margin:0 auto !important; text-align: center;} #articleColumn .kuhlBlogList h4 img {width:100% !important;} #articleColumn .kuhlBlogList h5 {margin:40px auto !important; text-align: center; font-size:20px; font-weight: bolder;} #articleColumn .kuhlBlogList ul.line {border-bottom:solid 1px #707070;} #articleColumn .kuhlMagazineBlogList {padding-bottom:100px;} #articleColumn .kuhlMagazineBlogList .inner {} #articleColumn .kuhlMagazineBlogList h4 {width:60%; margin:0 auto; text-align: center;} #articleColumn .kuhlMagazineBlogList h4 img {width:100%;} #articleColumn .kuhlMagazineBlogList h5 {color:#fff; margin:20px auto; line-height:1.6;} #articleColumn .kuhlMagazineBlogList ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin:10px auto 30px auto;} #articleColumn .kuhlMagazineBlogList ul li {width:49%; margin-bottom:2% !important; padding:0 !important; line-height:0; } #articleColumn .kuhlMagazineBlogList ul li a {display: block; margin:0; padding:0;} #articleColumn .kuhlMagazineBlogList ul li a img {margin:0 !important; padding:0;} #articleColumn .kuhlMagazineBlogList .btnMagazine {} #articleColumn .kuhlMagazineBlogList .btnMagazine a {display: block; margin:0 auto; text-align: center; width:100%; height:53px; line-height:53px; border:solid 1px #fff; color:#fff; font-weight: lighter;} /*個別店舗ページ -ブログ -詳細****/ /*個別店舗ページ -商談***/ .dealerPage.negoPage #accessSec{ background-color:rgba(255,255,255,0); padding:0; } .dealerPage.negoPage #accessSec .shopData{margin-bottom:20vw;} .dealerPage.negoPage #accessSec .shopData .left, .dealerPage.negoPage #accessSec .shopData .right{ width:100%; } .dealerPage.negoPage #accessSec .shopData .left{ margin-bottom:10vw; } .dealerPage.negoPage #accessSec .shopData .right .inner{ width:85%; margin:0 auto; } .dealerPage.negoPage #accessSec .discList .topic{ margin-bottom:20px; } .dealerPage.negoPage #accessSec .discList .topic:first-of-type{ margin-bottom:50px; } .dealerPage.negoPage .cont{ margin-bottom:20vw; } .dealerPage.negoPage .cont .calender{ width:100%; height:250vw; border:1px solid #707070; } .discList .niju{ display:flex; align-items:flex-start; } .discList .niju::before{ content:'◎'; margin-right:5px; line-height:2;} /*個別店舗ページ -商談***/ /*Dealer**/ /*KUHL Fam!**/ /*黄土色 #A37632*/ .kuhlfamPage, .kuhlfamPage section{ background-color:#1E1E1E; } .kuhlfamPage #breadcrumb{ margin:0 auto 10vw; padding:0 4vw; align-items:center; } .kuhlfamPage .innerBlock p, .kuhlfamPage .innerBlock a{ color:#fff; } .kuhlfamPage .secTitle .main{ width:75%; margin:0 auto 2vw; } .kuhlfamPage .secTitle .sub{ font-size:3.5vw; letter-spacing:.1rem; } .kuhlfamPage .famTabBtn{ display:flex; flex-wrap:wrap; align-items:center; width:100%; margin-bottom:10vw; } .kuhlfamPage .famTabBtn .topic{ width:calc(100% / 3); height:10vw; border-right:1px solid #1E1E1E; border-bottom:1px solid #1E1E1E;} .kuhlfamPage .famTabBtn .topic:nth-of-type(3n){ border-right:none; } .kuhlfamPage .famTabBtn .topic a{ color:#fff; font-size:3.5vw; width:100%; height:100%; background-color:#5A5959; display:flex; justify-content:center; align-items:center;} .kuhlfamPage .famTabBtn .topic.current a{ background-color:#A37632; } .kuhlfamPage #articleSec{ z-index:1; } .kuhlfamPage #articleSec .blogList #articleColumn .tags{ font-size:3.5vw; margin-bottom:15px; display:flex; } .kuhlfamPage #articleSec .blogList #articleColumn .tags{ color:#fff; } .kuhlfamPage #articleSec .blogList #articleColumn .tags a{ color:#9B9B9B; margin-right:5px; text-decoration:underline; } .kuhlfamPage #articleSec .blogList #articleColumn .list .topic .text{ margin-bottom:5vw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .kuhlfamPage #articleSec .blogList #articleColumn .list .topic .bottom{ display:flex; justify-content:space-between; } .kuhlfamPage #articleSec .blogList #articleColumn .list .topic .btnType-2{ color:#3A8CEA; font-size:3.5vw; } .kuhlfamPage #articleSec .blogList #articleColumn .list .topic .date{ font-size:3.2vw; color:#C4C4C4; } .kuhlfamPage #articleSec .blogList #articleColumn .cont #content_area {color:#fff;} .kuhlfamPage #articleSec .blogList #articleColumn .cont h2 {font-size:18px; line-height:1.8; color:#fff; border-top:solid 1px #fff; border-bottom:solid 1px #fff; padding:5px; margin:30px 0 10px 0;} .kuhlfamPage #articleSec .blogList #articleColumn .cont h3 {line-height:1.8; color:#fff; border-left:solid 3px #fff; padding:0 0 0 5px; margin:30px 0 10px 0;} .kuhlfamPage #articleSec .blogList #articleColumn .cont strong {font-weight:bolder;} .kuhlfamPage #archiveColumn .archiveBlock{ width:100%; margin-bottom:65px; } .kuhlfamPage #archiveColumn .archiveBlock .objHeader{ color:#fff; margin-bottom:15px; } .kuhlfamPage #archiveColumn .archiveBlock .archiveBtnList{display:flex; flex-wrap:wrap; justify-content:space-between; } .kuhlfamPage #archiveColumn .archiveBlock .archiveBtnList .topic{width:48.5%; border:1px solid #5A5959; margin-bottom:8px; margin-top:0; min-height:30px;} .kuhlfamPage #archiveColumn .archiveBlock .archiveBtnList .topic.current{ background-color:#5A5959 } .kuhlfamPage #archiveColumn .archiveBlock .archiveBtnList .topic a{font-size:12px; height:100%; display:flex; justify-content:center; align-items:center; padding:2px 0;} .kuhlfamPage #archiveColumn .archiveBlock .wp-tag-cloud{display:flex; flex-wrap:wrap; justify-content:space-between; } .kuhlfamPage #archiveColumn .archiveBlock .wp-tag-cloud li{width:48.5%; border:1px solid #5A5959; margin-bottom:8px; margin-top:0; min-height:30px;} .kuhlfamPage #archiveColumn .archiveBlock .wp-tag-cloud li.current{ background-color:#5A5959 } .kuhlfamPage #archiveColumn .archiveBlock .wp-tag-cloud li a{font-size:12px; height:100%; display:flex; justify-content:center; align-items:center; padding:2px 0;} .kuhlfamPage #archiveColumn .shopBnrList{ width:80%; margin:0 auto; } .kuhlfamPage #archiveColumn .shopBnrList .topic{ position:relative; margin-bottom:20px; } .kuhlfamPage #archiveColumn .shopBnrList .topic:last-of-type{ margin-bottom:0; } .kuhlfamPage #archiveColumn .shopBnrList .topic .cont{position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; display:flex; justify-content:center; align-content:center; flex-wrap:wrap; z-index:10;} .kuhlfamPage #archiveColumn .shopBnrList .topic .cont p{ width:100%; text-align:center; line-height:1.5;} .kuhlfamPage #archiveColumn .shopBnrList .topic .cont .main{ font-size:4.8vw;font-weight:500; } .kuhlfamPage #archiveColumn .shopBnrList .topic .cont .sub{ font-size:3.5vw; } .serchWin{ /*margin-bottom:80px;*/ display:none; } /*詳細*/ .kuhlfamPage.detailPage section{ z-index:3; } .kuhlfamPage.detailPage #pageTopSec #breadcrumb{margin-bottom:0; padding-bottom:10vw; } .kuhlfamPage.detailPage .secTitle{ margin-bottom:6vw; padding-bottom:6vw; background-color:#1e1e1e;} .kuhlfamPage.detailPage .secTitle .main{ width:50%; margin-bottom:0; } .kuhlfamPage.detailPage .mainImageSec{ margin-bottom:/*10vw*/0; padding-bottom:10vw; } /* .kuhlfamPage.detailPage .mainImageSec .paraImage{ /* background-image:url(../../images/kuhlfam/kuhlfam-detail-main.jpg);*:/ position:fixed; z-index:-1; top:15vw; left:0; width:100%; height:60vh; background-size:cover; } */ /*iPone用パララックス*/ .kuhlfamPage.detailPage .mainImageSec{ position:relative; z-index:-5; overflow:hidden;} .kuhlfamPage.detailPage .dealerSecParaImage{ content:''; background-image:url(../../images/kuhlfam/kuhlfam-detail-main.jpg); background-size:cover; background-position:center; background-repeat: no-repeat; position:fixed; top:15vw; left:0; width:100%; height:55vh; z-index:-1; } .kuhlfamPage.detailPage #articleColumn .article > .header{ margin-bottom:20vw; } .kuhlfamPage #articleColumn .header .title{ margin:8vw 0 3vw; position:relative; } /*詳細*/ /*KUHL Fam!**/ /*商談予約*/ .reservePage .mainImageSec{ height:44vw; position:relative; z-index:-1; overflow:hidden; /*padding-bottom:13.3vw;*/ margin-bottom:0; } /*iPone用パララックス*/ .reservePage .mainImageSec .mainImage{ height:100%; /*background-color:#333;*/ background-position:center top -4vw !important; } .reservePage .mainImageSec .dealerSecParaImage{ background-image:url(../../images/reserv/reserv-main.jpg); background-size:cover; background-position:center top -6vw; background-repeat: no-repeat; /*position:fixed; top:15vw; left:0; width:100%; height:58vh; z-index:-1; */ } .reservePage #leadSec{ padding:13.3vw 0 29.3vw; margin-bottom:0; } .reservePage .secTitle{ background-color:#fff; padding-bottom:15vw; margin-bottom:0; } /*商談予約*/ /*プライバシーポリシー*/ #privacySec{ margin-bottom:24vw; } #privacySec .list{ margin-bottom:35px; } #privacySec .list .topic{ display:flex; margin-bottom:6.6vw; } #privacySec .list .topic .num{ width:6.5vw; } #privacySec .list .topic .cont{ width:calc(100% - 35px); } #privacySec .list .topic .inset{ padding-left:1rem; } #privacySec .list .topic .inset li{ display:flex; } #privacySec .list .topic .inset li::before{ content:'・'; display:block; } #privacySec .access .text{ margin-bottom:35px; } /*プライバシーポリシー*/ /*業販について*/ .wholesalePage .mainImageSec{ margin-bottom:; height:44vw; } .wholesalePage .mainImageSec .paraImage{ background-image:url(../../images/wholesale/wholesale-main.jpg); height:60vh; top:15vw; } .wholesalePage .conceptSec{ margin-bottom:0; } .wholesalePage .conceptSec .text{ margin-bottom:30px; } .wholesalePage .conceptSec .text:last-of-type{ margin-bottom:0; } .wholesalePage #bottomBtnSec{ width:100%; margin:0 auto; padding-bottom:26.6vw } #bottomBtnSec .btnType-8:first-of-type{ margin-bottom:8vw; } #gyohanSec{ background-color:#F2F2F2; padding:13.3vw 0; } #gyohanSec .header{ margin:0 auto 50px; text-align:center; width:100%; } #gyohanSec .header .main{ font-size:4.8vw; padding-bottom:3.2vw; border-bottom:1px solid #707070; margin-bottom:3.2vw; } #gyohanSec #accessList{ } #gyohanSec #accessList .topic{ text-align:center; margin:0 auto 8vw; } #gyohanSec #accessList .title{ font-size:3.4vw; font-weight:500; margin-bottom:15px; } #gyohanSec #accessList .phoneNum{ font-size:6.6vw; font-family:'Lato','Noto Sans JP',sans-serif; line-height:1; width:100%; text-align:center; } #gyohanSec #accessList .phoneNum span{ font-size:20px; font-family:'Lato','Noto Sans JP',sans-serif; } /*業販について*/ /*著作線について*/ #copyrightSec .contBox .text{ margin-bottom:11.4vw; } #copyrightSec .contBox .text:last-of-type{ margin-bottom:0; } .copyrightPage #bottomBtnSec{ margin-bottom:10.6vw; } .copyrightPage #bottomBtnSec .btnType-6{ margin:0 auto; } /*著作線について*/ /*お問い合わせ*/ .contactPage #leadSec{ margin-bottom:16vw; } .contactPage .progress{ display:flex; justify-content:center; margin-bottom:50px; } .contactPage .progress{ display:flex; justify-content:center; margin-bottom:50px; } .contactPage .progress li{ padding:0 10px 5px; margin:0 10px; font-weight:500; } .contactPage .progress li.current{ border-bottom:1px solid #BD0307; } .contactPage section .innerBlock{ width:100%; } .contactPage .linkText{ color:#4887D0; } .contactPage section .topic{ margin-bottom:28px; font-size:4vw;} .contactPage section .topic .title{ width:100%; font-size:4vw; margin-bottom:8px; font-weight:500; color:#4E4E4E; } .formSec .list .topic.need .title .needCution{ font-size:9px; display:inline-block; border:1px solid #BD0307; color:#BD0307; line-height:1; padding:2px 4px; margin-left:10px; border-radius:3px; } .formSec .list .topic .nameCase{display: flex; flex-wrap: nowrap; justify-content: flex-start !important;} .formSec .list .topic .nameCase:first-of-type{ margin-bottom:4vw; } .formSec .list .topic .nameCase .header{ width:35px; margin-right:3px; background-color:#F2F2F2; font-size:12px; color:#aaa; text-align:center; height:10.65vw; line-height:10.65vw; } .formSec .list .topic .nameCase input{ height:10.65vw; width:58vw; } .formSec .nameFlex {display:-webkit-box; display:-webkit-flex; display: flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start;} form .selectContainer{ width:100%; height:10.65vw; position:relative; } form .selectContainer .dropBtn{ display:block; position:absolute; right:12px; top:45%; width:0; height:0; border:4.5px solid transparent; border-top-color:#000;border-top-width:6px; pointer-events:none; z-index:5; } form select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; /*color:#f5f5f5;*/ position:relative;width:100%; height:100%; background-color:#F2F2F2; border:none; padding-left:10px; font-size:4vw; } select.is-empty{ color:#757575; } form select option{ color:#333; } form select option:first-of-type{ display:none; } form textarea, form input[type="text"], form input[type="email"], form input[type="tel"]{ background-color:#F2F2F2; width:100%; padding:0 10px; } form textarea{ width:100%; height:80vw; } form input[type="text"], form input[type="tel"], form input[type="email"]{ height:10.65vw; } form #phone input[type="text"]{ width:100%; } form #postal input[type="text"]{ width:200px; } /*iPhone が勝手に角丸にするのを阻止*/ input[type="button"], input[type="text"], input[type="submit"], input[type="image"], input[type="tel"], input[type="email"], textarea{ -webkit-appearance: none; border-radius: 0; } /*iPhone が勝手に角丸にするのを阻止*/ #confirmSec, #sendSec{ color:#4E4E4E; } .contactPage #bottomBtnSec{ margin-bottom:10.6vw; } .contactPage #bottomBtnSec .btnCase{ width:100%; margin-top:30px; display:flex; justify-content:center; } .sendPage.contactPage #bottomBtnSec .btnCase{ margin-top:0; } .contactPage #bottomBtnSec .btnType-6{ margin:0 auto; } .contactPage .topic.aboutPrivacy{ border:1px solid #707070; padding:6.4vw 5.6vw; width:80vw; margin:0 auto; } #sendSec .topic .btnType-7{ margin:50px auto; } /*radio*/ form .radioCase{ display:flex; align-items:center; } form .radioCase input[type="radio"]{ display:none; } form .radioCase .radioP{ line-height:1px; } form .radioCase .radioP label{ line-height:1px; display:flex; align-items:center; } form .radioCase .radioP .dammyBox{ display:inline-block; width:18px; height:18px; background:#F2F2F2; margin-right:4px; position:relative; transition:.1s; } form .radioCase .radioP input:checked + label .dammyBox{ background:#707070; } form .radioCase .radioP input:checked + label .dammyBox::before{ content: ""; display: block; position: absolute; top:50%; left:50%; width:40%; height:2px; border-radius:2px; transform: translate(-4px, 1px) rotateZ(-135deg); transform-origin: 2px 2px; background: #FFFFFF; } form .radioCase .radioP input:checked + label .dammyBox::after{ content:''; display:block; position:absolute; top:50%; left:50%; width:72%; height:2px; border-radius:2px; transform:translate(-2px, 2px) rotateZ(-45deg); transform-origin: 2px 2px; background: #FFFFFF; } /*radio*/ /*お問い合わせ*/ /*特選中古車 - KUHL KARSとは*/ .about-kuhl_karsPage .contSec{ margin-bottom:24vw; } .about-kuhl_karsPage .simbol{ width:48vw; margin:0 auto; text-align:center; margin-bottom:32px; } .about-kuhl_karsPage .simbol img{ width:100%; } .about-kuhl_karsPage .simbol .sub{ margin-top:5px; font-size:2.7vw; } .about-kuhl_karsPage .contHeadSec{ margin-bottom:12vw; } .about-kuhl_karsPage .contHeadSec .secTitle .main{ font-size:5vw; } .about-kuhl_karsPage #pageTopSec .innerBlock{ padding-bottom:0 } .kasouPage .columnSec-2 .innerBlock{ display:block; justify-content:space-between; } .kasouPage .columnSec-2 .columnLeft{ width:100%; align-self:start; margin-bottom:8vw; } .kasouPage .columnSec-2 .columnLeft .pict{ width:50%; align-self:; } .kasouPage .columnSec-2 .columnLeft .logo{ width:50%; display:flex; justify-content:center; align-items:center; } .kasouPage .columnSec-2 .wheel_selectBlock .columnLeft .logo img{ width:88%; } .kasouPage .columnSec-2 .columnRight{ width:100%; } .kasouPage.about-kuhl_karsPage .columnSec-2 .objHeader{ font-size:5.6vw; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys{ background:#F2F2F2; padding:10.6vw; margin-bottom:13.3vw; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .header{ font-weight:bold; margin-bottom:8px; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .text{ font-size:3.5vw; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .LeadBox{ margin-bottom:40px; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .qualitysList .topic{ display:flex; margin-bottom:15px; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .qualitysList .topic:last-of-type{ margin-bottom:0; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .qualitysList .topic p{ font-weight:400; font-size:.94rem; } .kasouPage.about-kuhl_karsPage .columnSec-2 #kk-qualitys .qualitysList .topic .num{ margin-right:12px; } .kasouPage.about-kuhl_karsPage .objHeader{ margin-bottom:35px; } .kasouPage .columnSec-2 .columnRight .contBlock{ margin-bottom:13.3vw; } .kasouPage .columnSec-2 .columnRight .contBlock .pict{ margin-bottom:5.3vw; } .kasouPage .columnSec-2 .columnRight .contBlock .cap{ font-size:4vw } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock{ margin-bottom:; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .objHeader{ font-size:4.8vw;; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .pict{ margin-bottom:; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList{ display:flex; flex-wrap:wrap; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList .topic{ width:43vw; margin-right:6vw; margin-bottom:5.3vw; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList .topic:nth-of-type(2n){ margin-right:0; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList .topic .pict{ width:; height:25.7vw; overflow:hidden; margin-bottom:5px; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList .topic .header{ font-size:3.5vw; font-weight:500; line-height:1.3; } .kasouPage.about-kuhl_karsPage .columnSec-2 .columnRight .contBlock .partsList .topic .cont{ font-size:2.93vw; color:#9B9B9B; } .plusIcon{ } .objHeader-mini{ font-size:4.5vw; font-weight:500; display:flex; align-items:center; } .kasouPage .objHeader-mini{ margin-bottom:20px; } .objHeader-mini img{ width:17px; margin-right:7px; } .kasouPage.about-kuhl_karsPage .priceBox{ display:block; justify-content:flex-end; align-items:flex-end; } .kasouPage.about-kuhl_karsPage .priceBox .left{ width:100%; margin-bottom:4.2vw } .kasouPage.about-kuhl_karsPage .priceBox .topic{ display:flex; align-items:center; justify-content:space-between; height:55px; border-bottom:1px solid #707070; } .kasouPage.about-kuhl_karsPage .priceBox .topic .price{ font-size:1.56rem; font-weight:400; min-width:132px; text-align:right; line-height:1; vertical-align:middle; display:inline-block; } .kasouPage.about-kuhl_karsPage .priceBox .topic .icon{ width:20px; height:20px; } .kasouPage.about-kuhl_karsPage .priceBox .topic:last-of-type{ border-bottom:none; } .kasouPage.about-kuhl_karsPage .priceBox .topic:last-of-type .price{ color:#f00; } .kasouPage.about-kuhl_karsPage .priceBox .header{ font-size:3.5vw; font-weight:400; } .kasouPage.about-kuhl_karsPage .priceBox .right{ margin-left:50px; height:100%; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-end; } .kasouPage.about-kuhl_karsPage .priceBox .right .header{ 3.73vw; } .kasouPage.about-kuhl_karsPage .priceBox .right .price{ font-size:10.4vw; font-weight:400; line-height:1.2 } .kasouPage.about-kuhl_karsPage .columnRight .rowBox{ margin-bottom:3vw; } .kasouPage.about-kuhl_karsPage .columnRight .bottomRow{ margin-bottom:0; align-items:flex-end; } .kasouPage.about-kuhl_karsPage .columnRight .firstRow .objHeader{ margin-bottom:0; } .kasouPage.about-kuhl_karsPage .columnRight .firstRow .logo{ display:none; } .kasouPage.about-kuhl_karsPage .columnRight .text{ font-size:4.26vw; } .kasouPage.about-kuhl_karsPage .columnRight .otherConts .text{ font-size:4vw; } .kasouPage.about-kuhl_karsPage .otherConts .columnRight .rowBox .text{ font-size:4vw; } .kasouPage.about-kuhl_karsPage .otherConts{ position:relative; margin-bottom:; } .kasouPage.about-kuhl_karsPage .otherConts .columnLeft{ display:flex; } /*.kasouPage.about-kuhl_karsPage .otherConts .columnRight .logo{ display:none; }*/ .kasouPage.about-kuhl_karsPage .otherConts .columnRight .contBlock{ margin-bottom:24vw; } .kasouPage.about-kuhl_karsPage .otherConts .columnRight .firstRow{ width:100%; display:flex; align-items:center; justify-content:space-between; } .kasouPage.about-kuhl_karsPage .wheel_selectBlock .midRow{ margin-bottom:8vw; } .kasouPage.about-kuhl_karsPage .wheel_selectBlock .columnRight .wheel{ width:78vw; margin-right:0; margin-bottom:0;} .kasouPage.about-kuhl_karsPage .wheel_selectBlock .columnRight .logo{ width:22vw; margin-bottom:0;} .kasouPage.about-kuhl_karsPage .otherConts .columnRight .btnType-2{ margin-top:4vw; } .kasouPage.about-kuhl_karsPage #dealerAccessSec .secTitle{ display:none; } .kasouPage.about-kuhl_karsPage #dealerAccessSec .secTitle .main{ font-size:25px; } /*特選中古車 - KUHL KARSとは*/ /*先行予約*/ .ad_rsrvPage section{ margin-bottom:16vw; } .ad_rsrvPage #pageTopSec .innerBlock{ padding-bottom:0; } .ad_rsrvPage .secTitle.deco-01{ margin-bottom:8vw; } .ad_rsrvPage section.baseWide .innerBlock{ width:100%; } .ad_rsrvPage .contents{ width:100%; margin:0 auto 10.66vw; } .ad_rsrvPage .contBlock .blockHeader{ background:#4E4E4E; color:#fff; border-radius:5px; font-size:5.6vw; font-weight:500; text-align:center; line-height:52px; margin-bottom:12px; } .ad_rsrvPage .pageHeader{ font-size:6.4vw; font-weight:500; margin-bottom:5.3vw; line-height:1.4; } .ad_rsrvPage .equipList{ border-top:1px solid #707070; } .ad_rsrvPage .equipList .topic{ border-bottom:1px solid #707070; font-weight:500; margin-bottom:0; font-size:4.27vw; padding:4.8vw 0; } .ad_rsrvPage section#articleSec .innerBlock .btnType-4{ margin-bottom:16vw; } .ad_rsrvPage .benefitList{ background:#F2F2F2; padding:6.4vw 9.3vw; } .ad_rsrvPage .benefitList .topic{ display:flex; } .ad_rsrvPage .benefitList .topic p{ font-weight:500; font-size:4.27vw; } .ad_rsrvPage .benefitList .topic .header{ width:45px; margin-right:9.3vw;} .ad_rsrvPage .benefitList .topic .cont{ width:calc(100% - 65px); } .ad_rsrvPage .omoshikomi{ padding:8vw 4.53vw; border:1px solid #707070; } .ad_rsrvPage .boxHeader{ font-size:18px; font-weight:500; text-align: center; line-height:1.5;} .ad_rsrvPage .omoshikomi .boxHeader{ margin-bottom:10px; } .ad_rsrvPage #leadSec .boxHeader{ margin-bottom:8.8vw; } .ad_rsrvPage #carSliderSec{ margin-bottom:8vw; } .ad_rsrvPage #carSliderSec .gallery{width:100%; margin:0 auto;} .ad_rsrvPage #carSliderSec .gallery .slick-arrow{ z-index:10; } .ad_rsrvPage #carSliderSec .gallery .slick-prev{ left:-2vw; width:3.5vw; height:10vw; } .ad_rsrvPage #carSliderSec .gallery .slick-prev::before{ content:url(../images/slide-arrow-left-b.svg); display:block; width:100%; height:100%; } .ad_rsrvPage #carSliderSec .gallery .slick-next{ right:-2vw; width:3.5vw; height:10vw; } .ad_rsrvPage #carSliderSec .gallery .slick-next::before{ content:url(../images/slide-arrow-right-b.svg); display:block; width:100%; height:100%; } .ad_rsrvPage #carSliderSec .gallery .main-slider{ margin-bottom:3.73vw; padding:0 2vw; height:50vw; } .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-list, .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-track, .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-slide, .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-slide .pict, .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-slide .pict img{ height:100%; object-fit:cover; } .ad_rsrvPage #carSliderSec .gallery .main-slider .slick-list{ width:95%; margin:0 auto; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider{ position:relative; height:10.2vw; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-list, .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-track{ height:100%; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-list.draggable{ padding:0 !important; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider::before{ left:0; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider::after{ right:0; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-slide{ margin:0 .6vw; width:18vw; height:100%; position:relative; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-slide .pict{ height:100%; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-slide .pict img{ height:100%; object-fit:cover; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-slide.slick-current::after{ content:''; display:block; width:calc(100% - 4px); height:calc(100% - 4px); position:absolute; top:0; left:0; border:2px solid #707070; } .ad_rsrvPage #carSliderSec .gallery .thumb-slider .slick-arrow{ display:none; } /*フォーム*/ .ad_rsrvPage .formSec .cap{ margin-top:8px; } /**radio*/ .ad_rsrvPage form .radioCase{ display:flex; align-items:center; } form .radioCase input[type="radio"]{ display:none; } .ad_rsrvPage form .radioCase .mwform-radio-field{ line-height:1px; margin-right:60px; } .ad_rsrvPage form .radioCase .mwform-radio-field:last-of-type{ margin-right:0; } .ad_rsrvPage form .radioCase .mwform-radio-field .mwform-radio-field-text{ line-height:1px; display:flex; align-items:center; position:relative; } .ad_rsrvPage form .radioCase .mwform-radio-field .mwform-radio-field-text::before{ content:''; display:inline-block; width:18px; height:18px; background:#F2F2F2; margin-right:4px; position:relative; transition:.1s; } .ad_rsrvPage form .radioCase .mwform-radio-field input:checked + .mwform-radio-field-text::before{ background:#707070; } .ad_rsrvPage form .radioCase .mwform-radio-field input:checked + .mwform-radio-field-text::after{ content:''; display:block; position: absolute; top:2px; left:2px; width:10px; height:5px; border-radius:2px; transform:rotate(-45deg); border:2px solid transparent; border-left-color:#fff; border-bottom-color:#fff; } /**radio*/ .ad_rsrvPage form #dealingCar textarea{ width:100%; height:40vw; padding:10px; } .ad_rsrvPage #bottomBtnSec{ margin-bottom:0; padding-bottom:17.3vw; } .ad_rsrvPage #bottomBtnSec .btnType-9{ font-size:3.46vw; margin-top:11.46vw; } .ad_rsrvPage #bottomBtnSec .btnType-9::before{ font-size:6vw; } /*先行予約*/ /* 7px：1.86 8px：2.13 10px：2.66 11px：2.93 12px：3.2 13px：3.46 14px：3.73 15px：4 16px：4.27 17px：4.53 18px：4.8 20px：5.3 21.5px：5.73 22px：5.86 24px：6.4 25px：6.66 26px：6.93 27px：7.2 28px：7.46 30px：8 35px：9.3 40px：10.66 41px：10.93 43px:11.46 50px：13.3 55px：14.66 57px：15.2 60px：16 65px:17.3 69px：18.4 79px：21 93px：24.8 110px：29.3 121px：32.2 143px：38.1 153px:40.8 169px：45 182px:48.53 197px：52.5 250px：66.7 */