@charset "utf-8"; /* =========================================================== * * くぼけん スタイルシート * Last UpDate : 2024/08/01 * =========================================================== */ /* ---------------------------------------------------------- style.css index 1 - ページ共通css 2 - リンクの色 3 - ヘッダー 4 - フッター 5 - 見出し 6 - コンテンツ ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1 - ページ共通css ---------------------------------------------------------- */ @import "general.css"; @import "fonts.css"; html{ } body { color: #333; font-weight: 400; font-style: normal; font-family: source-han-sans-japanese, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; letter-spacing: 1px; } /* @media all and (-ms-high-contrast: none) { *::-ms-backdrop, .h2Wrap{ line-height: 1.7 !important; } *::-ms-backdrop, .h2Wrap h2 span{ margin-top: 0 !important; } *::-ms-backdrop, h4{ line-height: 1.7 !important; } *::-ms-backdrop, .supportSec02 > ul > li{ flex-basis: 42% !important; padding: 3% !important; } *::-ms-backdrop, .flowSec ul li .flowSecTit{ line-height: 1 !important; } *::-ms-backdrop, .flowSec ul li .flowSecIco{ padding-left: 3px !important; } *::-ms-backdrop, .companySec > ul > li dt{ flex-basis: 28% !important; padding: 1% !important; } *::-ms-backdrop, .companySec > ul > li dd{ flex-basis: 68% !important; padding: 1% !important; } *::-ms-backdrop, .historySec dt{ flex-basis: 28% !important; padding: 1% !important; } *::-ms-backdrop, .historySec dd{ flex-basis: 68% !important; padding: 1% !important; } *::-ms-backdrop, .typeSec01 .typeSecTit{ margin-top: 30px !important; } } */ /* ---------------------------------------------------------- 2 - リンクの色 ---------------------------------------------------------- */ a:link { color: #666; text-decoration: none; } a:visited { color: #666; text-decoration: none; } a:hover { color: #076dd3; text-decoration: none; } a:active { color: #076dd3; text-decoration: none; } a { -ms-filter: "alpha( opacity=60 )"; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } /* ---------------------------------------------------------- 3 - ヘッダー ---------------------------------------------------------- */ /* ---------------------------------------------------------- 4 - フッター ---------------------------------------------------------- */ /* ---------------------------------------------------------- 5 - 見出し ---------------------------------------------------------- */ .h1Reason{ background: url("../reason/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Service{ background: url("../service/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Denkikouji{ background: url("../service//denkikouji/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Reform{ background: url("../service//reform/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Works{ background: url("../works/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Price{ background: url("../price/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Area{ background: url("../area/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Flow{ background: url("../flow/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Company{ background: url("../company/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Staff{ background: url("../staff/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Otoiawase{ background: url("../otoiawase/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Sitemap{ background: url("../sitemap/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Subsidy{ background: url("../subsidy/images/h1.jpg") no-repeat center center; background-size: cover; } /* ---------------------------------------------------------- 6 - コンテンツ ---------------------------------------------------------- */ #contents:after { content: ""; display: block; clear: both; } /************** トップページ **************/ #topBnr{ width: 1200px; margin: 40px auto 50px auto; display: flex; justify-content: space-between;} #topBnr a{ display: block; } #topBnr a:hover{ opacity: 0.6; } #subsidySec{} .top_bnr{ text-align: center; margin: 0 auto 100px auto; } .top_bnr a:hover{ opacity: .6; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ SP CSS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media screen and (max-width:680px){ /* ---------------------------------------------------------- ***** SP表示用CSS ***** index 1 - ページ共通css 2 - リンクの色 3 - ヘッダー 4 - フッター 5 - 見出し 6 - コンテンツ ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1 - ページ共通css ---------------------------------------------------------- */ img,video { max-width: 100%; height: auto; } /* フォントサイズ10px=62.5% */ html{ font-size: 60%; } /* 基本のフォントサイズ */ body{ font-size: 1.8rem; height: auto !important; height: 100%; } /* 非表示用 */ .noneSP { display: none !important; } /* ---------------------------------------------------------- 2 - リンクの色 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 3 - ヘッダー ---------------------------------------------------------- */ header{} header #header{ width: 100%; margin: 0 auto; padding: 10px 0; } header .headerLogo{ width: 30%; margin: 0 auto; } header .headerLogo img{ width: 100%; height: auto; } header .headerLogo a:hover{ opacity: 0.6; } header .headerTel{ display: none; } header .headerBtn{ display: none; } header #gNavi{ display: none; } .pure-drawer div{ padding: 100px 20px 40px 20px; } .pure-drawer div > ul > li{ font-size: 2rem; font-weight: 700; position: relative; padding-left: 30px; margin-bottom: 30px; } .pure-drawer div a{ color: #666; } .pure-drawer div > ul{ margin: 10px 0 0 20px; } .pure-drawer div > ul > li{ position: relative; line-height: 1.5em; } .pure-drawer div > ul > li > a{ font-size: 1.8rem; padding: 0 0 0 15px; color: #666; } .pure-drawer div > ul > li:after{ display: block; content: ""; position: absolute; top: .7em; left: 0; width: 5px; height: 5px; border-right: 1px solid #076dd3; border-bottom: 1px solid #076dd3; transform: rotate(-45deg); } .pure-drawer div > ul > li > ul{ margin-left: 40px; } .pure-drawer div > ul > li > ul > li{ list-style-type: disc; } .pure-drawer div > ul > li > ul > li > a{ font-size: 1.4rem; } .pure-drawer div > ul:last-child > li{ padding-left: 0; margin-right: 10px; } .pure-drawer div > ul:last-child > li:before{ display: none; } .pure-drawer div > ul:last-child > li a:hover{ opacity: 0.6; } /* ---------------------------------------------------------- 4 - フッター ---------------------------------------------------------- */ /* ページ下部 固定メニュー */ .btmMenu { position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #333; z-index: 99999; } .btmMenu li { float: left; width: 50%; } .btmMenu li:first-child a { border-right: 1px solid #333; } .btmMenu li a { display: block; height: 49px; text-align: center; font-size: 1.6rem; padding: 10px 5px 5px; background-color: #fff; } .btmMenu li a i{ font-size: 1.8rem; margin-right: 10px; } .btmMenu li a:hover { background-color: #666464; color: #fff; } .btmMenu ul:after { content: ''; clear: both; display: block; } footer{ background: #076dd3; padding: 30px 0 0 0; } footer #footer{ width: 90%; margin: 0 auto 30px auto; color: #fff; display: flex; justify-content: space-between; } footer #footer .footerSec{ flex-basis: 100%; text-align: center; } footer #footer .footerSecLogo{ width: 50%; margin: 0 auto 20px auto; } footer #footer .footerSecLogo a:hover{ opacity: 0.6; } footer #footer .footerSecAdd{ font-size: 1.2rem; } footer #footer .footerSecTel{ display: none; } footer #footer .footerSecSitemap{ display: none;} #footerCopyright{ background: #0558ab; text-align: center; color: #fff; font-size: .9rem; padding: 10px 0 60px 0; } /* ---------------------------------------------------------- 5 - 見出し ---------------------------------------------------------- */ #h1Wrap{ padding: 20px 0; } #h1Wrap h1{ width: 90%; margin: 0 auto; font-size: 3rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.3; } .h1Reason{ background: url("../reason/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Service{ background: url("../service/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Denkikouji{ background: url("../service//denkikouji/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Reform{ background: url("../service//reform/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Works{ background: url("../works/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Price{ background: url("../price/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Area{ background: url("../area/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Flow{ background: url("../flow/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Company{ background: url("../company/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Staff{ background: url("../staff/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Otoiawase{ background: url("../otoiawase/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Sitemap{ background: url("../sitemap/images/h1.jpg") no-repeat center center; background-size: cover; } h2{ font-size: 2.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 40px; line-height: 1.4; padding: 10px 0; } h2 span{ font-size: 1.5rem; } h3{ font-size: 2rem; padding: 0 0 0 10px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 30px; border-left: 10px solid #0558ab; } h3 span{ border-left: 10px solid #666; padding-left: 20px; } /* ぱんくず */ #breadcrumbs{ display: none; } /* ---------------------------------------------------------- 6 - コンテンツ ---------------------------------------------------------- */ /************** トップページ **************/ #topImg{ width: 97%; margin: 10px auto; } .slick-slide{ margin: 0px 5px; } .slick-slide img{ width: 100%; height: auto; } .slick-prev:before, .slick-next:before{ color: black; } .slick-slide{ transition: all ease-in-out .3s; opacity: .2; } .slick-active{ opacity: .5; } .slick-current{ opacity: 1; } #topBnr{ width: 100%; margin: 30px auto; flex-direction: column; gap: 30px; max-width: 580px;} #topMessage{ background: #f90; margin-bottom: 20px; } #topMessage .topMessageSec{ width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #topMessage .topMessageSec p{ flex-basis: 90%; font-size: 2rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; margin: 0 auto; padding: 10px 0; } #topMessage .topMessageSec .topMessageSecBtn{ flex-basis: 100%; } #topMessage .topMessageSec .topMessageSecBtn a{ display: block; font-size: 1.6rem; color: #fff; text-align: center; background: #e7111b; border: 4px solid #e7111b; padding: 5px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn a i{ margin-left: 10px; } #topMessage .topMessageSec .topMessageSecBtn a:hover{ color: #e7111b; background: #fff; } #topTxt{ width: 90%; margin: 0 auto; padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 60px; } #topTxt p{ font-size: 1.6rem; } #topContents{ width: 90%; margin: 0 auto 80px auto; } #topContents > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topContents > ul > li{ flex-basis: 100%; margin-bottom: 40px; } #topContents > ul > li.topDenkikoujiSec{} #topContents > ul > li .topContentsTit{ font-size: 2rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } #topContents > ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } #topContents > ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } #topContents > ul > li .topContentsImg{ margin-bottom: 10px; } #topContents > ul > li .topContentsImg img{ width: 100%; height: auto; } #topContents > ul > li .topContentsTxt{ font-size: 1.4rem; margin-bottom: 10px; } #topContents > ul > li .topContentsBtn{ font-size: 1.4rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topContents > ul > li .topContentsBtn > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topContents > ul > li .topContentsBtn > ul > li{ flex-basis: 100%; margin-bottom: 10px; } #topContents > ul > li .topContentsBtn > ul > li a{ display: block; text-align: center; padding: 5px; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn{} #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a{ background: #d9d900; color: #333; border: 2px solid #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a:hover{ background: #333; color: #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn{} #topContents > ul > li .topContentsBtn > ul > li.reformBtn a{ background: #008c8c; color: #fff; border: 2px solid #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn a:hover{ background: #fff; color: #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn{} #topContents > ul > li .topContentsBtn > ul > li.priceBtn a{ background: #076dd3; color: #fff; border: 2px solid #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn a:hover{ background: #fff; color: #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a i, #topContents > ul > li .topContentsBtn > ul > li.reformBtn a i, #topContents > ul > li .topContentsBtn > ul > li.priceBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topWorks{ width: 90%; margin: 0 auto 80px auto; } #topWorks .topWorksTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; } #topWorks .topWorksTit > ul{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #topWorks .topWorksTit > ul > li{ font-size: 3rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; flex-basis: 100%; } #topWorks .topWorksTit > ul > li span{ font-size: 1.2rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; vertical-align: middle; margin-left: 10px; } #topWorks .topWorksTit > ul > li .topWorksBtn{ width: 50%; margin: 0 0 10px auto; } #topWorks .topWorksTit > ul > li .topWorksBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksTit > ul > li .topWorksBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topWorks .topWorksTit > ul > li .topWorksBtn a:hover{ color: #fff; background: #f90; } #topWorks .topWorksSec{} #topWorks .topWorksSec > ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } #topWorks .topWorksSec > ul > li{ flex-basis: 48%; margin: 0 1% 40px 1%; } #topWorks .topWorksSec > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } #topWorks .topWorksSec > ul > li img{ width: 100%; height: auto; } #topWorks .topWorksSec > ul > li .topWorksSecDate{ flex-basis: 100%; font-size: 1.2rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } #topWorks .topWorksSec > ul > li .topWorksSecCat{ flex-basis: 70%; font-size: 1rem; text-align: center; padding: 2px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksSec > ul > li a .denkikouji{ background: #d9d900; color: #333; } #topWorks .topWorksSec > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } #topWorks .topWorksSec > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } #topWorks .topWorksSec > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 2px 2px; min-height: 40px; } #topBtn{ width: 100%; overflow: hidden; margin-bottom: 80px; } #topBtn ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topBtn ul li{ flex-basis: 100%; position: relative; border-bottom: 1px solid #fff; } #topBtn ul li .topSecTit{ text-align: center; z-index: 1; position: relative; } #topBtn ul li .topSecTit01{ color: #fff; font-size: 1.5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topBtn ul li .topSecTit02{ font-size: 3.5rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.3; } #topBtn ul li a{ display: block; overflow: hidden; } #topBtn ul li .topSecImg { position: relative; overflow: hidden; text-align: center; padding: 60px 0; } #topBtn ul li.topSecImg01 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_faq01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg02 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_flow01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg03 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_company01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li .topSecImg:hover:after { opacity: 1; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #topBtn ul li .topSecImg:before{ z-index: 1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } #topInfo{ width: 90%; margin: 0 auto 80px auto; display: flex; justify-content: space-between; flex-wrap: wrap; } #topInfo #topNews{ flex-basis: 100%; margin-bottom: 40px; } #topInfo #topNews .topNewsTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topInfo #topNews .topNewsTxt{} #topInfo #topNews .topNewsTxt ul{ margin-bottom: 20px; } #topInfo #topNews .topNewsTxt ul li{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding: 25px 0; } #topInfo #topNews .topNewsTxt ul li .topNewsCat{ flex-basis: 40%; text-align: center; font-size: 1.3rem; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 3px 10px; margin-bottom: 5px; } #topInfo #topNews .topNewsTxt ul li .news-news{ background: #076dd3; } #topInfo #topNews .topNewsTxt ul li .news-works{ background: #f90; } #topInfo #topNews .topNewsTxt ul li .topNewsDate01{ flex-basis: 55%; font-size: 1.6rem; color: #aaa; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsTxt ul li .topNewsTit01{ flex-basis: 100%; font-size: 1.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; } #topInfo #topNews .topNewsBtn{ width: 180px; margin: 0 0 0 auto; } #topInfo #topNews .topNewsBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topInfo #topNews .topNewsBtn a:hover{ color: #fff; background: #f90; } #topInfo #topFb{ flex-basis: 100%; } #topInfo #topFb .topFbSec{} /* くぼけんが選ばれる理由 reason */ #contents{ width: 90%; margin: 0 auto; padding: 40px 0; } .balloonSec{ position: relative; display: block; padding: 10px; color: #fff; background: #e7111b; font-size: 2rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; margin-bottom: 60px; line-height: 1.4; } .balloonSec:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #e7111b;} .balloonSec p{ margin: 0; padding: 0; } #denkikoujiSec .balloonSec{ background: #d9d900; color: #333; } #denkikoujiSec .balloonSec:before{ border-top-color: #d9d900; } #reformSec .balloonSec{ background: #008c8c; color: #fff; } #reformSec .balloonSec:before{ border-top-color: #008c8c; } .secTxt{ font-size: 1.6rem; line-height: 1.6; margin-bottom: 40px; } .secTxt p{} .reasonSec01{} .reasonSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .reasonSec01 ul li{ flex-basis: 100%; margin-bottom: 40px; } .reasonSec01 ul li .reasonSec01Num{ width: 100px; height: 100px; border-radius: 50%; background: #0558ab; margin: 0 auto; text-align: center; color: #fff; font-size: 1.9rem; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1; padding-top: 18px; } .reasonSec01 ul li .reasonSec01Num span{ display: block; font-size: 6rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit{ font-size: 2.2rem; color: #333; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit span{ color: #066cd2; } .reasonSec01 ul li .reasonSec01Img{ margin-bottom: 10px; } .reasonSec01 ul li .reasonSec01Img img{ width: 100%; height: auto; } .reasonSec01 ul li .reasonSec01Txt{ font-size: 1.6rem; } .reasonSec01 ul li .reasonSec01Btn{ width: 210px; margin-top: 10px; } .reasonSec01 ul li .reasonSec01Btn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Btn a i{ margin-left: 10px; font-size: 1.2rem; } .reasonSec01 ul li .reasonSec01Btn a:hover{ color: #fff; background: #f90; } /* サービス紹介 service */ .serviceSec01{ } .serviceSec01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .serviceSec01 ul > li{ flex-basis: 100%; margin-bottom: 40px; } .serviceSec01 ul > li.topDenkikoujiSec{} .serviceSec01 ul > li .topContentsTit{ font-size: 2rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } .serviceSec01 ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } .serviceSec01 ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } .serviceSec01 ul > li .topContentsImg{ margin-bottom: 10px; } .serviceSec01 ul > li .topContentsImg img{ width: 100%; height: auto } .serviceSec01 ul > li .topContentsTxt{ font-size: 1.4rem; margin-bottom: 10px; } .serviceSec01 ul > li .serviceSec01Btn{ font-size: 1.7rem; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .serviceSec01 ul > li .serviceSec01Btn > ul{ } .serviceSec01 ul > li .serviceSec01Btn > ul > li{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px; line-height: 1.4; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d{ background: #d9d900; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span{ display: block; flex-basis: 100%; padding: 10px 10px 10px 40px; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span:after{ display: block; content: ""; position: absolute; top: .7em; left: 13px; width: 8px; height: 8px; background: #d9d900; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a{ flex-basis: 100%; display: block; color: #fff; background: #880; border: 2px solid #880; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a:hover{ background: #fff; color: #880; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r{ background: #008c8c; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span{ display: block; flex-basis: 100%; padding: 10px 10px 10px 40px; color: #fff; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span:after{ display: block; content: ""; position: absolute; top: .7em; left: 13px; width: 8px; height: 8px; background: #008c8c; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a{ flex-basis: 100%; display: block; color: #fff; background: #055; border: 2px solid #055; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a:hover{ background: #fff; color: #055; } /* サービス紹介　＞　電気・空調工事 service/denkikouji */ #denkikoujiSec, #reformSec{ margin-bottom: 80px; } .denkikoujiSec01{ margin-bottom: 60px; } .denkikoujiSec01 ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .denkikoujiSec01 ul li{ flex-basis: 50%; border-right: 1px solid #ccc; padding: 0 15px; margin-bottom: 40px; } .denkikoujiSec01 ul li:nth-child(2n){ border-right: 0; } .denkikoujiSec01 ul li .denkikoujiSec01Img{ width: 100%; margin: 0 auto 10px auto; } .denkikoujiSec01 ul li .denkikoujiSec01Img img{ width: 100%; height: auto; border-radius: 100%; } .denkikoujiSec01 ul li .denkikoujiSec01Tit{ font-size: 1.8rem; color: #666; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; margin-bottom: 5px; min-height: 50px; } .denkikoujiSec01 ul li .denkikoujiSec01Txt{ font-size: 1.3rem; line-height: 1.5; margin-bottom: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price{ font-size: 2.9rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -.5px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } #reformSec .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #008c8c; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price02{ font-size: 1.6rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .denkikoujiSec01Btn{ width: 100%; margin: 0 auto; } .denkikoujiSec01Btn a{ display: block; font-size: 2rem; color: #333; text-align: center; background: #d9d900; border: 3px solid #d9d900; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #reformSec .denkikoujiSec01Btn a, #reformSecWorks .denkikoujiSec01Btn a{ display: block; font-size: 2rem; color: #fff; text-align: center; background: #008c8c; border: 3px solid #008c8c; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .denkikoujiSec01Btn a:hover{ background: #333; color: #d9d900; } #reformSec .denkikoujiSec01Btn a:hover, #reformSecWorks .denkikoujiSec01Btn a:hover{ background: #fff; color: #008c8c; } #denkikoujiSecWorks, #reformSecWorks{ margin-bottom: 100px; } .denkikoujiSecWorks01{ } .denkikoujiSecWorks01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; } .denkikoujiSecWorks01 > ul > li{ flex-basis: 48%; margin-bottom: 40px; } .denkikoujiSecWorks01 > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .denkikoujiSecWorks01 > ul > li img{ width: 100%; height: auto; } .denkikoujiSecWorks01 > ul > li .topWorksSecDate{ flex-basis: 50%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecCat{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .denkikoujiSecWorks01 > ul > li .topWorksSecJobsite{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; background: #f0f0f0; } .denkikoujiSecWorks01 > ul > li a .denkikouji{ background: #d9d900; color: #333; } .denkikoujiSecWorks01 > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } .denkikoujiSecWorks01 > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 50px; } #worksNav{ background: #eee; padding: 60px 0 60px 0; } #worksNav #topContents{ margin: 0 auto; } /* 施工実績 works */ #worksSec{} #worksSec .worksNav{ width: 100%; margin: 0 auto 40px auto; } #worksSec .worksNav ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #worksSec .worksNav ul li{ flex-basis: 100%; margin-bottom: 10px; } #worksSec .worksNav ul li.worksNavDenkikouji a{ display: block; font-size: 1.8rem; background: #d9d900; text-align: center; padding: 10px; border: 2px solid #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavDenkikouji a:hover{ background: #333; color: #d9d900; } #worksSec .worksNav ul li.worksNavReform a{ display: block; font-size: 2rem; background: #008c8c; color: #fff; text-align: center; padding: 10px; border: 2px solid #008c8c; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavReform a:hover{ background: #fff; color: #008c8c; } #worksSec .denkikoujiSecWorks01 > ul{ margin-bottom: 0; } .worksSecBtn{ width: 200px; margin: 0 0 0 auto; } .worksSecBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .worksSecBtn a i{ margin-left: 10px; font-size: 1.2rem; } .worksSecBtn a:hover{ color: #fff; background: #f90; } /* 料金表 price */ #priceSec{ margin-bottom: 300px; } #priceSec ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #priceSec ul li{ flex-basis: 100%; margin-bottom: 80px; } #priceSec ul li .priceSecBtn{} #priceSec ul li .priceSecBtn a{ display: block; color: #fff; font-size: 3rem; text-align: center; background: #e7111b; padding: 15px; border: 3px solid #e7111b; border-radius: 15px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #priceSec ul li .priceSecBtn a i{ margin-left: 10px; font-size: 3.5rem; } #priceSec ul li .priceSecBtn a:hover{ background: #fff; color: #e7111b; } /* 対応エリア area */ #areaSec{} .areaSecImg{ text-align: center; margin-bottom: 80px;} .areaSecTxt{ font-size: 1.8rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 80px; } /* ご依頼の流れ flow */ #flowSec{} .flowSec01{} .flowSec01 > ul{} .flowSec01 > ul > li{} .flowSec01 > ul > li > ul{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .flowSec01 > ul > li > ul > li:nth-child(1){ flex-basis: 100%; } .flowSec01 > ul > li > ul > li:nth-child(2){ flex-basis: 100%; } .flowSec01 > ul > li > ul > li .flowSec01Tit{ display: flex; align-items: center; margin-bottom: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit span{ display: block; width: 50px; height: 50px; line-height: 50px; background: #0558ab; text-align: center; font-size: 4rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-right: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit p{ font-size: 2rem; color: #333; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.4; } .flowSec01 > ul > li > ul > li .flowSec01Txt{ font-size: 1.4rem; line-height: 1.7; margin-bottom: 30px; } .flowSec01 > ul > li > ul > li .flowSec01Tel{ background: #eee; padding: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Num{ color: #e7111b; font-size: 3.5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 10px; text-align: center; } .flowSec01 > ul > li > ul > li .flowSec01Num i{ font-size: 4rem; color: #333; margin-right: 5px; vertical-align: bottom; } .flowSec01 > ul > li > ul > li .flowSec01Num span{ display: block; font-size: 1.8rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .flowSec01 > ul > li > ul > li .flowSec01Btn{} .flowSec01 > ul > li > ul > li .flowSec01Btn a{ display: block; color: #fff; font-size: 1.8rem; text-align: center; background: #f90; border: 2px solid #f90; padding: 15px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Btn a:hover{ background: #fff; color: #f90; } .flowSec01 > ul > li > ul > li .flowSec01Img{ text-align: center; } .flowSec01 > ul > li.arrow{ text-align: center; font-size: 6rem; margin: 60px 0; letter-spacing: -10px; } .flowSec01 > ul > li.arrow span:nth-child(1), .flowSec01 > ul > li.arrow span:nth-child(3){ color: rgba(5,88,171,0.6); } .flowSec01 > ul > li.arrow span:nth-child(2){ color: rgba(5,88,171,1); } /* 会社概要 company */ #companySec{} .companySec01{ margin-bottom: 80px; } .companySec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .companySec01 ul li:nth-child(1){ flex-basis: 100%; } .companySec01 ul li:nth-child(2){ flex-basis: 100%; } .companySec01 ul li .companySec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 20px; } .companySec01 ul li .companySec01Name{ font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .companySec01 ul li .companySec01Name span{ font-size: 2rem; margin-right: 20px; } .companySec01 ul li .companySec01Img img{ width: 100%; height: auto; } .companySec02{ margin-bottom: 80px; } .companySec02 table{ width: 100%; border-collapse: collapse; } .companySec02 table th{ width: 25%; font-size: 1.5rem; text-align: left; padding: 15px; border-bottom: 1px solid #ccc; } .companySec02 table td{ font-size: 1.5rem; padding: 15px; border-bottom: 1px solid #ccc; } .companySec03{ margin-bottom: 80px; } .companySec03Txt{ font-size: 1.8rem; font-weight: 500; margin-bottom: 20px; } .companySec03Map{ position: relative; padding-bottom: 44.64%; padding-top: 30px; height: 0; overflow: hidden; } .companySec03Map iframe, .companySec03Map object, .companySec03Map embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* スタッフ紹介 staff */ #staffSec{} .staffSec01{} .staffSec01 ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .staffSec01 ul li{ flex-basis: 48%; margin: 0 1% 40px 1%; } .staffSec01 ul li .staffSec01Img{ margin-bottom: 10px; } .staffSec01 ul li .staffSec01Img img{ border-radius: 50%; } .staffSec01 ul li .staffSec01Name{ font-size: 2.4rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: center; } .staffSec01 ul li .staffSec01Name span{ display: block; font-size: 1.5rem; } .view { overflow: hidden; position: relative; text-align: center; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; border-radius: 50%; } .view .mask,.view .content { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } .view img { display: block; position: relative; border-radius: 50%; } .view a.info { /* display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; border: 2px solid #000; color: #fff; text-transform: uppercase;*/ display: block; width: 100%; height: 100%; border-radius: 50%; background: #000; border: 2px solid #000; color: #fff; padding-top: 70px; } .view a.info i{ margin-left: 10px; font-size: 1.2rem; } .view a.info:hover{ background: #fff; color: #000; } .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; border-radius: 50%; } .view-tenth .mask { background-color: rgba(7, 109, 211, 0.5); transition: all 0.5s linear; opacity: 0; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { transform: scale(1); opacity: 1; /* margin-top: 115px; */ } .staffSec02{ } .staffSec02Img{ margin-bottom: 10px; } .staffSec02Img img{ width: 100%; height: auto; } .staffSec02Name{ text-align: center; font-size: 3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 10px; } .staffSec02Name span{ display: block; font-size: 1.5rem; letter-spacing: 1px; } .staffSec02Txt{ background: #eee; padding: 40px; } .staffSec02Txt p{ width: 100%; font-size: 1.4rem; line-height: 1.6; } #contactSec{ margin-bottom: 100px; } #privacySec{} .privacySecTxt{ font-size: 1.6rem; margin-bottom: 60px; } .privacySecTxt ol{ margin: 10px 0 0 30px; } .privacySecTxt ol li{ list-style-type: decimal; } /* サイトマップ sitemap */ #sitemapSec{ margin-bottom: 100px; } .sitemapSec01{} .sitemapSec01 > ul{} .sitemapSec01 > ul > li{ display: block; flex-basis: 65%; padding: 0 10px 0 30px; position: relative; font-size: 2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 3em; } .sitemapSec01 > ul > li:after{ display: block; content: ""; position: absolute; top: 22px; left: 0; width: 8px; height: 8px; background: #fff; border: 5px solid #076dd3; border-radius: 100%; } .sitemapSec01 > ul > li > ul{ margin: 0 0 10px 40px; } .sitemapSec01 > ul > li > ul > li{ list-style-type: disc; font-size: 1.4rem; line-height: 2em; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ SP CSS END ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ TAB CSS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media screen and (min-width:681px) and (max-width:1024px){ /* ---------------------------------------------------------- ***** TAB表示用CSS ***** index 1 - ページ共通css 2 - リンクの色 3 - ヘッダー 4 - フッター 5 - 見出し 6 - コンテンツ ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1 - ページ共通css ---------------------------------------------------------- */ img,video { max-width: 100%; height: auto; } /* フォントサイズ10px=62.5% */ html{ font-size: 50%; } /* 基本のフォントサイズ */ body{ font-size: 1.8rem; } /* 非表示用 */ .noneTAB { display: none !important; } /* ---------------------------------------------------------- 2 - リンクの色 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 3 - ヘッダー ---------------------------------------------------------- */ header{} header #header{ width: 100%; margin: 0 auto; padding: 10px 0; } header .headerLogo{ width: 30%; margin: 0 auto; } header .headerLogo img{ width: 100%; height: auto; } header .headerLogo a:hover{ opacity: 0.6; } header .headerTel{ display: none; } header .headerBtn{ display: none; } header #gNavi{ display: none; } .pure-drawer div{ padding: 100px 20px 40px 20px; } .pure-drawer div > ul > li{ font-size: 2rem; font-weight: 700; position: relative; padding-left: 30px; margin-bottom: 30px; } .pure-drawer div a{ color: #666; } .pure-drawer div > ul{ margin: 10px 0 0 20px; } .pure-drawer div > ul > li{ position: relative; line-height: 1.5em; } .pure-drawer div > ul > li > a{ font-size: 1.8rem; padding: 0 0 0 15px; color: #666; } .pure-drawer div > ul > li:after{ display: block; content: ""; position: absolute; top: .7em; left: 0; width: 5px; height: 5px; border-right: 1px solid #076dd3; border-bottom: 1px solid #076dd3; transform: rotate(-45deg); } .pure-drawer div > ul > li > ul{ margin-left: 40px; } .pure-drawer div > ul > li > ul > li{ list-style-type: disc; } .pure-drawer div > ul > li > ul > li > a{ font-size: 1.4rem; } .pure-drawer div > ul:last-child > li{ padding-left: 0; margin-right: 10px; } .pure-drawer div > ul:last-child > li:before{ display: none; } .pure-drawer div > ul:last-child > li a:hover{ opacity: 0.6; } /* ---------------------------------------------------------- 4 - フッター ---------------------------------------------------------- */ /* ページ下部 固定メニュー */ .btmMenu { display: none; } footer{ background: #076dd3; padding: 60px 0 0 0; } footer #footer{ width: 90%; margin: 0 auto 60px auto; color: #fff; display: flex; justify-content: space-between; } footer #footer .footerSec{ flex-basis: 100%; text-align: center; } footer #footer .footerSecLogo{ width: 30%; margin: 0 auto 20px auto; } footer #footer .footerSecLogo a:hover{ opacity: 0.6; } footer #footer .footerSecAdd{ font-size: 1.6rem; margin-bottom: 20px; } footer #footer .footerSecTel{ width: 300px; margin: 0 auto; border: 2px solid #fff; font-size: 4rem; text-align: center; padding: 5px 20px; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } footer #footer .footerSecTel i{ margin-right: 10px; vertical-align: middle; } footer #footer .footerSecSitemap{ display: none;} #footerCopyright{ background: #0558ab; text-align: center; color: #fff; font-size: .9rem; padding: 10px 0; } /* ---------------------------------------------------------- 5 - 見出し ---------------------------------------------------------- */ #h1Wrap{ padding: 40px 0; } #h1Wrap h1{ width: 90%; margin: 0 auto; font-size: 4.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .h1Reason{ background: url("../reason/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Service{ background: url("../service/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Denkikouji{ background: url("../service//denkikouji/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Reform{ background: url("../service//reform/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Works{ background: url("../works/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Price{ background: url("../price/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Area{ background: url("../area/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Flow{ background: url("../flow/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Company{ background: url("../company/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Staff{ background: url("../staff/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Otoiawase{ background: url("../otoiawase/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Sitemap{ background: url("../sitemap/images/h1.jpg") no-repeat center center; background-size: cover; } h2{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 40px; line-height: 1.4; padding: 10px 0; } h2 span{ font-size: 2.5rem; } h3{ font-size: 3rem; padding: 0 0 0 10px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 30px; border-left: 10px solid #0558ab; } h3 span{ border-left: 10px solid #666; padding-left: 20px; } /* ぱんくず */ #breadcrumbs{ width: 90%; margin: 0 auto; } #breadcrumbs ol{ } #breadcrumbs ol li{ display: inline-block; position: relative; } #breadcrumbs ol li:before{ content: ">"; display: block; position: absolute; top: .5em; left: 0px; color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #breadcrumbs ol li:first-child:before{ content: ""; } #breadcrumbs ol li a{ color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin: 0 0 0 13px; } #breadcrumbs ol li:first-child a{ margin: 0 0 0 0; } #breadcrumbs ol li a:hover{ opacity: 0.6; } /* ---------------------------------------------------------- 6 - コンテンツ ---------------------------------------------------------- */ /************** トップページ **************/ #topImg{ width: 97%; margin: 10px auto; } .slick-slide{ margin: 0px 5px; } .slick-slide img{ width: 100%; height: auto; } .slick-prev:before, .slick-next:before{ color: black; } .slick-slide{ transition: all ease-in-out .3s; opacity: .2; } .slick-active{ opacity: .5; } .slick-current{ opacity: 1; } #topBnr{ width: 100%; margin: 30px auto; max-width: 900px; flex-direction: column; gap: 30px; text-align: center;} #topBnr img{width: 100%;} #topMessage{ background: #f90; margin-bottom: 40px; } #topMessage .topMessageSec{ width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #topMessage .topMessageSec p{ font-size: 3rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn{} #topMessage .topMessageSec .topMessageSecBtn a{ display: block; font-size: 2rem; color: #fff; text-align: center; background: #e7111b; border: 4px solid #e7111b; padding: 10px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn a i{ margin-left: 10px; } #topMessage .topMessageSec .topMessageSecBtn a:hover{ color: #e7111b; background: #fff; } #topTxt{ width: 90%; margin: 0 auto; padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 60px; } #topTxt p{ font-size: 1.6rem; } #topContents{ width: 90%; margin: 0 auto 80px auto; } #topContents > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topContents > ul > li{ flex-basis: 100%; margin-bottom: 40px; } #topContents > ul > li.topDenkikoujiSec{} #topContents > ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } #topContents > ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } #topContents > ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } #topContents > ul > li .topContentsImg{ margin-bottom: 10px; } #topContents > ul > li .topContentsImg img{ width: 100%; height: auto; } #topContents > ul > li .topContentsTxt{ font-size: 1.4rem; margin-bottom: 10px; } #topContents > ul > li .topContentsBtn{ font-size: 2rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topContents > ul > li .topContentsBtn > ul{ display: flex; justify-content: space-between; } #topContents > ul > li .topContentsBtn > ul > li{ flex-basis: 48%; } #topContents > ul > li .topContentsBtn > ul > li a{ display: block; text-align: center; padding: 5px; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn{} #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a{ background: #d9d900; color: #333; border: 2px solid #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a:hover{ background: #333; color: #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn{} #topContents > ul > li .topContentsBtn > ul > li.reformBtn a{ background: #008c8c; color: #fff; border: 2px solid #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn a:hover{ background: #fff; color: #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn{} #topContents > ul > li .topContentsBtn > ul > li.priceBtn a{ background: #076dd3; color: #fff; border: 2px solid #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn a:hover{ background: #fff; color: #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a i, #topContents > ul > li .topContentsBtn > ul > li.reformBtn a i, #topContents > ul > li .topContentsBtn > ul > li.priceBtn a i{ margin-left: 10px; font-size: 1.5rem; } #topWorks{ width: 90%; margin: 0 auto 80px auto; } #topWorks .topWorksTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; } #topWorks .topWorksTit > ul{ display: flex; justify-content: space-between; align-items: center; } #topWorks .topWorksTit > ul > li{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topWorks .topWorksTit > ul > li span{ font-size: 2rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; vertical-align: middle; margin-left: 20px; } #topWorks .topWorksTit > ul > li .topWorksBtn{ } #topWorks .topWorksTit > ul > li .topWorksBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksTit > ul > li .topWorksBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topWorks .topWorksTit > ul > li .topWorksBtn a:hover{ color: #fff; background: #f90; } #topWorks .topWorksSec{} #topWorks .topWorksSec > ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } #topWorks .topWorksSec > ul > li{ flex-basis: 23%; margin: 0 1% 40px 1%; } #topWorks .topWorksSec > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } #topWorks .topWorksSec > ul > li img{ width: 100%; height: auto; } #topWorks .topWorksSec > ul > li .topWorksSecDate{ flex-basis: 30%; font-size: 1.2rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } #topWorks .topWorksSec > ul > li .topWorksSecCat{ flex-basis: 70%; font-size: 1rem; text-align: center; padding: 2px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksSec > ul > li a .denkikouji{ background: #d9d900; color: #333; } #topWorks .topWorksSec > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } #topWorks .topWorksSec > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } #topWorks .topWorksSec > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 2px 2px; min-height: 40px; } #topBtn{ width: 100%; overflow: hidden; margin-bottom: 80px; } #topBtn ul{ display: flex; justify-content: space-between; } #topBtn ul li{ flex-basis: 33.3333%; position: relative; border-right: 1px solid #fff; } #topBtn ul li:last-child{ border-right: none; } #topBtn ul li .topSecTit{ text-align: center; z-index: 1; position: relative; } #topBtn ul li .topSecTit01{ color: #fff; font-size: 2.8rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topBtn ul li .topSecTit02{ font-size: 4rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.3; } #topBtn ul li a{ display: block; overflow: hidden; } #topBtn ul li .topSecImg { position: relative; overflow: hidden; text-align: center; padding: 100px 0; } #topBtn ul li.topSecImg01 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_faq01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg02 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_flow01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg03 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_company01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li .topSecImg:hover:after { opacity: 1; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #topBtn ul li .topSecImg:before{ z-index: 1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } #topInfo{ width: 90%; margin: 0 auto 80px auto; display: flex; justify-content: space-between; } #topInfo #topNews{ flex-basis: 48%; } #topInfo #topNews .topNewsTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topInfo #topNews .topNewsTxt{} #topInfo #topNews .topNewsTxt ul{ margin-bottom: 20px; } #topInfo #topNews .topNewsTxt ul li{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding: 25px 0; } #topInfo #topNews .topNewsTxt ul li .topNewsCat{ flex-basis: 30%; text-align: center; font-size: 1.3rem; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 3px 10px; margin-bottom: 5px; } #topInfo #topNews .topNewsTxt ul li .news-news{ background: #076dd3; } #topInfo #topNews .topNewsTxt ul li .news-works{ background: #f90; } #topInfo #topNews .topNewsTxt ul li .topNewsDate01{ flex-basis: 65%; font-size: 1.6rem; color: #aaa; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsTxt ul li .topNewsTit01{ flex-basis: 100%; font-size: 1.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; } #topInfo #topNews .topNewsBtn{ width: 180px; margin: 0 0 0 auto; } #topInfo #topNews .topNewsBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topInfo #topNews .topNewsBtn a:hover{ color: #fff; background: #f90; } #topInfo #topFb{ flex-basis: 48%; } #topInfo #topFb .topFbSec{} /* くぼけんが選ばれる理由 reason */ #contents{ width: 90%; margin: 0 auto; padding: 80px 0; } .balloonSec{ position: relative; display: block; padding: 10px; color: #fff; background: #e7111b; font-size: 3rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; margin-bottom: 60px; } .balloonSec:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #e7111b;} .balloonSec p{ margin: 0; padding: 0; } #denkikoujiSec .balloonSec{ background: #d9d900; color: #333; } #denkikoujiSec .balloonSec:before{ border-top-color: #d9d900; } #reformSec .balloonSec{ background: #008c8c; color: #fff; } #reformSec .balloonSec:before{ border-top-color: #008c8c; } .secTxt{ font-size: 1.6rem; line-height: 1.6; margin-bottom: 40px; } .secTxt p{} .reasonSec01{} .reasonSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .reasonSec01 ul li{ flex-basis: 48.5%; margin-bottom: 40px; } .reasonSec01 ul li .reasonSec01Num{ width: 100px; height: 100px; border-radius: 50%; background: #0558ab; margin: 0 auto; text-align: center; color: #fff; font-size: 1.9rem; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1; padding-top: 18px; } .reasonSec01 ul li .reasonSec01Num span{ display: block; font-size: 6rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit{ font-size: 2.5rem; color: #333; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit span{ color: #066cd2; } .reasonSec01 ul li .reasonSec01Img{ margin-bottom: 10px; } .reasonSec01 ul li .reasonSec01Img img{ width: 100%; height: auto; } .reasonSec01 ul li .reasonSec01Txt{ font-size: 1.6rem; } .reasonSec01 ul li .reasonSec01Btn{ width: 210px; margin-top: 10px; } .reasonSec01 ul li .reasonSec01Btn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Btn a i{ margin-left: 10px; font-size: 1.2rem; } .reasonSec01 ul li .reasonSec01Btn a:hover{ color: #fff; background: #f90; } /* サービス紹介 service */ .serviceSec01{ } .serviceSec01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .serviceSec01 ul > li{ flex-basis: 100%; margin-bottom: 40px; } .serviceSec01 ul > li.topDenkikoujiSec{} .serviceSec01 ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } .serviceSec01 ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } .serviceSec01 ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } .serviceSec01 ul > li .topContentsImg{ margin-bottom: 10px; } .serviceSec01 ul > li .topContentsImg img{ width: 100%; height: auto } .serviceSec01 ul > li .topContentsTxt{ font-size: 1.4rem; margin-bottom: 10px; } .serviceSec01 ul > li .serviceSec01Btn{ font-size: 1.7rem; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .serviceSec01 ul > li .serviceSec01Btn > ul{ } .serviceSec01 ul > li .serviceSec01Btn > ul > li{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d{ background: #d9d900; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #d9d900; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a{ flex-basis: 35%; display: block; color: #fff; background: #880; border: 2px solid #880; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a:hover{ background: #fff; color: #880; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r{ background: #008c8c; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; color: #fff; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #008c8c; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a{ flex-basis: 35%; display: block; color: #fff; background: #055; border: 2px solid #055; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a:hover{ background: #fff; color: #055; } /* サービス紹介　＞　電気・空調工事 service/denkikouji */ #denkikoujiSec, #reformSec{ margin-bottom: 80px; } .denkikoujiSec01{ margin-bottom: 60px; } .denkikoujiSec01 ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .denkikoujiSec01 ul li{ flex-basis: 25%; border-right: 1px solid #ccc; padding: 0 15px; margin-bottom: 40px; } .denkikoujiSec01 ul li:nth-child(4n){ border-right: 0; } .denkikoujiSec01 ul li .denkikoujiSec01Img{ width: 100%; margin: 0 auto 10px auto; } .denkikoujiSec01 ul li .denkikoujiSec01Img img{ width: 100%; height: auto; border-radius: 100%; } .denkikoujiSec01 ul li .denkikoujiSec01Tit{ font-size: 1.8rem; color: #666; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; margin-bottom: 5px; min-height: 50px; } .denkikoujiSec01 ul li .denkikoujiSec01Txt{ font-size: 1.3rem; line-height: 1.5; margin-bottom: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price{ font-size: 2.9rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -.5px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } #reformSec .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #008c8c; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price02{ font-size: 1.6rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .denkikoujiSec01Btn{ width: 60%; margin: 0 auto; } .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #333; text-align: center; background: #d9d900; border: 3px solid #d9d900; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #reformSec .denkikoujiSec01Btn a, #reformSecWorks .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #fff; text-align: center; background: #008c8c; border: 3px solid #008c8c; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .denkikoujiSec01Btn a:hover{ background: #333; color: #d9d900; } #reformSec .denkikoujiSec01Btn a:hover, #reformSecWorks .denkikoujiSec01Btn a:hover{ background: #fff; color: #008c8c; } #denkikoujiSecWorks, #reformSecWorks{ margin-bottom: 100px; } .denkikoujiSecWorks01{ } .denkikoujiSecWorks01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; } .denkikoujiSecWorks01 > ul > li{ flex-basis: 24%; margin-bottom: 40px; } .denkikoujiSecWorks01 > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .denkikoujiSecWorks01 > ul > li img{ width: 100%; height: auto; } .denkikoujiSecWorks01 > ul > li .topWorksSecDate{ flex-basis: 50%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecCat{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .denkikoujiSecWorks01 > ul > li .topWorksSecJobsite{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; background: #f0f0f0; } .denkikoujiSecWorks01 > ul > li a .denkikouji{ background: #d9d900; color: #333; } .denkikoujiSecWorks01 > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } .denkikoujiSecWorks01 > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 40px; } #worksNav{ background: #eee; padding: 60px 0 60px 0; } #worksNav #topContents{ margin: 0 auto; } /* 施工実績 works */ #worksSec{} #worksSec .worksNav{ width: 85%; margin: 0 auto 80px auto; } #worksSec .worksNav ul{ display: flex; justify-content: space-between; } #worksSec .worksNav ul li{ flex-basis: 48%; } #worksSec .worksNav ul li.worksNavDenkikouji a{ display: block; font-size: 2rem; background: #d9d900; text-align: center; padding: 10px; border: 2px solid #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavDenkikouji a:hover{ background: #333; color: #d9d900; } #worksSec .worksNav ul li.worksNavReform a{ display: block; font-size: 2rem; background: #008c8c; color: #fff; text-align: center; padding: 10px; border: 2px solid #008c8c; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavReform a:hover{ background: #fff; color: #008c8c; } #worksSec .denkikoujiSecWorks01 > ul{ margin-bottom: 0; } .worksSecBtn{ width: 200px; margin: 0 0 0 auto; } .worksSecBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .worksSecBtn a i{ margin-left: 10px; font-size: 1.2rem; } .worksSecBtn a:hover{ color: #fff; background: #f90; } /* 料金表 price */ #priceSec{ margin-bottom: 300px; } #priceSec ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #priceSec ul li{ flex-basis: 100%; margin-bottom: 80px; } #priceSec ul li .priceSecBtn{} #priceSec ul li .priceSecBtn a{ display: block; color: #fff; font-size: 3rem; text-align: center; background: #e7111b; padding: 15px; border: 3px solid #e7111b; border-radius: 15px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #priceSec ul li .priceSecBtn a i{ margin-left: 10px; font-size: 3.5rem; } #priceSec ul li .priceSecBtn a:hover{ background: #fff; color: #e7111b; } /* 対応エリア area */ #areaSec{} .areaSecImg{ text-align: center; margin-bottom: 80px;} .areaSecTxt{ font-size: 1.8rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 80px; } /* ご依頼の流れ flow */ #flowSec{} .flowSec01{} .flowSec01 > ul{} .flowSec01 > ul > li{} .flowSec01 > ul > li > ul{ display: flex; justify-content: space-between; align-items: center; } .flowSec01 > ul > li > ul > li:nth-child(1){ flex-basis: 60%; } .flowSec01 > ul > li > ul > li:nth-child(2){ flex-basis: 35%; } .flowSec01 > ul > li > ul > li .flowSec01Tit{ display: flex; align-items: center; margin-bottom: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit span{ display: block; width: 70px; height: 70px; line-height: 70px; background: #0558ab; text-align: center; font-size: 5.5rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-right: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit p{ font-size: 4rem; color: #333; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.4; } .flowSec01 > ul > li > ul > li .flowSec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 30px; } .flowSec01 > ul > li > ul > li .flowSec01Tel{ background: #eee; padding: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Num{ color: #e7111b; font-size: 6.5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 10px; text-align: center; } .flowSec01 > ul > li > ul > li .flowSec01Num i{ font-size: 5.5rem; color: #333; margin-right: 5px; vertical-align: bottom; } .flowSec01 > ul > li > ul > li .flowSec01Num span{ display: block; font-size: 1.8rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .flowSec01 > ul > li > ul > li .flowSec01Btn{} .flowSec01 > ul > li > ul > li .flowSec01Btn a{ display: block; color: #fff; font-size: 2.2rem; text-align: center; background: #f90; border: 2px solid #f90; padding: 15px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Btn a:hover{ background: #fff; color: #f90; } .flowSec01 > ul > li > ul > li .flowSec01Img{} .flowSec01 > ul > li.arrow{ text-align: center; font-size: 9rem; margin: 60px 0; letter-spacing: -10px; } .flowSec01 > ul > li.arrow span:nth-child(1), .flowSec01 > ul > li.arrow span:nth-child(3){ color: rgba(5,88,171,0.6); } .flowSec01 > ul > li.arrow span:nth-child(2){ color: rgba(5,88,171,1); } /* 会社概要 company */ #companySec{} .companySec01{ margin-bottom: 80px; } .companySec01 ul{ display: flex; justify-content: space-between; } .companySec01 ul li:nth-child(1){ flex-basis: 54%; } .companySec01 ul li:nth-child(2){ flex-basis: 40%; } .companySec01 ul li .companySec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 20px; } .companySec01 ul li .companySec01Name{ font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .companySec01 ul li .companySec01Name span{ font-size: 2rem; margin-right: 20px; } .companySec01 ul li .companySec01Img img{ width: 100%; height: auto; } .companySec02{ margin-bottom: 80px; } .companySec02 table{ width: 100%; border-collapse: collapse; } .companySec02 table th{ width: 25%; font-size: 1.7rem; text-align: left; padding: 15px; border-bottom: 1px solid #ccc; } .companySec02 table td{ font-size: 1.7rem; padding: 15px; border-bottom: 1px solid #ccc; } .companySec03{ margin-bottom: 80px; } .companySec03Txt{ font-size: 1.8rem; font-weight: 500; margin-bottom: 20px; } .companySec03Map{ position: relative; padding-bottom: 44.64%; padding-top: 30px; height: 0; overflow: hidden; } .companySec03Map iframe, .companySec03Map object, .companySec03Map embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* スタッフ紹介 staff */ #staffSec{} .staffSec01{} .staffSec01 ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .staffSec01 ul li{ flex-basis: 31%; margin: 0 1% 40px 1%; } .staffSec01 ul li .staffSec01Img{ margin-bottom: 10px; } .staffSec01 ul li .staffSec01Img img{ border-radius: 50%; } .staffSec01 ul li .staffSec01Name{ font-size: 2.4rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: center; } .staffSec01 ul li .staffSec01Name span{ display: block; font-size: 1.5rem; } .view { overflow: hidden; position: relative; text-align: center; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; border-radius: 50%; } .view .mask,.view .content { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } .view img { display: block; position: relative; border-radius: 50%; } .view a.info { /* display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; border: 2px solid #000; color: #fff; text-transform: uppercase;*/ display: block; width: 100%; height: 100%; border-radius: 50%; background: #000; border: 2px solid #000; color: #fff; padding-top: 120px; } .view a.info i{ margin-left: 10px; font-size: 1.2rem; } .view a.info:hover{ background: #fff; color: #000; } .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; border-radius: 50%; } .view-tenth .mask { background-color: rgba(7, 109, 211, 0.5); transition: all 0.5s linear; opacity: 0; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { transform: scale(1); opacity: 1; /* margin-top: 115px; */ } .staffSec02{ position: relative; min-height: 800px; } .staffSec02Img{ position: absolute; top: 0; left: 0; z-index: 2; } .staffSec02Img img{ width: 60%; height: auto; } .staffSec02Name{ position: absolute; top: 50px; right: 130px; font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .staffSec02Name span{ display: block; font-size: 1.5rem; letter-spacing: 1px; } .staffSec02Txt{ position: absolute; top: 150px; background: #eee; padding: 40px; margin-left: 140px; } .staffSec02Txt p{ width: 45%; margin: 0 0 0 auto; font-size: 1.4rem; line-height: 1.6; } #contactSec{ margin-bottom: 100px; } #privacySec{} .privacySecTxt{ font-size: 1.6rem; margin-bottom: 60px; } .privacySecTxt ol{ margin: 10px 0 0 30px; } .privacySecTxt ol li{ list-style-type: decimal; } /* サイトマップ sitemap */ #sitemapSec{ margin-bottom: 100px; } .sitemapSec01{} .sitemapSec01 > ul{} .sitemapSec01 > ul > li{ display: block; flex-basis: 65%; padding: 0 10px 0 30px; position: relative; font-size: 2.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 3em; } .sitemapSec01 > ul > li:after{ display: block; content: ""; position: absolute; top: 20px; left: 0; width: 8px; height: 8px; background: #fff; border: 5px solid #076dd3; border-radius: 100%; } .sitemapSec01 > ul > li > ul{ margin: 0 0 10px 60px; } .sitemapSec01 > ul > li > ul > li{ list-style-type: disc; font-size: 1.8rem; line-height: 2em; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ TAB CSS END ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ PC CSS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media print, screen and (min-width:1025px) and (max-width:1419px){ /* ---------------------------------------------------------- ***** PC表示用CSS ***** index 1 - ページ共通css 2 - リンクの色 3 - ヘッダー 4 - フッター 5 - 見出し 6 - コンテンツ ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1 - ページ共通css ---------------------------------------------------------- */ /* フォントサイズ10px */ html{ font-size: 62.5%; } /* 基本のフォントサイズ */ body{ font-size: 16px; font-size: 1.8rem; } /* 非表示用 */ .nonePC { display: none !important; } /* ---------------------------------------------------------- 2 - リンクの色 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 3 - ヘッダー ---------------------------------------------------------- */ header{} header #header{ width: 1200px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } header .headerLogo{ flex-basis: 46%; } header .headerLogo a:hover{ opacity: 0.6; } header .headerTel{ flex-basis: 30%; } header .headerTel ul{} header .headerTel ul li{ line-height: 1; } header .headerTel ul li.headerTel01{ font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerTel ul li.headerTel02{} header .headerTel ul li.headerTel02 i{ font-size: 5rem; margin-right: 5px; vertical-align: bottom; } header .headerTel ul li.headerTel02 span{ color: #e7111b; font-size: 5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } header .headerTel ul li.headerTel03{ font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } header .headerBtn{ flex-basis: 22%; } header .headerBtn ul{ display: flex; justify-content: space-between; } header .headerBtn ul li{ flex-basis: 49%; } header .headerBtn ul li.headerBtn01{} header .headerBtn ul li.headerBtn01 a{ display: block; color: #fff; font-size: 2rem; padding: 10px; text-align: center; background: #f90; border: 2px solid #f90; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerBtn ul li.headerBtn01 a:hover{ background: #fff; color: #f90; } header .headerBtn ul li.headerBtn02{} header .headerBtn ul li.headerBtn02 a{ display: block; color: #fff; font-size: 2rem; padding: 10px; text-align: center; background: #076dd3; border: 2px solid #076dd3; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerBtn ul li.headerBtn02 a:hover{ background: #fff; color: #076dd3; } header #gNavi{ background: #076dd3; } header #gNavi nav{ width: 1200px; margin: 0 auto; } header #gNavi nav ul{ display: flex; } header #gNavi nav ul li{ flex: 1 0 auto; } header #gNavi nav ul li a{ display: block; font-size: 2rem; color: #fff; text-align: center; border-right: 1px solid #fff; padding: 25px 10px; } header #gNavi nav ul li:first-child a{ border-left: 1px solid #fff; } header #gNavi nav ul li a:hover{ background: #fff; color: #076dd3; } /* ---------------------------------------------------------- 4 - フッター ---------------------------------------------------------- */ /* ページ下部 固定メニュー */ .btmMenu { display: none; } footer{ background: #076dd3; padding: 60px 0 0 0; } footer #footer{ width: 1200px; margin: 0 auto 60px auto; color: #fff; display: flex; justify-content: space-between; } footer #footer .footerSec{ flex-basis: 31%; } footer #footer .footerSecLogo{ margin-bottom: 20px; } footer #footer .footerSecLogo a:hover{ opacity: 0.6; } footer #footer .footerSecAdd{ font-size: 1.6rem; margin-bottom: 20px; } footer #footer .footerSecTel{ border: 2px solid #fff; font-size: 4rem; text-align: center; padding: 5px; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } footer #footer .footerSecTel i{ margin-right: 10px; vertical-align: middle; } footer #footer .footerSecSitemap{ flex-basis: 60%; } footer #footer .footerSecSitemap > ul{ display: flex; justify-content: space-between; } footer #footer .footerSecSitemap > ul > li{ line-height: 2; } footer #footer .footerSecSitemap > ul > li:nth-child(1){ flex-basis: 43%; } footer #footer .footerSecSitemap > ul > li:nth-child(2){ flex-basis: 35%; } footer #footer .footerSecSitemap > ul > li:nth-child(3){ flex-basis: 19%; } footer #footer .footerSecSitemap > ul > li > ul{ } footer #footer .footerSecSitemap > ul > li > ul > li{ position: relative; padding-left: 20px; } footer #footer .footerSecSitemap > ul > li > ul > li:after{ position: absolute; content: ""; display: block; top: 1.6rem; left: 0; width: 8px; height: 8px; background-color: #fff; border-radius: 100%; } footer #footer .footerSecSitemap > ul > li > ul > li a{ color: #fff; font-size: 1.5rem; font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; font-weight: 400; font-style: normal; } footer #footer .footerSecSitemap > ul > li > ul > li a:hover{ opacity: 0.6; } footer #footer .footerSecSitemap > ul > li > ul > li > ul{ margin: 0 0 5px 20px; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li{ position: relative; padding-left: 20px; line-height: 1.5; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li:after{ position: absolute; content: ""; display: block; top: 1.3rem; left: 0; width: 5px; height: 5px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li a{ color: #fff; font-size: 1.2rem; font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; font-weight: 400; font-style: normal; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li a:hover{ opacity: 0.6; } #footerCopyright{ background: #0558ab; text-align: center; color: #fff; font-size: .9rem; padding: 10px 0; } /* ---------------------------------------------------------- 5 - 見出し ---------------------------------------------------------- */ #h1Wrap{ padding: 40px 0; } #h1Wrap h1{ width: 1200px; margin: 0 auto; font-size: 4.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .h1Reason{ background: url("../reason/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Service{ background: url("../service/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Denkikouji{ background: url("../service//denkikouji/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Reform{ background: url("../service//reform/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Works{ background: url("../works/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Price{ background: url("../price/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Area{ background: url("../area/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Flow{ background: url("../flow/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Company{ background: url("../company/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Staff{ background: url("../staff/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Otoiawase{ background: url("../otoiawase/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Sitemap{ background: url("../sitemap/images/h1.jpg") no-repeat center center; background-size: cover; } h2{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 40px; } h2 span{ font-size: 2.5rem; } h3{ font-size: 3rem; padding: 0 0 0 10px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 30px; border-left: 10px solid #0558ab; } h3 span{ border-left: 10px solid #666; padding-left: 20px; } /* ぱんくず */ #breadcrumbs{ width: 1200px; margin: 0 auto; } #breadcrumbs ol{ } #breadcrumbs ol li{ display: inline-block; position: relative; } #breadcrumbs ol li:before{ content: ">"; display: block; position: absolute; top: .5em; left: 0px; color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #breadcrumbs ol li:first-child:before{ content: ""; } #breadcrumbs ol li a{ color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin: 0 0 0 13px; } #breadcrumbs ol li:first-child a{ margin: 0 0 0 0; } #breadcrumbs ol li a:hover{ opacity: 0.6; } /* ---------------------------------------------------------- 6 - コンテンツ ---------------------------------------------------------- */ /************** トップページ **************/ #topImg{ width: 97%; margin: 10px auto; } .slick-slide{ margin: 0px 5px; } .slick-slide img{ width: 100%; height: auto; } .slick-prev:before, .slick-next:before{ color: black; } .slick-slide{ transition: all ease-in-out .3s; opacity: .2; } .slick-active{ opacity: .5; } .slick-current{ opacity: 1; } #topBnr{width: 100%; max-width: 1200px;} #topBnr a{flex-basis: 48%;} #topBnr img{width: 100%; height: auto;} #topMessage{ background: #f90; margin-bottom: 40px; } #topMessage .topMessageSec{ width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #topMessage .topMessageSec p{ font-size: 4rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn{} #topMessage .topMessageSec .topMessageSecBtn a{ display: block; font-size: 2.5rem; color: #fff; text-align: center; background: #e7111b; border: 4px solid #e7111b; padding: 10px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn a i{ margin-left: 10px; } #topMessage .topMessageSec .topMessageSecBtn a:hover{ color: #e7111b; background: #fff; } #topTxt{ width: 100%; margin: 0 auto; padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 60px; } #topTxt p{ font-size: 1.6rem; } #topContents{ width: 100%; margin: 0 auto 80px auto; } #topContents > ul{ display: flex; justify-content: space-between; } #topContents > ul > li{ flex-basis: 48%; } #topContents > ul > li.topDenkikoujiSec{} #topContents > ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } #topContents > ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } #topContents > ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } #topContents > ul > li .topContentsImg{ margin-bottom: 10px; } #topContents > ul > li .topContentsTxt{ font-size: 1.4rem; min-height: 90px; } #topContents > ul > li .topContentsBtn{ font-size: 2rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topContents > ul > li .topContentsBtn > ul{ display: flex; justify-content: space-between; } #topContents > ul > li .topContentsBtn > ul > li{ flex-basis: 48%; } #topContents > ul > li .topContentsBtn > ul > li a{ display: block; text-align: center; padding: 5px; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn{} #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a{ background: #d9d900; color: #333; border: 2px solid #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a:hover{ background: #333; color: #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn{} #topContents > ul > li .topContentsBtn > ul > li.reformBtn a{ background: #008c8c; color: #fff; border: 2px solid #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn a:hover{ background: #fff; color: #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn{} #topContents > ul > li .topContentsBtn > ul > li.priceBtn a{ background: #076dd3; color: #fff; border: 2px solid #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn a:hover{ background: #fff; color: #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a i, #topContents > ul > li .topContentsBtn > ul > li.reformBtn a i, #topContents > ul > li .topContentsBtn > ul > li.priceBtn a i{ margin-left: 10px; font-size: 1.5rem; } .topContentsImg img{width: 100%;} #topWorks{ width: 1200px; margin: 0 auto 80px auto; } #topWorks .topWorksTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; } #topWorks .topWorksTit > ul{ display: flex; justify-content: space-between; align-items: center; } #topWorks .topWorksTit > ul > li{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topWorks .topWorksTit > ul > li span{ font-size: 2rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; vertical-align: middle; margin-left: 20px; } #topWorks .topWorksTit > ul > li .topWorksBtn{ } #topWorks .topWorksTit > ul > li .topWorksBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksTit > ul > li .topWorksBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topWorks .topWorksTit > ul > li .topWorksBtn a:hover{ color: #fff; background: #f90; } #topWorks .topWorksSec{} #topWorks .topWorksSec > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topWorks .topWorksSec > ul > li{ flex-basis: 19%; margin-bottom: 40px; } #topWorks .topWorksSec > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } #topWorks .topWorksSec > ul > li img{ width: 100%; height: auto; } #topWorks .topWorksSec > ul > li .topWorksSecDate{ flex-basis: 40%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } #topWorks .topWorksSec > ul > li .topWorksSecCat{ flex-basis: 60%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksSec > ul > li a .denkikouji{ background: #d9d900; color: #333; } #topWorks .topWorksSec > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } #topWorks .topWorksSec > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } #topWorks .topWorksSec > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 40px; } #topBtn{ width: 100%; overflow: hidden; margin-bottom: 80px; } #topBtn ul{ display: flex; justify-content: space-between; } #topBtn ul li{ flex-basis: 33.3333%; position: relative; border-right: 1px solid #fff; } #topBtn ul li:last-child{ border-right: none; } #topBtn ul li .topSecTit{ text-align: center; z-index: 1; position: relative; } #topBtn ul li .topSecTit01{ color: #fff; font-size: 2.8rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topBtn ul li .topSecTit02{ font-size: 5rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.3; } #topBtn ul li a{ display: block; overflow: hidden; } #topBtn ul li .topSecImg { position: relative; overflow: hidden; text-align: center; padding: 100px 0; } #topBtn ul li.topSecImg01 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_faq01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg02 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_flow01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg03 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_company01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li .topSecImg:hover:after { opacity: 1; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #topBtn ul li .topSecImg:before{ z-index: 1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } #topInfo{ width: 1200px; margin: 0 auto 80px auto; display: flex; justify-content: space-between; } #topInfo #topNews{ flex-basis: 48%; } #topInfo #topNews .topNewsTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topInfo #topNews .topNewsTxt{} #topInfo #topNews .topNewsTxt ul{ margin-bottom: 20px; } #topInfo #topNews .topNewsTxt ul li{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding: 25px 0; } #topInfo #topNews .topNewsTxt ul li .topNewsCat{ flex-basis: 15%; text-align: center; font-size: 1.3rem; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 3px 10px; } #topInfo #topNews .topNewsTxt ul li .news-news{ background: #076dd3; } #topInfo #topNews .topNewsTxt ul li .news-works{ background: #f90; } #topInfo #topNews .topNewsTxt ul li .topNewsDate01{ flex-basis: 15%; text-align: center; font-size: 1.6rem; color: #aaa; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsTxt ul li .topNewsTit01{ flex-basis: 65%; font-size: 1.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; } #topInfo #topNews .topNewsBtn{ width: 180px; margin: 0 0 0 auto; } #topInfo #topNews .topNewsBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topInfo #topNews .topNewsBtn a:hover{ color: #fff; background: #f90; } #topInfo #topFb{ flex-basis: 48%; } #topInfo #topFb .topFbSec{} /* くぼけんが選ばれる理由 reason */ #contents{ width: 1120px; margin: 0 auto; padding: 80px 0; } .balloonSec{ position: relative; display: block; padding: 10px; color: #fff; background: #e7111b; font-size: 4rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; margin-bottom: 60px; } .balloonSec:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #e7111b;} .balloonSec p{ margin: 0; padding: 0; } #denkikoujiSec .balloonSec{ background: #d9d900; color: #333; } #denkikoujiSec .balloonSec:before{ border-top-color: #d9d900; } #reformSec .balloonSec{ background: #008c8c; color: #fff; } #reformSec .balloonSec:before{ border-top-color: #008c8c; } .secTxt{ font-size: 1.6rem; line-height: 1.6; margin-bottom: 40px; } .secTxt p{} .reasonSec01{} .reasonSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .reasonSec01 ul li{ flex-basis: 48.5%; margin-bottom: 40px; } .reasonSec01 ul li .reasonSec01Num{ width: 100px; height: 100px; border-radius: 50%; background: #0558ab; margin: 0 auto; text-align: center; color: #fff; font-size: 1.9rem; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1; padding-top: 13px; } .reasonSec01 ul li .reasonSec01Num span{ font-size: 6rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit{ font-size: 3.5rem; color: #333; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit span{ color: #066cd2; } .reasonSec01 ul li .reasonSec01Img{ margin-bottom: 10px; } .reasonSec01 ul li .reasonSec01Img img{ width: 100%; height: auto; } .reasonSec01 ul li .reasonSec01Txt{ font-size: 1.6rem; } .reasonSec01 ul li .reasonSec01Btn{ width: 210px; margin-top: 10px; } .reasonSec01 ul li .reasonSec01Btn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Btn a i{ margin-left: 10px; font-size: 1.2rem; } .reasonSec01 ul li .reasonSec01Btn a:hover{ color: #fff; background: #f90; } /* サービス紹介 service */ .serviceSec01{ } .serviceSec01 > ul{ display: flex; justify-content: space-between; } .serviceSec01 ul > li{ flex-basis: 48%; } .serviceSec01 ul > li.topDenkikoujiSec{} .serviceSec01 ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } .serviceSec01 ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } .serviceSec01 ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } .serviceSec01 ul > li .topContentsImg{ margin-bottom: 10px; } .serviceSec01 ul > li .topContentsImg img{ width: 100%; height: auto } .serviceSec01 ul > li .topContentsTxt{ font-size: 1.4rem; min-height: 100px; } .serviceSec01 ul > li .serviceSec01Btn{ font-size: 1.7rem; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .serviceSec01 ul > li .serviceSec01Btn > ul{ } .serviceSec01 ul > li .serviceSec01Btn > ul > li{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d{ background: #d9d900; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #d9d900; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a{ flex-basis: 35%; display: block; color: #fff; background: #880; border: 2px solid #880; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a:hover{ background: #fff; color: #880; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r{ background: #008c8c; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; color: #fff; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #008c8c; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a{ flex-basis: 35%; display: block; color: #fff; background: #055; border: 2px solid #055; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a:hover{ background: #fff; color: #055; } /* サービス紹介　＞　電気・空調工事 service/denkikouji */ #denkikoujiSec, #reformSec{ margin-bottom: 80px; } .denkikoujiSec01{ margin-bottom: 60px; } .denkikoujiSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .denkikoujiSec01 ul li{ flex-basis: 20%; border-right: 1px solid #ccc; padding: 0 15px; margin-bottom: 40px; } .denkikoujiSec01 ul li:nth-child(5n){ border-right: 0; } .denkikoujiSec01 ul li .denkikoujiSec01Img{ width: 100%; margin: 0 auto 10px auto; } .denkikoujiSec01 ul li .denkikoujiSec01Img img{ width: 100%; height: auto; border-radius: 100%; } .denkikoujiSec01 ul li .denkikoujiSec01Tit{ font-size: 1.8rem; color: #666; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; margin-bottom: 5px; min-height: 50px; } .denkikoujiSec01 ul li .denkikoujiSec01Txt{ font-size: 1.3rem; line-height: 1.5; margin-bottom: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price{ font-size: 2.9rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -.5px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } #reformSec .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #008c8c; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price02{ font-size: 1.6rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .denkikoujiSec01Btn{ width: 60%; margin: 0 auto; } .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #333; text-align: center; background: #d9d900; border: 3px solid #d9d900; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #reformSec .denkikoujiSec01Btn a, #reformSecWorks .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #fff; text-align: center; background: #008c8c; border: 3px solid #008c8c; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .denkikoujiSec01Btn a:hover{ background: #333; color: #d9d900; } #reformSec .denkikoujiSec01Btn a:hover, #reformSecWorks .denkikoujiSec01Btn a:hover{ background: #fff; color: #008c8c; } #denkikoujiSecWorks, #reformSecWorks{ margin-bottom: 100px; } .denkikoujiSecWorks01{ } .denkikoujiSecWorks01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; } .denkikoujiSecWorks01 > ul > li{ flex-basis: 24%; margin-bottom: 40px; } .denkikoujiSecWorks01 > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .denkikoujiSecWorks01 > ul > li img{ width: 100%; height: auto; } .denkikoujiSecWorks01 > ul > li .topWorksSecDate{ flex-basis: 50%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecCat{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .denkikoujiSecWorks01 > ul > li .topWorksSecJobsite{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; background: #f0f0f0; } .denkikoujiSecWorks01 > ul > li a .denkikouji{ background: #d9d900; color: #333; } .denkikoujiSecWorks01 > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } .denkikoujiSecWorks01 > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 40px; } #worksNav{ background: #eee; padding: 60px 0 60px 0; } #worksNav #topContents{ margin: 0 auto; } /* 施工実績 works */ #worksSec{} #worksSec .worksNav{ width: 750px; margin: 0 auto 80px auto; } #worksSec .worksNav ul{ display: flex; justify-content: space-between; } #worksSec .worksNav ul li{ flex-basis: 48%; } #worksSec .worksNav ul li.worksNavDenkikouji a{ display: block; font-size: 2rem; background: #d9d900; text-align: center; padding: 10px; border: 2px solid #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavDenkikouji a:hover{ background: #333; color: #d9d900; } #worksSec .worksNav ul li.worksNavReform a{ display: block; font-size: 2rem; background: #008c8c; color: #fff; text-align: center; padding: 10px; border: 2px solid #008c8c; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavReform a:hover{ background: #fff; color: #008c8c; } #worksSec .denkikoujiSecWorks01 > ul{ margin-bottom: 0; } .worksSecBtn{ width: 200px; margin: 0 0 0 auto; } .worksSecBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .worksSecBtn a i{ margin-left: 10px; font-size: 1.2rem; } .worksSecBtn a:hover{ color: #fff; background: #f90; } /* 料金表 price */ #priceSec{ margin-bottom: 300px; } #priceSec ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #priceSec ul li{ flex-basis: 48%; margin-bottom: 80px; } #priceSec ul li .priceSecBtn{} #priceSec ul li .priceSecBtn a{ display: block; color: #fff; font-size: 3rem; text-align: center; background: #e7111b; padding: 15px; border: 3px solid #e7111b; border-radius: 15px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #priceSec ul li .priceSecBtn a i{ margin-left: 10px; font-size: 3.5rem; } #priceSec ul li .priceSecBtn a:hover{ background: #fff; color: #e7111b; } /* 対応エリア area */ #areaSec{} .areaSecImg{ text-align: center; margin-bottom: 80px;} .areaSecTxt{ font-size: 1.8rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 80px; } /* ご依頼の流れ flow */ #flowSec{} .flowSec01{} .flowSec01 > ul{} .flowSec01 > ul > li{} .flowSec01 > ul > li > ul{ display: flex; justify-content: space-between; align-items: center; } .flowSec01 > ul > li > ul > li:nth-child(1){ flex-basis: 60%; } .flowSec01 > ul > li > ul > li:nth-child(2){ flex-basis: 35%; } .flowSec01 > ul > li > ul > li .flowSec01Tit{ display: flex; align-items: center; margin-bottom: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit span{ display: block; width: 70px; height: 70px; line-height: 70px; background: #0558ab; text-align: center; font-size: 5.5rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-right: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit p{ font-size: 4rem; color: #333; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 30px; } .flowSec01 > ul > li > ul > li .flowSec01Tel{ background: #eee; padding: 40px; } .flowSec01 > ul > li > ul > li .flowSec01Num{ color: #e7111b; font-size: 6.5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 10px; text-align: center; } .flowSec01 > ul > li > ul > li .flowSec01Num i{ font-size: 5.5rem; color: #333; margin-right: 5px; vertical-align: bottom; } .flowSec01 > ul > li > ul > li .flowSec01Num span{ display: block; font-size: 1.8rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .flowSec01 > ul > li > ul > li .flowSec01Btn{} .flowSec01 > ul > li > ul > li .flowSec01Btn a{ display: block; color: #fff; font-size: 2.2rem; text-align: center; background: #f90; border: 2px solid #f90; padding: 15px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Btn a:hover{ background: #fff; color: #f90; } .flowSec01 > ul > li > ul > li .flowSec01Img{} .flowSec01 > ul > li.arrow{ text-align: center; font-size: 9rem; margin: 60px 0; letter-spacing: -10px; } .flowSec01 > ul > li.arrow span:nth-child(1), .flowSec01 > ul > li.arrow span:nth-child(3){ color: rgba(5,88,171,0.6); } .flowSec01 > ul > li.arrow span:nth-child(2){ color: rgba(5,88,171,1); } /* 会社概要 company */ #companySec{} .companySec01{ margin-bottom: 80px; } .companySec01 ul{ display: flex; justify-content: space-between; } .companySec01 ul li:nth-child(1){ flex-basis: 54%; } .companySec01 ul li:nth-child(2){ flex-basis: 40%; } .companySec01 ul li .companySec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 20px; } .companySec01 ul li .companySec01Name{ font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .companySec01 ul li .companySec01Name span{ font-size: 2rem; margin-right: 20px; } .companySec01 ul li .companySec01Img img{ width: 100%; height: auto; } .companySec02{ margin-bottom: 80px; } .companySec02 table{ width: 100%; border-collapse: collapse; } .companySec02 table th{ width: 25%; font-size: 1.7rem; text-align: left; padding: 15px; border-bottom: 1px solid #ccc; } .companySec02 table td{ font-size: 1.7rem; padding: 15px; border-bottom: 1px solid #ccc; } .companySec03{ margin-bottom: 80px; } .companySec03Txt{ font-size: 1.8rem; font-weight: 500; margin-bottom: 20px; } .companySec03Map{ } /* スタッフ紹介 staff */ #staffSec{} .staffSec01{} .staffSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .staffSec01 ul li{ flex-basis: 23%; margin-bottom: 40px; } .staffSec01 ul li .staffSec01Img{ margin-bottom: 10px; } .staffSec01 ul li .staffSec01Img img{ border-radius: 50%; } .staffSec01 ul li .staffSec01Name{ font-size: 2.4rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: center; } .staffSec01 ul li .staffSec01Name span{ display: block; font-size: 1.5rem; } .view { overflow: hidden; position: relative; text-align: center; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; border-radius: 50%; } .view .mask,.view .content { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } .view img { display: block; position: relative; border-radius: 50%; } .view a.info { /* display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; border: 2px solid #000; color: #fff; text-transform: uppercase;*/ display: block; width: 100%; height: 100%; border-radius: 50%; background: #000; border: 2px solid #000; color: #fff; padding-top: 120px; } .view a.info i{ margin-left: 10px; font-size: 1.2rem; } .view a.info:hover{ background: #fff; color: #000; } .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; border-radius: 50%; } .view-tenth .mask { background-color: rgba(7, 109, 211, 0.5); transition: all 0.5s linear; opacity: 0; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { transform: scale(1); opacity: 1; /* margin-top: 115px; */ } .staffSec02{ position: relative; min-height: 800px; } .staffSec02Img{ position: absolute; top: 0; left: 0; z-index: 3; } .staffSec02Name{ position: absolute; top: 130px; right: 265px; font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .staffSec02Name span{ display: block; font-size: 1.5rem; letter-spacing: 1px; } .staffSec02Txt{ position: absolute; top: 250px; background: #eee; padding: 40px; margin-left: 150px; } .staffSec02Txt p{ width: 43%; margin: 0 0 0 auto; font-size: 1.4rem; line-height: 1.6; } #contactSec{ margin-bottom: 100px; } #privacySec{} .privacySecTxt{ font-size: 1.6rem; margin-bottom: 60px; } .privacySecTxt ol{ margin: 10px 0 0 30px; } .privacySecTxt ol li{ list-style-type: decimal; } /* サイトマップ sitemap */ #sitemapSec{ margin-bottom: 100px; } .sitemapSec01{} .sitemapSec01 > ul{} .sitemapSec01 > ul > li{ display: block; flex-basis: 65%; padding: 0 10px 0 30px; position: relative; font-size: 2.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 3em; } .sitemapSec01 > ul > li:after{ display: block; content: ""; position: absolute; top: 28px; left: 0; width: 8px; height: 8px; background: #fff; border: 5px solid #076dd3; border-radius: 100%; } .sitemapSec01 > ul > li > ul{ margin: 0 0 10px 60px; } .sitemapSec01 > ul > li > ul > li{ list-style-type: disc; font-size: 1.8rem; line-height: 2em; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ PC CSS END ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ PC WIDE CSS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media screen and (min-width:1420px){ /* ---------------------------------------------------------- ***** PCWIDE表示用CSS ***** index 1 - ページ共通css 2 - リンクの色 3 - ヘッダー 4 - フッター 5 - 見出し 6 - コンテンツ ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1 - ページ共通css ---------------------------------------------------------- */ /* フォントサイズ10px */ html{ font-size: 62.5%; height: 100%; } /* 基本のフォントサイズ */ body{ font-size: 16px; font-size: 1.8rem; height: 100%; } /* 非表示用 */ .nonePCWIDE { display: none !important; } /* ---------------------------------------------------------- 2 - リンクの色 ---------------------------------------------------------- */ /* ---------------------------------------------------------- 3 - ヘッダー ---------------------------------------------------------- */ header{} header #header{ width: 1200px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } header .headerLogo{ flex-basis: 46%; } header .headerLogo a:hover{ opacity: 0.6; } header .headerTel{ flex-basis: 30%; } header .headerTel ul{} header .headerTel ul li{ line-height: 1; } header .headerTel ul li.headerTel01{ font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerTel ul li.headerTel02{} header .headerTel ul li.headerTel02 i{ font-size: 5rem; margin-right: 5px; vertical-align: bottom; } header .headerTel ul li.headerTel02 span{ color: #e7111b; font-size: 5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } header .headerTel ul li.headerTel03{ font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } header .headerBtn{ flex-basis: 22%; } header .headerBtn ul{ display: flex; justify-content: space-between; } header .headerBtn ul li{ flex-basis: 49%; } header .headerBtn ul li.headerBtn01{} header .headerBtn ul li.headerBtn01 a{ display: block; color: #fff; font-size: 2rem; padding: 10px; text-align: center; background: #f90; border: 2px solid #f90; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerBtn ul li.headerBtn01 a:hover{ background: #fff; color: #f90; } header .headerBtn ul li.headerBtn02{} header .headerBtn ul li.headerBtn02 a{ display: block; color: #fff; font-size: 2rem; padding: 10px; text-align: center; background: #076dd3; border: 2px solid #076dd3; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } header .headerBtn ul li.headerBtn02 a:hover{ background: #fff; color: #076dd3; } header #gNavi{ background: #076dd3; } header #gNavi nav{ width: 1200px; margin: 0 auto; } header #gNavi nav ul{ display: flex; } header #gNavi nav ul li{ flex: 1 0 auto; } header #gNavi nav ul li a{ display: block; font-size: 2rem; color: #fff; text-align: center; border-right: 1px solid #fff; padding: 25px 10px; } header #gNavi nav ul li:first-child a{ border-left: 1px solid #fff; } header #gNavi nav ul li a:hover{ background: #fff; color: #076dd3; } header #gNavi nav ul li:last-child a{ background: #3c9a64; color: #fff; } header #gNavi nav ul li:last-child a:hover{ background: #fff; color: #3c9a64; } /* ---------------------------------------------------------- 4 - フッター ---------------------------------------------------------- */ /* ページ下部 固定メニュー */ .btmMenu { display: none; } footer{ background: #076dd3; padding: 60px 0 0 0; } footer #footer{ width: 1200px; margin: 0 auto 60px auto; color: #fff; display: flex; justify-content: space-between; } footer #footer .footerSec{ flex-basis: 31%; } footer #footer .footerSecLogo{ margin-bottom: 20px; } footer #footer .footerSecLogo a:hover{ opacity: 0.6; } footer #footer .footerSecAdd{ font-size: 1.6rem; margin-bottom: 20px; } footer #footer .footerSecTel{ border: 2px solid #fff; font-size: 4rem; text-align: center; padding: 5px; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } footer #footer .footerSecTel i{ margin-right: 10px; vertical-align: middle; } footer #footer .footerSecSitemap{ flex-basis: 60%; } footer #footer .footerSecSitemap > ul{ display: flex; justify-content: space-between; } footer #footer .footerSecSitemap > ul > li{ line-height: 2; } footer #footer .footerSecSitemap > ul > li:nth-child(1){ flex-basis: 43%; } footer #footer .footerSecSitemap > ul > li:nth-child(2){ flex-basis: 35%; } footer #footer .footerSecSitemap > ul > li:nth-child(3){ flex-basis: 19%; } footer #footer .footerSecSitemap > ul > li > ul{ } footer #footer .footerSecSitemap > ul > li > ul > li{ position: relative; padding-left: 20px; } footer #footer .footerSecSitemap > ul > li > ul > li:after{ position: absolute; content: ""; display: block; top: 1.6rem; left: 0; width: 8px; height: 8px; background-color: #fff; border-radius: 100%; } footer #footer .footerSecSitemap > ul > li > ul > li a{ color: #fff; font-size: 1.5rem; font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; font-weight: 400; font-style: normal; } footer #footer .footerSecSitemap > ul > li > ul > li a:hover{ opacity: 0.6; } footer #footer .footerSecSitemap > ul > li > ul > li > ul{ margin: 0 0 5px 20px; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li{ position: relative; padding-left: 20px; line-height: 1.5; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li:after{ position: absolute; content: ""; display: block; top: 1.3rem; left: 0; width: 5px; height: 5px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li a{ color: #fff; font-size: 1.2rem; font-family: a-otf-midashi-go-mb31-pr6n, sans-serif; font-weight: 400; font-style: normal; } footer #footer .footerSecSitemap > ul > li > ul > li > ul > li a:hover{ opacity: 0.6; } #footerCopyright{ background: #0558ab; text-align: center; color: #fff; font-size: .9rem; padding: 10px 0; } /* ---------------------------------------------------------- 5 - 見出し ---------------------------------------------------------- */ #h1Wrap{ padding: 40px 0; } #h1Wrap h1{ width: 1200px; margin: 0 auto; font-size: 4.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .h1Reason{ background: url("../reason/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Service{ background: url("../service/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Denkikouji{ background: url("../service//denkikouji/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Reform{ background: url("../service//reform/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Works{ background: url("../works/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Price{ background: url("../price/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Area{ background: url("../area/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Flow{ background: url("../flow/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Company{ background: url("../company/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Staff{ background: url("../staff/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Otoiawase{ background: url("../otoiawase/images/h1.jpg") no-repeat center center; background-size: cover; } .h1Sitemap{ background: url("../sitemap/images/h1.jpg") no-repeat center center; background-size: cover; } h2{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 40px; line-height: 1.4; padding: 10px 0; } h2 span{ font-size: 2.5rem; } h3{ font-size: 3rem; padding: 0 0 0 10px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 30px; border-left: 10px solid #0558ab; } h3 span{ border-left: 10px solid #666; padding-left: 20px; } /* ぱんくず */ #breadcrumbs{ width: 1200px; margin: 0 auto; } #breadcrumbs ol{ } #breadcrumbs ol li{ display: inline-block; position: relative; } #breadcrumbs ol li:before{ content: ">"; display: block; position: absolute; top: .5em; left: 0px; color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #breadcrumbs ol li:first-child:before{ content: ""; } #breadcrumbs ol li a{ color: #333; font-size: 1.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin: 0 0 0 13px; } #breadcrumbs ol li:first-child a{ margin: 0 0 0 0; } #breadcrumbs ol li a:hover{ opacity: 0.6; } /* ---------------------------------------------------------- 6 - コンテンツ ---------------------------------------------------------- */ /************** トップページ **************/ #topImg{ width: 97%; margin: 10px auto; } .slick-slide{ margin: 0px 5px; } .slick-slide img{ width: 100%; height: auto; } .slick-prev:before, .slick-next:before{ color: black; } .slick-slide{ transition: all ease-in-out .3s; opacity: .2; } .slick-active{ opacity: .5; } .slick-current{ opacity: 1; } #topMessage{ background: #f90; margin-bottom: 40px; } #topMessage .topMessageSec{ width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #topMessage .topMessageSec p{ font-size: 4rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn{} #topMessage .topMessageSec .topMessageSecBtn a{ display: block; font-size: 2.5rem; color: #fff; text-align: center; background: #e7111b; border: 4px solid #e7111b; padding: 10px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topMessage .topMessageSec .topMessageSecBtn a i{ margin-left: 10px; } #topMessage .topMessageSec .topMessageSecBtn a:hover{ color: #e7111b; background: #fff; } #topTxt{ width: 1200px; margin: 0 auto; padding-bottom: 30px; border-bottom: 1px solid #ccc; margin-bottom: 60px; } #topTxt p{ font-size: 1.6rem; } #topContents{ width: 1200px; margin: 0 auto 80px auto; } #topContents > ul{ display: flex; justify-content: space-between; } #topContents > ul > li{ flex-basis: 48%; } #topContents > ul > li.topDenkikoujiSec{} #topContents > ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } #topContents > ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } #topContents > ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } #topContents > ul > li .topContentsImg{ margin-bottom: 10px; } #topContents > ul > li .topContentsTxt{ font-size: 1.4rem; min-height: 90px; } #topContents > ul > li .topContentsBtn{ font-size: 2rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topContents > ul > li .topContentsBtn > ul{ display: flex; justify-content: space-between; } #topContents > ul > li .topContentsBtn > ul > li{ flex-basis: 48%; } #topContents > ul > li .topContentsBtn > ul > li a{ display: block; text-align: center; padding: 5px; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn{} #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a{ background: #d9d900; color: #333; border: 2px solid #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a:hover{ background: #333; color: #d9d900; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn{} #topContents > ul > li .topContentsBtn > ul > li.reformBtn a{ background: #008c8c; color: #fff; border: 2px solid #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.reformBtn a:hover{ background: #fff; color: #008c8c; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn{} #topContents > ul > li .topContentsBtn > ul > li.priceBtn a{ background: #076dd3; color: #fff; border: 2px solid #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.priceBtn a:hover{ background: #fff; color: #076dd3; } #topContents > ul > li .topContentsBtn > ul > li.denkikoujiBtn a i, #topContents > ul > li .topContentsBtn > ul > li.reformBtn a i, #topContents > ul > li .topContentsBtn > ul > li.priceBtn a i{ margin-left: 10px; font-size: 1.5rem; } #topWorks{ width: 1200px; margin: 0 auto 80px auto; } #topWorks .topWorksTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; } #topWorks .topWorksTit > ul{ display: flex; justify-content: space-between; align-items: center; } #topWorks .topWorksTit > ul > li{ font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topWorks .topWorksTit > ul > li span{ font-size: 2rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; vertical-align: middle; margin-left: 20px; } #topWorks .topWorksTit > ul > li .topWorksBtn{ } #topWorks .topWorksTit > ul > li .topWorksBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksTit > ul > li .topWorksBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topWorks .topWorksTit > ul > li .topWorksBtn a:hover{ color: #fff; background: #f90; } #topWorks .topWorksSec{} #topWorks .topWorksSec > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #topWorks .topWorksSec > ul > li{ flex-basis: 19%; margin-bottom: 40px; } #topWorks .topWorksSec > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } #topWorks .topWorksSec > ul > li img{ width: 100%; height: auto; } #topWorks .topWorksSec > ul > li .topWorksSecDate{ flex-basis: 40%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } #topWorks .topWorksSec > ul > li .topWorksSecCat{ flex-basis: 60%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #topWorks .topWorksSec > ul > li a .denkikouji{ background: #d9d900; color: #333; } #topWorks .topWorksSec > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } #topWorks .topWorksSec > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } #topWorks .topWorksSec > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 40px; } #topBtn{ width: 100%; overflow: hidden; margin-bottom: 80px; } #topBtn ul{ display: flex; justify-content: space-between; } #topBtn ul li{ flex-basis: 33.3333%; position: relative; border-right: 1px solid #fff; } #topBtn ul li:last-child{ border-right: none; } #topBtn ul li .topSecTit{ text-align: center; z-index: 1; position: relative; } #topBtn ul li .topSecTit01{ color: #fff; font-size: 2.8rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topBtn ul li .topSecTit02{ font-size: 5rem; color: #fff; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1.3; } #topBtn ul li a{ display: block; overflow: hidden; } #topBtn ul li .topSecImg { position: relative; overflow: hidden; text-align: center; padding: 100px 0; } #topBtn ul li.topSecImg01 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_faq01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg02 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_flow01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li.topSecImg03 .topSecImg:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("../images/btn_company01.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } #topBtn ul li .topSecImg:hover:after { opacity: 1; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #topBtn ul li .topSecImg:before{ z-index: 1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); } #topInfo{ width: 1200px; margin: 0 auto 80px auto; display: flex; justify-content: space-between; } #topInfo #topNews{ flex-basis: 48%; } #topInfo #topNews .topNewsTit{ border-top: 2px solid #076dd3; border-bottom: 2px solid #076dd3; margin-bottom: 30px; font-size: 3.5rem; color: #076dd3; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #topInfo #topNews .topNewsTxt{} #topInfo #topNews .topNewsTxt ul{ margin-bottom: 20px; } #topInfo #topNews .topNewsTxt ul li{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding: 25px 0; } #topInfo #topNews .topNewsTxt ul li .topNewsCat{ flex-basis: 15%; text-align: center; font-size: 1.3rem; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 3px 10px; } #topInfo #topNews .topNewsTxt ul li .news-news{ background: #076dd3; } #topInfo #topNews .topNewsTxt ul li .news-works{ background: #f90; } #topInfo #topNews .topNewsTxt ul li .topNewsDate01{ flex-basis: 15%; text-align: center; font-size: 1.6rem; color: #aaa; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsTxt ul li .topNewsTit01{ flex-basis: 65%; font-size: 1.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; } #topInfo #topNews .topNewsBtn{ width: 180px; margin: 0 0 0 auto; } #topInfo #topNews .topNewsBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } #topInfo #topNews .topNewsBtn a i{ margin-left: 10px; font-size: 1.2rem; } #topInfo #topNews .topNewsBtn a:hover{ color: #fff; background: #f90; } #topInfo #topFb{ flex-basis: 48%; } #topInfo #topFb .topFbSec{} /* くぼけんが選ばれる理由 reason */ #contents{ width: 1120px; margin: 0 auto; padding: 80px 0; } .balloonSec{ position: relative; display: block; padding: 10px; color: #fff; background: #e7111b; font-size: 4rem; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; margin-bottom: 60px; } .balloonSec:before{ content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #e7111b;} .balloonSec p{ margin: 0; padding: 0; } #denkikoujiSec .balloonSec{ background: #d9d900; color: #333; } #denkikoujiSec .balloonSec:before{ border-top-color: #d9d900; } #reformSec .balloonSec{ background: #008c8c; color: #fff; } #reformSec .balloonSec:before{ border-top-color: #008c8c; } .secTxt{ font-size: 1.6rem; line-height: 1.6; margin-bottom: 40px; } .secTxt p{} .reasonSec01{} .reasonSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .reasonSec01 ul li{ flex-basis: 48.5%; margin-bottom: 40px; } .reasonSec01 ul li .reasonSec01Num{ width: 100px; height: 100px; border-radius: 50%; background: #0558ab; margin: 0 auto; text-align: center; color: #fff; font-size: 1.9rem; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; line-height: 1; padding-top: 13px; } .reasonSec01 ul li .reasonSec01Num span{ font-size: 6rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit{ font-size: 3.5rem; color: #333; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .reasonSec01 ul li .reasonSec01Tit span{ color: #066cd2; } .reasonSec01 ul li .reasonSec01Img{ margin-bottom: 10px; } .reasonSec01 ul li .reasonSec01Img img{ width: 100%; height: auto; } .reasonSec01 ul li .reasonSec01Txt{ font-size: 1.6rem; } .reasonSec01 ul li .reasonSec01Btn{ width: 210px; margin-top: 10px; } .reasonSec01 ul li .reasonSec01Btn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .reasonSec01 ul li .reasonSec01Btn a i{ margin-left: 10px; font-size: 1.2rem; } .reasonSec01 ul li .reasonSec01Btn a:hover{ color: #fff; background: #f90; } /* サービス紹介 service */ .serviceSec01{ } .serviceSec01 > ul{ display: flex; justify-content: space-between; } .serviceSec01 ul > li{ flex-basis: 48%; } .serviceSec01 ul > li.topDenkikoujiSec{} .serviceSec01 ul > li .topContentsTit{ font-size: 3rem; border-radius: 15px 15px 0 0; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; padding: 5px; } .serviceSec01 ul > li.topDenkikoujiSec .topContentsTit{ background: #d9d900; color: #333; } .serviceSec01 ul > li.topReformSec .topContentsTit{ background: #008c8c; color: #fff; } .serviceSec01 ul > li .topContentsImg{ margin-bottom: 10px; } .serviceSec01 ul > li .topContentsImg img{ width: 100%; height: auto } .serviceSec01 ul > li .topContentsTxt{ font-size: 1.4rem; min-height: 100px; } .serviceSec01 ul > li .serviceSec01Btn{ font-size: 1.7rem; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .serviceSec01 ul > li .serviceSec01Btn > ul{ } .serviceSec01 ul > li .serviceSec01Btn > ul > li{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d{ background: #d9d900; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #d9d900; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a{ flex-basis: 35%; display: block; color: #fff; background: #880; border: 2px solid #880; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01d a:hover{ background: #fff; color: #880; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r{ background: #008c8c; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span{ display: block; flex-basis: 65%; padding: 0 10px 0 40px; color: #fff; position: relative; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r span:after{ display: block; content: ""; position: absolute; top: .5em; left: 13px; width: 8px; height: 8px; background: #008c8c; border: 5px solid #fff; border-radius: 100%; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a{ flex-basis: 35%; display: block; color: #fff; background: #055; border: 2px solid #055; text-align: center; padding: 5px; letter-spacing: 1px; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a i{ margin-left: 5px; font-size: 1.2rem; } .serviceSec01 ul > li .serviceSec01Btn > ul > li.serviceSec01Btn01r a:hover{ background: #fff; color: #055; } /* サービス紹介　＞　電気・空調工事 service/denkikouji */ #denkikoujiSec, #reformSec{ margin-bottom: 80px; } .denkikoujiSec01{ margin-bottom: 60px; } .denkikoujiSec01 ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .denkikoujiSec01 ul li{ flex-basis: 20%; border-right: 1px solid #ccc; padding: 0 15px; margin-bottom: 40px; } .denkikoujiSec01 ul li:nth-child(5n){ border-right: 0; } .denkikoujiSec01 ul li .denkikoujiSec01Img{ width: 100%; margin: 0 auto 10px auto; } .denkikoujiSec01 ul li .denkikoujiSec01Img img{ width: 100%; height: auto; border-radius: 100%; } .denkikoujiSec01 ul li .denkikoujiSec01Tit{ font-size: 1.8rem; color: #666; text-align: center; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; line-height: 1.3; margin-bottom: 5px; min-height: 50px; } .denkikoujiSec01 ul li .denkikoujiSec01Txt{ font-size: 1.3rem; line-height: 1.5; margin-bottom: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price{ font-size: 2.9rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -.5px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } #reformSec .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price01{ font-size: 1.2rem; background: #008c8c; color: #fff; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; padding: 2px 4px; letter-spacing: -.5px; margin-right: 10px; } .denkikoujiSec01 ul li .denkikoujiSec01Price .denkikoujiSec01Price02{ font-size: 1.6rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; letter-spacing: -1px; } .denkikoujiSec01Btn{ width: 60%; margin: 0 auto; } .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #333; text-align: center; background: #d9d900; border: 3px solid #d9d900; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #reformSec .denkikoujiSec01Btn a, #reformSecWorks .denkikoujiSec01Btn a{ display: block; font-size: 3rem; color: #fff; text-align: center; background: #008c8c; border: 3px solid #008c8c; padding: 10px; border-radius: 10px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .denkikoujiSec01Btn a:hover{ background: #333; color: #d9d900; } #reformSec .denkikoujiSec01Btn a:hover, #reformSecWorks .denkikoujiSec01Btn a:hover{ background: #fff; color: #008c8c; } #denkikoujiSecWorks, #reformSecWorks{ margin-bottom: 100px; } .denkikoujiSecWorks01{ } .denkikoujiSecWorks01 > ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; } .denkikoujiSecWorks01 > ul > li{ flex-basis: 24%; margin-bottom: 40px; } .denkikoujiSecWorks01 > ul > li a{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .denkikoujiSecWorks01 > ul > li img{ width: 100%; height: auto; } .denkikoujiSecWorks01 > ul > li .topWorksSecDate{ flex-basis: 50%; font-size: 1.6rem; color: #333; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecCat{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .denkikoujiSecWorks01 > ul > li .topWorksSecJobsite{ flex-basis: 50%; font-size: 1.1rem; text-align: center; padding: 3px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; background: #f0f0f0; } .denkikoujiSecWorks01 > ul > li a .denkikouji{ background: #d9d900; color: #333; } .denkikoujiSecWorks01 > ul > li a .reform{ background: #008c8c; color: #fff; letter-spacing: -2px; } .denkikoujiSecWorks01 > ul > li .topWorksSecImg{ flex-basis: 100%; margin-top: 5px; } .denkikoujiSecWorks01 > ul > li .topWorksSecTit{ flex-basis: 100%; font-size: 1.2rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 1.2; border-bottom: 1px solid #ccc; padding: 4px 3px 3px; min-height: 40px; } #worksNav{ background: #eee; padding: 60px 0 60px 0; } #worksNav #topContents{ margin: 0 auto; } /* 施工実績 works */ #worksSec{} #worksSec .worksNav{ width: 750px; margin: 0 auto 80px auto; } #worksSec .worksNav ul{ display: flex; justify-content: space-between; } #worksSec .worksNav ul li{ flex-basis: 48%; } #worksSec .worksNav ul li.worksNavDenkikouji a{ display: block; font-size: 2rem; background: #d9d900; text-align: center; padding: 10px; border: 2px solid #d9d900; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavDenkikouji a:hover{ background: #333; color: #d9d900; } #worksSec .worksNav ul li.worksNavReform a{ display: block; font-size: 2rem; background: #008c8c; color: #fff; text-align: center; padding: 10px; border: 2px solid #008c8c; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } #worksSec .worksNav ul li.worksNavReform a:hover{ background: #fff; color: #008c8c; } #worksSec .denkikoujiSecWorks01 > ul{ margin-bottom: 0; } .worksSecBtn{ width: 200px; margin: 0 0 0 auto; } .worksSecBtn a{ display: block; font-size: 1.6rem; text-align: center; border: 3px solid #f90; color: #f90; padding: 5px 20px; font-family: vdl-v7gothic, sans-serif; font-weight: 700; font-style: normal; } .worksSecBtn a i{ margin-left: 10px; font-size: 1.2rem; } .worksSecBtn a:hover{ color: #fff; background: #f90; } /* 料金表 price */ #priceSec{ margin-bottom: 300px; } #priceSec ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } #priceSec ul li{ flex-basis: 48%; margin-bottom: 80px; } #priceSec ul li .priceSecBtn{} #priceSec ul li .priceSecBtn a{ display: block; color: #fff; font-size: 3rem; text-align: center; background: #e7111b; padding: 15px; border: 3px solid #e7111b; border-radius: 15px; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } #priceSec ul li .priceSecBtn a i{ margin-left: 10px; font-size: 3.5rem; } #priceSec ul li .priceSecBtn a:hover{ background: #fff; color: #e7111b; } /* 対応エリア area */ #areaSec{} .areaSecImg{ text-align: center; margin-bottom: 80px;} .areaSecTxt{ font-size: 1.8rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 80px; } /* ご依頼の流れ flow */ #flowSec{} .flowSec01{} .flowSec01 > ul{} .flowSec01 > ul > li{} .flowSec01 > ul > li > ul{ display: flex; justify-content: space-between; align-items: center; } .flowSec01 > ul > li > ul > li:nth-child(1){ flex-basis: 60%; } .flowSec01 > ul > li > ul > li:nth-child(2){ flex-basis: 35%; } .flowSec01 > ul > li > ul > li .flowSec01Tit{ display: flex; align-items: center; margin-bottom: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit span{ display: block; width: 70px; height: 70px; line-height: 70px; background: #0558ab; text-align: center; font-size: 5.5rem; color: #ffff26; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-right: 20px; } .flowSec01 > ul > li > ul > li .flowSec01Tit p{ font-size: 4rem; color: #333; font-family: vdl-v7gothic, sans-serif; font-weight: 800; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 30px; } .flowSec01 > ul > li > ul > li .flowSec01Tel{ background: #eee; padding: 40px; } .flowSec01 > ul > li > ul > li .flowSec01Num{ color: #e7111b; font-size: 6.5rem; font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal; margin-bottom: 10px; text-align: center; } .flowSec01 > ul > li > ul > li .flowSec01Num i{ font-size: 5.5rem; color: #333; margin-right: 5px; vertical-align: bottom; } .flowSec01 > ul > li > ul > li .flowSec01Num span{ display: block; font-size: 1.8rem; color: #333; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .flowSec01 > ul > li > ul > li .flowSec01Btn{} .flowSec01 > ul > li > ul > li .flowSec01Btn a{ display: block; color: #fff; font-size: 2.2rem; text-align: center; background: #f90; border: 2px solid #f90; padding: 15px; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .flowSec01 > ul > li > ul > li .flowSec01Btn a:hover{ background: #fff; color: #f90; } .flowSec01 > ul > li > ul > li .flowSec01Img{} .flowSec01 > ul > li.arrow{ text-align: center; font-size: 9rem; margin: 60px 0; letter-spacing: -10px; } .flowSec01 > ul > li.arrow span:nth-child(1), .flowSec01 > ul > li.arrow span:nth-child(3){ color: rgba(5,88,171,0.6); } .flowSec01 > ul > li.arrow span:nth-child(2){ color: rgba(5,88,171,1); } /* 会社概要 company */ #companySec{} .companySec01{ margin-bottom: 80px; } .companySec01 ul{ display: flex; justify-content: space-between; } .companySec01 ul li:nth-child(1){ flex-basis: 54%; } .companySec01 ul li:nth-child(2){ flex-basis: 40%; } .companySec01 ul li .companySec01Txt{ font-size: 1.8rem; line-height: 1.7; margin-bottom: 20px; } .companySec01 ul li .companySec01Name{ font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: right; } .companySec01 ul li .companySec01Name span{ font-size: 2rem; margin-right: 20px; } .companySec01 ul li .companySec01Img img{ width: 100%; height: auto; } .companySec02{ margin-bottom: 80px; } .companySec02 table{ width: 100%; border-collapse: collapse; } .companySec02 table th{ width: 25%; font-size: 1.7rem; text-align: left; padding: 15px; border-bottom: 1px solid #ccc; } .companySec02 table td{ font-size: 1.7rem; padding: 15px; border-bottom: 1px solid #ccc; } .companySec03{ margin-bottom: 80px; } .companySec03Txt{ font-size: 1.8rem; font-weight: 500; margin-bottom: 20px; } .companySec03Map{ } /* スタッフ紹介 staff */ #staffSec{} .staffSec01{} .staffSec01 ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; } .staffSec01 ul li{ flex-basis: 23%; margin: 0 1% 40px 1%; } .staffSec01 ul li .staffSec01Img{ margin-bottom: 10px; } .staffSec01 ul li .staffSec01Img img{ width: 100%; height: auto; border-radius: 50%; } .staffSec01 ul li .staffSec01Name{ font-size: 2.4rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; text-align: center; } .staffSec01 ul li .staffSec01Name span{ display: block; font-size: 1.5rem; } .view { overflow: hidden; position: relative; text-align: center; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; border-radius: 50%; } .view .mask,.view .content { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } .view img { display: block; position: relative; border-radius: 50%; } .view a.info { /* display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; border: 2px solid #000; color: #fff; text-transform: uppercase;*/ display: block; width: 100%; height: 100%; border-radius: 50%; background: #000; border: 2px solid #000; color: #fff; padding-top: 120px; } .view a.info i{ margin-left: 10px; font-size: 1.2rem; } .view a.info:hover{ background: #fff; color: #000; } .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; border-radius: 50%; } .view-tenth .mask { background-color: rgba(7, 109, 211, 0.5); transition: all 0.5s linear; opacity: 0; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info { transform: scale(1); opacity: 1; /* margin-top: 115px; */ } .staffSec02{ position: relative; min-height: 800px; } .staffSec02Img{ position: absolute; top: 0; left: 0; z-index: 3; } .staffSec02Name{ position: absolute; top: 130px; right: 265px; font-size: 3.5rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; } .staffSec02Name span{ display: block; font-size: 1.5rem; letter-spacing: 1px; } .staffSec02Txt{ position: absolute; top: 250px; background: #eee; padding: 40px; margin-left: 150px; } .staffSec02Txt p{ width: 43%; margin: 0 0 0 auto; font-size: 1.4rem; line-height: 1.6; } #contactSec{ margin-bottom: 100px; } #privacySec{} .privacySecTxt{ font-size: 1.6rem; margin-bottom: 60px; } .privacySecTxt ol{ margin: 10px 0 0 30px; } .privacySecTxt ol li{ list-style-type: decimal; } /* サイトマップ sitemap */ #sitemapSec{ margin-bottom: 100px; } .sitemapSec01{} .sitemapSec01 > ul{} .sitemapSec01 > ul > li{ display: block; flex-basis: 65%; padding: 0 10px 0 30px; position: relative; font-size: 2.3rem; font-family: monopin-j, sans-serif; font-weight: 700; font-style: normal; line-height: 3em; } .sitemapSec01 > ul > li:after{ display: block; content: ""; position: absolute; top: 28px; left: 0; width: 8px; height: 8px; background: #fff; border: 5px solid #076dd3; border-radius: 100%; } .sitemapSec01 > ul > li > ul{ margin: 0 0 10px 60px; } .sitemapSec01 > ul > li > ul > li{ list-style-type: disc; font-size: 1.8rem; line-height: 2em; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ PCWIDE CSS END ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */