/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, select, button, legend, table, caption, tbody, tfoot, thead, tr, th, td, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-size: 14px;} /*汎用flex*/ .flex {display: flex;} /*sp限定*/ .pc {display: none!important;} /*コンテナ*/ .container {width: calc(100% - 32px);} .bg-inner {margin-top: 275px;} @media screen and (min-width: 640px) { .container {width: calc(100% - 64px);} } /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用見出し ------------------------------------*/ .g-h {font-size: 24px;} /*------------------------------------ 汎用TOP見出し(下部ページ用) ------------------------------------*/ .page-heading, .page-heading .container {height: 275px;} .page-heading h1 span {display: block;} .page-heading h1 .jp {font-size: 28px;} .page-heading h1 .en {font-size: 10px; margin-left: .375em;} .page-heading .img {margin-right: 0;} /*フロントページ*/ .page-heading.front .inner {width: 100%;} .page-heading.front .inner .txt {width: 80%; max-width: 279px; margin: 0 auto 15px;} .page-heading.front .inner .img {width: 80%; max-width: 491px; margin: 0 auto;} .page-heading.front .scroll-down {bottom: 30px;} .page-heading .img.archive {width: 157px;} .page-heading .img.termite {width: 168px;} .page-heading .img.other {width: 182px;} .page-heading .img.control {width: 111px;} .page-heading .img.cleaning {width: 194px;} .page-heading .img.reform {width: 186px;} .page-heading .img.hunting {width: 129px;} .page-heading .img.company {width: 79px;} .page-heading .img.contact {width: 130px;} .page-heading .img.privacy {width: 95px;} @media screen and (min-width: 640px) { .page-heading .img {margin-right: 3.75%;} } /*------------------------------------ ページネーション ------------------------------------*/ .pagination {margin-top: 30px;} .pagination * {padding: 8px 12px;} /*------------------------------------ MORE ------------------------------------*/ .more {width: 80%; max-width: 335px; height: 40px; border-radius: 4px;} .more span {font-size: 14px; padding-left: 16px;} .more span:before, .more span:after {left: 0; width: 8px;} .more span:before {top: calc(50% - 2px);} .more span:after {top: calc(50% + 2px);} /*フォームへのリンク用*/ .more.form-link, .more.form-link > span {width: 235px; height: 50px; font-size: .8rem;} .more.form-link > span .icon {width: 15px; height: 10px; margin: 0 5px 1px 0;} /*------------------------------------ スクロールダウン ------------------------------------*/ .scroll-down {bottom: 15px; left: 50%; transform: translateX(-50%);} .scroll-down .avenir {font-size: 10px; text-align: center; margin-bottom: 8px;} .scroll-down .bar {display: none;} .scroll-down .arrow {width: 18px;} /*------------------------------------ TOPに戻る ------------------------------------*/ #scroll {width: 30px; height: 30px; bottom: 30px; right: 20px;} /*------------------------------------ ボーダーセクション ------------------------------------*/ .border-sec .sec-inner {padding: 40px 16px; border-width: 3px; border-radius: 10px;} .border-sec .sec-inner .sec-section:not(:last-child) {margin-bottom: 40px;} .border-sec .sec-title {top: -18px;} .border-sec .sec-title span {font-size: 24px;} .border-sec .sec-head {font-size: 18px; margin-bottom: 16px;} .border-sec .sec-head .num {width: 28px; height: 28px; font-size: 18px; margin-right: 8px;} /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header .fix-logo {top: 16px; left: 15px;} header .fix-logo .img {width: 59px; margin-right: 8px;} header .fix-logo .txt {width: 73px;} /*------------------------------------ トグル ------------------------------------*/ header #nav-toggle {width: 36px; height: 24px; top: 20px; right: 16px;} header #nav-toggle div {width: 36px; height: 4px; border-radius: 2px;} header #nav-toggle div:nth-child(1) {top: 0;} header #nav-toggle div:nth-child(2) {top: 12px;} header #nav-toggle div:nth-child(3) {top: 24px;} /*------------------------------------ オープン時 ------------------------------------*/ .open-menu header #nav-toggle div:nth-child(1), .open-menu header #nav-toggle div:nth-child(3) {top: 12px;} /*------------------------------------ グローバルナビゲーション ------------------------------------*/ header #nav-drawer .inner {flex-direction: column; align-items: center; padding: 32px 0;} header #nav-drawer .site-info {margin-bottom: 18px;} header #nav-drawer .site-info .logo {justify-content: center; margin-bottom: 32px;} header #nav-drawer .site-info .logo .img {width: 74px; margin-right: 8px;} header #nav-drawer .site-info .logo .txt {width: 91px;} header #nav-drawer .site-info .address {margin-bottom: 28px;} header #nav-drawer .site-info .address address {font-size: 16px; margin-bottom: 16px;} header #nav-drawer .site-info .address .num dl dt {font-size: 12px;} header #nav-drawer .site-info .address .num dl dd {font-size: 14px;} header #nav-drawer .site-info .sns-list a {margin-right: 10px;} header #nav-drawer .site-info .sns-list a img {width: 25px;} header #nav-drawer .global-nav h3 {font-size: 20px; text-align: right; margin: 0 -32px 12px; border-bottom: 1px solid #bddcf3;} header #nav-drawer .global-nav .nav-list > li {padding-left: 12px;} header #nav-drawer .global-nav .nav-list > li:before {width: 12px; top: calc(1.375em - 1px);} header #nav-drawer .global-nav .nav-list > li > a, header #nav-drawer .global-nav .nav-list > li > span {font-size: 16px; padding: .375em .575em;} header #nav-drawer .global-nav .nav-list > li > span:before, header #nav-drawer .global-nav .nav-list > li > span:after {top: 1.125em;} header #nav-drawer .global-nav .nav-list > li > .sub-nav {margin-left: .5em;} header #nav-drawer .global-nav .nav-list > li > .sub-nav li:last-child {margin-bottom: .5em;} header #nav-drawer .global-nav .nav-list > li > .sub-nav li a {font-size: 14px;} @media screen and (min-width: 640px) { header #nav-drawer .inner {top: calc(50% - 148px); flex-direction: row; align-items: flex-start; padding: 0;} header #nav-drawer .site-info {margin: 0 52px 0 0;} header #nav-drawer .global-nav h3 {margin: 0 0 12px;} } /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer {padding: 35px 0;} footer .container {flex-direction: column; align-items: center;} footer .site-info {text-align: center;} footer .site-info .logo {margin-bottom: 30px;} footer .site-info .logo .img {width: 70px; margin-right: 9px;} footer .site-info .logo .txt {width: 102px;} footer .site-info .address {text-align: left; margin-bottom: 24px;} footer .site-info .address address {margin-bottom: 12px;} footer .site-info .address .num dl dt {font-size: 12px;} footer .site-info .address .num dl dd {font-size: 14px;} footer .site-info .sns-list a {margin-right: 10px;} footer .global-nav {display: none;} footer .copyright {margin-top: 35px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*------------------------------------ SERVICE ------------------------------------*/ #front .service .service-list li {display: block; margin-bottom: 54px;} #front .service .service-list li:last-child {margin-bottom: 0;} #front .service .service-list li .icon {margin: 0 0 20px auto;} #front .service .service-list li.termite .icon {width: 196px;} #front .service .service-list li.other .icon {width: 222px;} #front .service .service-list li.control .icon {width: 195px;} #front .service .service-list li.cleaning .icon {width: 222px;} #front .service .service-list li.reform .icon {width: 216px;} #front .service .service-list li.hunting .icon {width: 222px;} #front .service .service-list li .icon .num {font-size: 150px;} #front .service .service-list li.termite .icon .img {width: 149px;} #front .service .service-list li.other .icon .img {width: 162px;} #front .service .service-list li.control .icon .img {width: 93px;} #front .service .service-list li.cleaning .icon .img {width: 145px;} #front .service .service-list li.reform .icon .img {width: 145px;} #front .service .service-list li.hunting .icon .img {width: 105px;} #front .service .service-list li .txt h3 {padding-bottom: 24px; margin-bottom: 10px;} #front .service .service-list li .txt h3 .jp {font-size: 26px;} #front .service .service-list li .txt h3 .en {left: 0; display: block; font-size: 10px; padding-right: 5px;} #front .service .service-list li .txt h3 .en:before {width: 25px; margin-right: 5px;} #front .service .service-list li .txt p {margin-bottom: 25px;} #front .service .service-list li .txt .more {width: 170px;} @media screen and (min-width: 640px) { #front .service .service-list li {display: flex;} #front .service .service-list li:nth-child(even) {flex-direction: row-reverse;} #front .service .service-list li .icon {margin: 0;} #front .service .service-list li:nth-child(odd) .txt {margin-left: 32px;} #front .service .service-list li:nth-child(even) .txt {margin-right: 32px;} } /*------------------------------------ FLOW ------------------------------------*/ #front .flow .flow-list {flex-wrap: wrap;} #front .flow .flow-list li {width: 100%; margin: 0 0 30px;} #front .flow .flow-list li:last-child {margin-bottom: 0;} #front .flow .flow-list li .num {font-size: 60px; top: 5px; right: 10px; transform: translate(0,0);} #front .flow .flow-list li .img {height: 130px;} #front .flow .flow-list li .txt {padding: 12px 18px 16px;} #front .flow .flow-list li .txt h3 {font-size: 16px; margin-bottom: 8px;} #front .flow .flow-list li .txt p {font-size: 13px;} #front .flow .more {margin-top: 40px;} @media screen and (min-width: 640px) { #front .flow .flow-list li {width: calc((100% - 30px) / 2); margin: 0 30px 30px 0;} #front .flow .flow-list li:nth-child(even) {margin-right: 0;} } /*------------------------------------ CASESTUDY ------------------------------------*/ #front .casestudy .casestudy-list {flex-wrap: wrap;} #front .casestudy .casestudy-list li {width: 100%; margin: 0 0 30px;} #front .casestudy .casestudy-list li:last-child {margin-bottom: 0;} #front .casestudy .casestudy-list li .img {height: 195px;} #front .casestudy .casestudy-list li .txt {padding: 12px 20px 16px;} #front .casestudy .casestudy-list li .txt time {font-size: 16px; margin-bottom: 8px;} #front .casestudy .casestudy-list li .txt p {font-size: 13px;} #front .casestudy .more {margin-top: 40px;} @media screen and (min-width: 640px) { #front .casestudy .casestudy-list li {width: calc((100% - 30px) / 2); margin: 0 30px 30px 0;} #front .casestudy .casestudy-list li:nth-child(even) {margin-right: 0;} } /*------------------------------------ NEWS ------------------------------------*/ #front .news .news-inner {padding: 12.5px 20px; border-radius: 8px;} #front .news .news-inner .news-list {margin-bottom: 10px;} #front .news .news-inner .news-list .entry h3 {width: 100%; margin-top: .375em;} @media screen and (min-width: 640px) { #front .news .news-inner .news-list .entry h3 {width: auto; margin-top: 0;} } /*------------------------------------ ACCESS ------------------------------------*/ #front .access {padding-bottom: 40px;} #front .access .googlemap {height: 350px;} @media screen and (min-width: 640px) { #front .access .googlemap {height: 420px;} } /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お知らせ個別ページ (single.php) --------------------------------------------------------------------------*/ #single .container {padding: 60px 0 40px;} #single .inner {margin-bottom: 20px; padding: 0 16px 10px; border-width: 3px; border-radius: 10px;} #single h1.title {font-size: 22px; margin-bottom: 5px;} #single .single-info {margin-bottom: 30px;} #single .postlink {flex-wrap: wrap;} #single .postlink div {width: 100%; margin-bottom: 10px;} #single .postlink div:last-child {margin-bottom: 0;} #single .postlink div a {border-radius: 5px;} @media screen and (min-width: 640px) { #single .postlink div {width: calc(8em + 5px); margin-bottom: 0;} } /*-------------------------------------------------------------------------- お知らせアーカイブページ (archive.php) --------------------------------------------------------------------------*/ #archive .container {padding: 40px 0;} #archive .inner {padding: 16px; border-radius: 8px;} #archive .news-list {margin-bottom: 10px;} #archive .news-list .entry h3 {width: 100%; margin-top: .375em;} /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- サービス (service.php) --------------------------------------------------------------------------*/ #service .container {padding-bottom: 40px;} #service .more {margin-top: 40px;} /*------------------------------------ 汎用 ------------------------------------*/ #service .something .check-list li {font-size: 16px; margin-bottom: 8px; padding: 6px 0 6px 28px; background-size: 20px 15.275px; background-position: 4px 10px;} #service .type {display: block;} #service .type .about {margin: 0 auto 40px;} #service .type .about h3 {font-size: 24px;} #service .type .type-list {display: block;} #service .type .type-list:not(:last-child) {margin-bottom: 50px;} #service .type .type-list .entry:not(:last-child) {margin-bottom: 40px;} #service .type .type-list .entry .img {max-width: 200px; margin: 0 auto;} #service .type .type-list .entry h3 {font-size: 24px;} #service .type .type-list .entry .date-list li {margin-bottom: 1.5em;} #service .construct .construct-list .entry {display: block; margin-bottom: 40px;} #service .construct .construct-list .entry:last-child {margin-bottom: 0;} #service .construct .construct-list .entry .img {margin-bottom: 10px;} #service .construct .construct-list .entry .txt h3 {font-size: 24px;} #service .construct .construct-list .entry .txt h3 .num {font-size: 32px;} #service .construct.flow .construct-list .entry {margin-bottom: 90px;} #service .construct.flow .construct-list .entry:last-child {margin-bottom: 0;} #service .construct.flow .construct-list .entry:before, #service .construct.flow .construct-list .entry:after {bottom: -45px; width: 35px;} #service .construct.flow .construct-list .entry:before {left: calc(50% - 4px);} #service .construct.flow .construct-list .entry:after {right: calc(50% - 4px);} #service .construct.flow .construct-list .entry .img {margin-bottom: 10px;} #service .construct.flow .construct-list .entry .img.soudan {width: 103px;} #service .construct.flow .construct-list .entry .img.chousa {width: 168px;} #service .construct.flow .construct-list .entry .img.houkoku {width: 163px;} #service .construct.flow .construct-list .entry .img.sekou {width: 168px;} #service .construct.flow .construct-list .entry .img.after {width: 146px;} /*リフォーム*/ #service .construct.flow .construct-list .entry .img.youbou {width: 163px;} #service .construct.flow .construct-list .entry .img.plan {width: 110px;} #service .construct.flow .construct-list .entry .img.keiyaku {width: 139px;} #service .construct.type .construct-list .entry .img {width: 180px; margin: 0 auto 10px;} #service .works-list {padding-top: 50px;} #service .works-list .works-entry:not(:last-child) {margin-bottom: 50px;} #service .works-list .works-entry h2 {font-size: 28px; margin-bottom: 10px;} #service .works-list .works-entry .img {margin-bottom: 15px;} #service .works-list .works-entry .img.before-after {display: block;} #service .works-list .works-entry .img.before-after li {width: 100%; margin-bottom: 32px;} #service .works-list .works-entry .img.before-after li:before, #service .works-list .works-entry .img.before-after li:after {bottom: -18px; height: 26px;} #service .works-list .works-entry .img.before-after li:before {transform: rotate(-65deg); left: calc(50% - 12px);} #service .works-list .works-entry .img.before-after li:after {transform: rotate(65deg); right: calc(50% - 12px);} #service .works-list .works-entry .img.before-after li:last-child {margin-bottom: 0;} #service .works-list .works-entry .img.before-after li figure figcaption {margin-top: .25em; font-size: 15px;} #service .works-list .works-entry .const-details {margin-top: 32px; padding: 20px 0; border-radius: 8px;} #service .works-list .works-entry .const-details h3 {top: -14px;} #service .works-list .works-entry .const-details h3 span {font-size: 24px;} #service .works-list .works-entry .const-details .details-list {display: block; padding: 0 20px;} #service .works-list .works-entry .const-details .details-list li {font-size: 14px;} #service .damage-case .img {display: block;} #service .damage-case li {margin-bottom: 15px;} #service .damage-case li:last-child {margin-bottom: 0;} @media screen and (min-width: 640px) { #service .works-list .works-entry .const-details .details-list {display: flex; justify-content: center; flex-wrap: wrap; padding: 0;} #service .works-list .works-entry .const-details .details-list li {margin: 0 .5em;} #service .damage-case .img {display: flex;} #service .damage-case li {width: calc((100% - 30px) / 3); margin-right: 15px;} #service .damage-case li:last-child {margin-right: 0;} } /*-------------------------------------------------------------------------- 会社概要 (company.php) --------------------------------------------------------------------------*/ #company .container {padding-bottom: 80px;} #company .greeting .inner {display: block;} #company .greeting .img {max-width: 240px; margin: 0 auto 35px;} #company .philosophy .list li {font-size: 16px;} #company .table-content dl dt {padding: 1em 0;} #company .table-content dl dd {padding-bottom: 1em;} /*-------------------------------------------------------------------------- お問い合わせ (contact.php) --------------------------------------------------------------------------*/ #contact .container {padding: 40px 0;} #contact .form dl {margin-bottom: 28px;} #contact .form dl dt {margin-bottom: 10px;} #contact .form dl dt .title {font-size: 18px;} #contact .form dl dt .title .en {font-size: 10px;} #contact .form .consent {margin-bottom: 30px;} #contact .form .consent h2 {font-size: 18px;} /*-------------------------------------------------------------------------- プライバシーポリシー (privacy.php) --------------------------------------------------------------------------*/ #privacy .container {padding: 60px 0 40px;} #privacy .border-sec {margin-bottom: 40px;} #privacy .company-date dt {font-size: 16px;} /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 600px;} #notfound p {margin: 30px 0 75px;} /*-------------------------------------------------------------------------- 投稿汎用要素 --------------------------------------------------------------------------*/ .post_doc h2 {margin: 45px 0 15px 0;} .post_doc h3 {margin: 40px 0 13px 0;} .post_doc h4 {margin: 35px 0 11px 0;} .post_doc h5 {margin: 30px 0 9px 0;} .post_doc h6 {margin: 25px 0 7px 0;} .post_doc h2:first-child {margin: 0 0 15px 0;} .post_doc h3:first-child {margin: 0 0 13px 0;} .post_doc h4:first-child {margin: 0 0 11px 0;} .post_doc h5:first-child {margin: 0 0 9px 0;} .post_doc h6:first-child {margin: 0 0 7px 0;} .post_doc h2 {font-size: 1.35rem;} .post_doc h3 {font-size: 1.225rem;} .post_doc h4 {font-size: 1.1rem;} .post_doc h5 {font-size: 1rem;} .post_doc h6 {font-size: .925rem;} .post_doc hr {margin: 40px 0;} .post_doc p {line-height: 1.75; margin: 0 0 30px 0;}