@charset "utf-8"; 

#main #contents { width:100%; } 
.main_intro, .main_recommend, .main_guide, .main_vehicle_catalog, .main_reservation { position:relative; } 
.main_intro::before, .main_recommend::before, .main_guide::before, .main_vehicle_catalog::before, .main_reservation::before { position:absolute; z-index:0; inset:0; width:100%; max-width:1440px; margin:0 auto; border-right:1px solid #ebebeb; background-image:linear-gradient(#ebebeb,#ebebeb),linear-gradient(#ebebeb,#ebebeb),linear-gradient(#ebebeb,#ebebeb),linear-gradient(#ebebeb,#ebebeb); background-position:left top,25% top,50% top,75% top; background-repeat:no-repeat; background-size:1px 100%; content:""; pointer-events:none; } 
.main_intro > article, .main_recommend > article, .main_guide > article, .main_vehicle_catalog > article, .main_reservation > article { position:relative; z-index:1; } 
.main_content_inner { width:100%; max-width:1440px; margin:0 auto; position:relative; } 
.main_content_inner::after { content:""; position:absolute; } 
.main_section_head { position:relative; display:flex; align-items:center; margin-bottom:40px; } 
.main_section_head h2 { font-size:40px; font-weight:700; line-height:1.2; letter-spacing:-0.0275em; } 
.main_section_head .detail_button { margin-left:auto; } 
.detail_button { display:inline-flex; width: 100%; max-width: 160px; height:48px; align-items:center; justify-content:space-between; padding:0 18px; border:1px solid #222; color:#222; font-size: 15px; font-weight:600; } 
.detail_button .icon { width: 14px; height: 14px; } 
.detail_button_white { border-color:#fff; color:#fff; } 
.main_visual { position:relative; display:flex; height:100vh; align-items:center; justify-content:center; overflow:hidden; background:url(/ssrentcar001/img/main_visual.webp) center center/cover no-repeat; } 
.main_visual_dim { position:absolute; inset:0; background:rgba(0,0,0,.56); } 
.main_visual_content { position:relative; z-index:1; color:#fff; text-align:center; } 
.main_visual_content h1 { color:#ff9500; font-family:Garamond, "EB Garamond", serif; font-size:100px; font-weight:400; line-height:1.13; letter-spacing:0; } 
.main_visual_content p { margin-top:20px; color:#fff; font-size:20px; font-weight:500; line-height:1.6; } 
.main_call_button { position:fixed; right:max(20px, calc((100vw - 1760px) / 2)); bottom:77px; z-index:99; display:flex; width:80px; height:80px; align-items:center; justify-content:center; border-radius:50%; background:#007de8; box-shadow:0 8px 25px rgba(0,0,0,.16); } 
.main_call_button .icon { width:30px; height:30px; } 
.main_intro { background:#fff; } 
.main_intro_inner { display:flex; width:100%; max-width:1920px; margin:0 auto; padding-top: 120px; } 
.main_intro_copy, .main_intro_image { width:50%; } 
.main_intro_copy { display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; padding-left: max(20px, calc((100% - 1440px) / 2)); } 
.main_intro_copy h2 { color:#232323; font-family:"Montserrat", sans-serif; font-size:48px; font-weight:700; line-height:66px; letter-spacing:-0.0275em; } 
.main_intro_copy p { margin-top:20px; color:#232323; font-size:16px; font-weight:500; line-height:28px; } 
.main_intro_copy .detail_button { margin-top: 50px; } 
.main_intro_image { height: 360px; overflow:hidden; } 
.main_intro_image img { width:100%; height:100%; object-fit:cover; } 
.main_recommend { padding: 120px 20px; overflow:hidden; background:#fff; } 
.main_recommend::after,
.main_vehicle_catalog::after { position:absolute; z-index:2; top:0; right:0; bottom:0; width:max(0px, calc((100vw - 1440px) / 2)); min-width: 120px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff); content:""; pointer-events:none; } 
.main_recommend h2 span, .guide_copy h2 span, .main_reservation h2 span { font-weight:500; } 
.vehicle_navigation { position:absolute; left:50%; display:flex; } 
.vehicle_navigation button { display:flex; width:48px; height:48px; align-items:center; justify-content:center; border:1px solid #8d8d8d; background:#fff; cursor:pointer; } 
.vehicle_navigation button + button { border-left:0; } 
.vehicle_navigation button .icon { width: 9px; height: 16px; } 
.vehicle_navigation .icon_arrow_right { filter:brightness(0); } 
.vehicle_swiper { overflow:visible; } 
.swiper_wrapper { display:flex; } 
.swiper_slide { position:relative; width:calc(50% - 30px); flex-shrink:0; } 
.vehicle_card { display:flex; height:248px; gap:22px; padding:20px 24px 19px 20px; overflow:hidden; border:1px solid #777; background:#fff; } 
.vehicle_card_image { display:flex; width:calc(50% - 6px); height:188px; align-items:center; justify-content:center; margin-top:10px; } 
.vehicle_card_image img { width:100%; height:100%; object-fit:contain; } 
.vehicle_card_info { display:flex; min-width:0; flex:1; flex-direction:column; } 
.vehicle_card_info h3 { overflow:hidden; margin-bottom:24px; font-size:18px; font-weight:700; line-height:22px; text-overflow:ellipsis; white-space:nowrap; } 
.vehicle_card_info dl { display:flex; flex-direction:column; gap:5px; } 
.vehicle_card_info dl > div { display:flex; align-items:center; gap:10px; } 
.vehicle_card_info dt { display:flex; flex:1; align-items:center; color:#222; font-size:14px; font-weight:500; } 
.vehicle_card_info dt::after { min-width:20px; height:1px; flex:1; margin-left:10px; border-top:1px dotted #a8a8a8; content:""; } 
.vehicle_card_info dd { color:#222; font-size:18px; font-weight:700; white-space:nowrap; } 
.vehicle_card_info dd small { margin-left:2px; font-size:14px; font-weight:500; } 
.vehicle_card_info .monthly dt, .vehicle_card_info .monthly dd { color:#0066cd; } 
.vehicle_card_actions { display:flex; gap:5px; margin-top:auto; } 
.vehicle_card_actions a { display:flex; width:50%; height:40px; align-items:center; justify-content:center; color:#fff; background:#007de8; font-size:14px; font-weight:600; border-radius: 5px; } 
.vehicle_card_actions a:last-child { background:#ff9400; } 
.main_guide { padding-bottom:120px; background:#fff; } 
.main_guide_inner { display:flex; gap:30px; } 
.rental_guide_panel, .rental_call_panel { position:relative; display:flex; height:264px; overflow:hidden; color:#fff; background-position:center; background-size:cover; } 
.rental_guide_panel { width:calc(75% - 30px); align-items:center; padding:0 40px; background-image:url(/ssrentcar001/img/main_rental.webp); } 
.rental_call_panel { width:calc(25% + 1px); align-items:center; justify-content:center; margin-left:-1px; background-image:url(/ssrentcar001/img/main_call.webp); text-align:center; } 
.guide_dim { position:absolute; inset:0; background:rgba(0,0,0,.62); } 
.guide_copy, .call_copy, .rental_guide_panel .detail_button { position:relative; z-index:1; } 
.guide_copy h2 { color:#fff; font-size:40px; font-weight:700; letter-spacing:-0.0275em; } 
.guide_copy p { margin-top:20px; color:#ddd; font-size:15px; line-height:1.7; } 
.rental_guide_panel .detail_button { margin-right:131px; margin-left:auto; transform:translateY(-1px); } 
.call_copy strong { display:block; color:#ff9500; font-size:18px; } 
.call_copy a { display:block; margin-top:5px; color:#fff; font-size:40px; font-weight:700; } 
.call_copy p { margin-top:12px; color:#b3b3b3; font-size:15px; line-height:1.6; } 
.main_vehicle_catalog { padding: 120px 20px; overflow:hidden; background:#f8f8f8; } 
.vehicle_category + .vehicle_category { margin-top:80px; } 
.vehicle_category .main_section_head { margin-bottom:40px; } 
.vehicle_category .vehicle_navigation { margin:0; transform:none; } 
.vehicle_category .main_section_head .detail_button { margin-left:auto; } 
.main_reservation { padding:120px 0 0; overflow:hidden; background:#fff; } 
.main_reservation .main_section_head { padding:0 20px; } 
.reservation_content { display:flex; width:calc(100vw - max(0px, calc((100vw - 1920px) / 2))); margin-left:min(0px, calc((1440px - 100vw) / 2)); } 
.reservation_image { width:calc(50vw - max(0px, calc((100vw - 1920px) / 2))); height:360px; overflow:hidden; } 
.reservation_image img { width:100%; height:100%; object-fit:cover; } 
.reservation_list { width:690px; margin-left:30px; background: #fff; } 
.reservation_list ul { border-top:2px solid #222; } 
.reservation_list li { border-bottom:1px solid #bbb; } 
.reservation_mobile_item { display:none; } 
.reservation_list a { display:flex; height:70px; align-items:center; gap:30px; color:#222; font-size:16px; } 
.reservation_list a span { display:flex; min-width:0; flex:1; align-items:center; gap:12px; } 
.reservation_list .icon { width:17px; height:17px; flex:none; } 
.reservation_list time, .reservation_list em { color:#616161; font-style:normal; white-space:nowrap; } 
.reservation_list em { position:relative; margin-left:19px; } 
.reservation_list em::before { position:absolute; top:50%; left:-25px; width:1px; height:14px; background:#d9d9d9; content:""; transform:translateY(-50%); } 
.main_quote_banner { position:relative; display:flex; height:230px; align-items:center; margin-top:120px; padding:0 40px; overflow:hidden; background:linear-gradient(90deg,#1b1f38 0%,#232323 100%); } 
.quote_copy { position:relative; z-index:1; display:flex; flex-direction:column; } 
.quote_copy span { color: rgba(255, 255, 255, 1); font-size:18px; font-weight:600; line-height:21px; } 
.quote_copy strong { margin-top:4px; color:#fff; font-size:40px; font-weight:700; line-height:50px; } 
.main_quote_banner .detail_button { position:absolute; z-index:2; top:90px; left:50%; height:50px; margin:0; transform:translateX(-1px); } 
.quote_vehicle_visual { position:absolute; top:0; right:60px; width:465px; height:225px; overflow:hidden; } 
.quote_vehicle_visual img { position:absolute; } 
.quote_vehicle_shadow { top:101px; left:-10px; width:482px; height:129px; } 
.quote_vehicle_shadow_inner { top:134px; left:39px; width:384px; height:63px; } 
.quote_vehicle_light { top:-17px; left:39px; width:384px; height:198px; } 
.quote_vehicle_car { top: 0; width: auto; height: 225px; } 
.quote_vehicle_light_front { top:-17px; left:39px; width:384px; height:123px; } 

/* hover */
@media (hover: hover) and (pointer:fine) { 
.detail_button, .vehicle_card_actions a, .main_call_button, .vehicle_navigation button { transition:background-color .25s,color .25s,border-color .25s,transform .25s; } 
.vehicle_navigation button .icon { transition:filter .25s; } 
.vehicle_navigation button:hover, .vehicle_navigation button:focus-visible { border-color:#232323; color:#fff; background:#232323; } 
.vehicle_navigation button:hover .icon, .vehicle_navigation button:focus-visible .icon { filter:brightness(0) invert(1); } 
 } 

@media (max-width:1024px) { 
.main_intro::before, .main_recommend::before, .main_guide::before, .main_vehicle_catalog::before, .main_reservation::before { width:calc(100% - 40px); } 
.main_content_inner { max-width:none; padding:0 20px; } 
.main_section_head { margin-bottom:25px; } 
.main_section_head h2 { font-size:28px; line-height:34px; } 
.main_recommend::after,
.main_vehicle_catalog::after { display:none; } 
.detail_button { width:105px; height:40px; padding:0 14px; font-size:13px; } 
.main_visual { height:740px; background-position:58% center; } 
.main_visual_content { padding:0 20px; } 
.main_visual_content h1 { font-size:50px; line-height:1.05; } 
.main_visual_content p { max-width:280px; margin:15px auto 0; font-size:16px; line-height:1.6; } 
.main_call_button { right:20px; bottom:25px; width:55px; height:55px; } 
.main_call_button .icon { width:22px; height:22px; } 
.main_intro_inner { padding-top:0; flex-direction:column; } 
.main_intro_copy, .main_intro_image { width:100%; } 
.main_intro_copy { padding:60px 20px 30px; } 
.main_intro_copy h2 { font-size:28px; line-height:40px; } 
.main_intro_copy p { margin-top:16px; font-size:15px; line-height:26px; } 
.main_intro_copy .detail_button { width:160px; max-width:160px; margin-top:40px; } 
.main_intro_image { width:calc(75% - 8px); height:160px; margin-left:calc(25% + 8px); } 
.main_recommend { padding:60px 0; } 
.main_recommend .main_section_head { align-items:flex-start; margin-bottom:32px; flex-direction:column; gap:20px; } 
.vehicle_navigation { position:static; margin-left:auto; } 
.main_recommend .vehicle_navigation { margin-left:0; } 
.vehicle_navigation button { width:40px; height:40px; } 
.swiper_slide { width:calc(100% - 20px); } 
.vehicle_card { height:435px; gap:16px; padding:20px 20px 19px; flex-direction:column; } 
.vehicle_card_image { width:100%; height:170px; margin-top:0; } 
.vehicle_card_info { width:100%; height:208px; flex:none; } 
.vehicle_card_info h3 { margin-bottom:24px; font-size:18px; } 
.vehicle_card_info dl { gap:5px; } 
.vehicle_card_info dt { font-size: 14px; } 
.vehicle_card_info dd { font-size: 18px; } 
.vehicle_card_info dd small { font-size: 14px; } 
.vehicle_card_actions a { height:38px; font-size:13px; } 
.main_guide { padding:0 20px 60px; } 
.main_guide_inner { padding:0; flex-direction:column; gap:20px; } 
.rental_guide_panel, .rental_call_panel { width:100%; padding:40px 30px; } 
.rental_guide_panel { height:252px; align-items:flex-start; flex-direction:column; justify-content:flex-start; } 
.rental_call_panel { height:195px; margin-left:0; } 
.rental_guide_panel .detail_button { width:160px; max-width:160px; align-self:center; margin:30px 0 0; transform:none; } 
.guide_copy h2 { font-size:28px; } 
.guide_copy p { margin-top:16px; font-size:15px; line-height:26px; } 
.call_copy strong { font-size:16px; line-height:19px; } 
.call_copy a { margin-top:4px; font-size:32px; line-height:34px; } 
.call_copy p { font-size:14px; line-height:23px; } 
.main_vehicle_catalog { padding:60px 0; } 
.vehicle_category + .vehicle_category { margin-top:50px; } 
.vehicle_category .main_section_head { align-items:flex-start; margin-bottom:32px; flex-wrap:wrap; gap:20px 0; } 
.vehicle_category .main_section_head h2 { width:100%; } 
.vehicle_category .vehicle_navigation { margin:0; transform:none; } 
.vehicle_category .detail_button { width:160px; max-width:160px; } 
.main_reservation { padding-top:60px; } 
.main_reservation .main_section_head { align-items:flex-start; margin-bottom:30px; flex-direction:column; gap:20px; padding: 0; } 
.main_reservation .main_section_head .detail_button { width:160px; max-width:160px; margin-left:0; } 
.reservation_content { width:auto; margin:0; flex-direction:column-reverse; } 
.reservation_image { width:calc(100% - 60px); height:160px; margin-top:30px; margin-left:-20px; } 
.reservation_list { width:100%; margin-left:0; } 
.reservation_mobile_item { display:list-item; } 
.reservation_list a { height:65px; align-content:center; align-items:center; gap: 5px 12px; flex-wrap:wrap; font-size: 14px; } 
.reservation_list a span { width:100%; flex:none; gap: 0 4px; font-size: 15px; } 
.reservation_list time, .reservation_list em { display:block; } 
 .reservation_list em::before { left:-16px; } 
.main_quote_banner { height: auto; min-height:0; margin-top:60px; padding: 175px 20px 40px; align-items:center; flex-direction:column; text-align:center; } 
.quote_copy { align-items:center; } 
.quote_copy span { font-size: 16px; } 
.quote_copy strong { font-size: 28px; line-height: 38px; white-space:nowrap; } 
.main_quote_banner .detail_button { position:relative; top:auto; left:auto; width:160px; margin:25px auto 0; transform:none; } 
.quote_vehicle_visual { top:0; right:50%; transform:translateX(50%) scale(.65); transform-origin:top center; } 
 }