/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*汎用flex*/ .flex {display: flex;} /*pc限定*/ .sp {display: none!important;} /*コンテナ*/ .container {width: 1080px;} .bg-inner {margin-top: 450px;} @media screen and (max-width: 1120px) { .container {width: 90vw;} } /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用見出し ------------------------------------*/ .g-h {font-size: 38px;} /*------------------------------------ 汎用TOP見出し ------------------------------------*/ .page-heading, .page-heading .container {height: 450px;} .page-heading h1 {display: flex; align-items: center;} .page-heading h1 .jp {font-size: 40px; margin-right: .75em;} .page-heading h1 .en {font-size: 12px;} .page-heading .img {margin-right: 6.25%;} /*フロントページ*/ .page-heading.front .inner .txt {width: 54.492vh; max-width: 558px; height: 15.137vh; max-height: 155px;} .page-heading.front .inner .img {width: 95.898vh; max-width: 982px; height: 50.293vh; max-height: 515px;} .page-heading .img.archive {width: 392px;} .page-heading .img.termite {width: 420px;} .page-heading .img.other {width: 454px;} .page-heading .img.control {width: 278px;} .page-heading .img.cleaning {width: 484px;} .page-heading .img.reform {width: 464px;} .page-heading .img.hunting {width: 323px;} .page-heading .img.company {width: 197px;} .page-heading .img.contact {width: 340px;} .page-heading .img.privacy {width: 238px;} /*------------------------------------ ページネーション ------------------------------------*/ .pagination {margin-top: 40px;} .pagination * {padding: 10px 14px;} /*------------------------------------ MORE ------------------------------------*/ .more {width: 600px; height: 52px; border-radius: 6px;} .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: 438px; height: 96px; font-size: 1.075rem;} .more.form-link > span .icon {width: 23px; height: 16px; margin: 0 20px 0 0;} /*------------------------------------ スクロールダウン ------------------------------------*/ .scroll-down {bottom: 36px; right: 60px; width: 20px;} .scroll-down .avenir {position: relative; width: 15px; font-size: 15px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;} .scroll-down .bar {display: block; content: ""; position: relative; left: -1px; width: 1px; height: 30px; background: transparent; margin: 15px auto; overflow: hidden;} .scroll-down .bar:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #666; animation: scrollLine 2.5s ease infinite; animation-fill-mode: forwards} .scroll-down .arrow {width: 20px;} @keyframes scrollLine { 0% {transform:translateY(-100%) scaleY(1); transform-origin: left;} 100% {transform:translateY(100%) scaleY(.8); transform-origin: left;} } /*------------------------------------ TOPに戻る ------------------------------------*/ #scroll {width: 40px; height: 40px; bottom: 50px; right: 30px;} /*------------------------------------ ボーダーセクション ------------------------------------*/ .border-sec .sec-inner {width: 920px; padding: 80px 60px; border-width: 4px; border-radius: 20px;} .border-sec .sec-inner .sec-section:not(:last-child) {margin-bottom: 60px;} .border-sec .sec-title {top: -24px;} .border-sec .sec-title span {font-size: 32px;} .border-sec .sec-head {font-size: 24px; margin-bottom: 20px;} .border-sec .sec-head .num {width: 36px; height: 36px; font-size: 24px; margin-right: 10px;} /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header .fix-logo {top: 32px; left: 30px;} header .fix-logo .img {width: 94px; margin-right: 12px;} header .fix-logo .txt {width: 115px;} /*------------------------------------ トグル ------------------------------------*/ header #nav-toggle {width: 56px; height: 36px; top: 30px; right: 32px;} header #nav-toggle div {width: 56px; height: 6px; border-radius: 3px;} header #nav-toggle div:nth-child(1) {top: 0;} header #nav-toggle div:nth-child(2) {top: 18px;} header #nav-toggle div:nth-child(3) {top: 36px;} header #nav-toggle:hover div:nth-child(1) {transform: translateY(-4px);} header #nav-toggle:hover div:nth-child(3) {transform: translateY(4px);} /*------------------------------------ オープン時 ------------------------------------*/ .open-menu header #nav-toggle div:nth-child(1), .open-menu header #nav-toggle div:nth-child(3) {top: 15px;} /*------------------------------------ グローバルナビゲーション ------------------------------------*/ header #nav-drawer .inner {top: calc(50% - 266px); padding: 48px 0;} header #nav-drawer .site-info {margin-right: 155px;} header #nav-drawer .site-info .logo {margin-bottom: 56px;} header #nav-drawer .site-info .logo .img {width: 94px; margin-right: 12px;} header #nav-drawer .site-info .logo .txt {width: 115px;} header #nav-drawer .site-info .address {margin-bottom: 52px;} header #nav-drawer .site-info .address address {font-size: 24px; margin-bottom: 24px;} header #nav-drawer .site-info .address .num dl dt {font-size: 16px;} header #nav-drawer .site-info .address .num dl dd {font-size: 22px;} header #nav-drawer .site-info .sns-list a {margin-right: 20px;} header #nav-drawer .site-info .sns-list a img {width: 35px;} header #nav-drawer .global-nav h3 {font-size: 36px; margin-bottom: 32px;} header #nav-drawer .global-nav .nav-list > li {padding-left: 24px;} header #nav-drawer .global-nav .nav-list > li:before {width: 14px; top: calc(1.75em - 1px);} header #nav-drawer .global-nav .nav-list > li > a, header #nav-drawer .global-nav .nav-list > li > span {font-size: 20px; padding: .5em .625em;} header #nav-drawer .global-nav .nav-list > li > span:before, header #nav-drawer .global-nav .nav-list > li > span:after {top: 1.25em;} header #nav-drawer .global-nav .nav-list > li > .sub-nav {margin-left: .625em;} 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: 16px;} /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ footer {padding: 70px 0 50px;} footer .container {flex-wrap: wrap; justify-content: space-between;} footer .site-info {margin: 0 0 48px 0;} footer .site-info .logo {margin-bottom: 24px;} footer .site-info .logo .img {width: 70px; margin-right: 9px;} footer .site-info .logo .txt {width: 102px;} footer .site-info .address {margin-bottom: 32px;} 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: 12px;} footer .global-nav .nav-list > li .parent {font-size: 15px;} footer .global-nav .nav-list > li .sub-nav li a {font-size: 12px;} footer .copyright {margin-top: 50px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*------------------------------------ SERVICE ------------------------------------*/ #front .service {width: 1000px; margin: 0 auto;} #front .service .service-list li {margin-bottom: 148px;} #front .service .service-list li:last-child {margin-bottom: 0;} #front .service .service-list li:nth-child(even) {flex-direction: row-reverse;} #front .service .service-list li.termite .icon {width: 392px;} #front .service .service-list li.other .icon {width: 444px;} #front .service .service-list li.control .icon {width: 390px;} #front .service .service-list li.cleaning .icon {width: 443px;} #front .service .service-list li.reform .icon {width: 432px;} #front .service .service-list li.hunting .icon {width: 444px;} #front .service .service-list li .icon .num {font-size: 300px;} #front .service .service-list li.termite .icon .img {width: 298px;} #front .service .service-list li.other .icon .img {width: 323px;} #front .service .service-list li.control .icon .img {width: 185px;} #front .service .service-list li.cleaning .icon .img {width: 289px;} #front .service .service-list li.reform .icon .img {width: 289px;} #front .service .service-list li.hunting .icon .img {width: 210px;} #front .service .service-list li .txt h3 {margin-bottom: 32px;} #front .service .service-list li .txt h3 .jp {font-size: 36px;} #front .service .service-list li .txt h3 .en {font-size: 10px; bottom: .75em; right: 0; padding-left: 5px;} #front .service .service-list li .txt {width: 520px;} #front .service .service-list li .txt p {margin-bottom: 36px;} #front .service .service-list li .txt .more {width: 190px;} @media screen and (max-width: 1120px) { #front .service {width: 90vw;} } /*------------------------------------ FLOW ------------------------------------*/ #front .flow .flow-list li {width: calc((100% - 240px) / 4); margin-right: 60px;} #front .flow .flow-list li .num {font-size: 90px; top: calc(-50% + 90px); right: -25%;} #front .flow .flow-list li .img {height: 135px;} #front .flow .flow-list li .txt {padding: 15px 18px;} #front .flow .flow-list li .txt h3 {font-size: 18px; margin-bottom: 10px;} #front .flow .flow-list li .txt p {font-size: 13.5px;} #front .flow .more {margin-top: 80px;} @media screen and (max-width: 1120px) { #front .flow .flow-list li {width: calc((100% - 200px) / 4); margin-right: 50px;} } /*------------------------------------ CASESTUDY ------------------------------------*/ #front .casestudy .casestudy-list li {width: calc((100% - 42px) / 4); margin-right: 14px;} #front .casestudy .casestudy-list li:last-child {margin-right: 0;} #front .casestudy .casestudy-list li .img {height: 195px;} #front .casestudy .casestudy-list li .txt {padding: 15px 25px 20px;} #front .casestudy .casestudy-list li .txt time {font-size: 16px; margin-bottom: 10px;} #front .casestudy .casestudy-list li .txt p {font-size: 14px;} #front .casestudy .more {margin-top: 80px;} /*------------------------------------ NEWS ------------------------------------*/ #front .news .news-inner {width: 855px; padding: 25px 50px; border-radius: 16px;} #front .news .news-inner .news-list {margin-bottom: 20px;} /*------------------------------------ ACCESS ------------------------------------*/ #front .access {padding-bottom: 80px;} #front .access .googlemap {height: 580px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- お知らせ個別ページ (single.php) --------------------------------------------------------------------------*/ #single .container {padding: 120px 0 80px;} #single .inner {width: 920px; margin-bottom: 40px; padding: 0 60px 30px; border-width: 4px; border-radius: 20px;} #single h1.title {font-size: 32px; margin-bottom: 10px;} #single .single-info {margin-bottom: 50px;} #single .postlink div a {border-radius: 6px;} /*-------------------------------------------------------------------------- お知らせアーカイブページ (archive.php) --------------------------------------------------------------------------*/ #archive .container {padding: 80px 0; width: 1000px;} #archive .inner {padding: 50px 60px; border-radius: 16px;} /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- サービス (service.php) --------------------------------------------------------------------------*/ #service .container {padding-bottom: 80px;} #service .more {margin-top: 80px;} /*------------------------------------ 汎用 ------------------------------------*/ #service .something {width: 700px;} #service .something .check-list li {font-size: 24px; margin-bottom: 15px; padding: 10px 0 10px 56px; background-size: 40px 30.55px; background-position: 6px center;} #service .type {width: 1000px; justify-content: space-between;} #service .type .about {width: 820px; margin: 0 auto 80px;} #service .type .about h3 {font-size: 32px;} #service .type .type-list:not(:last-child) {margin-bottom: 80px;} #service .type .type-list .entry {width: calc((100% - 135px) / 2); margin-right: 135px;} #service .type .type-list .entry:nth-child(even) {margin-right: 0;} #service .type .type-list .entry .img {width: 300px; margin: 0 auto;} #service .type .type-list .entry h3 {font-size: 32px;} #service .type .type-list .entry .date-list li {margin-bottom: 2em;} #service .construct .construct-list .entry {justify-content: space-between; align-items: center; margin-bottom: 70px;} #service .construct .construct-list .entry:last-child {margin-bottom: 0;} #service .construct .construct-list .entry:nth-child(odd) {flex-direction: row-reverse;} #service .construct .construct-list .entry .img, #service .construct .construct-list .entry .txt {width: calc((100% - 40px) / 2);} #service .construct .construct-list .entry .txt h3 {font-size: 32px;} #service .construct .construct-list .entry .txt h3 .num {font-size: 42px;} #service .construct.flow .construct-list .entry {margin-bottom: 120px;} #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: -60px; width: 50px;} #service .construct.flow .construct-list .entry:before {left: calc(50% - 5px);} #service .construct.flow .construct-list .entry:after {right: calc(50% - 5px);} #service .construct.flow .construct-list .entry .img.soudan {width: 258px;} #service .construct.flow .construct-list .entry .img.chousa {width: 419px;} #service .construct.flow .construct-list .entry .img.houkoku {width: 407px;} #service .construct.flow .construct-list .entry .img.sekou {width: 419px;} #service .construct.flow .construct-list .entry .img.after {width: 365px;} /*リフォーム*/ #service .construct.flow .construct-list .entry .img.youbou {width: 407px;} #service .construct.flow .construct-list .entry .img.plan {width: 275px;} #service .construct.flow .construct-list .entry .img.keiyaku {width: 347px;} #service .construct.type .construct-list .entry .img {width: 320px;} #service .works-list {padding-top: 100px;} #service .works-list .works-entry:not(:last-child) {margin-bottom: 100px;} #service .works-list .works-entry h2 {font-size: 42px; margin-bottom: 15px;} #service .works-list .works-entry .img {margin-bottom: 20px;} #service .works-list .works-entry .img.before-after li {width: calc((100% - 54px) / 2); margin-right: 54px;} #service .works-list .works-entry .img.before-after li:before, #service .works-list .works-entry .img.before-after li:after {right: -28px; height: 26px;} #service .works-list .works-entry .img.before-after li:before {transform: rotate(25deg); top: calc((50% - 16px) - 2px);} #service .works-list .works-entry .img.before-after li:after {transform: rotate(-25deg); bottom: calc((50% + 16px) - 2px);} #service .works-list .works-entry .img.before-after li:last-child {margin-right: 0;} #service .works-list .works-entry .img.before-after li figure figcaption {margin-top: .25em; font-size: 20px;} #service .works-list .works-entry .const-details {margin-top: 48px; padding: 30px 0; border-radius: 10px;} #service .works-list .works-entry .const-details h3 {top: -18px;} #service .works-list .works-entry .const-details h3 span {font-size: 32px;} #service .works-list .works-entry .const-details .details-list {justify-content: center;} #service .works-list .works-entry .const-details .details-list li {font-size: 16px; margin: 0 1em;} #service .damage-case li {width: calc((100% - 50px) / 3); margin-right: 25px;} #service .damage-case li:last-child {margin-right: 0;} @media screen and (max-width: 1120px) { } /*-------------------------------------------------------------------------- 会社概要 (company.php) --------------------------------------------------------------------------*/ #company .container {padding-bottom: 80px;} #company .greeting .img {width: 320px; margin-right: 35px;} #company .philosophy {margin-top: 108px;} #company .philosophy .inner {align-items: flex-start;} #company .philosophy .g-h {padding: 0 0 1.5em;} #company .philosophy .list li {font-size: 20px;} #company .philosophy .img {width: 264px; height: auto; margin: 0 auto;} #company .table-content {margin-top: -2em;} #company .table-content dl {display: flex;} #company .table-content dl dd, #company .table-content dl dt {padding: 2em 0;} #company .table-content dl dt {width: 250px;} /*-------------------------------------------------------------------------- お問い合わせ (contact.php) --------------------------------------------------------------------------*/ #contact .container {padding: 80px 0; width: 1000px;} #contact .form dl {display: flex; align-items: center; margin-bottom: 56px;} #contact .form dl.t-area {align-items: flex-start;} #contact .form dl dt {width: 255px; margin-right: 40px;} #contact .form dl.wide dt {width: 335px;} #contact .form dl dt .title {font-size: 25px;} #contact .form dl dt .title .en {font-size: 14px;} #contact .form dl dd {width: calc(100% - 285px);} #contact .form dl.wide dd {width: calc(100% - 375px);} #contact .form .consent {margin-bottom: 50px;} #contact .form .consent h2 {font-size: 24px;} /*-------------------------------------------------------------------------- プライバシーポリシー (privacy.php) --------------------------------------------------------------------------*/ #privacy .container {padding: 120px 0 80px;} #privacy .border-sec {margin-bottom: 80px;} #privacy .company-date dt {font-size: 20px;} /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 900px;} #notfound p {margin: 50px 0 125px;} /*-------------------------------------------------------------------------- 投稿汎用要素 --------------------------------------------------------------------------*/ .post_doc h2 {margin: 50px 0 20px 0;} .post_doc h3 {margin: 45px 0 18px 0;} .post_doc h4 {margin: 40px 0 16px 0;} .post_doc h5 {margin: 35px 0 14px 0;} .post_doc h6 {margin: 30px 0 12px 0;} .post_doc h2:first-child {margin: 0 0 20px 0;} .post_doc h3:first-child {margin: 0 0 18px 0;} .post_doc h4:first-child {margin: 0 0 16px 0;} .post_doc h5:first-child {margin: 0 0 14px 0;} .post_doc h6:first-child {margin: 0 0 12px 0;} .post_doc h2 {font-size: 1.6rem;} .post_doc h3 {font-size: 1.45rem;} .post_doc h4 {font-size: 1.3rem;} .post_doc h5 {font-size: 1.15rem;} .post_doc h6 {font-size: 1rem;} .post_doc hr {margin: 60px 0;} .post_doc p {line-height: 1.75; margin: 0 0 30px 0;}