@charset "utf-8"; /* Theme Name: sample theme */ /*** The new CSS reset - version 1.8.6 (last updated 15.6.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 exclude, because 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; } /* 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%; vertical-align: bottom; } /* 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; } /*==================================================================== 　全体設定 ====================================================================*/ /* wp崩れ対応 */ html { margin-top: 0; } :root { /* 全般 */ --white: #fff; --black: #231815; --light-gray: #f6f6f6; --middle-gray: #626f78; --dark-gray: #404e5a; --brown: #330000; --beige: #f8f4e6; --red: #c40018; --blue: #1f438c; --main-color: #003399; --main-font: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif; --fas: 'Font Awesome 6 Free'; --bg: url("common/img/bg.jpg") repeat center top /150px 150px; } body { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS P Gothic", sans-serif; background-color: var(--white); color: var(--black); } img { width: 100%; height: auto; } a{ display: block; } a:hover { filter: brightness(1.1); } i{ color: var(--black); } .tac{ text-align: center; } .mt1{margin-top: 1rem;} .mt2{margin-top: 2rem;} .mt3{margin-top: 3rem;} .mt4{margin-top: 4rem;} .mt5{margin-top: 5rem;} .mb1{margin-bottom: 1rem;} .mb2{margin-bottom: 2rem;} .mb3{margin-bottom: 3rem;} .mb4{margin-bottom: 4rem;} .mb5{margin-bottom: 5rem;} .pt1{padding-top: 1rem;} .pt2{padding-top: 2rem;} .pt3{padding-top: 3rem;} .pt4{padding-top: 4rem;} .pt5{padding-top: 5rem;} .pb1{padding-bottom: 1rem;} .pb2{padding-bottom: 2rem;} .pb3{padding-bottom: 3rem;} .pb4{padding-bottom: 4rem;} .pb5{padding-bottom: 5rem;} .fwb{ font-weight: bold; } .fsz70{font-size: 70%;} .fsz80{font-size: 80%;} .fsz90{font-size: 90%;} .inner { margin: 0 auto; padding: 0 20px; max-width: 1060px; } .inner-wide { margin: 0 auto; max-width: 1160px; } .red { color: var(--red); } .blue { color: var(--blue); } .bg-wood{ background: var(--bg); } .bg-white{ background-color: var(--white); } .bg-gray{ background-color: var(--light-gray); } .bg-beige{ background-color: var(--beige); } .pcOnly { display: block; } .spOnly, .tbOnly { display: none; } .none { display: none; } /*PAGE TOP設定 */ .pagetop-show {display: block;} /*PAGE TOPボタンの設定*/ .pagetop a { display: block; text-decoration: none; text-align: center; z-index: 9; position: fixed; right: 20px; bottom: 20px; border-radius: 0.5rem; background: rgba(0,0,0,0.3); width: 50px; line-height: 50px; color: #fff; } .header-logo:hover, a[href^="tel:"] :hover { opacity: 1; } .btn { text-align: center; } .btn a { position: relative; margin: 0 auto; display: inline-block; width: 100%; max-width: 300px; padding: 10px 40px; border: 3px solid var(--black); border-radius: 0.5rem; background: var(--white); } .btn a:hover { background: var(--black); color: var(--white); opacity: 1; } .btn.next a::after { position: absolute; font-family: var(--fas); content: "\f054"; top: calc(50% - 0.65rem); right: 1rem; font-size: 1.3rem; font-weight: bold; } .btn.back a::after { position: absolute; font-family: var(--fas); content: "\f053"; top: calc(50% - 0.65rem); left: 1rem; font-size: 1.3rem; font-weight: bold; } .btn a:hover::after { color: var(--white); } .btn.bt-line a{ padding: 10px 40px 10px 55px; } .btn.bt-line a::before { content: ""; position: absolute; top: calc(50% - 15px); left: 15px; width: 30px; height: 30px; background: url(common/img/icon_line.png) no-repeat center center/100% auto; } .btn.bt-mail a{ padding: 10px 40px 10px 50px; } .btn.bt-mail a::before { content: ""; position: absolute; top: calc(50% - 12px); left: 15px; width: 24px; height: 24px; background: url(common/img/icon_mail.svg) no-repeat center center/100% auto; } .btn.bt-mail a:hover::before{ background: url(common/img/icon_mail_hov.svg) no-repeat center center/100% auto; } .ly-section { padding-bottom: 50px; } h2 { padding-top: 40px; padding-bottom: 30px; color: var(--brown); text-align: center; font-size: 2.8rem; font-weight: normal; } h2 span { display: block; font-size: 0.3em; opacity: 0.7; letter-spacing: 0.3em; } .section-text{ padding: 10px 0 30px; text-align: center; } .card-list-wrap { padding-left: 40px; padding-right: 40px; } .card-list { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; } .card-list a { display: inline-block; width: calc(33% - 20px*2/3); margin-top: 20px; margin-right: 20px; background: var(--white); border-radius: 0.5rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .card-list a:nth-child(3n) { margin-right: 0; } .card-list a:hover { opacity: 1; } .card-list-item{ position: relative; padding-bottom: 6px; } .card-list-item.sumi::before{ content: "ご成約済"; position: absolute; top: 1rem; left: 1rem; width: 8rem; height: 3rem; padding: 0.5rem 0.5rem 2.5rem; border: 3px solid var(--red); border-radius: 0.5rem; color: var(--red); font-weight: bold; font-size: 1.4rem; text-align: center; z-index: 1; } .card-title { text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; padding: 10px 10px 0; font-size: 0.98rem; line-height: 1.4; font-weight: bold; } .card-txt, .card-sub { text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; padding: 0 10px 4px; font-size: 0.72rem; } .card-img { padding-top: 60%; position: relative; overflow: hidden; border-radius: 0.5rem 0.5rem 0 0 ; } .card-img img { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; transition: all 0.4s ease; object-fit: cover; /* 画像を見切れさせたくない場合はcontain */ } .card-list a:hover .card-img img { transform: scale(1.1); } /* 横長カード */ .row-card-list-item{ display: flex; gap: 30px; margin-bottom: 3rem; } .row-card-img{ width: 30%; } .row-card-txt-wrap{ flex: 1; } .row-card-title { font-size: 1.5rem; line-height: 1.4; border-bottom: 1px solid var(--black); padding-bottom: 4px; margin-bottom: 4px; } .row-card-txt, .row-card-sub { font-size: 1rem; border-bottom: 1px solid var(--black); padding-bottom: 4px; margin-bottom: 4px; } .flex{ display: flex; justify-content: center; gap: 50px; align-items: center; } .flex-img{ flex-basis: 30%; } .flex-img img{ border-radius: 0.8rem; } .table-alternate{ width: 100%; max-width: 800px; } .table-alternate th { padding: .5em 1em; width: 100%; max-width: 30%; text-align: left; font-weight: 700; vertical-align: top; line-height: 1.8em; } .table-alternate td { padding: .5em 1em; line-height: 1.8em; } .table-alternate tr:nth-child(odd) { background-color: var(--light-gray); } .table-alternate a{ text-decoration: underline; } /*==================================================================== 　ヘッダー設定 ====================================================================*/ .ly-header{ position: relative; } .header-top{ display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 30px; text-align: center; } a.header-logo img{ width: 220px; height: auto; } .header-top .contact-info{ display: flex; gap: 30px; } .header-top .contact-info .link{ display: block; font-size: 0.7rem; line-height: 1.2; } .header-top .contact-info .link div{ position: relative; } .header-top .contact-info .link div::before{ content: ""; position: absolute; left: -5px; top: 0; width: 1px; height: 100%; background: var(--black); transform: rotate(-20deg); } .header-top .contact-info .link div::after{ content: ""; position: absolute; right: -10px; top: 0; width: 1px; height: 100%; background: var(--black); transform: rotate(20deg); } .header-top .contact-info .link img{ width: 50px; margin-top: 15px; } .header-top .contact-info .link.mail a{ position: relative; } .header-top .contact-info .link.mail a:hover .mail_icon{ opacity: 0; } .header-top .contact-info .link.mail a img.mail_icon_hov{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%); opacity: 0; } .header-top .contact-info .link.mail a:hover img.mail_icon_hov{ opacity: 1; } .header-top address{ display: flex; flex-direction: column; justify-content: center; font-size: 1.8rem; line-height: 1; } .header-top address p{ font-size: 0.9rem; line-height: 2.5; } /* PC時メニューバー */ #menubar ul{ display: flex; justify-content: space-between; align-items: center; } #menubar li { flex: 1; position: relative; text-align: center; } #menubar li a { background: var(--bg); color: var(--brown); padding: 0.8rem 0; filter: brightness(1.05); } #menubar span { display: block; font-size: 0.7em; letter-spacing: 0.1em; opacity: 0.6; } /*マウスオン時に明るくする*/ #menubar li a:hover { filter: brightness(1.12); } /* 画面上部にメニューバーを固定 */ #menubar.fixed { position: fixed; top: 0; width: 100%; height: auto; z-index: 10; } /*==================================================================== 　フッター設定 ====================================================================*/ .ly-footer{ background: var(--beige); } .footer-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 60px 10px; font-size: 0.8rem; } .footer-logo{ width: 250px; height: auto; } .footer-menu{ font-size: 0.8rem; } .footer-menu ul li a { padding: 2px 0px; position: relative; } .footer-menu ul li a::before { background: var(--black); content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; margin: auto; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; } .footer-menu ul li a:hover::before { transform-origin: left top; transform: scale(1, 1); } .ly-footer > p{ background: var(--brown); color: var(--white); text-align: center; font-size: 0.7rem; line-height: 3; } /*==================================================================== 　事例ページ ====================================================================*/ .case .case-content{ margin: 0 auto; width: 100%; max-width: 800px; } .case .case-content h3{ padding: .5em .8em; font-size: 1.5rem; font-weight: 700; line-height: 1.8em; } /*==================================================================== 　PC時 ====================================================================*/ @media only screen and (min-width: 1000px) { /* 電話リンク無効 */ /* a[href^="tel:"] { pointer-events: none; } */ } /*==================================================================== 　Tablet時崩れ対応 ====================================================================*/ @media only screen and (max-width: 1020px) and (min-width: 750px) { .tbOnly{ display: block; } .header-top{ padding: 15px; } .header-top .contact-info{ gap: 28px; align-items: center; } .header-top address{ font-size: 1.1rem; } .header-top address span { font-size: 0.7rem; } .header-top .contact-info .link{ font-size: 0.5rem; } } /*==================================================================== 　SP時 ====================================================================*/ @media only screen and (max-width: 750px) { html { font-size: calc(1000vw / 375); } h3{ font-size: 1.8rem; } p,a{ font-size: 1.5rem; } .pcOnly, .tbOnly { display: none; } .spOnly { display: block; } /* 共通 */ .ly-section { padding-top: 0; padding-bottom: 5rem; } h2 { padding-top: 3rem; padding-bottom: 2.5rem; } h2 span{ font-size: 1.3rem; } .pagetop a i{ font-size: 1.5rem; } .btn { margin-right: unset; } .btn a { font-size: 1.5rem; padding: 10px 10vw; border: 3px solid var(--black); } .btn.next a::after{ top: calc(50% - 1rem); right: 1.5rem; font-size: 2rem; } .btn.back a::after{ top: calc(50% - 1rem); left: 1.5rem; font-size: 2rem; } .card-list-wrap { padding-left: 20px; padding-right: 20px; } .card-list{ flex-direction: column; gap: 3rem; } .card-list a { display: inline-block; width: 100%; margin-top: 20px; margin-right: 20px; } .card-list a:nth-child(2n) { margin-right: 0; } .card-title { font-size: 1.7rem; } .card-txt, .card-sub { font-size: 1.5rem; } /* 横長カード */ .row-card-list-item{ flex-direction: column; } .row-card-img{ width: 100%; } .row-card-title { font-size: 1.8rem; } .row-card-txt, .row-card-sub { font-size: 1.5rem; } /* .flex */ .flex{ flex-direction: column-reverse; gap: 3rem; } .flex .btn:first-of-type a{ margin-top: 0; } .flex p{ font-size: 1.4rem; } /* ----------ヘッダー設定----------- */ .header-top { padding: 2.5rem 8rem 2rem 1.5rem; } .header-top .contact-info{ display: none; } a.header-logo img{ width: 15rem; } /* ハンバーガーメニュー */ body.fixed { width: 100%; height: 100%; position: fixed; } .menu { position: fixed; top: 2.2rem; right: 1.5rem; display: flex; z-index: 10; } .menu-btn { display: flex; justify-content: center; align-items: center; height: 10vw; width: 10vw; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.6); z-index: 11; } .menu-btn span.menubtn, .menu-btn span.menubtn:before, .menu-btn span.menubtn:after { position: absolute; display: block; background-color: #fff; border-radius: 5vw; height: .5vw; width: 5vw; content: ''; transition: all .2s linear; } .menu-btn span.menubtn:before { bottom: 2vw; } .menu-btn span.menubtn:after { top: 2vw; } .menu span.menutext { position: absolute; display: block; font-size: 4vw; bottom: 1vw; } #bt_menu:checked~.menu-btn span { background-color: rgba(255, 255, 255, 0); } #bt_menu:checked~.menu-btn span::before { bottom: 0; transform: rotate(45deg); } #bt_menu:checked~.menu-btn span::after { top: 0; transform: rotate(-45deg); } #bt_menu { display: none; } .menu-content { position: fixed; background: #fff; width: 100%; height: 100vh; top: 0; left: 0; transition: all 0.3s; transform: translateX(-100%); transform-origin: left; } .menu-content>ul { display: block; margin: 0; padding: 6rem 6rem 10rem 5rem; height: 100%; overflow-y: scroll; } .menu-content ul li a { position: relative; display: flex; align-items: center; width: 100%; padding: 4vw 7vw 4vw 2vw; font-size: 4.5vw; text-decoration: none; text-align: left; } .menu-content>ul>li:not(:last-child) a { border-bottom: 1px solid var(--black); } .menu-content>ul>li>a::after { position: absolute; font-family: var(--fas); content: "\f054"; right: 3vw; font-weight: bold; } .menu-content>ul>li:last-child{ text-align: center; } .menu-content>ul>li:last-child>a{ padding: 4vw 7vw; font-size: 2.5rem; gap: 2rem; } .menu-content>ul>li:last-child>.btn a{ margin-top: 2rem; font-size: 1.5rem; } .menu-content>ul>li:last-child>a::after { content: none; } #bt_menu:checked~.menu-content { transform: translateX(0%); } .menu-sp-snsBtn { display: flex; justify-content: space-between; } .menu-sp-snsBtn img { width: 100%; height: auto; } /* ----------フッター設定----------- */ .footer-content { flex-direction: column; text-align: center; font-size: 1.3rem; } .ly-footer > p { text-align: center; font-size: 1rem; } .footer-logo{ width: 22rem; } /* ----------ページ下問い合わせリンク----------- */ .contact .btn.bt-mail a, .contact .btn.bt-line a{ min-width: 300px; } /* ----------会社概要・個別ページのテーブル----------- */ .table-alternate{ font-size: 1.5rem } .table-alternate th{ white-space: nowrap; width: unset; max-width: unset; } } /* reCAPTCHAのロゴ対応 */ /* 基本的には非表示にする */ .grecaptcha-badge { visibility: hidden; } /* お問い合わせページには表示させる */ #post-id-71 .grecaptcha-badge, #post-id-1524 .grecaptcha-badge { visibility: visible; } /* フォーム */ table.formTable{ width:100%; margin:0 auto 30px; border-collapse:collapse; } table.formTable td,table.formTable th{ border:1px solid #ccc; padding:10px; } table.formTable th{ width:30%; font-weight:normal; background: var(--light-gray); text-align:left; vertical-align:middle } form input, form select, form textarea{ padding: 5px 7px; border: 1px solid #ccc; } form p{ text-align: center; } form p input{ position: relative; margin: 0 auto; display: inline-block; width: 100%; max-width: 300px; padding: 10px 40px; border: 3px solid var(--black); border-radius: 0.5rem; background: var(--white) } form p:first-of-type input:hover, form p input:hover { background: var(--black); color: var(--white); opacity: 1; } form p:first-of-type{ margin-bottom: 20px; } form p:first-of-type input{ background: #ddd; } @media screen and (max-width:572px) { table.formTable th, table.formTable td { width: auto; font-size: 1.5rem; } table.formTable th{ width: 30%; } form input[type="text"], form textarea { width:100%; } }