/*common_css*/ @charset "utf-8"; @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*------------------------ common ------------------------*/ * { line-height: 1.6; font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; box-sizing: border-box; font-weight: 600; } :root{ --main:#D80033; --gray:#F6F6F6; --black:#000000; --cta:#F27624; /* --bg:#C9CBD5; */ --btn:#D80033; --maxwid:700px; --cotwid:640px; --font12:12px; --font14:14px; --font16:16px; --font18:18px; --font20:20px; --font24:24px; --font28:28px; --font30:30px; --font32:32px; --font36:36px; } @media (max-width: 767px) { :root{ /* 1000px */ /* --font12:1.2vw; --font14:1.4vw; --font16:1.6vw; --font18:1.8vw; --font20:2vw; --font24:2.4vw; --font28:2.8vw; --font30:3vw; --font32:3.2vw; --font36:3.6vw; */ } } @media (max-width: 500px) { :root{ /* 500px */ --font12:2.4vw; --font14:2.8vw; --font16:3.2vw; --font18:3.6vw; --font20:4vw; --font24:4.8vw; --font28:5.6vw; --font30:6vw; --font32:6.4vw; --font36:6.8vw; } } html,body{ } html{ background-color: var(--bg); } body{ max-width: var(--maxwid); margin: 0 auto; background-color: #fff; } img { max-width: 100%; width: 100%; height: auto; } ul,ol { list-style-type: none; padding-left: 0; } button,a { cursor: pointer; transition: 0.3s; } button:hover, a:hover { opacity: 0.8; } .sec_wh { background-color: #FFF; } .sec_gr { background-color: var(--gray); } .sec:last-of-type{ margin-bottom: 0; } .sec_inner{ padding: 4% 4%; max-width: var(--cotwid); margin: 0 auto; } .sec_top{ padding: 0; } .sec_cnt{ padding: 4% 0; } .txt{ font-size: var(--font16); font-weight: normal; text-align: left; } .txt.red{ color: #D80033; font-size: var(--font18); } .txt.small{ font-size: var(--font14); } .txt a{ color: var(--main); font-weight: bold; text-decoration: underline; } .pc_only { display: block; } .sp_only { display: none; } @media (max-width: 767px) { .pc_only { display: none; } .sp_only { display: block; } } .error { color: red !important; font-size: 12px; font-size: var(--font12); text-align: center; margin-bottom: 10px; display: none; font-weight: bold; margin: 1rem auto; } .map{ width: 100%; aspect-ratio: 16 / 9; } .map iframe{ width: 100%; height: 100%; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next, .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ background-image: none!important; } .swiper-button-prev i, .swiper-button-next i{ color: var(--main); font-size: var(--font32); } /* テーブル */ table{ width: 100%; } table tr th,table tr td{ border-collapse: collapse; padding: 0.5rem; font-size: var(--font16); border: 1px solid #707070; } table tr td{ font-weight: normal; } .dotline_table{ margin: 2% 0 4%; } .dotline_table tr{ border-bottom: 1px dotted var(--gray); } .dotline_table tr th{ color: var(--main); } .normal_table{ margin: 2% 0 4%; } .normal_table tr th{ background-color: var(--main); color: #fff; } .normal_table tr th,.normal_table tr td{ border: 1px solid var(--main); } .normal_table.carPrice tr th{ width:30%; } iframe{ width:100%; } /*---------------------- header ------------------------*/ .logo { max-width: 170px; display: block; } header { width: 100%; max-width: var(--maxwid); margin: 0 auto; position: fixed; top: 0; z-index: 99; background-color: #fff; } header li i{ margin-left: 2%; } .header_left { height: 100%; padding: 5px; } .header_right{ height: 100%; background: var(--main); width: 50px; } .nav-open{ position: relative; } .drop-menu{ display: none; position: absolute; top: 100%; width: 100%; } .nav-open .drop-menu li{ width: 100%; padding: 5%; border-bottom: 1px solid #fff; color: #fff; margin-right: 0!important; background-color: var(--main); } .nav-open .drop-menu li a{ color: #FFF!important; } .nav-open .drop-menu li:last-child{ border-bottom: 0; } .nav-open .drop-menu li a{ justify-content: flex-start!important; } .header_btn_li{ line-height: 80px; height: auto!important;; } .header_btn_li .btn_area{ margin-top: 2%; width: 100%; } .header_btn_li .btn_area .tell_btn{ color: var(--cta); } .header_btn{ display: flex!important; padding: 5% 15%; height: 50px!important; width: 150px!important; } header nav{ display: block; width: 100%; height: 100%; } /* ハンバーガー */ .bar { position: relative; z-index: 99999; display: block; width: 100%; height: 100%; } .bar i { color: #fff; font-size: 25px; padding-top: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .bar.open i::before { content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #fff; padding-right: 15px; } .menu { width: 100%; height: 100vh; display: flex; flex-direction: column; color: #efefef; background-color: var(--main); transition: .3s; padding: 18% 1rem; position: fixed; top: -150%; left: 0; z-index: 9999; overflow-y: scroll; } .menu.open { left: 0; top: 0; } .menu-ul{ width: 100%; max-width: 600px; margin: 0 auto; } body.open { overflow: hidden; } .menu-list { width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #fff; padding:1%; margin: 0 auto; } .menu-list a { color: #fff; width: 100%; font-size: var(--font18); text-decoration: none; position: relative; font-weight: normal; } .menu-list a::after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--font18); position: absolute; right: 1px; } .menu-list.header_btn_li a::after{ content: ""; } .menu-list.nav-sp-open a::after{ content: "\2b"; } .menu-list.nav-sp-open.active a::after{ content: "\f068"; } .menu-btn { padding: 1rem; text-align: center; max-width: 600px; width: 100%; margin: 0 auto; } .drop-sp-menu_area{ display: none; } .drop-sp-menu{ font-size: var(--font14); } .drop-sp-menu li{ border-bottom: 1px solid #fff; padding: 1%; padding-left: 2%; position: relative; } .drop-sp-menu li a{ display: block; } .drop-sp-menu li a::after{ content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--font14); position: absolute; right: 10px; } .menu-list.header_btn_li{ border-bottom: 0; } .menu-list.header_btn_li .btn{ color: #fff; border: 1px solid #fff; } .header_sp { display: flex; justify-content: space-between; align-items: center; height: 50px; width: 100%; } .header_pc{ display: none; } /*------------------------ TTL ------------------------*/ /* -------------btn------------- */ .btn { padding:1rem; position: relative; cursor: pointer; border-color: inherit; border: none; outline: none; font-weight: bold; text-align: center; background-color:#D80033 ; color: #ffffff; letter-spacing: 2px; display: block; margin-bottom: 3%; font-size: var(--font24); } .cta_btn{ background-color:#F27624 ; color: #ffffff ; } .btn::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; left: 5%; position: absolute; font-size: var(--font24); } .cta_btn::before{ content: "\f0e0"; } .tell_btn{ background-color: #D80033 ; color: #ffffff; } .tell_btn::before{ content: "\f095"; } .normal_btn{ background-color: #D80033 ; color: #ffffff ; } /*------------------------ footer ------------------------*/ footer { background-color: #fff; position: relative; border-top: 2px solid var(--main); padding-bottom: 10%; margin-top: 10%; } .footer_link_area { margin: 2% auto 5%; } .footer_link { list-style-type: none; padding-left: 0; width: 100%; } .footer_link li { line-height: 1.6; border-bottom: 1px solid var(--main); padding: 10px; } .footer_link li:first-of-type{ border-top: 1px solid var(--main); } .footer_link li a{ display: block; font-size: var(--font16); color: var(--main); } .footer_link li a::after{ content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: var(--font14); position: absolute; right: 10px; } .footer_logo_area{ text-align: center; } .footer_logo_area .logo{ padding-top: 4%; max-width: 300px; margin: 0 auto; } .copy { text-align: center; font-size: 12px; color: var(--main); font-weight: normal; margin-bottom: 15%; } .footer_link.external li{ border-bottom: none; border-top: none; line-height: 1.4; font-size: var(--font12); padding: 3px 10px; } .footer_link.external li a::after{ content: ""; } .footer_info{ padding: 2% 4%; font-size: var(--font12); text-align: center; font-weight: normal!important; } .footer_info .btn_area{ margin-top: 3%; } /*------------------------ floating ------------------------*/ .floating_area{ position: fixed; bottom: 0; max-width: var(--maxwid); z-index: 9; width: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } .floating_area .floating_inner{ width: 100%; padding: 1.5% 3%; background-color: #31313169; } .floating_area .floating_inner .btn_area { display: flex; align-items: center; justify-content: center; } .floating_area .floating_inner .btn_area a{ width: 49%; margin-bottom: 0; padding: 3% 1%; font-size: var(--font16); } .floating_area .floating_inner .btn_area a::before{ font-size: var(--font16); } .floating_area .floating_inner .btn_area a:first-child{ margin-right: 1%; } /* PCサイズ */ @media (min-width: 768px) { :root{ --maxwid:100%; --cotwid:1200px; } html{ background-color: #fff; } header{ max-width: 100%; padding: 15px; } .sec_cnt{ padding: 0; } .btn_area{ text-align: center; display: flex; justify-content: center; } .btn_area .btn:first-child{ margin-right: 1%; } .btn{ width: 49%; font-size: var(--font20); padding: 1rem 1.5rem; max-width: 400px; } .header_sp{ display: none; } .header_pc{ display: flex; align-items: center; justify-content: space-between; } .header_pc .logo{ /* width: 10%; */ max-width: 280px; display: block; } .header_pc .logo img{ width: 100%; display: block; } .header_pc .pcmenu{ display: flex; align-items: center; justify-content: flex-end; width: 90%; } .header_pc .pcmenu li{ margin-right: 1%; } .header_pc .pcmenu_btn{ margin-left: 10px; } .header_pc .pcmenu_btn .btn_area{ display: flex; } .header_pc .pcmenu_btn .btn{ font-size: var(--font14); padding: 0.5rem 1rem; min-width: 170px; white-space: nowrap; margin-bottom: 0; display: flex; align-items: center; justify-content: center; } .header_pc .pcmenu_btn .btn:first-child{ margin-right: 2%; } .header_pc .pcmenu_btn .btn::before{ content: ""; } .floating_area{ display: none; } footer{ padding: 15px; margin-top: 3%; } .footer_cnt{ display: flex; } .footer_info{ display: flex; text-align: left; justify-content: flex-end; width: 80%; padding: 0; } .footer_info .ad{ width: 40%; overflow-wrap: break-word; padding: 0 10px; } .footer_info .ad p{ font-size: var(--font12); font-weight: normal; line-height: 1.2; } .footer_logo_area .logo{ padding-top: 0; } .footer_info .btn_area{ display: flex; width: 50%; align-items: flex-start; margin: 0; } .footer_info .btn_area .btn{ width: 50%; margin: 0; } .footer_info .btn_area .btn:first-child{ margin-right: 2%; } .footer_link_area{ margin: 0; padding: 0; } .footer_link{ display: flex; } .footer_link li{ border: none; border-top: none; padding: 0; margin-right: 15px; } .footer_link.external li{ padding: 0; margin-right: 15px; } .footer_link li:first-of-type{ border: none; } .footer_link li a::after{ content: ""; } .copy{ margin-bottom: 0; } } @media (max-width: 1160px) { .footer_info .btn_area{ display:block; } .footer_info .btn_area .btn{ width:100%;} .footer_info .btn_area .btn:first-child{ margin-bottom: 2%; } } /*------------------------ style ------------------------*/ h2{ position: relative; padding: 0.3rem 0; margin:2% 0; font-weight: bold; font-size: var(--font24); text-align: center; } h3{ font-size: var(--font20); color: var(--main); margin-bottom: 2%; } .swiper{ overflow-x: hidden; } /* レンタカーなら会社名 */ h2.pickup{ padding: 0; } h2.pickup::before{ border: none; } h2.pickup span{ color: var(--main); font-size: var(--font28); } h2.pickup p{ font-size: 14px; background-color: var(--main); display: inline; color: #fff; padding: 1px 10px; border-radius: 15px; } h2.pickup div{ margin-top: -2px; } .pickup_list li{ margin-bottom: 2%; display: flex; flex-direction: column; } .pickup_list li .btn_area{ margin-top: auto; } .pickup_list li img{ aspect-ratio: 16 / 9; object-fit: cover; } .pickup_list .up{ border-bottom: 3px solid var(--main); padding: 4% 2% 1% 2%; margin-bottom: 2%; } .pickup_list .up span{ color: var(--main); font-weight: bold; text-align: left; font-size: var(--font14); display: block; line-height: 1; } .pickup_list .up p{ text-align: left; font-size: var(--font24); } .pickup_list .btm .perday{ margin: 1% 0 1.5%; font-size: var(--font16); } .pickup_list .btm .perday span:first-of-type { color: var(--main); border: 1px solid var(--main); padding: 2px 3px; margin-right: 2%; } .pickup_list .btm .txt{ margin-bottom: 2%; } .pickup_list .btm .price_boxes{ display: flex; justify-content: center; margin-bottom: 1%; } .pickup_list .btm .price_boxes .price_box{ border: 1px solid var(--main); text-align: center; width: 49%; } .pickup_list .btm .price_boxes .price_box:first-child{ margin-right: 1%; } .pickup_list .btm .price_boxes .price_box p:first-child{ background-color: var(--main); color: #fff; padding: 1%; font-size: var(--font14); } .pickup_list .btm .price_boxes .price_box p:nth-child(2){ font-size: var(--font24); padding: 2%; } .pickup_list .btm .price_boxes .price_box p:nth-child(2) span{ font-size: var(--font16); } /* 強み */ .strengths li{ border-radius: 15px; border: 3px solid var(--gray); margin-bottom: 2%; } .strengths li img{ aspect-ratio: 16/9; object-fit: cover; } .strengths li h3{ margin: 2% 0; text-align: center; font-size: var(--font24); } /* 選ばれる理由 */ h2.border{ background-color: var(--main); color: #fff; padding: 1rem; margin: 0; } h2.border::before{ border: none; } .reason_list li{ display: flex; justify-content: flex-start; align-items: center; width: 100%; border: 1px solid var(--gray); margin-bottom: 2%; } .reason_list li .left{ width: 30%; display: flex; align-items: stretch; position: relative; } .reason_list li .left .no{ background-color: var(--main); color: #fff; padding: 5%; position: relative; display: flex; align-items: center; } .reason_list li .left img{ aspect-ratio: 1/1; object-fit: cover; display: block; } .reason_list li .right{ width: 70%; padding: 2%; font-size: var(--font18); } /* お客様の声 */ .voice{ text-align: center; } .voice img{ max-width: 200px; margin: 0 auto; object-fit: cover; } .swipercase{ overflow-x: hidden; position: relative; margin-bottom: 2%; } .voice .swiper-slide{ height: auto!important; } .swiper_cnt{ height: 100%; } .case_slide li{ padding-top: 5%; border: 3px solid var(--gray); background-color: #fff; } .case_slide li h3{ text-align: left; } .case_slide li .btm{ padding: 3%; } .case_slide li .btm .btn_area{ margin-top:2%; } /* お客様サポート */ .sec_surpport .txt{ margin-bottom: 2%; } .sec_surpport h3{ text-align: center; } /* コラム */ .colomn_list { margin-bottom:2%; } .colomn_list li{ border-bottom: 1px solid var(--main); padding: 1%; } .colomn_list li span{ font-size: var(--font14); } .colomn_list li a{ display: block; } .colomn_list li span{ color: var(--main); } /* PCサイズ */ @media (min-width: 768px) { .mvlist li img{ margin: 0 auto; } .pickup_list{ display: flex; flex-wrap: wrap; } .pickup_list li{ width: 32%; margin-right: 1%; } .pickup_list li:nth-child(3n){ margin-right: 0; } .pickup_list li .btn{ width: 100%; } .strengths{ display: flex; flex-wrap: wrap; } .strengths li{ width: 32%; margin-right: 1%; } .strengths li:nth-child(3n){ margin-right: 0; } .reason_list{ display: flex; flex-wrap: wrap; } .reason_list li{ width: 32%; margin-right: 1%; margin-bottom: 1%; } .voice img{ max-width: 150px; } .case_slide li{ padding-top: 3%; } .sec_surpport{ display: flex; } .sec_surpport div{ width: 50%; text-align: left; padding: 10px; } .sec_surpport div h3{ text-align: left; } .sec_surpport div .btn_area{ padding: 0; } .sec_surpport div .btn_area .btn{ width: 100%; } } /*------------------------ 下層共通 ------------------------*/ .page_header{ background: var(--main); height: 15vh; position: relative; } .page_header h1{ color: #fff; font-size: var(--font28); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 90%; text-align: center; } @media (max-width: 500px) { .page_header h1 { font-size: var(--font24); } } .list_content{ margin: 5% 0; } .list_content h2{ border-bottom: 1px solid var(--main); font-size: var(--font24); margin-bottom: 2%; color: var(--main); padding-bottom: 5px; } .list_content h3{ font-size: var(--font20); color: var(--main); } .inner_content{ margin: 5% 0; } /* タグ */ .tag_list{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .tag_list li{ padding: 3px 10px; margin-right: 1%; color: var(--main); border: 1px solid var(--main); margin-bottom: 1%; } @media (max-width: 500px) { .tag_list li{ margin-right: 3%; margin-bottom: 3%; } } .tag_list li a{ display: block; } .tag_list.vertical{ display: block; } .tag_list.vertical li{ padding: 5px 10px; margin-bottom: 2%; } /* ページ内リンク */ .page_link{ display: flex; flex-wrap: wrap; margin-bottom: 4%; } .page_link li{ color: #fff; background-color: var(--main); padding: 2%; width: 32%; margin-right: 1%; text-align: center; } .page_link li a{ display: block; font-size: var(--font24); } /*------------------------ BLOG ------------------------*/ /* ブログ */ .blog li{ border: 3px solid var(--gray); margin-bottom: 2%; } .blog li .btm{ padding: 3%; } .blog li h3{ margin: 2% 0; } .blog li .tag{ display: inline; color: #fff; padding:3px 10px; background-color: var(--main); font-size: var(--font14); margin-right: 2%; } .blog li .date{ display: inline; font-size: var(--font14); } .blog li img{ aspect-ratio: 16/9; object-fit: cover; } /* pager */ .pagination{ display: flex; align-items: stretch; justify-content: center; margin-bottom: 5%; } .pagination a { color: var(--black); float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color: var(--main); color: white; } .pagination a:hover:not(.active) {background-color: #ddd;} .pagination a i{ color: var(--main); } .blog_cnt .tag{ color: var(--main); display: inline; border: 1px solid var(--main); padding: 3px 10px; margin-right: 1%; font-size: var(--font14); } .blog_cnt .date{ display: inline; font-size: var(--font14); } .blog_cnt h3{ margin: 2% 0; } /* PCサイズ */ @media (min-width: 768px) { .blog{ display: flex; flex-wrap: wrap; } .blog li{ width: 32%; margin-right: 1%; } .blog li:nth-child(3n){ margin-right: 0; } .blog li .btn{ width: 100%; } .s_cnt{ max-width: 800px; margin: 0 auto; } } /*------------------------ question ------------------------*/ .pulldown{ margin-bottom: 3%; background-color: #fff; } .pulldown_top{ display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--gray); font-size: var(--font18); padding: 1.5% 2%; cursor: pointer; } .pulldown_btm{ padding: 1% 4% 3%; display: none; } .question_list .pulldown_top p{ width: 100%; } .question_list .pulldown_top i{ color: var(--main); margin-right: 2%; } .question_list .pulldown_btm{ padding: 2%; font-size: var(--font18); font-weight: normal; background-color: var(--gray); } .list_content.question h2{ text-align: left; } @media (max-width: 500px) { .pulldown_top{ padding: 5% 2%; } .question_list .pulldown_btm{ padding: 4%; } } /*------------------------ store ------------------------*/ .store h2{ text-align: left; } /*------------------------ price ------------------------*/ .carmodel{ margin-top: 2%; } .carmodel li{ background-color: #fff; border: 2px solid var(--main); color: var(--main); border-radius: 2px; padding: 0; } .carmodel li i{ display: block; } .carmodel li a{ position: relative; display: block; font-size: var(--font18); padding: 1%; } .car_cnt_cat h2{ background-color: var(--main); color: #fff; text-align: left; padding-left: 15px; } .car_cnt h3{ border-bottom: 1px solid var(--main); margin-bottom: 1%; } .car_cnt h4{ font-size: var(--font18); margin-bottom: 1%; } .car_cnt_cat .car_list{ margin-bottom: 15%; } .car_cnt .normal_table .txt{ margin-top: 2%; } .car_cnt .price_boxes .price_box{ border: 1px solid var(--main); text-align: center; width: 100%; margin-bottom: 2%; } .car_cnt .price_boxes .price_box:first-child{ margin-top: 2%; } .car_cnt .price_boxes .price_box .hd{ background-color: var(--main); color: #fff; padding: 2%; font-size: var(--font14); } .car_cnt .price_boxes .price_detail { padding: 10px; } .car_cnt .price_boxes .price_detail .s_price{ font-size: var(--font16); line-height: 1.4; } .car_cnt .price_boxes .price_detail .s_price span{ font-size: var(--font14); } .car_cnt .price_boxes .price_detail .m_price{ font-size: var(--font24); color: var(--main); line-height: 1; } .car_cnt .price_boxes .price_detail .m_price span{ font-size: var(--font16); } .car_cnt .price_boxes .price_detail .tax{ font-size: var(--font12); line-height: 1.4; } .ano_mark,.ano_txt{ font-size: var(--font12); } .car_cnt_cat .car_list img{ aspect-ratio: 16/9; object-fit: cover; } /* PCサイズ */ @media (min-width: 768px) { .carmodel li i{ display: inline-block; margin-left: 5px; } .car_flex{ display: flex; align-items: flex-start; margin-bottom: 2%; } .car_flex .img{ width: 50%; margin-right: 1%; } .car_flex .normal_table{ width: 50%; margin: 0; } .car_cnt .price_boxes{ display: flex; align-items: stretch; width: 100%; justify-content: space-between; margin-bottom: 2%; } .car_cnt .price_boxes .price_box{ width: 50%; margin: 0; margin-right: 1%; } .car_cnt .price_boxes .price_box:first-child{ margin-top: 0; } .car_cnt .price_boxes .price_box:last-child{ margin-right:0; } .car_cnt_cat .car_list{ margin-bottom: 5%; } } /*------------------------ detail ------------------------*/ .car_cnt_cat.detail h5{ color: var(--main); border: 1px solid var(--main); margin-bottom: 2%; display: inline-block; padding: 0 5px; font-size: var(--font14); } .features_list_area{ margin-bottom: 4%; } .features_ttl i,.features_ttl span{ color: var(--main); font-size: var(--font18); } .features_ttl i{ margin-right: 1%; } .features_list li{ border: 1px solid var(--main); padding: 5px; margin-bottom: 2%; font-weight: normal; } /* PCサイズ */ @media (min-width: 768px) { .car_cnt_cat.detail .features{ width: 50%; } .car_cnt_cat.detail .features .normal_table{ width: 100%; } } /*------------------------ insurance ------------------------*/ .insurance_table table{ width: auto; border-collapse: collapse; margin: 2% auto; } .insurance_table table tr th{ background-color: var(--main); color: #fff; text-align: center; } .insurance_table table tr th, .insurance_table table tr td{ border: 1px solid var(--gray); text-align: center; } .insurance_table table tr:first-child th:first-child{ background-color: transparent; border: none; } .insurance_table table tr th:first-child{ background-color: var(--gray); color: var(--black); } .insurance_call_area{ text-align: center; } .insurance_call{ border: 1px solid var(--gray); text-align: center; display: block; max-width: 400px; padding-top: 15px; margin: 2% auto; } .insurance_call .company{ font-size: var(--font18); } .insurance_call .tell{ font-size: var(--font28); font-weight: bold; color: var(--main); } .insurance_call .tell i{ margin-right: 1%; } .insurance_call .btm{ background-color: var(--main); text-align: center; color: #fff; font-weight: normal; } .insurance_unity h2{ text-align: left; } .insurance_unity .txt{ margin: 2% 0; } .insurance_unity .img{ max-width: 600px; margin: 0 auto; } .insurance_interpersonal_table table{ width: auto; } .insurance_interpersonal_table tr:first-child th{ background-color: var(--main); text-align: center; color: #fff; } .insurance_interpersonal_table tr:nth-child(n+2) th, .insurance_interpersonal_table tr:nth-child(n+2) td{ border: 1px solid var(--gray); } .insurance_interpersonal_table tr:nth-child(n+2) th{ background-color: var(--gray); width: 70%; } .insurance_interpersonal_table tr:nth-child(n+2) td{ width: 30%; text-align: center; vertical-align: middle; } .insurance_unity ul{ list-style-type: disc; padding-left: 1rem; font-weight: normal; font-size: var(--font16); } .cdw_area{ border: 1px solid var(--main); padding: 2rem; margin-bottom: 2%; } .cdw_area.join{ border-color: #707070; } .cdw_area .ttl{ text-align: center; font-size: var(--font18); } .cdw_area .img{ margin: 1% auto; text-align: center; width: 60%; } .cdw_area .cdw_txt{ background-color: var(--main); color: #fff; text-align: center; padding: 1rem 1rem 0.5rem; border-radius: 5px; margin-bottom: 5%; } .cdw_area .cdw_txt p:first-child{ font-size: var(--font16); } .cdw_area .cdw_txt p:nth-child(2){ font-size: var(--font24); } .cdw_arrow{ text-align: center; padding-top: 0; } .cdw_arrow i{ font-size: 48px; color: var(--main); margin-top: -6px; } .cdw_price{ text-align: center; padding: 1rem; border: 1px solid #707070 } .cdw_price .cdw_txt{ margin-bottom: 2%; } .cdw_price .cdw_txt p{ font-size: var(--font18); } .cdw_price .cdw_txt p:nth-child(2){ font-size: var(--font24); } .insurance_unity h4{ margin-top: 5%; } .cdw_price .btn_area .btn{ margin-bottom: 0; } /* PCサイズ */ @media (min-width: 768px) { .cdw_cnt{ display: flex; justify-content: space-between; align-items: stretch; } .cdw_cnt .cdw_area{ width: 49%; } .cdw_arrow { position: relative; display: flex; align-items: center; } .cdw_arrow i{ margin-right: 5px; transform: rotate(270deg); } } /* pager */ .pagenation{ margin: 5% 0; text-align: center; } .pagenation a{ text-decoration: none;} .prev a,.next a{ color: var(--main); } .pagenation .page{ background-color: #fff ; color: var(--main); margin-right: 1%; padding: 5px 12px; border: 1px solid; } .pagenation .page a{ color: var(--main); } .pagenation .page.current{ border: 1px solid var(--main); color:#fff; background: var(--main); } .pagenation .last{ color: var(--main); }[data-instance="26"] .btn{padding: 1.5rem;}