@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* フォント */ /*---------------------------------------------------*/ @font-face { /*フォントの名前*/ font-family: "FW-tsukushi-b-maru-gochic-CID-B"; /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/ src: url("../font/FW_tsukushi_maru_gochic/FW-tsukushi-b-maru-gochic-CID-B"); } /* 共通 */ /*---------------------------------------------------*/ html { height: 100%; } body { height: 100%; height: 100dvh; } body, input, select, textarea { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "MS PGothic", sans-serif; font-weight: 400; line-height: 1.7; font-size: 1.6rem; width: 100%; color: #333333; } @media screen and (max-width: 767px) { body, input, select, textarea { font-size: 11px; } } /* パンくず */ /*---------------------------------------------------*/ .breadcrumb-01 { color: #222222; margin: 20px 0 10px 0; font-size: 12px; } .breadcrumb-01 a { color: #222222; } .breadcrumb-01 ul { display: flex; } .breadcrumb-01 ul li + li::before { content: "▶"; display: inline-block; margin: 0 10px; } @media screen and (max-width: 767px) { .breadcrumb-01 { display: none; } } /* テキスト */ /*---------------------------------------------------*/ .txt-left { text-align: left !important; } .txt-right { text-align: right !important; } .txt-center { text-align: center !important; } .txt-justify { text-align: justify !important; } .vertical-top { vertical-align: top !important; } .vertical-middle { vertical-align: middle !important; } .vertical-bottom { vertical-align: bottom !important; } .vertical-baseline { vertical-align: baseline !important; } .bold { font-weight: bold; } .italic { font-style: italic; } .oblique { font-style: oblique; } .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .nowrap { white-space: nowrap; } .big { font-size: 1.2em; } .small { font-size: 0.8em; } .txt-center-left { text-align: center !important; } @media screen and (max-width: 767px) { .txt-center-left { text-align: left !important; } } .txt-left-center { text-align: left !important; } @media screen and (max-width: 767px) { .txt-left-center { text-align: center !important; } } .txt-red { color: #F01111; } /* 余白 */ /*---------------------------------------------------*/ .mtb-0 { margin-top: 0px !important; margin-bottom: 0px !important; } .mt-0 { margin-top: 0px !important; } .mb-0 { margin-bottom: 0px !important; } .ml-0 { margin-left: 0px !important; } .mr-0 { margin-right: 0px !important; } .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } .pl-0 { padding-left: 0px !important; } .pr-0 { padding-right: 0px !important; } .mt-120 { margin-top: 120px !important; } @media screen and (max-width: 767px) { .mt-120 { margin-top: 60px !important; } } .mt-100 { margin-top: 100px !important; } @media screen and (max-width: 767px) { .mt-100 { margin-top: 50px !important; } } .mt-80 { margin-top: 80px !important; } @media screen and (max-width: 767px) { .mt-80 { margin-top: 40px !important; } } .mt-60 { margin-top: 60px !important; } @media screen and (max-width: 767px) { .mt-60 { margin-top: 30px !important; } } .mt-40 { margin-top: 40px !important; } @media screen and (max-width: 767px) { .mt-40 { margin-top: 20px !important; } } .mt-20 { margin-top: 20px !important; } @media screen and (max-width: 767px) { .mt-20 { margin-top: 10px !important; } } .mb-120 { margin-bottom: 120px !important; } @media screen and (max-width: 767px) { .mb-120 { margin-bottom: 60px !important; } } .mb-100 { margin-bottom: 100px !important; } @media screen and (max-width: 767px) { .mb-100 { margin-bottom: 50px !important; } } .mb-80 { margin-bottom: 80px !important; } @media screen and (max-width: 767px) { .mb-80 { margin-bottom: 40px !important; } } .mb-60 { margin-bottom: 60px !important; } @media screen and (max-width: 767px) { .mb-60 { margin-bottom: 30px !important; } } .mb-40 { margin-bottom: 40px !important; } @media screen and (max-width: 767px) { .mb-40 { margin-bottom: 20px !important; } } .mb-20 { margin-bottom: 20px !important; } @media screen and (max-width: 767px) { .mb-20 { margin-bottom: 10px !important; } } .pt-120 { padding-top: 120px !important; } @media screen and (max-width: 767px) { .pt-120 { padding-top: 60px !important; } } .pt-100 { padding-top: 100px !important; } @media screen and (max-width: 767px) { .pt-100 { padding-top: 50px !important; } } .pt-80 { padding-top: 80px !important; } @media screen and (max-width: 767px) { .pt-80 { padding-top: 40px !important; } } .pt-60 { padding-top: 60px !important; } @media screen and (max-width: 767px) { .pt-60 { padding-top: 30px !important; } } .pt-40 { padding-top: 40px !important; } @media screen and (max-width: 767px) { .pt-40 { padding-top: 20px !important; } } .pt-20 { padding-top: 20px !important; } @media screen and (max-width: 767px) { .pt-20 { padding-top: 10px !important; } } .pb-120 { padding-bottom: 120px !important; } @media screen and (max-width: 767px) { .pb-120 { padding-bottom: 60px !important; } } .pb-100 { padding-bottom: 100px !important; } @media screen and (max-width: 767px) { .pb-100 { padding-bottom: 50px !important; } } .pb-80 { padding-bottom: 80px !important; } @media screen and (max-width: 767px) { .pb-80 { padding-bottom: 40px !important; } } .pb-60 { padding-bottom: 60px !important; } @media screen and (max-width: 767px) { .pb-60 { padding-bottom: 30px !important; } } .pb-40 { padding-bottom: 40px !important; } @media screen and (max-width: 767px) { .pb-40 { padding-bottom: 20px !important; } } .pb-20 { padding-bottom: 20px !important; } @media screen and (max-width: 767px) { .pb-20 { padding-bottom: 10px !important; } } @media screen and (max-width: 767px) { .only-pc { display: none !important; } } @media screen and (min-width: 768px) { .only-sp { display: none !important; } } /* 見出し */ /*---------------------------------------------------*/ /* ボタン */ /*---------------------------------------------------*/ .btn { border: 4px solid #D90C0B; font-size: 22px; font-weight: bold; text-align: center; width: 300px; margin: 0 auto; } .btn a { color: #D90C0B; display: block; text-align: center; padding: 10px 40px; transition: 0.5s; } .btn a:hover { background-color: #D90C0B; color: #ffffff; transition: 0.5s; } @media screen and (max-width: 1024px) { .btn { font-size: 16px; } .btn a { padding: 15px 25px; } } /* ボタンのスタイル */ .btn-wrap { text-align: center; } .btn-wrap .btn02 { display: inline-block; border-radius: 10px; width: 100%; max-width: 320px; padding: 15px 24px; font-size: 22px; font-weight: bold; color: #222; text-align: center; overflow-wrap: anywhere; background-color: #ffffff; transition: background-color 0.5s; } .btn-wrap .btn02:hover { background-color: #e2e4e1; transition: background-color 0.5s; } .tab { display: flex; flex-direction: row; text-align: center; background-color: #D90C0B !important; margin: 0 !important; } .tab-body { background-color: #ffffff; } .tab__item { flex: 1; flex-basis: 120px; } .tab__link { display: block; font-size: 40px; font-weight: bold; text-decoration: none; color: #fff; background-color: #D1CECB; cursor: pointer; border-top-right-radius: 15px; border-top-left-radius: 15px; padding: 20px 0; } @media screen and (max-width: 1024px) { .tab__link { font-size: 22px; padding: 12px 0; } } .tab__link.on { background-color: #F5C008; } .tab-body__item { margin: 0 15px 0 15px; display: none; text-align: center; } .tab-body__item.on { display: block; } /* アニメーション　スライドイン */ /*---------------------------------------------------*/ .scroll-space { box-sizing: border-box; padding-top: 300px; height: 1600px; color: #fff; overflow: hidden; } .fadein { opacity: 0; transform: translate(0, 0); transition: all 1.5s; } .fadein.fadein-left { transform: translate(-30px, 0); } .fadein.fadein-right { transform: translate(30px, 0); } .fadein.fadein-up { transform: translate(0, -30px); } .fadein.fadein-bottom { transform: translate(0, 50px); } .fadein.scrollin { opacity: 1 !important; transform: translate(0, 0) !important; } /* アニメーション　遅延してのスライドイン */ /*---------------------------------------------------*/ /* アニメーションスタートの遅延時間を決めるCSS*/ .delay-time02 { animation-delay: 0.2s; } .delay-time04 { animation-delay: 0.4s; } /*================================================== スタート時は要素自体を透過0にするためのopacity:0;を指定する ===================================*/ .move-box { opacity: 0; } /*================================================== 動き自体の指定：今回は「ふわっ」 ===================================*/ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeUpTrigger { opacity: 0; } /* 左から */ .fadeLeft { animation-name: fadeLeftAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeLeftAnime { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } /* 右から */ .fadeRight { animation-name: fadeRightAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* トップへのロゴ表示 */ /*---------------------------------------------------*/ /* Loading背景画面設定　*/ #splash { /*fixedで全面に固定*/ position: fixed; width: 100%; height: 100%; z-index: 11000; background: #fff; text-align: center; color: #fff; } /* Loading画像中央配置　*/ #splash_logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Loading アイコンの大きさ設定　*/ #splash_logo img { width: 260px; } /* fadeUpをするアイコンの動き */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* 画像へのホバー時に下からバーガ出るアニメーション */ .image_link { display: block; position: relative; } .image_link img { display: block; width: 100%; } .image_link:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 2; background: #000; /*好みの色に変えてください。*/ opacity: 0; transition: 0.3s; } .image_link:after { content: ""; display: block; width: 0; height: 8px; position: absolute; bottom: 0; left: 0; z-index: 3; transition: 0.3s; background: #00a896; /*好みの色に変えてください。*/ } .image_link:hover:before { opacity: 0.5; } .image_link:hover:after { width: 100%; } /* ページネーション */ .pagination { margin-top: 56px; display: flex; justify-content: center; } .pagination-list { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; } .pagination-item { font-size: 14px; } .pagination-item a, .pagination-item span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px; color: #333; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .pagination-item a:hover { background: #f5f7fa; } .pagination-item.is-active span { background: #111; color: #fff; border-color: #111; font-weight: 600; } .pagination-item.is-disabled span { opacity: 0.4; cursor: default; } /* 前後矢印を少し強調 */ .pagination-item.prev a, .pagination-item.next a, .pagination-item.prev span, .pagination-item.next span { font-size: 16px; } @media (max-width: 768px) { .pagination { margin-top: 40px; } .pagination-item a, .pagination-item span { min-width: 32px; height: 32px; font-size: 13px; } } /* ヘッダー */ /*---------------------------------------------------*/ #header02 { display: none; } .fix-header { background-color: #ffffff; top: -66px; /* 上に隠す鷹さ */ left: 0; text-align: center; width: 100%; margin: 0 auto; color: #fff; position: fixed; opacity: 0; /* 最初読み込んだときは透過 */ z-index: 1000; /*　他のアイテムに対して最上位のレイヤーになるように */ /* opacity: 0; */ } @media screen and (max-width: 1024px) { .fix-header { display: none; } } header { display: flex; padding: 20px; align-items: center; justify-content: space-between; } header .logo { margin-right: 20px; } header nav ul { display: flex; align-items: center; } header nav li { font-size: 18px; font-weight: bold; margin-right: 30px; } header nav li a { color: #222222; display: block; } @media screen and (max-width: 1280px) { header nav li { font-size: 16px; margin-right: 22px; } } @media screen and (max-width: 1100px) { header nav li { font-size: 14px; margin-right: 22px; } } header li:last-child { margin-right: 0; } header .h-contact { background-color: #DB0B0B; } header .h-contact a { color: #ffffff; padding: 20px 35px; transition: 0.5s; } header .h-contact :hover { background-color: #e76f6f; transition: 0.5s; } .fix-header-inner { display: flex; padding: 20px; align-items: center; justify-content: space-between; } .fix-header-inner .logo { margin-right: 20px; } .fix-header-inner nav ul { display: flex; align-items: center; } .fix-header-inner nav li { font-size: 20px; font-weight: bold; margin-right: 30px; } .fix-header-inner nav li a { color: #222222; display: block; } @media screen and (max-width: 1280px) { .fix-header-inner nav li { font-size: 18px; margin-right: 25px; } } .fix-header-inner nav li:last-child { margin-right: 0; } .fix-header-inner nav .h-contact { background-color: #DB0B0B; } .fix-header-inner nav .h-contact a { color: #ffffff; padding: 20px 35px; transition: 0.5s; } .fix-header-inner nav .h-contact :hover { background-color: #e76f6f; transition: 0.5s; } @media screen and (max-width: 1024px) { header { display: none; } #header02 { display: block; } .logo { width: 80%; margin: 0 auto; } nav { display: none; } } @media screen and (max-width: 390px) { header { display: none; } #header02 { display: block; } .logo { width: 80%; margin: 0 auto; } nav { display: none; } } /*==== モーダルウインドウ風メニュー ======*/ /*ハンバーガーボタン*/ #header02 { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background-color: #ffffff; z-index: 10000; } #header02 .header-inner { display: flex; justify-content: space-between; position: absolute; z-index: 11; background-color: #ffffff; width: 100%; } #header02 .header-inner .left { display: flex; justify-content: space-between; padding: 10px 10px 10px 10px; width: 100%; height: 64px; } #header02 .header-inner .left .ser-vner { display: flex; align-items: center; } #header02 .header-inner .left .ser-vner li { border-left: 1px solid #dbd9d9; padding: 6px 10px 0 10px; } #header02 .header-inner .left .ser-vner li.noridoki img { padding-bottom: 6px; } #header02 .header-inner .right { background-color: #DE0817; display: block; width: 63px; height: 64px; z-index: 11; } #header02 h1 { padding-left: 10px; width: 120px; } #header02 h1 img { width: 100%; } /*ハンバーガーメニュー*/ .menu, .menu span { display: inline-block; transition: all 0.4s; box-sizing: border-box; } .menu { position: fixed; top: 24px; right: 14px; width: 30px; height: 16px; z-index: 11; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: none; outline: none; } @media screen and (max-width: 390px) { .menu { right: 12px; } } .menu span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #ffffff; z-index: 12; } .menu span:nth-of-type(1) { top: 0px; } .menu span:nth-of-type(2) { top: 7px; } .menu span:nth-of-type(3) { bottom: 0px; } .menu.active span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); } .menu.active span:nth-of-type(2) { opacity: 0; } .menu.active span:nth-of-type(3) { transform: translateY(-8px) rotate(-45deg); } #nav { position: fixed; top: 0; right: 0; z-index: 9; width: 100%; height: 100vh; opacity: 0; background-color: #DE0817; transition: all 0.3s ease-in-out; visibility: hidden; padding-top: 100px; } #nav.active { right: 0; opacity: 1; transform: translateX(0); visibility: visible; } #nav ul { margin: 20px 0; padding: 20px 0; } #nav ul li { font-size: 18px; list-style-type: none; } #nav ul li a { border-bottom: 2px solid #ffffff; margin: 0 40px; display: block; padding: 20px 0 20px 0; transition: all 0.2s ease-in-out; text-align: left; text-decoration: none; color: #FFFFFF; } #nav ul .policy-style a { color: #ffffff; font-weight: normal; padding-top: 100px; } /* reCAPTCHAバッジを非表示にする */ .grecaptcha-badge { visibility: hidden; } /* フッター */ /*---------------------------------------------------*/ footer { background-color: #000000; padding: 30px; margin-top: 200px; } footer .footer__logo { width: 220px; height: 70px; } @media screen and (max-width: 1024px) { footer .footer__logo { width: 180px; height: auto; } } @media screen and (max-width: 767px) { footer { padding: 30px 30px 0 30px; } footer .footer__logo { width: 140px; } } footer .footer__unit { display: flex; justify-content: space-between; margin: 0 auto; } @media screen and (max-width: 599px) { footer .footer__unit { display: flex; flex-direction: column-reverse; } } @media screen and (max-width: 599px) { footer .footer__unit .footer__box { margin: 0 auto 30px auto; width: 100%; } } footer .footer__unit .footer__box .footer__link { display: flex; margin: 20px 60px; width: 100px; } footer .footer__unit .footer__box .footer__link li { margin-right: 20px; } footer .footer__unit .footer__box .footer__link li:last-child { margin-right: 0; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box .footer__link { margin: 5px 48px; width: 80px; } } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .footer__link { margin: 5px 0; width: 100%; } footer .footer__unit .footer__box .footer__link li { width: 8%; } } footer .footer__unit .footer__box .footer__nav li { padding-bottom: 5px; } footer .footer__unit .footer__box .footer__nav li a { color: #ffffff; font-size: 16px; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box .footer__nav li { font-size: 14px; line-height: 1.3; } } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .footer__nav li { line-height: 1.7; } } footer .footer__unit .footer__box .copy { color: #ffffff; font-size: 12px; padding: 20px 0; } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .copy { text-align: center; padding: 0 0 20px 0; } } @media screen and (max-width: 599px) { footer .footer__unit .footer__box .copy { text-align: center; padding: 20px 0 0 0; } } footer .footer__unit .footer__box .footer__deco { color: #ffffff; font-size: 15px; font-weight: bold; line-height: 1; } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .footer__deco { font-size: 12px; line-height: 1.2; } } footer .footer__unit .footer__box .footer__title { color: #ffffff; font-size: 30px; font-weight: bold; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box .footer__title { font-size: 18px; } } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .footer__title { padding-bottom: 0px; } } footer .footer__unit .footer__box h3 { font-size: 30px; font-weight: bold; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box { font-size: 22px; } } footer .footer__unit .footer__box .footer__tel { font-size: 40px; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box .footer__tel { font-size: 24px; } } footer .footer__unit .footer__box .footer__tel a { color: #ffffff; } @media screen and (max-width: 767px) { footer .footer__unit .footer__box .footer__tel { padding-bottom: 5px; } } footer .footer__unit .footer__box .footer__time { color: #ffffff; font-size: 18px; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box .footer__time { font-size: 16px; } } footer .footer__unit .footer__box table { margin-bottom: 36px; } footer .footer__unit .footer__box table th, footer .footer__unit .footer__box table td { color: #ffffff; font-size: 18px; } @media screen and (max-width: 1024px) { footer .footer__unit .footer__box table th, footer .footer__unit .footer__box table td { font-size: 14px; } } footer .footer__unit .footer__box .btn { border: 4px solid #ffffff; } footer .footer__unit .footer__box .btn a { color: #ffffff; } footer .footer__unit .footer__box .btn a:hover { background-color: #ffffff; color: #222222; } .page-about .sub__key-visual { background-image: url(./assets/images/about/about_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-plan .sub__key-visual { background-image: url(./assets/images/plan/plan_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-faq .sub__key-visual { background-image: url(./assets/images/qa/qa_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-company .sub__key-visual { background-image: url(./assets/images/company/company_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-contact .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-confirm .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-thanks .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .page-topics .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } #topics .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .sub__key-visual.topics { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .post-type-archive-campaign .sub__key-visual { background-image: url(./assets/images/contact/contact_sub-mv.jpg); background-repeat: no-repeat; background-size: cover; } .sub__key-visual h1 { color: #ffffff; font-size: 50px; font-weight: bold; text-align: center; padding: 100px 0 0 0; } @media screen and (max-width: 1024px) { .sub__key-visual h1 { font-size: 40px; padding: 100px 0 0 0; } } @media screen and (max-width: 767px) { .sub__key-visual h1 { font-size: 26px; } } .sub__key-visual .txt { color: #ffffff; font-size: 30px; font-weight: bold; text-align: center; padding-bottom: 100px; text-transform: uppercase; } @media screen and (max-width: 1024px) { .sub__key-visual .txt { padding-bottom: 40px; } } @media screen and (max-width: 767px) { .sub__key-visual .txt { font-size: 22px; } } /* ジョイカル豊見城店について */ /*---------------------------------------------------*/ .place { background-image: url(./assets/images/about/about_img01.svg); background-repeat: no-repeat; background-position: 0 106px; background-size: 1150px; } @media screen and (max-width: 1024px) { .place { background-position: 0 55px; background-size: 850px; } } @media screen and (max-width: 767px) { .place { background-position: 0 60px; background-size: 290px; } } @media screen and (max-width: 767px) { .place { font-size: 24px; } } .place__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 200px 0 0 0; } @media screen and (max-width: 1024px) { .place__inner { padding: 80px 20px 20px 20px; } } .place__inner h2 { color: #363535; font-size: 48px; font-weight: bold; padding-bottom: 20px; line-height: 1.3; } @media screen and (max-width: 1024px) { .place__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .place__inner h2 { font-size: 24px; } } .place__inner .place__txt { font-size: 18px; padding-bottom: 20px; } .place__img { /*background-image: url(./assets/images/about/about_img05.jpg); background-repeat: no-repeat;*/ } .place__img .place__unit { display: flex; padding: 40px 0 50px 0; } @media screen and (max-width: 767px) { .place__img .place__unit { position: relative; display: block; padding: 0 0 40px 0; } } .place__img .place__unit .place__unit--left { width: 100%; margin-right: 10%; } .place__img .place__unit .place__unit--left .img { width: 100%; } .place__img .place__unit .place__unit--left .img img { width: 100%; } @media screen and (max-width: 767px) { .place__img .place__unit .place__unit--left .img { background-position: 0 90px; background-size: 100%; padding: 0; position: relative; z-index: 3; width: 85%; } } .place__img .place__unit .place__unit--right { width: 100%; } @media screen and (max-width: 767px) { .place__img .place__unit .place__unit--right { display: flex; } } .place__img .place__unit .place__unit--right img { width: 100%; } .place__img .place__unit .place__unit--right .img01 { position: relative; z-index: 2; margin-left: auto; width: 85%; margin-top: 5vw; height: auto; box-sizing: border-box; } @media screen and (max-width: 767px) { .place__img .place__unit .place__unit--right .img01 { margin-top: 0; margin-left: 0; margin-right: 10px; width: 55%; } } .place__img .place__unit .place__unit--right .img02 { position: relative; z-index: 1; right: 80px; width: 70%; margin-top: -5vw; height: auto; box-sizing: border-box; } @media screen and (max-width: 767px) { .place__img .place__unit .place__unit--right .img02 { margin-top: 0; left: 0; width: 50%; } } .carSales { background-image: url(./assets/images/about/about_img06.svg), url(./assets/images/about/about_img07.png); background-repeat: no-repeat, no-repeat; background-position: 10px 0, 50% 50%; } @media screen and (max-width: 1024px) { .carSales { background-position: 0 0, 25px 160px; background-size: 40%, 85%; } } .carSales .carSales__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 100px 0 0 0; } @media screen and (max-width: 1024px) { .carSales .carSales__inner { padding: 60px 20px 50px 20px; } } @media screen and (max-width: 767px) { .carSales .carSales__inner { padding: 22px 20px 0 20px; } } .carSales .carSales__inner h2 { color: #363535; font-size: 48px; font-weight: bold; padding-bottom: 10px; line-height: 1.3; } @media screen and (max-width: 1024px) { .carSales .carSales__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .carSales .carSales__inner h2 { font-size: 24px; } } .carSales .carSales__inner .carSales__txt { font-size: 18px; padding-bottom: 50px; } @media screen and (max-width: 767px) { .carSales .carSales__inner .carSales__txt { font-size: 16px; } } .carSales .carSales__inner .carSales__unit { display: flex; flex-direction: row-reverse; padding: 0 0 50px 0; max-width: 1200px; width: 100%; margin: 0 auto; } .carSales .carSales__inner .carSales__unit.no2 { flex-direction: row; } .carSales .carSales__inner .carSales__unit.no2 .carSales__unit--left { margin-right: 2%; margin-left: 0; } .carSales .carSales__inner .carSales__unit.no2 .carSales__unit--right { margin-right: 0; } @media screen and (max-width: 767px) { .carSales .carSales__inner .carSales__unit { display: block; } } .carSales .carSales__inner .carSales__unit .carSales__unit--left { width: 50%; margin: auto 0 auto 30px; } @media screen and (max-width: 767px) { .carSales .carSales__inner .carSales__unit .carSales__unit--left { width: 100%; margin: auto 0 auto 0; } } .carSales .carSales__inner .carSales__unit .carSales__unit--left h2 { width: 40%; } .carSales .carSales__inner .carSales__unit .carSales__unit--left p { font-size: 16px; } @media screen and (max-width: 767px) { .carSales .carSales__inner .carSales__unit .carSales__unit--left p { padding-bottom: 20px; } } @media screen and (max-width: 1024px) { .carSales .carSales__inner .carSales__unit .carSales__unit--left { margin-right: 2%; } } @media screen and (max-width: 1024px) and (max-width: 767px) { .carSales .carSales__inner .carSales__unit .carSales__unit--left h2 { margin: 0 auto; } } .carSales .carSales__inner .carSales__unit .carSales__unit--right { width: 50%; font-size: 16px; line-height: 1.4; margin-right: 2%; margin: auto 0; } .carSales .carSales__inner .carSales__unit .carSales__unit--right .carSales__text { padding-bottom: 20px; } @media screen and (max-width: 1024px) { .carSales .carSales__inner .carSales__unit .carSales__unit--right { font-size: 16px; } } @media screen and (max-width: 767px) { .carSales .carSales__inner .carSales__unit .carSales__unit--right { width: 100%; } } .maintenance { background-image: url(./assets/images/about/about_img10.svg); background-repeat: no-repeat; background-position: 10px 120px; background-size: 1000px; } @media screen and (max-width: 1024px) { .maintenance { background-position: 5px 68px; background-size: 70%; } } @media screen and (max-width: 767px) { .maintenance { background-position: 5px 5px; background-size: 70%; } } .maintenance .maintenance__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 200px 0 0 0; } @media screen and (max-width: 1024px) { .maintenance .maintenance__inner { padding: 120px 20px 50px 20px; } } @media screen and (max-width: 767px) { .maintenance .maintenance__inner { padding: 50px 20px 50px 20px; } } @media screen and (max-width: 430px) { .maintenance .maintenance__inner { padding: 30px 20px 50px 20px; } } .maintenance .maintenance__inner h2 { color: #363535; font-size: 44px; font-weight: bold; padding-bottom: 20px; line-height: 1.3; } @media screen and (max-width: 1024px) { .maintenance .maintenance__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .maintenance .maintenance__inner h2 { font-size: 24px; } } .maintenance .maintenance__inner .maintenance__txt { font-size: 18px; padding-bottom: 50px; } @media screen and (max-width: 767px) { .maintenance .maintenance__inner .maintenance__txt { font-size: 16px; padding-bottom: 10px; } } .maintenance .maintenance__unit { display: flex; flex-direction: row-reverse; padding: 0 0 80px 0; width: 100%; margin: 0 auto 50px auto; } @media screen and (max-width: 767px) { .maintenance .maintenance__unit { padding: 0 20px 20px 20px; } } .maintenance .maintenance__unit.no2 { flex-direction: row; } .maintenance .maintenance__unit.no2 .maintenance__unit--left { margin-right: 2%; } .maintenance .maintenance__unit.no2 .maintenance__unit--right { margin-right: 0; } @media screen and (max-width: 767px) { .maintenance .maintenance__unit { display: block; } } .maintenance .maintenance__unit .maintenance__unit--left { width: 50%; margin: auto 5%; padding: 70px 0; } @media screen and (max-width: 1024px) { .maintenance .maintenance__unit .maintenance__unit--left { padding: 30px 0; } } @media screen and (max-width: 767px) { .maintenance .maintenance__unit .maintenance__unit--left { width: 100%; margin: auto 0; } } .maintenance .maintenance__unit .maintenance__unit--left h2 { color: #363535; font-size: 30px; font-weight: bold; line-height: 1.3; padding-bottom: 10px; } .maintenance .maintenance__unit .maintenance__unit--left p { font-size: 16px; } @media screen and (max-width: 1024px) { .maintenance .maintenance__unit .maintenance__unit--left { margin-right: 2%; } .maintenance .maintenance__unit .maintenance__unit--left h2 { font-size: 26px; } } @media screen and (max-width: 767px) { .maintenance .maintenance__unit .maintenance__unit--left { font-size: 24px; } } .maintenance .maintenance__unit .maintenance__unit--right { width: 50%; font-size: 16px; line-height: 1.4; } .maintenance .maintenance__unit .maintenance__unit--right .carSales__text { padding-bottom: 20px; } .maintenance .maintenance__unit .maintenance__unit--right img { width: 100%; } @media screen and (max-width: 1024px) { .maintenance .maintenance__unit .maintenance__unit--right { font-size: 16px; } } @media screen and (max-width: 767px) { .maintenance .maintenance__unit .maintenance__unit--right { width: 100%; } } /* プラン一覧 */ /*---------------------------------------------------*/ .plan-newcarlease { background-image: url(./assets/images/about/about_img01.svg); background-repeat: no-repeat; background-position: 0 106px; background-size: 1150px; } @media screen and (max-width: 1024px) { .plan-newcarlease { background-position: 0 55px; background-size: 850px; } } @media screen and (max-width: 767px) { .plan-newcarlease { background-position: 0 40px; background-size: 340px; } } .plan-newcarlease__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 200px 0 0 0; } .plan-newcarlease__inner .title-img { text-align: center; padding: 80px 0 80px 0; } @media screen and (max-width: 1024px) { .plan-newcarlease__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .plan-newcarlease__inner { padding-top: 60px; } .plan-newcarlease__inner .title-img { width: 60%; margin: 0 auto; padding: 20px; } } .plan-newcarlease__inner h2 { color: #363535; font-size: 56px; font-weight: bold; padding-bottom: 20px; line-height: 1.3; } @media screen and (max-width: 1024px) { .plan-newcarlease__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .plan-newcarlease__inner h2 { font-size: 24px; } } .plan-newcarlease__detail { color: #ffffff; padding: 200px 0 200px 0; } @media screen and (max-width: 1024px) { .plan-newcarlease__detail { padding: 200px 20px 200px 20px; } } @media screen and (max-width: 767px) { .plan-newcarlease__detail { padding: 50px 20px 70px 20px; } } .plan-newcarlease__detail.year03 { background-color: #1d2732; } .plan-newcarlease__detail.year07 { background-color: #45bc90; } .plan-newcarlease__detail .plan-newcarlease__unit { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; } @media screen and (max-width: 767px) { .plan-newcarlease__detail .plan-newcarlease__unit { display: block; } } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left { width: 100%; margin-right: 60px; } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left h3 { font-size: 34px; font-weight: bold; padding: 0 0 100px 0; } @media screen and (max-width: 767px) { .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left h3 { font-size: 25px; padding-bottom: 20px; } } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .plan-newcarlease__box { display: flex; margin: 0 auto; width: 90%; } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .plan-newcarlease__box .img { margin: 0 30px 40px 0; } @media screen and (max-width: 767px) { .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .plan-newcarlease__box .img { width: 40%; } } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .plan-newcarlease__box .circle { display: inline-grid; color: #fff; background-color: #f46464; font-size: 20px; width: 100px; height: 100px; border-radius: 50%; text-align: center; align-content: center; } @media screen and (max-width: 767px) { .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .plan-newcarlease__box .circle { font-size: 16px; width: 90px; height: 90px; } } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--left .txt { font-size: 18px; line-height: 2; } .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--right { width: 100%; margin: auto 0; } @media screen and (max-width: 767px) { .plan-newcarlease__detail .plan-newcarlease__unit .plan-newcarlease__unit--right { width: 100%; margin: 0 auto; padding: 50px; } } .plan-newcarlease__title { font-size: 34px; font-weight: bold; text-align: center; padding: 70px 0 40px 0; } @media screen and (max-width: 767px) { .plan-newcarlease__title { font-size: 25px; padding: 20px 0 20px 0; } } .plan-newcarlease__features { display: flex; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 0 100px 0; } @media screen and (max-width: 767px) { .plan-newcarlease__features { display: block; padding-bottom: 40px; } } .plan-newcarlease__features .plan-newcarlease__cards { border-radius: 4px; background-color: #ffffff; color: #222222; width: 38%; margin-right: 2%; padding: 20px; } @media screen and (max-width: 767px) { .plan-newcarlease__features .plan-newcarlease__cards { width: 100%; margin-bottom: 20px; } } .plan-newcarlease__features .plan-newcarlease__cards h3 { font-size: 22px; font-weight: bold; text-align: center; padding-bottom: 25px; } .plan-newcarlease__features .plan-newcarlease__cards .plan-newcarlease__icon { text-align: center; margin-bottom: 20px; } .plan-newcarlease__features .plan-newcarlease__cards .plan-newcarlease__txt { font-size: 16px; } .plan-newcarlease__img { background-image: url(./assets/images/about/about_img05.jpg); background-repeat: no-repeat; } .plan-newcarlease__img .plan-newcarlease__unit { position: relative; height: 900px; padding: 80px 0 50px 0; } @media screen and (max-width: 1024px) { .plan-newcarlease__img .plan-newcarlease__unit { height: 530px; } } @media screen and (max-width: 767px) { .plan-newcarlease__img .plan-newcarlease__unit { position: relative; height: 520px; padding: 20px 0 50px 0; } } .plan-newcarlease__img .plan-newcarlease__unit .plan-newcarlease__unit--left img { width: 45%; } @media screen and (max-width: 767px) { .plan-newcarlease__img .plan-newcarlease__unit .plan-newcarlease__unit--left img { background-position: 0 90px; background-size: 100%; padding: 0 20px; } } .plan-newcarlease__img .plan-newcarlease__unit .plan-newcarlease__unit--right img { width: 100%; } .plan-noridoki__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 30px 0 0 0; } .plan-noridoki__inner .title-img { text-align: center; padding: 80px 0 80px 0; } @media screen and (max-width: 767px) { .plan-noridoki__inner .title-img { padding: 40px 0 40px; width: 80%; margin: 0 auto; } } @media screen and (max-width: 1024px) { .plan-noridoki__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .plan-noridoki__inner { padding-top: 10px; } } .plan-noridoki__detail { color: #ffffff; padding: 200px 0 200px 0; } @media screen and (max-width: 1024px) { .plan-noridoki__detail { padding: 200px 20px 200px 20px; } } @media screen and (max-width: 767px) { .plan-noridoki__detail { padding: 50px 20px 70px 20px; } } .plan-noridoki__detail.orange { background-color: #f47b45; } .plan-noridoki__detail .plan-noridoki__unit { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; } @media screen and (max-width: 767px) { .plan-noridoki__detail .plan-noridoki__unit { display: block; } } .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left { width: 50%; margin-right: 60px; } @media screen and (max-width: 767px) { .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left { width: 100%; } } .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left h3 { font-size: 34px; font-weight: bold; padding: 0 0 20px 0; line-height: 1; } @media screen and (max-width: 767px) { .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left h3 { font-size: 25px; line-height: 1.2; } } .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left .font-style02 { font-size: 120px; } @media screen and (max-width: 767px) { .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left .font-style02 { font-size: 50px; } } .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--left .txt { font-size: 18px; line-height: 2; } .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--right { width: 50%; margin: auto 0; } @media screen and (max-width: 767px) { .plan-noridoki__detail .plan-noridoki__unit .plan-noridoki__unit--right { width: 100%; margin: 0 auto; padding: 50px; } } .plan-noridoki__title { font-size: 34px; font-weight: bold; text-align: center; padding: 70px 0 40px 0; } @media screen and (max-width: 767px) { .plan-noridoki__title { font-size: 25px; padding: 20px 0 20px 0; } } .plan-noridoki__features { display: flex; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 0 100px 0; } @media screen and (max-width: 767px) { .plan-noridoki__features { display: block; padding-bottom: 40px; } } .plan-noridoki__features .plan-noridoki__cards { border-radius: 4px; background-color: #ffffff; color: #222222; width: 38%; margin-right: 2%; padding: 20px; } @media screen and (max-width: 767px) { .plan-noridoki__features .plan-noridoki__cards { width: 100%; margin-bottom: 20px; } } .plan-noridoki__features .plan-noridoki__cards h3 { font-size: 22px; font-weight: bold; text-align: center; padding-bottom: 25px; } .plan-noridoki__features .plan-noridoki__cards .plan-noridoki__icon { text-align: center; margin-bottom: 20px; } .plan-noridoki__features .plan-noridoki__cards .plan-noridoki__txt { font-size: 16px; } .plan-halfmax { background-image: url(./assets/images/plan/plan_img18.svg); background-repeat: no-repeat; background-position: 0 106px; background-size: 1150px; } @media screen and (max-width: 1024px) { .plan-halfmax { background-position: 0 55px; background-size: 850px; } } @media screen and (max-width: 767px) { .plan-halfmax { background-position: 0 40px; background-size: 380px; } } .plan-halfmax__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 200px 0 0 0; } .plan-halfmax__inner .title-img { text-align: center; padding: 80px 0 80px 0; } @media screen and (max-width: 1024px) { .plan-halfmax__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .plan-halfmax__inner { padding-top: 60px; } .plan-halfmax__inner .title-img { width: 60%; margin: 0 auto; padding: 20px; } } .plan-halfmax__inner h2 { color: #363535; font-size: 56px; font-weight: bold; padding-bottom: 20px; line-height: 1.3; } @media screen and (max-width: 1024px) { .plan-halfmax__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .plan-halfmax__inner h2 { font-size: 24px; } } .plan-halfmax__detail { color: #222222; padding: 0 0 100px 0; } @media screen and (max-width: 1024px) { .plan-halfmax__detail { padding: 200px 20px 200px 20px; } } @media screen and (max-width: 767px) { .plan-halfmax__detail { padding: 0 20px 70px 20px; } } .plan-halfmax__detail .plan-halfmax__unit { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; } @media screen and (max-width: 767px) { .plan-halfmax__detail .plan-halfmax__unit { display: block; } } .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--left { width: 50%; margin-right: 60px; } @media screen and (max-width: 767px) { .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--left { width: 100%; margin-right: 0; } } .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--left h3 { font-size: 34px; font-weight: bold; padding: 0 0 20px 0; } @media screen and (max-width: 767px) { .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--left h3 { font-size: 25px; line-height: 1.2; } } .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--left .txt { font-size: 18px; line-height: 2; } .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--right { width: 50%; margin: auto 0; } @media screen and (max-width: 767px) { .plan-halfmax__detail .plan-halfmax__unit .plan-halfmax__unit--right { width: 100%; margin: 0 auto; padding: 0 50px; } } .plan-halfmax__title { font-size: 34px; font-weight: bold; text-align: center; padding: 70px 0 40px 0; } @media screen and (max-width: 767px) { .plan-halfmax__title { font-size: 25px; padding: 20px 0 20px 0; } } .plan-halfmax__features { display: flex; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 0 100px 0; } @media screen and (max-width: 767px) { .plan-halfmax__features { display: block; padding-bottom: 40px; } } .plan-halfmax__features .plan-halfmax__cards { border-radius: 4px; border: 4px solid #dd0716; background-color: #ffffff; color: #222222; width: 38%; margin-right: 2%; padding: 20px; } @media screen and (max-width: 767px) { .plan-halfmax__features .plan-halfmax__cards { width: 100%; margin-bottom: 20px; } } .plan-halfmax__features .plan-halfmax__cards h3 { font-size: 22px; font-weight: bold; text-align: center; padding-bottom: 25px; } .plan-halfmax__features .plan-halfmax__cards .plan-halfmax__icon { text-align: center; margin-bottom: 20px; } .plan-halfmax__features .plan-halfmax__cards .plan-halfmax__txt { font-size: 16px; } .plan-halfmax__img { background-image: url(./assets/images/about/about_img05.jpg); background-repeat: no-repeat; } .plan-halfmax__img .plan-halfmax__unit { position: relative; height: 900px; padding: 80px 0 50px 0; } @media screen and (max-width: 1024px) { .plan-halfmax__img .plan-halfmax__unit { height: 530px; } } @media screen and (max-width: 767px) { .plan-halfmax__img .plan-halfmax__unit { position: relative; height: 520px; padding: 20px 0 50px 0; } } .plan-halfmax__img .plan-halfmax__unit .plan-halfmax__unit--left img { width: 45%; } @media screen and (max-width: 767px) { .plan-halfmax__img .plan-halfmax__unit .plan-halfmax__unit--left img { background-position: 0 90px; background-size: 100%; padding: 0 20px; } } .plan-halfmax__img .plan-halfmax__unit .plan-halfmax__unit--right img { width: 100%; } .btn02.red { background-color: #dd0716; color: #ffffff; } /* よくある質問 */ /*---------------------------------------------------*/ .qa-cate__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 200px 0 0 0; } @media screen and (max-width: 1024px) { .qa-cate__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .qa-cate__inner { padding-top: 60px; } } .qa-cate__inner h2 { color: #363535; font-size: 48px; font-weight: bold; padding-bottom: 20px; line-height: 1.3; } @media screen and (max-width: 1024px) { .qa-cate__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .qa-cate__inner h2 { font-size: 24px; } } .qa-cate__inner .qa-cate__txt { font-size: 18px; padding-bottom: 20px; } .qa-cate__unit { max-width: 1200px; width: 100%; margin: 0 auto 100px auto; padding: 50px 0 0 0; } @media screen and (max-width: 1024px) { .qa-cate__unit { margin: 0 auto 40px auto; padding: 0 20px 20px 20px; } } @media screen and (max-width: 1024px) and (max-width: 767px) { .qa-cate__unit { padding-top: 0; margin-bottom: 0; } } .qa-cate__unit ul { display: flex; } @media screen and (max-width: 767px) { .qa-cate__unit ul { flex-wrap: wrap; } } .qa-cate__unit ul li { border: 4px solid #c01213; color: #c01213; font-size: 16px; font-weight: bold; margin-right: 20px; text-align: center; width: 285px; } @media screen and (max-width: 767px) { .qa-cate__unit ul li { margin-right: 2%; margin-bottom: 20px; width: 49%; } .qa-cate__unit ul li:nth-child(2n) { margin-right: 0; } } .qa-cate__unit ul li:last-child { margin-right: 0; } .qa-cate__unit ul li a { display: inline-block; padding: 27px 60px; } @media screen and (max-width: 1024px) { .qa-cate__unit ul li a { padding: 18px 10px; } } .qa-item__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0; } @media screen and (max-width: 1024px) { .qa-item__inner { padding: 20px 20px 20px 20px; } } .qa-item__inner h2 { color: #c01213; font-size: 36px; font-weight: bold; padding: 60px 0 25px 0; } @media screen and (max-width: 1024px) { .qa-item__inner h2 { padding-top: 10px; } } @media screen and (max-width: 767px) { .qa-item__inner h2 { font-size: 24px; padding: 0 0 10px 0; } } .qa-item__inner .qa-list dl { position: relative; margin: 30px 0 20px 0; cursor: pointer; border: 2px solid #c01213; } .qa-item__inner .qa-list dl:first-child { margin-top: 0; } .qa-item__inner .qa-list dl::after { position: absolute; top: 35px; right: 26px; display: block; width: 7px; height: 7px; margin: auto; content: ""; transform: rotate(135deg); border-top: 2px solid #000; border-right: 2px solid #000; } @media screen and (max-width: 767px) { .qa-item__inner .qa-list dl::after { top: 24px; } } .qa-item__inner .qa-list .open::after { transform: rotate(-45deg); } .qa-item__inner .qa-list dl dt { border: 2px solid #c01213; font-size: 22px; position: relative; margin: 0; padding: 20px 60px 20px 80px; font-weight: bold; background: #ffffff; } @media screen and (max-width: 767px) { .qa-item__inner .qa-list dl dt { font-size: 18px; padding: 15px 31px 15px 60px; } } .qa-item__inner .qa-list dl dt::before { font-size: 40px; line-height: 1; position: absolute; top: 16px; left: 20px; display: block; content: "Q."; color: #fa8f8f; } @media screen and (max-width: 767px) { .qa-item__inner .qa-list dl dt::before { font-size: 28px; top: 12px; } } .qa-item__inner .qa-list dl dd::before { font-size: 40px; line-height: 1; position: absolute; left: 20px; display: block; content: "A."; font-weight: bold; color: #8fc9fa; } @media screen and (max-width: 767px) { .qa-item__inner .qa-list dl dd::before { font-size: 28px; top: 16px; } } .qa-item__inner .qa-list dl dd { position: relative; margin: 0; padding: 20px 20px 20px 80px; } .qa-item__inner .qa-list dl dd p { font-size: 18px; margin: 30px 0 0; } .qa-item__inner .qa-list dl dd p:first-child { margin-top: 0; } @media screen and (max-width: 767px) { .qa-list dl { margin: 10px 0 0; } .qa-list dl:after { top: 20px; right: 20px; width: 7px; height: 7px; } .qa-list dl dt { padding: 16px 40px 16px 50px; font-size: 14px; line-height: 1.25; } .qa-list dl dt::before { font-size: 14px; top: 20px; left: 20px; } .qa-list dl dd::before { font-size: 14px; left: 20px; margin-top: 5px; } .qa-list dl dd { margin: 0; padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child { margin-top: 0; } } /* 会社概要 */ /*---------------------------------------------------*/ .company-info .company-img01 { margin-top: 150px; margin-right: 15%; } @media screen and (max-width: 767px) { .company-info .company-img01 { margin-top: 50px; } } .company-info .company-img01 img { height: auto; } .company-info__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 50px 20px 0 20px; } @media screen and (max-width: 1024px) { .company-info__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .company-info__inner { padding: 20px 20px 20px 20px; } } .company-info__inner h2 { color: #363535; font-size: 40px; font-weight: bold; padding-bottom: 70px; line-height: 1.3; } @media screen and (max-width: 1024px) { .company-info__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .company-info__inner h2 { font-size: 22px; padding-bottom: 20px; } } .company-info__inner .company-info__unit { display: flex; padding: 0 0 100px 0; max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .company-info__inner .company-info__unit { display: block; padding-bottom: 0; } } .company-info__inner .company-info__unit .company-info__unit--left { width: 30%; text-align: center; margin: auto 0; } @media screen and (max-width: 767px) { .company-info__inner .company-info__unit .company-info__unit--left { width: 100%; } .company-info__inner .company-info__unit .company-info__unit--left .img { width: 42%; margin: 0 auto; } } .company-info__inner .company-info__unit .company-info__unit--right { width: 70%; font-size: 16px; line-height: 1.4; margin-right: 0; } .company-info__inner .company-info__unit .company-info__unit--right .txt01 { font-size: 16px; padding-bottom: 30px; } .company-info__inner .company-info__unit .company-info__unit--right ul { padding-bottom: 30px; } .company-info__inner .company-info__unit .company-info__unit--right ul li { line-height: 1.8; } @media screen and (max-width: 767px) { .company-info__inner .company-info__unit .company-info__unit--right ul li { font-size: 16px; text-indent: -16px; padding-left: 13px; } } @media screen and (max-width: 1024px) { .company-info__inner .company-info__unit .company-info__unit--right { font-size: 16px; } } @media screen and (max-width: 767px) { .company-info__inner .company-info__unit .company-info__unit--right { width: 100%; } } .company-overview .company-img02 { text-align: right; margin-left: 15%; } .company-overview .company-img02 img { height: auto; } .company-overview__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 50px 0 0 0; } @media screen and (max-width: 1024px) { .company-overview__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .company-overview__inner { padding-top: 50px; } } .company-overview__inner h2 { color: #363535; font-size: 40px; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 1024px) { .company-overview__inner h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .company-overview__inner h2 { font-size: 24px; padding-bottom: 20px; } } .company-overview__inner .company-overview__unit { display: flex; padding: 0 0 100px 0; max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .company-overview__inner .company-overview__unit { display: block; padding-bottom: 30px; } } .company-overview__inner .company-overview__unit .company-overview__unit--left { width: 30%; text-align: center; margin: auto 0; } @media screen and (max-width: 767px) { .company-overview__inner .company-overview__unit .company-overview__unit--left { width: 100%; } } .company-overview__inner .company-overview__unit .company-overview__unit--right { width: 70%; font-size: 16px; line-height: 1.4; margin-right: 2%; } .company-overview__inner .company-overview__unit .company-overview__unit--right th, .company-overview__inner .company-overview__unit .company-overview__unit--right td { padding-bottom: 20px; line-height: 1.6; } .company-overview__inner .company-overview__unit .company-overview__unit--right th .br-01, .company-overview__inner .company-overview__unit .company-overview__unit--right td .br-01 { display: none; } @media screen and (max-width: 430px) { .company-overview__inner .company-overview__unit .company-overview__unit--right th .br-01, .company-overview__inner .company-overview__unit .company-overview__unit--right td .br-01 { display: block; } } .company-overview__inner .company-overview__unit .company-overview__unit--right th { width: 33%; } @media screen and (max-width: 1024px) { .company-overview__inner .company-overview__unit .company-overview__unit--right { font-size: 16px; } } @media screen and (max-width: 767px) { .company-overview__inner .company-overview__unit .company-overview__unit--right { font-size: 14px; width: 100%; } } /* お問い合わせ */ /*---------------------------------------------------*/ .contact-detail__inner { max-width: 780px; width: 100%; margin: 0 auto; padding: 50px 0 0 0; overflow: hidden; } .contact-detail__inner h2 { font-size: 30px; font-weight: bold; text-align: center; } .contact-detail__inner .txt01 { font-size: 18px; padding: 50px 0 100px 0; } @media screen and (max-width: 767px) { .contact-detail__inner .txt01 { font-size: 16px; padding: 10px 0 20px 0; } } .contact-detail__inner .txt01 .txt-style01 { font-size: 48px; font-weight: bold; } @media screen and (max-width: 1024px) { .contact-detail__inner .txt01 .txt-style01 { font-size: 36px; } .contact-detail__inner .txt01 .txt-break::after { content: "\a"; white-space: pre; } } .contact-detail__inner .txt02 { font-size: 18px; } @media screen and (max-width: 1024px) { .contact-detail__inner { padding: 120px 20px 20px 20px; } } @media screen and (max-width: 767px) { .contact-detail__inner { padding-top: 50px; } } .contact-detail__inner .Form { margin-top: 30px; margin-left: auto; margin-right: auto; max-width: 720px; } @media screen and (max-width: 480px) { .contact-detail__inner .Form { margin-top: 40px; } } .contact-detail__inner .Form-Item { border-top: 1px solid #ddd; padding-top: 30px; padding-bottom: 30px; width: 100%; display: flex; align-items: center; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item { padding-left: 14px; padding-right: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; } } .contact-detail__inner .Form-Item:nth-child(5) { border-bottom: 1px solid #ddd; } .contact-detail__inner .Form-Item-Label { width: 100%; max-width: 248px; letter-spacing: 0.05em; font-weight: bold; font-size: 18px; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item-Label { max-width: inherit; display: flex; align-items: center; font-size: 15px; padding-bottom: 10px; } .contact-detail__inner .Form-Item p { width: 100%; } } .contact-detail__inner .Form-Item-Label.isMsg { margin-top: 8px; margin-bottom: auto; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item-Label.isMsg { margin-top: 0; } } .contact-detail__inner .Form-Item-Label-Required { border-radius: 6px; margin-left: 8px; padding: 4px; width: 48px; display: inline-block; text-align: center; background: #db0b0b; color: #fff; font-size: 12px; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item-Label-Required { border-radius: 4px; padding-top: 4px; padding-bottom: 4px; width: 32px; font-size: 10px; } } .contact-detail__inner .Form-Item-Input { border: 1px solid #ddd; border-radius: 6px; color: #222222; padding-left: 1em; padding-right: 1em; height: 48px; flex: 1; width: 100%; max-width: 410px; background: #eaedf2; font-size: 18px; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item-Input { margin-left: 0; margin-top: 18px; height: 40px; flex: inherit; font-size: 15px; } } .contact-detail__inner .Form-Item-Textarea { border: 1px solid #ddd; border-radius: 6px; padding: 1em; height: 216px; flex: 1; width: 100%; max-width: 410px; background: #eaedf2; font-size: 18px; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Item-Textarea { margin-top: 18px; margin-left: 0; height: 200px; flex: inherit; font-size: 15px; } } .contact-detail__inner .Form-Btn { border-radius: 6px; margin-top: 32px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; width: 280px; display: block; letter-spacing: 0.05em; background: #db0b0b; color: #fff; font-weight: bold; font-size: 20px; text-align: center; } @media screen and (max-width: 480px) { .contact-detail__inner .Form-Btn { margin-top: 24px; padding-top: 8px; padding-bottom: 8px; width: 160px; font-size: 16px; } } .contact-detail__thanks h2 { font-size: 30px; font-weight: bold; text-align: center; padding-bottom: 20px; } @media screen and (max-width: 530px) { .contact-detail__thanks h2 { font-size: 22px; } } .contact-detail__thanks h2 .br-pc { display: none; } @media screen and (max-width: 530px) { .contact-detail__thanks h2 .br-pc { display: block; } } .contact-detail__thanks .txt { font-size: 18px; text-align: center; line-height: 2; padding-bottom: 30px; } @media screen and (max-width: 530px) { .contact-detail__thanks .txt { font-size: 14px; } } .contact-detail__thanks .home-link { font-size: 20px; font-weight: bold; text-align: center; } @media screen and (max-width: 530px) { .contact-detail__thanks .home-link { font-size: 16px; } } .contact-detail__thanks .home-link a { color: #222222; transition: 0.5s; } .contact-detail__thanks .home-link a:hover { color: #e82323; transition: 0.5s; } /* 404ページ */ /*---------------------------------------------------*/ .error-detail__inner { max-width: 780px; width: 100%; margin: 0 auto; padding: 50px 0 0 0; } .error-detail__inner h2 { font-size: 30px; font-weight: bold; text-align: center; padding-bottom: 20px; } @media screen and (max-width: 530px) { .error-detail__inner h2 { font-size: 22px; } } .error-detail__inner h2 .br-pc { display: none; } @media screen and (max-width: 530px) { .error-detail__inner h2 .br-pc { display: block; } } .error-detail__inner .txt { font-size: 18px; text-align: center; line-height: 2; padding-bottom: 30px; } @media screen and (max-width: 530px) { .error-detail__inner .txt { font-size: 14px; } } .error-detail__inner .home-link { font-size: 20px; font-weight: bold; text-align: center; } @media screen and (max-width: 530px) { .error-detail__inner .home-link { font-size: 16px; } } .error-detail__inner .home-link a { color: #222222; transition: 0.5s; } .error-detail__inner .home-link a:hover { color: #e82323; transition: 0.5s; } .news-archive { background: #fff; padding: 60px 20px; } .news-archive__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 32px; } .news-main { flex: 1; min-width: 0; } .sidebar { width: 280px; flex-shrink: 0; } .news-text-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e5e5e5; } .news-text-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; } .news-text-date { min-width: 100px; font-size: 14px; color: #555; } .news-text-category { display: inline-block; padding: 4px 10px; border: 1px solid #0078c8; border-radius: 999px; font-size: 12px; font-weight: 600; color: #0078c8; text-decoration: none; white-space: nowrap; transition: 0.3s; } .news-text-category:hover { background: #0078c8; color: #fff; } .news-text-title { flex: 1; font-size: 16px; color: #111; text-decoration: none; transition: color 0.3s, transform 0.3s; } .news-text-title:hover { color: #0078c8; transform: translateX(6px); } .widget { background: #fff; padding: 24px; margin-bottom: 24px; } .widget-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #eee; position: relative; } .widget-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 40px; height: 2px; background: #DB0B0B; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li { margin-bottom: 10px; } .widget ul a { font-size: 0.9rem; color: #333; text-decoration: none; } .widget ul a:hover { text-decoration: underline; } @media (max-width: 768px) { .news-archive__inner { flex-direction: column; } .sidebar { width: 100%; } .news-text-item { flex-wrap: wrap; gap: 8px; } .news-text-date { min-width: auto; } } .news-article { background: #fff; } .news-article-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .news-article-title { font-size: 1.8rem; font-weight: 700; line-height: 1.4; margin-bottom: 24px; color: #111; } .news-article-thumb { margin-bottom: 32px; } .news-article-thumb img { width: 100%; height: auto; border-radius: 8px; } .news-article-content { font-size: 1rem; line-height: 1.9; color: #333; } .news-article-content p { margin-bottom: 1.5em; } .news-article-content h2 { font-size: 1.4rem; margin: 2.5em 0 1em; padding-left: 12px; border-left: 4px solid #0078c8; } .news-article-back { margin-top: 48px; } .news-article-back a { font-size: 0.9rem; color: #0078c8; text-decoration: none; } .news-article-back a:hover { text-decoration: underline; } @media (max-width: 768px) { .news-article-title { font-size: 1.4rem; } } /* ===================================== Campaign Archive（PC First） ===================================== */ .campaign-archive { padding: 100px 0; } .campaign-archive__inner { max-width: 1200px; margin: 0 auto; padding: 0 30px; display: flex; gap: 50px; align-items: flex-start; } /* ===================================== Main ===================================== */ .campaign-main { flex: 1; } @media (max-width: 767px) { .campaign-main { width: 100%; } } /* ===================================== Post Grid（PC） ===================================== */ .post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } /* ===================================== Post Card ===================================== */ .post-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .post-card a { display: block; height: 100%; color: inherit; text-decoration: none; } .post-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .post-card__image { position: relative; padding-top: 62%; overflow: hidden; } .post-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .post-card__body { padding: 20px; } .post-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; } .post-card__date { color: #888; } .post-card__category { background: #ffd800; color: #000; font-weight: 700; padding: 3px 10px; border-radius: 4px; font-size: 12px; line-height: 1; } .post-card__title { font-size: 16px; font-weight: 700; line-height: 1.6; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================== Pagination ===================================== */ .pagination { margin-top: 60px; text-align: center; } .pagination-list { display: inline-flex; gap: 10px; } .pagination-item a, .pagination-item span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: 700; background: #fff; border: 1px solid #ddd; color: #333; } .pagination-item.is-active span { background: #ffd800; border-color: #ffd800; } .pagination-item.is-disabled span { opacity: 0.4; } /* ===================================== Sidebar（PC） ===================================== */ .sidebar { max-width: 300px; width: 100%; } .sidebar .widget { background: #fff; padding: 24px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .sidebar .widget-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; padding-bottom: 6px; border-bottom: 2px solid #ffd800; } .archive-list li:not(:last-child) { margin-bottom: 12px; } .archive-list li a { font-size: 14px; color: #333; } .archive-list li a:hover { text-decoration: underline; } /* ===================================== Tablet（768px以下） ===================================== */ @media (max-width: 768px) { .post-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .campaign-archive__inner { gap: 40px; } .sidebar { width: 200px; } } /* ===================================== Smartphone（768px以下） ===================================== */ @media (max-width: 767px) { .campaign-archive { padding: 60px 0; } .campaign-archive__inner { flex-direction: column; } .sidebar { width: 100%; } .post-grid { grid-template-columns: 1fr; } .post-card__title { font-size: 15px; } } /* ========================= campaign single layout ========================= */ .campaign-single { padding: 80px 0; } .campaign-single__inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 40px; padding: 0 20px; } @media (max-width: 1024px) { .campaign-single__inner { max-width: 100%; } } @media (max-width: 767px) { .campaign-single__inner { display: block; } } /* メイン記事 */ .campaign-article { flex: 1; background: #fff; } /* サイドバー */ .sidebar { max-width: 300px; flex-shrink: 0; } @media (max-width: 1024px) { .sidebar { max-width: 30%; } } @media (max-width: 767px) { .sidebar { max-width: 100%; margin-top: 50px; } } /* 記事ヘッダー */ .campaign-article__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font-size: 14px; } .campaign-article__date { color: #777; } .campaign-article__category { background: #ffd800; padding: 4px 10px; font-size: 12px; font-weight: bold; } /* タイトル */ .campaign-article__title { font-size: 28px; font-weight: bold; line-height: 1.4; margin-bottom: 24px; } /* メイン画像 */ .campaign-article__image { margin-bottom: 32px; } .campaign-article__image img { width: 100%; height: auto; display: block; } /* 本文 */ .campaign-article__body { font-size: 16px; line-height: 1.8; } .campaign-article__body p { margin-bottom: 20px; } .campaign-article__body h2 { font-size: 22px; margin: 40px 0 16px; border-left: 4px solid #ffd800; padding-left: 12px; } .article-nav { margin-top: 60px; padding-top: 24px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .article-nav__back { font-size: 20px; font-weight: bold; } .article-nav__pager { display: flex; font-size: 20px; gap: 24px; } /* 767px以下でキャンペーン一覧の画像を横幅いっぱいに */ @media screen and (max-width: 767px) { /* post-grid自体をフル幅に */ body.post-type-archive-campaign .post-grid { display: block; /* 1カラム化 */ width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* 各記事カードも横幅いっぱいに */ body.post-type-archive-campaign .post-card { width: 100% !important; margin-bottom: 16px; /* 下にスペース */ padding: 0 !important; } /* 画像を横幅いっぱいに */ body.post-type-archive-campaign .post-card__image img { width: 100% !important; height: auto !important; display: block; } } /* HOME */ /*---------------------------------------------------*/ @media screen and (max-width: 1024px) { .Key-visual { margin-top: 64px; } } .top-news .top-news__inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 100px 0 0 0; } .top-news .top-news__inner .top-news__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; text-align: center; } @media screen and (max-width: 1024px) { .top-news .top-news__inner .top-news__read { font-size: 26px; } } .top-news .top-news__inner h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; text-align: center; padding-bottom: 70px; } @media screen and (max-width: 1024px) { .top-news .top-news__inner h2 { font-size: 34px; } } @media screen and (max-width: 430px) { .top-news .top-news__inner h2 { padding-bottom: 20px; } } .news-list { max-width: 1000px; margin: 0 auto; padding: 0 20px; } .news-list .news-item { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ddd; } .news-list .news-item:first-child { border-top: 1px solid #ddd; } @media (max-width: 768px) { .news-list .news-item { flex-wrap: wrap; gap: 10px; } } .news-list .news-item .news-date { font-size: 14px; color: #1a1a1a; white-space: nowrap; } .news-list .news-item .news-label { font-size: 12px; padding: 4px 10px; border: 1px solid #00a6c8; color: #00a6c8; border-radius: 20px; white-space: nowrap; } .news-list .news-item .news-title { margin: 0; font-size: 15px; line-height: 1.6; color: #111; } /* ボタン */ .news-button { margin-top: 50px; text-align: center; } .news-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 36px; background: #000; color: #fff; text-decoration: none; border-radius: 999px; font-size: 15px; transition: opacity 0.3s; } .news-btn:hover { opacity: 0.8; } .news-btn-arrow { font-size: 16px; } .news-title { margin: 0; } .news-title a { position: relative; display: inline-block; color: #111; text-decoration: none; font-size: 15px; line-height: 1.6; transition: color 0.3s ease, transform 0.3s ease; /* 下線（最初は見えない） */ } .news-title a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: #00a6c8; transition: width 0.3s ease; } .news-title a:hover { color: #00a6c8; transform: translateX(6px); } .news-title a:hover::after { width: 100%; } .news-body { padding: 24px; } .news-body .news-title { font-size: 18px; font-weight: 700; line-height: 1.6; margin: 0 0 16px; color: #1a1a1a; } .news-body .news-date { font-size: 14px; color: #7a7a7a; } @media (max-width: 1024px) { .news-list { flex-wrap: wrap; } .news-list .news-item { width: calc((100% - 24px) / 2); } .news-body { padding: 20px; } .news-body .news-title { font-size: 16px; } } @media (max-width: 768px) { .news-list { flex-direction: column; } .news-list .news-item { width: 100%; } .news-body { padding: 16px; } .news-body .news-title { font-size: 15px; } .news-body .news-date { font-size: 13px; } } .news-more { margin-top: 48px; text-align: center; } .news-more__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 260px; padding: 16px 32px; font-size: 15px; font-weight: 700; text-decoration: none; color: #F86306; background-color: #ffffff; border: 2px solid #F86306; border-radius: 999px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .news-more__btn:hover { color: #ffffff; background-color: #F86306; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(248, 99, 6, 0.35); } @media (max-width: 768px) { .news-more { margin-top: 32px; } .news-more__btn { width: 100%; max-width: 320px; padding: 14px 24px; font-size: 14px; } } .topAbout { background-image: url(./assets/images/top/top_bg001.svg); background-repeat: no-repeat; background-position: 101px -10px; width: 100%; } @media screen and (max-width: 390px) { .topAbout { background-position: -110px 70px; } } .topAbout .topAbout__inner { max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 1024px) { .topAbout .topAbout__inner { padding: 80px 20px; } } .topAbout .topAbout__inner .topAbout__unit { display: flex; padding: 100px 0 120px 0; } @media screen and (max-width: 1024px) { .topAbout .topAbout__inner .topAbout__unit { padding: 0; } } @media screen and (max-width: 767px) { .topAbout .topAbout__inner .topAbout__unit { display: block; padding: 0; } } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left { width: 50%; } @media screen and (max-width: 767px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left { width: 100%; } } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left .topAbout__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 1024px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left { margin-right: 2%; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left .topAbout__read { font-size: 26px; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left h2 { font-size: 30px; } } @media screen and (max-width: 767px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left h2 { padding-bottom: 20px; } } @media screen and (max-width: 375px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--left h2 { font-size: 30px; } } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right { width: 50%; font-size: 18px; line-height: 1.8; } @media screen and (max-width: 767px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right { width: 100%; } } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .topAbout__text { padding-bottom: 20px; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .btn { border: 4px solid #D90C0B; width: 300px; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .btn a { color: #D90C0B; display: block; text-align: center; padding: 10px 40px; transition: 0.5s; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .btn a:hover { background-color: #D90C0B; color: #ffffff; transition: 0.5s; } @media screen and (max-width: 1024px) { .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right { font-size: 16px; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .btn { width: 240px; } .topAbout .topAbout__inner .topAbout__unit .topAbout__unit--right .btn a { padding: 5px 20px; } } .topService { background-color: #FADF12; } .topService .topService__inner { padding: 100px 0; } @media screen and (max-width: 1024px) { .topService .topService__inner { padding: 80px 20px; } } @media screen and (max-width: 767px) { .topService .topService__inner { display: block; padding: 80px 20px; } } .topService .topService__inner .topService__unit { display: flex; padding: 0 0 50px 0; max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit { display: block; padding-bottom: 10px; } } .topService .topService__inner .topService__unit .topService__unit--left { width: 50%; } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit .topService__unit--left { width: 100%; } } .topService .topService__inner .topService__unit .topService__unit--left .topService__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; } .topService .topService__inner .topService__unit .topService__unit--left h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 1024px) { .topService .topService__inner .topService__unit .topService__unit--left { margin-right: 2%; } .topService .topService__inner .topService__unit .topService__unit--left .topService__read { font-size: 26px; } .topService .topService__inner .topService__unit .topService__unit--left h2 { font-size: 34px; } } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit .topService__unit--left h2 { font-size: 30px; padding-bottom: 20px; } } @media screen and (max-width: 375px) { .topService .topService__inner .topService__unit .topService__unit--left h2 { font-size: 32px; } } .topService .topService__inner .topService__unit .topService__unit--right { width: 50%; font-size: 18px; line-height: 1.8; margin: auto 0; } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit .topService__unit--right { width: 100%; } } .topService .topService__inner .topService__unit .topService__unit--right .topService__text { padding-bottom: 20px; } @media screen and (max-width: 1024px) { .topService .topService__inner .topService__unit .topService__unit--right .topService__text { font-size: 16px; } } .topService .topService__inner .topService__unit02 { display: flex; margin: 0 auto; width: 80%; } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit02 { display: block; } } .topService .topService__inner .topService__unit02 .img { width: 100%; margin-right: 3%; } .topService .topService__inner .topService__unit02 .img:last-child { margin-right: 0; } .topService .topService__inner .topService__unit02 .img img { width: 100%; height: auto; } @media screen and (max-width: 767px) { .topService .topService__inner .topService__unit02 .img { margin: 0 auto; } .topService .topService__inner .topService__unit02 .img:last-child { margin-top: 20px; margin-right: auto; } } @media screen and (max-width: 1024px) { .topService .topService__inner .topService__unit02 { width: 100%; } } .paper .paper__inner { max-width: 1000px; width: 100%; margin: 0 auto; padding: 100px 0 0 0; } @media screen and (max-width: 1024px) { .paper .paper__inner { padding: 80px 20px; } } .paper .paper__inner .paper__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; text-align: center; } @media screen and (max-width: 1024px) { .paper .paper__inner .paper__read { font-size: 26px; } } .paper .paper__inner h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; text-align: center; padding-bottom: 70px; } @media screen and (max-width: 1024px) { .paper .paper__inner h2 { font-size: 34px; } } @media screen and (max-width: 430px) { .paper .paper__inner h2 { padding-bottom: 20px; } } .paper .post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; } @media (max-width: 1024px) { .paper .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .paper .post-grid { grid-template-columns: 1fr; } } .paper .post-card { background: #fff; } .paper .post-card a { display: block; text-decoration: none; color: #333; } .paper .post-card { /* 画像 */ } .paper .post-card__image { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; } .paper .post-card__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform 0.3s ease; } .paper .post-card { /* テキストエリア（画像の下） */ } .paper .post-card__body { padding-top: 10px; position: static; } .paper .post-card { /* 日付＋カテゴリー */ } .paper .post-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: #777; } .paper .post-card__category { background: #f2f2f2; padding: 2px 8px; border-radius: 12px; font-size: 12px; white-space: nowrap; } .paper .post-card { /* 見出し */ } .paper .post-card__title { font-size: 18px; line-height: 1.6; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .paper .post-card:hover img { transform: scale(1.05); } .topReason { background-image: url(./assets/images/top/top_bg002.svg); background-repeat: no-repeat; background-position: 1200px -60px; width: 100%; } @media screen and (max-width: 1024px) { .topReason { background-position: 120px -60px; } } .topReason .topReason__inner { padding: 100px 0; } @media screen and (max-width: 1024px) { .topReason .topReason__inner { padding: 80px 20px; } } .topReason .topReason__inner .topReason__unit { display: flex; padding: 0 0 50px 0; max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit { display: block; } } .topReason .topReason__inner .topReason__unit .topReason__unit--left { width: 50%; } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit .topReason__unit--left { width: 100%; } } .topReason .topReason__inner .topReason__unit .topReason__unit--left .topReason__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; } .topReason .topReason__inner .topReason__unit .topReason__unit--left h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__unit--left { margin-right: 2%; } .topReason .topReason__inner .topReason__unit .topReason__unit--left .topReason__read { font-size: 26px; } .topReason .topReason__inner .topReason__unit .topReason__unit--left h2 { font-size: 34px; } } @media screen and (max-width: 430px) { .topReason .topReason__inner .topReason__unit .topReason__unit--left h2 { font-size: 30px; } } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit .topReason__unit--left h2 { padding-bottom: 20px; } } @media screen and (max-width: 375px) { .topReason .topReason__inner .topReason__unit .topReason__unit--left h2 { font-size: 32px; } } .topReason .topReason__inner .topReason__unit .topReason__unit--right { width: 50%; font-size: 18px; line-height: 1.8; margin: auto 0; } .topReason .topReason__inner .topReason__unit .topReason__unit--right .topReason__text { padding-bottom: 20px; } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__unit--right { font-size: 16px; } } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit .topReason__unit--right { width: 100%; } } .topReason .topReason__inner .topReason__unit .topReason__box { margin-right: 4.2%; width: 37%; } .topReason .topReason__inner .topReason__unit .topReason__box:last-child { margin-right: 0; } .topReason .topReason__inner .topReason__unit .topReason__box .color { color: #D90C0B; font-size: 20px; font-weight: bold; padding-bottom: 5px; line-height: 1; } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__box .color { font-size: 16px; } } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__box .color { font-size: 18px; } } .topReason .topReason__inner .topReason__unit .topReason__box h3 { color: #363535; font-size: 26px; font-weight: bold; padding-bottom: 10px; } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__box h3 { font-size: 22px; } } @media screen and (max-width: 768px) { .topReason .topReason__inner .topReason__unit .topReason__box h3 { font-size: 18px; } } @media screen and (max-width: 430px) { .topReason .topReason__inner .topReason__unit .topReason__box h3 { font-size: 24px; } } .topReason .topReason__inner .topReason__unit .topReason__box img { width: 100%; height: auto; } .topReason .topReason__inner .topReason__unit .topReason__box .topReason__txt { font-size: 16px; padding-top: 10px; } @media screen and (max-width: 1024px) { .topReason .topReason__inner .topReason__unit .topReason__box .topReason__txt { font-size: 14px; } } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit .topReason__box { margin: 0 auto 30px auto; width: 80%; } } @media screen and (max-width: 767px) and (max-width: 430px) { .topReason .topReason__inner .topReason__unit .topReason__box { width: 100%; } } @media screen and (max-width: 767px) { .topReason .topReason__inner .topReason__unit .topReason__box:last-child { margin-right: auto; } } .select-car { background-color: #D90C0B; } .select-car .select-car__inner { max-width: 1200px; width: 100%; padding: 100px 0; margin: 0 auto; } @media screen and (max-width: 1024px) { .select-car .select-car__inner { padding: 80px 20px; } } @media screen and (max-width: 767px) { .select-car .select-car__inner { padding: 80px 0 20px 0; } } .select-car .select-car__inner .select-car__read { color: #ffffff; font-size: 40px; font-weight: bold; text-align: center; } @media screen and (max-width: 1024px) { .select-car .select-car__inner .select-car__read { font-size: 30px; } } .select-car .select-car__inner h2 { color: #ffffff; font-size: 48px; font-weight: bold; line-height: 1.3; text-align: center; padding-bottom: 70px; } @media screen and (max-width: 1024px) { .select-car .select-car__inner h2 { font-size: 30px; } } .select-car .select-car__inner .select-car__box { display: flex; gap: 0 4%; padding: 20px 0 20px 0; max-width: 1200px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .select-car .select-car__inner .select-car__box { display: flex; gap: 80% 0; } } .select-car .select-car__inner .select-car__box .select-car__img { margin: 10px 0; } @media screen and (max-width: 1024px) { .select-car .select-car__inner .select-car__box .select-car__img { margin: 20px auto 40px auto; width: 80%; } } @media screen and (max-width: 1024px) and (max-width: 767px) { .select-car .select-car__inner .select-car__box .select-car__img { width: 100%; } } @media screen and (max-width: 1024px) { .select-car .select-car__inner .select-car__box h3 { font-size: 18px; } .select-car .select-car__inner .select-car__box .ranking__price { font-size: 16px; font-weight: bold; } .select-car .select-car__inner .select-car__box .ranking__price .red { color: #D90C0B; font-size: 26px; font-weight: bold; } .select-car .select-car__inner .select-car__box .ranking__price .tax { font-size: 12px; } } @media screen and (max-width: 767px) { .select-car .select-car__inner .select-car__box { display: block; border-right: none; border-bottom: 1px solid #222222; width: 80%; margin: 0 auto 30px auto; } .select-car .select-car__inner .select-car__box:last-child { border-bottom: none; } } .topInfo { background-image: url(./assets/images/top/top_bg001.svg); background-repeat: no-repeat; background-position: 101px -10px; width: 100%; } @media screen and (max-width: 767px) { .topInfo { background-position: -100px 70px; } } .topInfo .topInfo__inner { padding: 85px 0; margin: 0 auto; max-width: 1200px; width: 100%; } @media screen and (max-width: 1024px) { .topInfo .topInfo__inner { padding: 85px 20px; } } .topInfo .topInfo__inner .topInfo__box { display: flex; } .topInfo .topInfo__inner .topInfo__box img { width: 100%; } .topInfo .topInfo__inner .topInfo__box .topInfo__left-img { margin-right: 40px; } @media screen and (max-width: 767px) { .topInfo .topInfo__inner .topInfo__box { display: block; } .topInfo .topInfo__inner .topInfo__box .topInfo__left-img { margin-right: 0; margin-bottom: 20px; } } .instagram { width: 100%; } .instagram .instagram__inner { padding: 85px 0; margin: 0 auto; max-width: 1200px; width: 100%; } @media screen and (max-width: 1024px) { .instagram .instagram__inner { padding: 85px 20px; } } .instagram .instagram__inner .paper__read { color: #DA0B0B; font-size: 40px; font-weight: bold; font-family: "Lato", sans-serif; text-align: center; } @media screen and (max-width: 1024px) { .instagram .instagram__inner .paper__read { font-size: 26px; } } .instagram .instagram__inner h2 { color: #363535; font-size: 48px; font-weight: bold; line-height: 1.3; text-align: center; padding-bottom: 70px; } @media screen and (max-width: 1024px) { .instagram .instagram__inner h2 { font-size: 34px; } } @media screen and (max-width: 430px) { .instagram .instagram__inner h2 { padding-bottom: 20px; } } .topImages { width: 100%; } .topImages .topImages__inner .topImages__box { display: flex; line-height: 0; margin-bottom: -200px; } @media screen and (max-width: 767px) { .topImages .topImages__inner .topImages__box { display: block; } }/*# sourceMappingURL=style.css.map */