/*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- 汎用 ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ body {min-width: 100%; min-height: 100vh;} main.lower {padding-top: 70px;} /*スクロールバー*/ ::-webkit-scrollbar {width: 6px; background: #fff; z-index: 3;} ::-webkit-scrollbar-thumb {width: 6px; background: #2b798b;} /*汎用flex*/ .flex {display: flex;} /*pc限定*/ .sp {display: none!important;} a[href^="tel:"] {pointer-events: none;} /*コンティナ*/ .container {width: 80vw; margin: 0 auto;} @media screen and (max-width: 1024px) {.container {width: 88vw;}} /*-------------------------------------------------------------------------- 部品 --------------------------------------------------------------------------*/ /*------------------------------------ 汎用TOP見出し(一部固定ページ用) ------------------------------------*/ /*.page-heading {height: 530px;} .page-heading h1 .small {font-size: 1.525rem;} .page-heading h1 .big {font-size: 4rem; margin-top: 35px;}*/ /*------------------------------------ SNS・お問い合わせアイコン ------------------------------------*/ .sns-list .icon {width: 18px; height: 18px;} .sns-list .txt {font-size: .8rem;} .sns-list .txt.id span {font-size: .8rem; width: 84px;} /*------------------------------------ MORE ------------------------------------*/ .more > span:before {position: absolute; content: ''; display: block; right: 20px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); z-index: 3; transition: .3s .3s ease;} /*フォームへのリンク用*/ .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;} /*------------------------------------ 下部固定リンク ------------------------------------*/ .link-area.fixed {position: fixed; right: 0; bottom: 60px; z-index: 11;} .link-area.fixed * {display: block;} .link-area.fixed .check {width: 120px; margin: 0 auto 30px;} .link-area.fixed .goo {margin-bottom: 15px;} @media screen and (max-width: 1240px) { .link-area.fixed {max-width: 17%; bottom: 20px;} } /*------------------------------------ スクロールを促す ------------------------------------*/ .scroll-bar span {font-size: 15px; letter-spacing: 1px;} .scroll-bar .bar{height: 264px;} /*------------------------------------ TOPスクロール ------------------------------------*/ #scroll {right: 65px; top: -117px; width: 57px;} /*-------------------------------------------------------------------------- ヘッダー --------------------------------------------------------------------------*/ header #h-navi .logo {width: 300px;} header #h-navi {padding: 25px 3.125%;} header #h-navi .left-box, header #h-navi .right-box {align-items: center;} header #h-navi nav.menu {margin-left: 5.729166vw; position: relative;} header #h-navi nav.menu li {font-size: 1rem; margin-right: 2.6vw; transition: .3s ease;} header #h-navi nav.menu li:last-child {margin-right: 0;} header #h-navi nav.menu li a {display: block;} header #h-navi .tel .space {display: inline-block; width: 12px;} header #h-navi .sns-list {margin: 0 0 0 17px;} header #h-navi .sns-list li:not(:last-child) {margin: 0 16px 0 0;} header #h-navi .sns-list a:last-child {margin: 0;} header #h-navi .form-list a {margin: 0 18px 0 0;} @media screen and (max-width: 880px) { header #h-navi nav.menu {margin-left: 2.5vw;} header #h-navi nav.menu li {margin-right: 2vw;} } /*-------------------------------------------------------------------------- フッター --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- フロントページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*------------------------------------ HERO HEADER ------------------------------------*/ #front .hero {height: 100vh;} #front .hero .copy {top: 20vh; left: 10vw; font-size: 22px; letter-spacing: 9px;} #front .hero h2 {width: 20vw; min-width: 234px; max-width: 340px; position: absolute; top: 23%; right: 7vw;} @media screen and (max-height: 768px) { } #front .container {width: 1440px; max-width: calc(100% - 32px); margin: 0 auto;} /*------------------------------------ ABOUT US ------------------------------------*/ #front .about-us {height: 100vh;} #front .about-us .inner {padding: 30vh 0 0 10vw;} #front .about-us #logo-main.is-fixed {position: fixed; left: 10vw; top: 30vh; z-index: 5;} #front .about-us #logo-main img {width: 46vw; max-width: 712px;} #front .about-us #logo-main svg {width: 46vw; max-width: 712px;} #front .about-us #logo-main-area {width: 46vw; max-width: 712px; position: relative;} #front .about-us #logo-main02 {width: 100%; height: auto; position: relative; z-index: 3;} #front .about-us #logo-main02 img {width: 100%; height: auto;} #front .about-us #logo-main-bg {width: 99%; height: auto; position: absolute; top: 0; left: 0; z-index: 2;} #front .about-us #logo-main-cover {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #efede6; z-index: 4;} #front .about-us ul {width: 44vw; padding: 30px 0 0 60px; box-sizing: border-box;} #front .about-us ul .en {font-size: 60px;} @media screen and (max-width: 1199px) { #front .about-us ul .en {font-size: 40px;} } /*------------------------------------ INSTAGRAM ------------------------------------*/ #front .instagram {padding: 100px 0 120px;} #front .instagram .sec-title-ig {margin-bottom: 60px;} #front .instagram .ig-list {width: 1200px; max-width: 93.333333%; margin: 0 auto;} #front .instagram .ig-list li {width: calc(90% / 4);} #front .instagram .ig-list li:not(:nth-child(4n)) {margin-right: calc(10% / 3);} #front .instagram .ig-list li .img-cover {margin-bottom: 14.9%;} /*------------------------------------ BUSINESS CONTENT ------------------------------------*/ #front .business-content {padding: 130px 0 120px;} #front .business-content .sec-title {margin-bottom: 100px;} #front .business-content ol {justify-content: space-between;} #front .business-content ol li:not(:last-child) {margin-right: 40px;} #front .business-content .order {font-size: 50px; margin-bottom: 16px;} #front .business-content .order:before {margin-right: 2em; padding-right: 1em; font-size: 12px; letter-spacing: 0px;} #front .business-content .img-cover span {font-size: 28px;} #front .business-content .txt {width: 82%; min-height: 200px; top: -40px; padding: 26px 28px;} #front .business-content .txt .title {margin-bottom: 24px; font-size: 17px;} #front .business-content .txt .details {font-size: 13px; letter-spacing: -1px; line-height: 2;} #front .business-content .txt .links a {width: 135px;} #front .business-content .txt .links a.goo {margin-right: 14px;} #front .business-content .txt a.contact {font-size: 13px; text-decoration: underline;} @media screen and (max-width: 1468px) { #front .business-content .txt .details br.pc {display: none;} } @media screen and (max-width: 1199px) { #front .business-content .txt {width: 94%; padding: 26px 20px;} #front .business-content .txt .links {flex-direction: column;} #front .business-content .txt .links a.goo {margin: 0 auto 10px;} #front .business-content .txt .links a {margin: 0 auto;} } /*------------------------------------ WARRANTY ------------------------------------*/ #front .warranty {height: 500px; margin-bottom: 140px; background: url(../img/top_warr_bg_pc.jpg) no-repeat center top; background-size: cover;} #front .warranty .deco_txt {position: absolute; top: 48px; left: 60px; color: rgb(255 255 255 / 40%); font-size: 120px; font-weight: 700; line-height: 1;} #front .warranty .inner {padding: 140px 0 80px;} #front .warranty .sec-title {margin-bottom: 55px;} #front .warranty strong {margin-bottom: 55px; font-size: 17px; line-height: 1;} /*------------------------------------ SHOP INFORMATION ------------------------------------*/ #front .shop-information {margin-bottom: 90px;} #front .shop-information table {width: 584px; max-width: 100%; margin: 0 auto; border-collapse: collapse; table-layout: fixed;} #front .shop-information th, #front .shop-information td {height: 65px; border: 1px solid #9a9a9a; vertical-align: middle;} #front .shop-information th {width: 120px; height: 65px; background: #2b798b; color: #fff;} #front .shop-information td {padding-left: 8.2%;} #front .shop-information .tablet {display: none;} /*------------------------------------ Google Map ------------------------------------*/ #front .google-map {margin-bottom: 150px;} /*------------------------------------ MESSAGE ------------------------------------*/ #front .message {margin-bottom: 82px;} #front .message .container {padding: 160px 0 80px; background: #efede6;} #front .message .sec-title {position: absolute; width: 100%; top: -23px;} #front .message .inner {width: 83.333%; margin-left: 9.444%; justify-content: space-between;} #front .message .inner .img {width: 41%;} #front .message .inner .txt {width: 50.25%;} #front .message .inner .txt .text {font-size: 18px; line-height: 2.2;} @media screen and (max-width: 1250px) { #front .message .inner .txt .text .pc {display: none;} } /*------------------------------------ GALLERY ------------------------------------*/ #front .gallery {padding-bottom: 102px;} #front .gallery ul {display: flex; justify-content: space-between;} #front .gallery li:not(:last-child) {margin-right: 40px;} /*-------------------------------------------------------------------------- ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- テンプレ＆固定ページ ---------------------------------------------------------------------------- ---------------------------------------------------------------------------- --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- 固定ページ (page.php) --------------------------------------------------------------------------*/ .page-header {padding: 134px 0 0; background: #efede6;} .page-header .page-title {top: -44px;} .page-header .page-title .en {margin-bottom: 26px; font-size: 80px;} .page-header .page-title .ja {width: 182px; height: 42px; font-size: 18px;} .page:not(.home) .container {width: 1200px; max-width: calc(100% - 32px); margin: 0 auto;} /*-------------------------------------------------------------------------- WARRANTY PAGE (page-warranty.php) --------------------------------------------------------------------------*/ #warranty .sec-title-w { margin-bottom: 60px; font-size: 34px;} #warranty .relief {padding: 130px 0 110px;} #warranty .relief .svg {width: 154px; margin: 0 auto 40px;} #warranty .relief .strength {width: 174px; border-radius: 30px;} #warranty .relief p {font-size: 18px; line-height: 2;} #warranty .repair {padding: 140px 0 120px;} #warranty .repair .img {width: 224px; margin: 0 auto 40px;} #warranty .repair strong {font-size: 30px;} #warranty .repair .repair-list {flex-wrap: wrap; justify-content: space-between;} #warranty .repair .repair-list p {font-size: 13px;} #warranty .repair .repair-list li {width: calc((100% - 60px) / 3 );} #warranty .repair .repair-list .img-cover {margin-bottom: 20px;} #warranty .repair .repair-list .title {margin-bottom: 14px; font-size: 20px; line-height: 1;} #warranty .no-cost {padding: 90px 0 120px;} #warranty .no-cost .sec-title-black {top: -10px;} #warranty .no-cost .sec-title-black > span {max-width: calc(100% - 12vw); display: inline-block; padding: 5px 30px; background: #000; border-radius: 30px; box-sizing: border-box; color: #fff; font-size: 20px;} #warranty .no-cost .h_sample {margin-bottom: 100px; font-size: 30px;} #warranty .no-cost .h_sample:before, #warranty .no-cost .h_sample:after {content: ""; position: absolute; width: 12px; height: 2px; bottom: -20px; left: 50%; background: #000;} #warranty .no-cost .h_sample:before {margin-left: -6px; transform: rotate(40deg);} #warranty .no-cost .h_sample:after {margin-left: 2px; transform: rotate(-40deg);} #warranty .no-cost .sample-list li {padding: 90px 30px 30px;} #warranty .no-cost .sample-list:after {bottom: -66px; left: calc(50% - 30px); width: 60px; height: 30px;} #warranty .no-cost .sample-list li:first-child .details {height: 68px;} #warranty .no-cost .sample-list .sample-title {width: 114px; height: 114px; top: -57px; left: calc(50% - 57px);} #warranty .no-cost .sample-list .sample-title .txt_l {font-size: 38.6px;} #warranty .no-cost .sample-list .sample-title .txt_s {font-size: 19.72px;} #warranty .no-cost .sample-list .sample-title .txt_m {font-size: 29.82px;} #warranty .no-cost .sample-list li {width: calc((100% - 80px) / 3);} #warranty .no-cost .sample-list li:first-child .details, #warranty .no-cost .sample-list li:nth-child(2) .details {font-size: 29px;} #warranty .no-cost .sample-list li:last-child .details {font-size: 27px;} #warranty .no-cost .sample-list .trouble {font-size: 20px;} #warranty .no-cost .sample-list .trouble:after {width: 21.6px; height: 10px;} #warranty .no-cost .sample-list .details {margin-bottom: 40px; line-height: 1.2;} #warranty .no-cost .sample-list .cost-wrap {padding: 12px 0 10px;} #warranty .no-cost .sample-list .cost {font-size: 18.63px;} #warranty .no-cost .sample-list .normal {font-size: 20px;} #warranty .no-cost .sample-list .normal span {font-size: 29.25px;} #warranty .no-cost .egs-warr {padding: 20px 0;} #warranty .no-cost .egs-warr:before {width: 102.831px; height: 93.011px;} #warranty .no-cost .egs-warr .upper, #warranty .no-cost .egs-warr .upper * {font-size: 32.93px;} #warranty .no-cost .egs-warr .all {font-size: 49.8px;} #warranty .no-cost .egs-warr .yen {font-size: 68.83px;} #warranty .no-cost .egs-warr .zero {top: 6px; font-size: 138.05px;} #warranty .service {padding: 140px 0 180px;} #warranty .service .service-list li {width: calc((100% - 200px) / 3);} #warranty .service .service-list .frame {margin-bottom: 20px;} #warranty .service .service-title .ja {font-size: 20px;} #warranty .service .note {font-size: 13px;} @media screen and (max-width: 1240px) { #warranty .no-cost .sample-list li .details {font-size: 23px!important;} #warranty .no-cost .sample-list li:first-child .details, #warranty .no-cost .sample-list li:nth-child(2) .details {height: 54px;} } @media screen and (max-width: 1072px) { #warranty .no-cost .sample-list li:first-child .details, #warranty .no-cost .sample-list li:nth-child(2) .details {height: 81px;} } @media screen and (max-width: 882px) { #warranty .no-cost .sample-list li:first-child .details {height: 53px;} } /*-------------------------------------------------------------------------- CONTACT (page-contact.php) --------------------------------------------------------------------------*/ #form-page .contact-info {width: 760px;} #form-page .contact-info:first-child {padding: 210px 0 74px;} #form-page .contact-info:nth-child(2) {padding: 67px 0 70px;} #form-page .contact-info:nth-child(3) {padding-top: 70px;} #form-page .contact-info h2 {font-size: 21px;} #form-page .contact-info:nth-child(3) h2 {margin-bottom: 34px;} #form-page .contact-info a.tel {font-size: 60px; letter-spacing: 4px; margin: 30px 0 35px;} #form-page .contact-info .time, #form-page .contact-info .line-account, #form-page .contact-info .prompt {font-size: 18px;} #form-page .contact-info .line-icon {width: 82px; margin: 42px auto 34px;} /*基礎*/ #form-page form {width: 760px;} #form-page form .inner {margin: 100px 0;} #form-page form .inner > dl > dt {font-size: 17px;} #form-page form input[type="text"], #form-page form input[type="email"], #form-page form input[type="tel"], #form-page form input[type="date"], #form-page form input[type="datetime-local"], #form-page form textarea, #form-page form select, #form-page form .mwform-checkbox-field-text, #form-page form .mwform-radio-field-text{font-size: 17px;} #form-page form dd.flex .mwform-checkbox-field-text, #form-page form dd.flex .mwform-radio-field-text {font-size: 15px;} #form-page form label.zip:before {top: 12px; font-size: 14px;} #form-page form .select:before,#form-page form .select:after {content: ""; display: block; width: 13px; height: 2px; background: #000; position: absolute; top: 23px; transition: .3s ease; z-index: 1;} #form-page form .select:before {right: 22px; transform: rotate(-40deg);} #form-page form .select:after {right: 31px; transform: rotate(40deg);} #form-page form dd.flex .mwform-checkbox-field:nth-child(1), #form-page form dd.flex .mwform-checkbox-field:nth-child(4) {width: 188px;} #form-page form dd.flex .mwform-checkbox-field:nth-child(2), #form-page form dd.flex .mwform-checkbox-field:nth-child(5) {width: 188px;} #form-page form dd.flex .mwform-checkbox-field:nth-child(3), #form-page form dd.flex .mwform-checkbox-field:nth-child(6) {width: auto;} #form-page form label.zip {width: 210px;} #form-page form .auto-input {width: 120px; height: 50px; font-size: 14px;} /*フィニッシュ*/ #form-page form .inner.finish {text-align: center; margin-bottom: 170px;} #form-page form .inner.finish a.link {margin-bottom: 30px; font-size: 15px;} #form-page form label.send input[type="submit"] {font-size: 18px;} /*-------------------------------------------------------------------------- サンクスページ --------------------------------------------------------------------------*/ #thanks-page .page-header {padding: 200px 0 0;} #thanks-page .completion {padding: 210px 0 342px;} #thanks-page .completion h3 {margin-bottom: 40px; font-size: 40px; letter-spacing: -5.5px;} #thanks-page .completion p {font-size: 20px; letter-spacing: 2px; line-height: 2.5;} #thanks-page .completion .home.more {width: 438px; margin-top: 120px;} /*-------------------------------------------------------------------------- PRIVACY POLICY (page-privacy.php) --------------------------------------------------------------------------*/ #privacy .page-header .page-title .ja {width: 218px;} #privacy .contents-wrap {padding: 210px 0 280px;} .page:not(.home) #privacy .container {width: 1056px; max-width: 90%;} #privacy p, #privacy h4, #privacy h5, #privacy dt, #privacy dd {font-size: 18px;} #privacy .desc {padding-bottom: 20px;} #privacy h3 {margin: 60px 0 20px; font-size: 20px;} #privacy .blank01 {margin-bottom: 24px;} #privacy .blank02 {margin-bottom: 48px;} /*-------------------------------------------------------------------------- 404.php --------------------------------------------------------------------------*/ #notfound {height: 925px;} #notfound h1 span {letter-spacing: 7px;} #notfound h1 span.big {font-size: 4.95rem;} #notfound h1 span.small {font-size: 2.75rem;} #notfound p {font-size: 1.05rem; margin: 12px 0 100px;}