/* ========================================================= construction.css /construction 専用。クラス名はすべて cn- で始まる 各ルールの上のコメントは、その部品に入っている文字（どの部品かの目印）。 ========================================================= */ /* cn-root: keyboard_arrow_right 特徴 keyb */ .cn-root { background: rgb(255, 255, 255); border-radius: 0px; height: 100%; margin: 0px; opacity: 1; padding: 0px; width: 100%; max-width: 100%; } /* cn-top-pic1: 新規工事をご検討中の経営者へ その見積り、本当に成立してい */ .cn-top-pic1 { place-content: center; align-items: center; background: rgb(11, 37, 64); border-radius: 0px; flex: 0 0 auto; flex-flow: column; height: 750px; padding: 90px 70px 0px; width: 100%; max-width: 100%; } .cn-top-pic1::before { background-repeat: no-repeat; background-size: cover; filter: saturate(100%) brightness(60%); } @media screen and (max-width: 760px) { .cn-top-pic1 { padding: 90px 50px 0px; } } @media screen and (max-width: 540px) { .cn-top-pic1::before { background-position: center center; } } @media screen and (max-width: 540px) { .cn-top-pic1 { padding: 90px 25px 0px; } } /* cn-top-inner1: */ .cn-top-inner1 { padding: 90px 70px 0px; width: 100%; height: 750px; flex-flow: column; place-content: center; align-items: center; max-width: 100%; } .cn-top-inner1::before { flex-direction: column; } @media screen and (max-width: 760px) { .cn-top-inner1 { padding: 90px 50px 0px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-top-inner1::before { flex-direction: column; } } @media screen and (max-width: 540px) { .cn-top-inner1 { padding: 90px 25px 0px; flex-direction: column; } } /* cn-top-box1: 新規工事をご検討中の経営者へ その見積り、本当に成立してい */ .cn-top-box1 { place-content: center; align-items: center; flex-flow: column; padding: 0px; } html.js .cn-top-box1:not(.in) { opacity: 0; transition-duration: 700ms; transition-timing-function: ease-in-out; translate: 0px 20px; } .cn-top-box1.in-active { transition-duration: 700ms; transition-timing-function: ease-in-out; } /* cn-top-txt1: 新規工事をご検討中の経営者へ */ .cn-top-txt1 { border-bottom: 2px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-top-txt1 { font-size: 23px; margin: 0px 0px 10px; max-width: 100%; } } /* cn-top-txt2: その見積り、本当に成立していますか？ */ .cn-top-txt2 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 80px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 25px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-top-txt2 { font-size: 60px; } } /* cn-top-txt3: 出店経験のない経営者が、適正な見積を見抜くことはほぼ不可能で */ .cn-top-txt3 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 400; height: auto; line-height: 1.4; margin: 0px 0px 50px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-top-txt3 { font-size: 15px; } } /* cn-top-link1: 無料で見積を診断する arrow_forward */ .cn-top-link1 { place-content: center flex-start; align-items: center; background: #df5d00ff; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 5px 0px; flex: 0 0 auto; flex-flow: row; gap: 16px; margin: 0px 0px 15px; overflow: hidden; padding: 20px; width: 300px; --gh-cn-top-link1: 16px; --gv-cn-top-link1: 0px; max-width: 100%; } .cn-top-link1:hover { background: rgb(225, 127, 56); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px 0px inset; --gh-cn-top-link1: 16px; --gv-cn-top-link1: 0px; } /* cn-top-txt4: 無料で見積を診断する */ .cn-top-txt4 { color: rgb(255, 255, 255); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 17px; font-style: normal; font-weight: 700; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-top-link1: 無料で見積を診断する arrow_forward */ .cn-top-link1:hover .cn-top-txt4 { color: rgb(250, 250, 250); } @media screen and (max-width: 540px) { .cn-top-txt4 { font-size: 16px; } } /* cn-top-box2: */ .cn-top-box2 { background: rgba(11, 37, 64, 0); border-width: 0px 1px 0px 0px; border-style: solid; border-color: rgb(255, 255, 255); flex: 0 0 auto; height: 16px; width: 1px; max-width: 100%; } /* cn-top-icon1: arrow_forward */ .cn-top-icon1 { color: rgb(255, 255, 255); font-size: 16px; } /* cn-top-link1: 無料で見積を診断する arrow_forward */ .cn-top-link1:hover .cn-top-icon1 { color: rgb(250, 250, 250); } @media screen and (max-width: 540px) { .cn-top-icon1 { font-size: 15px; } } /* cn-top-box3: person_outline 営業なし 完全無料 */ .cn-top-box3 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: row; gap: 0px 15px; height: 25px; padding: 0px; width: auto; --gh-cn-top-box3: 15px; --gv-cn-top-box3: 0px; max-width: 100%; } /* cn-top-box4: person_outline 営業なし */ .cn-top-box4 { place-content: center; align-items: center; flex-flow: row; gap: 0px 5px; padding: 0px; --gh-cn-top-box4: 5px; --gv-cn-top-box4: 0px; } /* cn-top-icon2: person_outline */ .cn-top-icon2 { color: #df5d00ff; font-size: 24px; } /* cn-top-txt5: 営業なし */ .cn-top-txt5 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 700; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-top-box5: 完全無料 */ .cn-top-box5 { place-content: center; align-items: center; flex-flow: row; gap: 0px 5px; padding: 0px; --gh-cn-top-box5: 5px; --gv-cn-top-box5: 0px; } /* cn-top-icon3: */ .cn-top-icon3 { color: #df5d00ff; font-size: 20px; } /* cn-top-txt6: 完全無料 */ .cn-top-txt6 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 700; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-problem-sec1: PROBLEM Problem こんなお悩み、ありません */ .cn-problem-sec1 { place-content: center flex-start; align-items: center; background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; --g-color-0: #0b2540ff; --g-position-0: 49%; --g-color-1: #000000ff; --g-position-1: 100%; --g-color-2: #000000ff; --g-position-2: 100%; --g-color-3: #000000ff; --g-position-3: 100%; --g-color-4: #000000ff; --g-position-4: 100%; --g-color-5: #000000ff; --g-position-5: 100%; --g-color-6: #000000ff; --g-position-6: 100%; --g-color-7: #000000ff; --g-position-7: 100%; --g-color-8: #000000ff; --g-position-8: 100%; --g-color-9: #000000ff; --g-position-9: 100%; --g-color-10: #000000ff; --g-position-10: 100%; --g-color-11: #000000ff; --g-position-11: 100%; --g-angle: 0deg; } @media screen and (max-width: 1280px) { .cn-problem-sec1 { padding: 100px; } } @media screen and (max-width: 760px) { .cn-problem-sec1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-problem-sec1 { padding: 100px 25px; } } /* cn-problem-inner1: */ .cn-problem-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-problem-inner1 { padding: 100px; flex-direction: column; } } @media screen and (max-width: 760px) { .cn-problem-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-problem-inner1 { padding: 100px 25px; flex-direction: column; } } /* cn-problem-txt1: PROBLEM */ .cn-problem-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 60px 0px auto; color: rgba(255, 255, 255, 0.1); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 1; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-problem-txt1 { left: 0px; right: 0px; top: 52px; } } @media screen and (max-width: 760px) { .cn-problem-txt1 { left: 0px; right: 0px; top: 49px; } } @media screen and (max-width: 540px) { .cn-problem-txt1 { font-size: 70px; left: 0px; right: 0px; top: 54px; } } /* cn-problem-box1: Problem */ .cn-problem-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-problem-box1: 10px; --gv-cn-problem-box1: 0px; } /* cn-problem-box2: */ .cn-problem-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-problem-txt2: Problem */ .cn-problem-txt2 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-problem-box3: */ .cn-problem-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-problem-txt3: こんなお悩み、ありませんか？ */ .cn-problem-txt3 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 100px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-problem-txt3 { font-size: 40px; margin: 0px 0px 70px; max-width: 100%; } } /* cn-problem-txt4: 見積り時の悩み */ .cn-problem-txt4 { border-bottom: 2px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-problem-box4: 3社から見積りをもらった。 金額に差があるが、どれが適正かわ */ .cn-problem-box4 { place-content: flex-start center; align-items: flex-start; flex-flow: wrap; gap: 20px; margin: 0px 0px 100px; padding: 0px; --gh-cn-problem-box4: 20px; --gv-cn-problem-box4: 20px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-problem-box4 { gap: 50px 20px; --gh-cn-problem-box4: 20px; --gv-cn-problem-box4: 50px; } } /* cn-problem-box5: 3社から見積りをもらった。 金額に差があるが、どれが適正かわ */ .cn-problem-box5 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box5: 0px; --gv-cn-problem-box5: 20px; } html.js .cn-problem-box5:not(.in) { opacity: 0; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box5: 0px; --gv-cn-problem-box5: 20px; } .cn-problem-box5.in-active { transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic1: */ .cn-problem-pic1 { place-content: center; align-items: center; background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; flex-flow: row; height: 250px; width: 350px; max-width: 100%; } .cn-problem-pic1::before { filter: sepia(0%) grayscale(0%); } /* cn-problem-txt5: 3社から見積りをもらった。 金額に差があるが、どれが適正かわ */ .cn-problem-txt5 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-box6: 安い方に決めたが、追加費用が次々と発生。 結局、高くついた。 */ .cn-problem-box6 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box6: 0px; --gv-cn-problem-box6: 20px; } html.js .cn-problem-box6:not(.in) { opacity: 0; transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box6: 0px; --gv-cn-problem-box6: 20px; } .cn-problem-box6.in-active { transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic2: */ .cn-problem-pic2 { place-content: center; align-items: center; background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 250px; width: 350px; max-width: 100%; } .cn-problem-pic2::before { background-size: 130% auto; } /* cn-problem-txt6: 安い方に決めたが、追加費用が次々と発生。 結局、高くついた。 */ .cn-problem-txt6 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-box7: 見積りの総額だけ比較した。 内訳までは見なかった。 あとで管 */ .cn-problem-box7 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box7: 0px; --gv-cn-problem-box7: 20px; } html.js .cn-problem-box7:not(.in) { opacity: 0; transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box7: 0px; --gv-cn-problem-box7: 20px; } .cn-problem-box7.in-active { transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic3: */ .cn-problem-pic3 { place-content: center; align-items: center; background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 250px; width: 350px; max-width: 100%; } .cn-problem-pic3::before { background-size: 130% auto; } /* cn-problem-txt7: 見積りの総額だけ比較した。 内訳までは見なかった。 あとで管 */ .cn-problem-txt7 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-txt8: 開店後の悩み */ .cn-problem-txt8 { border-bottom: 2px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-problem-box8: 動線が悪く、 オペレーションに支障が出ている。 設備が過剰 */ .cn-problem-box8 { place-content: center; align-items: center; flex-flow: wrap; gap: 20px; margin: 0px 0px 70px; padding: 0px; --gh-cn-problem-box8: 20px; --gv-cn-problem-box8: 20px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-problem-box8 { gap: 50px; margin: 0px 0px 50px; --gh-cn-problem-box8: 50px; --gv-cn-problem-box8: 50px; max-width: 100%; } } /* cn-problem-box9: 動線が悪く、 オペレーションに支障が出ている。 */ .cn-problem-box9 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box9: 0px; --gv-cn-problem-box9: 20px; } html.js .cn-problem-box9:not(.in) { opacity: 0; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box9: 0px; --gv-cn-problem-box9: 20px; } .cn-problem-box9.in-active { transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic4: */ .cn-problem-pic4 { background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; height: 250px; padding: 0px; width: 350px; max-width: 100%; } /* cn-problem-txt9: 動線が悪く、 オペレーションに支障が出ている。 */ .cn-problem-txt9 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-box10: 設備が過剰で、 ランニングコストが想定の1.5倍。 */ .cn-problem-box10 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box10: 0px; --gv-cn-problem-box10: 20px; } html.js .cn-problem-box10:not(.in) { opacity: 0; transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box10: 0px; --gv-cn-problem-box10: 20px; } .cn-problem-box10.in-active { transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic5: */ .cn-problem-pic5 { background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; height: 250px; padding: 0px; width: 350px; max-width: 100%; } .cn-problem-pic5::before { background-position: center center; } /* cn-problem-txt10: 設備が過剰で、 ランニングコストが想定の1.5倍。 */ .cn-problem-txt10 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-box11: 客席は埋まる。 だが、回転率が悪く売上が伸びない。 */ .cn-problem-box11 { place-content: center; align-items: center; flex-flow: column; gap: 20px; padding: 0px; --gh-cn-problem-box11: 0px; --gv-cn-problem-box11: 20px; } html.js .cn-problem-box11:not(.in) { margin: 0px; opacity: 0; transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-problem-box11: 0px; --gv-cn-problem-box11: 20px; } .cn-problem-box11.in-active { transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } /* cn-problem-pic6: */ .cn-problem-pic6 { background: rgb(238, 238, 238); border-radius: 3px; flex: 0 0 auto; height: 250px; padding: 0px; width: 350px; max-width: 100%; } .cn-problem-pic6::before { background-position: center center; } /* cn-problem-txt11: 客席は埋まる。 だが、回転率が悪く売上が伸びない。 */ .cn-problem-txt11 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-problem-icon1: */ .cn-problem-icon1 { color: #df5d00ff; font-size: 50px; margin: 0px 0px 30px; max-width: 100%; } /* cn-problem-txt12: 完成してから気づくのでは遅い！ */ .cn-problem-txt12 { border-bottom: 2px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #df5d00ff; font-family: 'Noto Sans JP', sans-serif; font-size: 70px; font-style: italic; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } html.js .cn-problem-txt12:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; } .cn-problem-txt12.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 1280px) { .cn-problem-txt12 { text-align: center; justify-content: center; } } @media screen and (max-width: 760px) { .cn-problem-txt12 { line-height: 1.2; padding: 0px 0px 10px; text-align: center; justify-content: center; } } @media screen and (max-width: 540px) { .cn-problem-txt12 { font-size: 50px; line-height: 1.2; padding: 0px 0px 10px; } } /* cn-why-pic1: Why ? なぜ、工事は失敗するのか あなたの意図、ど */ .cn-why-pic1 { place-content: center flex-start; align-items: center; background: #f0f0f0ff; flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; } .cn-why-pic1::before { filter: blur(6px) sepia(0%) grayscale(0%) contrast(30%) brightness(160%) saturate(0%); } @media screen and (max-width: 1280px) { .cn-why-pic1 { padding: 100px; } } @media screen and (max-width: 760px) { .cn-why-pic1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-why-pic1 { padding: 100px 25px; } } /* cn-why-inner1: */ .cn-why-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } .cn-why-inner1::before { flex-direction: column; } @media screen and (max-width: 1280px) { .cn-why-inner1 { padding: 100px; flex-direction: column; } } @media screen and (max-width: 760px) { .cn-why-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-why-inner1 { padding: 100px 25px; flex-direction: column; } } /* cn-why-box1: Why ? */ .cn-why-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-why-box1: 10px; --gv-cn-why-box1: 0px; } /* cn-why-box2: */ .cn-why-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-why-txt1: Why ? */ .cn-why-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box3: */ .cn-why-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-why-txt2: なぜ、工事は失敗するのか */ .cn-why-txt2 { color: #0b2540ff; flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 10px; text-align: center; width: 100%; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-why-txt2 { font-size: 40px; } } /* cn-why-txt3: あなたの意図、どのぐらい職人に伝わっているか知っていますか？ */ .cn-why-txt3 { color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 70px; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-why-txt4: WHY */ .cn-why-txt4 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 45px 0px auto; color: rgba(11, 37, 64, 0.1); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 0; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-why-txt4 { left: 0px; right: 0px; top: 45px; } } @media screen and (max-width: 760px) { .cn-why-txt4 { left: 0px; right: 0px; top: 51px; } } @media screen and (max-width: 540px) { .cn-why-txt4 { inset: 65px 0px auto; font-size: 60px; } } /* cn-why-box4: 多重下請け構造が、コストと品質に影響を与えます 依頼 施 */ .cn-why-box4 { place-content: center; align-items: center; background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 10px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0px; flex-flow: column; height: auto; margin: 0px 0px 70px; padding: 50px 30px; width: 100%; max-width: 100%; } html.js .cn-why-box4:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; } .cn-why-box4.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 540px) { .cn-why-box4 { padding: 40px 30px; } } /* cn-why-txt5: 多重下請け構造が、コストと品質に影響を与えます */ .cn-why-txt5 { color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: center; text-decoration: underline; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-why-txt5 { font-size: 20px; margin: 0px 0px 50px; max-width: 100%; } } /* cn-why-box5: 依頼 施主 意図の伝達度 100 % 元請け */ .cn-why-box5 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 25px 15px; height: auto; margin: 0px 0px 30px; padding: 0px; width: 100%; --gh-cn-why-box5: 15px; --gv-cn-why-box5: 25px; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-why-box5 { gap: 25px 15px; --gh-cn-why-box5: 15px; --gv-cn-why-box5: 25px; } } @media screen and (max-width: 540px) { .cn-why-box5 { flex: 0 0 auto; flex-flow: column; gap: 5px 15px; height: 1160px; width: 100%; --gh-cn-why-box5: 0px; --gv-cn-why-box5: 5px; max-width: 100%; } } /* cn-why-box6: 依頼 施主 意図の伝達度 100 % */ .cn-why-box6 { place-content: center flex-start; align-items: center; background: rgba(223, 93, 0, 0.1); border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 200px; padding: 0px 20px 20px; width: 180px; max-width: 100%; } /* cn-why-txt6: 依頼 */ .cn-why-txt6 { background: #0b2540ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 100px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; padding: 5px 20px; text-align: left; translate: 0px -14px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt7: 施主 */ .cn-why-txt7 { border-bottom: 2px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; text-align: left; translate: 0px -15px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt8: 意図の伝達度 */ .cn-why-txt8 { background: #df5d00ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 5px; padding: 5px 10px; text-align: left; translate: 0px -15px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box7: 100 % */ .cn-why-box7 { place-content: flex-end center; align-items: flex-end; flex-flow: row; gap: 0px; margin: 0px 0px 10px; padding: 0px; translate: 0px -15px; --gh-cn-why-box7: 0px; --gv-cn-why-box7: 0px; max-width: 100%; } /* cn-why-txt9: 100 */ .cn-why-txt9 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #df5d00ff; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-weight: 700; height: auto; letter-spacing: -0.02em; line-height: 1; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt10: % */ .cn-why-txt10 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #df5d00ff; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-icon1: */ .cn-why-icon1 { color: #df5d00ff; display: flex; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon1 { display: flex; } } @media screen and (max-width: 760px) { .cn-why-icon1 { display: flex; } } @media screen and (max-width: 540px) { .cn-why-icon1 { display: none; } } @media screen and (max-width: 360px) { .cn-why-icon1 { display: none; } } /* cn-why-icon2: */ .cn-why-icon2 { color: #df5d00ff; display: none; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon2 { display: none; } } @media screen and (max-width: 760px) { .cn-why-icon2 { display: none; } } @media screen and (max-width: 540px) { .cn-why-icon2 { display: flex; } } @media screen and (max-width: 360px) { .cn-why-icon2 { display: flex; } } /* cn-why-box8: 元請け 意図の伝達度 30 % マージン+30% */ .cn-why-box8 { place-content: center flex-start; align-items: center; background: rgba(181, 75, 0, 0.094); border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 200px; padding: 20px; width: 180px; max-width: 100%; } /* cn-why-txt11: 元請け */ .cn-why-txt11 { border-width: 0px 0px 2px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt12: 意図の伝達度 */ .cn-why-txt12 { background: rgb(181, 75, 0); border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 5px; padding: 5px 10px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box9: 30 % */ .cn-why-box9 { place-content: flex-end center; align-items: flex-end; flex-flow: row; gap: 0px; margin: 0px 0px 10px; padding: 0px; --gh-cn-why-box9: 0px; --gv-cn-why-box9: 0px; max-width: 100%; } /* cn-why-txt13: 30 */ .cn-why-txt13 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(181, 75, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-weight: 700; height: auto; letter-spacing: -0.02em; line-height: 1; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt14: % */ .cn-why-txt14 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(181, 75, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt15: マージン+30% */ .cn-why-txt15 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(244, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-icon3: */ .cn-why-icon3 { color: rgb(181, 75, 0); display: flex; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon3 { display: flex; } } @media screen and (max-width: 760px) { .cn-why-icon3 { display: flex; } } @media screen and (max-width: 540px) { .cn-why-icon3 { display: none; } } @media screen and (max-width: 360px) { .cn-why-icon3 { display: none; } } /* cn-why-icon4: */ .cn-why-icon4 { color: #df5d00ff; display: none; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon4 { display: none; } } @media screen and (max-width: 760px) { .cn-why-icon4 { display: none; } } @media screen and (max-width: 540px) { .cn-why-icon4 { color: rgb(181, 75, 0); display: flex; } } @media screen and (max-width: 360px) { .cn-why-icon4 { display: flex; } } /* cn-why-box10: 下請け 意図の伝達度 20 % マージン+20% */ .cn-why-box10 { place-content: center; align-items: center; border-width: 0px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 3px; flex-flow: column; padding: 0px; } /* cn-why-box11: 下請け 意図の伝達度 20 % マージン+20% */ .cn-why-box11 { place-content: center flex-start; align-items: center; background: rgba(91, 38, 0, 0.1); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex: 0 0 auto; flex-flow: column; height: 200px; padding: 20px; width: 180px; max-width: 100%; } /* cn-why-txt16: 下請け */ .cn-why-txt16 { border-width: 0px 0px 2px; border-style: solid; border-color: rgb(91, 38, 0); color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt17: 意図の伝達度 */ .cn-why-txt17 { background: rgb(91, 38, 0); border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 5px; padding: 5px 10px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box12: 20 % */ .cn-why-box12 { place-content: flex-end center; align-items: flex-end; flex-flow: row; gap: 0px; margin: 0px 0px 10px; padding: 0px; --gh-cn-why-box12: 0px; --gv-cn-why-box12: 0px; max-width: 100%; } /* cn-why-txt18: 20 */ .cn-why-txt18 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(91, 38, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-weight: 700; height: auto; letter-spacing: -0.02em; line-height: 1; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt19: % */ .cn-why-txt19 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(91, 38, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt20: マージン+20% */ .cn-why-txt20 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(244, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-icon5: */ .cn-why-icon5 { color: rgb(91, 38, 0); display: flex; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon5 { display: flex; } } @media screen and (max-width: 760px) { .cn-why-icon5 { display: flex; } } @media screen and (max-width: 540px) { .cn-why-icon5 { display: none; } } @media screen and (max-width: 360px) { .cn-why-icon5 { display: none; } } /* cn-why-icon6: */ .cn-why-icon6 { color: #df5d00ff; display: none; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon6 { display: none; } } @media screen and (max-width: 760px) { .cn-why-icon6 { display: none; } } @media screen and (max-width: 540px) { .cn-why-icon6 { color: rgb(91, 38, 0); display: flex; } } @media screen and (max-width: 360px) { .cn-why-icon6 { display: flex; } } /* cn-why-box13: 孫請け 意図の伝達度 15 % マージン+15% */ .cn-why-box13 { place-content: center flex-start; align-items: center; background: rgba(11, 37, 64, 0.1); border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 200px; padding: 20px; width: 180px; max-width: 100%; } /* cn-why-txt21: 孫請け */ .cn-why-txt21 { border-bottom: 2px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt22: 意図の伝達度 */ .cn-why-txt22 { background: #0b2540ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 5px; padding: 5px 10px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box14: 15 % */ .cn-why-box14 { place-content: flex-end center; align-items: flex-end; flex-flow: row; gap: 0px; margin: 0px 0px 10px; padding: 0px; --gh-cn-why-box14: 0px; --gv-cn-why-box14: 0px; max-width: 100%; } /* cn-why-txt23: 15 */ .cn-why-txt23 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-weight: 700; height: auto; letter-spacing: -0.02em; line-height: 1; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt24: % */ .cn-why-txt24 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt25: マージン+15% */ .cn-why-txt25 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(244, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-icon7: */ .cn-why-icon7 { color: rgb(51, 51, 51); display: flex; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon7 { display: flex; } } @media screen and (max-width: 760px) { .cn-why-icon7 { display: flex; } } @media screen and (max-width: 540px) { .cn-why-icon7 { display: none; } } @media screen and (max-width: 360px) { .cn-why-icon7 { display: none; } } /* cn-why-icon8: */ .cn-why-icon8 { color: #df5d00ff; display: none; font-size: 30px; } @media screen and (max-width: 1280px) { .cn-why-icon8 { display: none; } } @media screen and (max-width: 760px) { .cn-why-icon8 { display: none; } } @media screen and (max-width: 540px) { .cn-why-icon8 { color: rgb(51, 51, 51); display: flex; margin: 0px 0px 10px; max-width: 100%; } } @media screen and (max-width: 360px) { .cn-why-icon8 { display: flex; } } /* cn-why-box15: 実作業 職人 意図の伝達度 15 %以下 */ .cn-why-box15 { place-content: center flex-start; align-items: center; background: rgba(22, 66, 113, 0.1); border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 200px; padding: 0px 20px 20px; width: 180px; max-width: 100%; } /* cn-why-txt26: 実作業 */ .cn-why-txt26 { background: #0b2540ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 100px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; padding: 5px 20px; text-align: left; translate: 0px -14px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt27: 職人 */ .cn-why-txt27 { border-width: 0px 0px 2px; border-style: solid; border-color: rgb(22, 66, 113); color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 20px; text-align: left; translate: 0px -15px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt28: 意図の伝達度 */ .cn-why-txt28 { background: rgb(22, 66, 113); border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 5px; padding: 5px 10px; text-align: left; translate: 0px -15px; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box16: 15 %以下 */ .cn-why-box16 { place-content: flex-end center; align-items: flex-end; flex-flow: row; gap: 0px; margin: 0px 0px 10px; padding: 0px; translate: 0px -15px; --gh-cn-why-box16: 0px; --gv-cn-why-box16: 0px; max-width: 100%; } /* cn-why-txt29: 15 */ .cn-why-txt29 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(22, 66, 113); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-weight: 700; height: auto; letter-spacing: -0.02em; line-height: 1; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt30: %以下 */ .cn-why-txt30 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(22, 66, 113); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box17: 無駄なマージン 不透明な原価 責任分散 */ .cn-why-box17 { place-content: center; align-items: center; flex-flow: wrap; gap: 10px; margin: 0px; padding: 0px; --gh-cn-why-box17: 10px; --gv-cn-why-box17: 10px; max-width: 100%; } /* cn-why-box18: 無駄なマージン */ .cn-why-box18 { place-content: center; align-items: center; background: #df5d00ff; border-radius: 3px; flex-flow: row; gap: 0px 10px; padding: 10px 25px; --gh-cn-why-box18: 10px; --gv-cn-why-box18: 0px; } @media screen and (max-width: 540px) { .cn-why-box18 { flex: 0 0 auto; width: calc(100% - (var(--gh-cn-why-box17) * 0)); --gh-cn-why-box18: 10px; --gv-cn-why-box18: 0px; max-width: calc(100% - (var(--gh-cn-why-box17) * 0)); } } /* cn-why-icon9: */ .cn-why-icon9 { color: rgb(255, 255, 255); font-size: 24px; } /* cn-why-txt31: 無駄なマージン */ .cn-why-txt31 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box19: 不透明な原価 */ .cn-why-box19 { place-content: center; align-items: center; background: #df5d00ff; border-radius: 3px; flex-flow: row; gap: 0px 10px; padding: 10px 25px; --gh-cn-why-box19: 10px; --gv-cn-why-box19: 0px; } @media screen and (max-width: 540px) { .cn-why-box19 { flex: 0 0 auto; width: calc(100% - (var(--gh-cn-why-box17) * 0)); --gh-cn-why-box19: 10px; --gv-cn-why-box19: 0px; max-width: calc(100% - (var(--gh-cn-why-box17) * 0)); } } /* cn-why-icon10: */ .cn-why-icon10 { color: rgb(255, 255, 255); font-size: 24px; } /* cn-why-txt32: 不透明な原価 */ .cn-why-txt32 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box20: 責任分散 */ .cn-why-box20 { place-content: center; align-items: center; background: #df5d00ff; border-radius: 3px; flex-flow: row; gap: 0px 10px; padding: 10px 25px; --gh-cn-why-box20: 10px; --gv-cn-why-box20: 0px; } @media screen and (max-width: 540px) { .cn-why-box20 { flex: 0 0 auto; width: calc(100% - (var(--gh-cn-why-box17) * 0)); --gh-cn-why-box20: 10px; --gv-cn-why-box20: 0px; max-width: calc(100% - (var(--gh-cn-why-box17) * 0)); } } /* cn-why-icon11: */ .cn-why-icon11 { color: rgb(255, 255, 255); font-size: 24px; } /* cn-why-txt33: 責任分散 */ .cn-why-txt33 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt34: 工事の失敗の大きな3つの要因 */ .cn-why-txt34 { color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; text-decoration: underline; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-box21: マージンの多重化 発注額の半分以下しか 実工事に届かない */ .cn-why-box21 { place-content: center; align-items: center; flex-flow: row; padding: 0px; } /* cn-why-box22: マージンの多重化 発注額の半分以下しか 実工事に届かない */ .cn-why-box22 { place-content: center; align-items: center; flex-flow: wrap; gap: 20px; padding: 0px; --gh-cn-why-box22: 20px; --gv-cn-why-box22: 20px; } html.js .cn-why-box22:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-why-box22: 20px; --gv-cn-why-box22: 20px; } .cn-why-box22.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .cn-why-box22 { gap: 20px; --gh-cn-why-box22: 20px; --gv-cn-why-box22: 20px; } } /* cn-why-box23: マージンの多重化 発注額の半分以下しか 実工事に届かない */ .cn-why-box23 { place-content: center; align-items: center; background: #0b2540ff; border-radius: 1000px; box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px 0px; flex: 0 0 auto; flex-flow: column; height: 300px; width: 300px; max-width: 100%; } /* cn-why-txt35: マージンの多重化 */ .cn-why-txt35 { border-width: 0px 0px 1px; border-style: solid; border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt36: 発注額の半分以下しか 実工事に届かない */ .cn-why-txt36 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 600; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-why-box24: 意図の希釈 伝言ゲームで 「なぜそうしたいか」が消える */ .cn-why-box24 { place-content: center; align-items: center; background: #0b2540ff; border-radius: 1000px; box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px 0px; flex: 0 0 auto; flex-flow: column; height: 300px; width: 300px; max-width: 100%; } /* cn-why-txt37: 意図の希釈 */ .cn-why-txt37 { border-width: 0px 0px 1px; border-style: solid; border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt38: 伝言ゲームで 「なぜそうしたいか」が消える */ .cn-why-txt38 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 600; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-why-box25: 責任の分散 不具合時に誰の判断か追えず、 改修費は施主負担 */ .cn-why-box25 { place-content: center; align-items: center; background: #0b2540ff; border-radius: 1000px; box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px 0px; flex: 0 0 auto; flex-flow: column; height: 300px; padding: 0px; width: 300px; max-width: 100%; } /* cn-why-txt39: 責任の分散 */ .cn-why-txt39 { border-width: 0px 0px 1px; border-style: solid; border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 800; height: auto; line-height: 1.4; margin: 0px 0px 30px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-why-txt40: 不具合時に誰の判断か追えず、 改修費は施主負担 */ .cn-why-txt40 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 600; height: auto; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-solution-sec1: Solution の特徴 SOLUTION 従来の構 */ .cn-solution-sec1 { place-content: center flex-start; align-items: center; background: #f0f0f0ff; flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-solution-sec1 { padding: 100px; } } @media screen and (max-width: 760px) { .cn-solution-sec1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-solution-sec1 { padding: 100px 25px; } } /* cn-solution-inner1: */ .cn-solution-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-solution-inner1 { padding: 100px; flex-direction: column; } } @media screen and (max-width: 760px) { .cn-solution-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-solution-inner1 { padding: 100px 25px; flex-direction: column; } } /* cn-solution-box1: Solution */ .cn-solution-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-solution-box1: 10px; --gv-cn-solution-box1: 0px; } /* cn-solution-box2: */ .cn-solution-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-solution-txt1: Solution */ .cn-solution-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-box3: */ .cn-solution-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-solution-box4: の特徴 */ .cn-solution-box4 { place-content: center; align-items: center; flex-flow: row; margin: 0px 0px 50px; padding: 0px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-solution-box4 { flex: 0 0 auto; width: 100%; max-width: 100%; } } /* cn-solution-img1: */ .cn-solution-img1 { flex: 0 0 auto; height: auto; width: 400px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-solution-img1 { flex: 0 0 auto; width: 260px; max-width: 100%; } } /* cn-solution-txt2: の特徴 */ .cn-solution-txt2 { color: rgb(11, 37, 64); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: 60px; letter-spacing: -0.05em; line-height: 1.2; text-align: center; translate: 3px -2px; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-solution-txt2 { font-size: 25px; } } /* cn-solution-txt3: SOLUTION */ .cn-solution-txt3 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 44px 0px auto; color: rgba(0, 0, 0, 0.05); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 0; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-solution-txt3 { left: 0px; right: 0px; top: 47px; } } @media screen and (max-width: 760px) { .cn-solution-txt3 { left: 0px; right: 0px; top: 44px; } } @media screen and (max-width: 540px) { .cn-solution-txt3 { font-size: 60px; left: 0px; padding: 0px; right: 0px; top: 62px; width: auto; max-width: 100%; } } /* cn-solution-box5: 従来の構造 施主 元請け （マージン+30%） 下 */ .cn-solution-box5 { place-content: flex-start center; align-items: flex-start; flex-flow: row; gap: 0px 20px; padding: 0px; --gh-cn-solution-box5: 20px; --gv-cn-solution-box5: 0px; } @media screen and (max-width: 1280px) { .cn-solution-box5 { flex-flow: wrap; gap: 70px 20px; margin: 0px; --gh-cn-solution-box5: 20px; --gv-cn-solution-box5: 70px; max-width: 100%; } } /* cn-solution-box6: 従来の構造 施主 元請け （マージン+30%） 下 */ .cn-solution-box6 { place-content: center; align-items: center; flex-flow: column; padding: 0px; } html.js .cn-solution-box6:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; } .cn-solution-box6.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } /* cn-solution-box7: 従来の構造 施主 元請け （マージン+30%） 下 */ .cn-solution-box7 { place-content: center flex-start; align-items: center; flex-flow: column; padding: 0px; } /* cn-solution-txt4: 従来の構造 */ .cn-solution-txt4 { background: #0b2540ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 10px 10px 0px 0px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; padding: 15px 20px; text-align: center; width: 100%; max-width: 100%; justify-content: center; } /* cn-solution-box8: 施主 元請け （マージン+30%） 下請け （マ */ .cn-solution-box8 { place-content: center; align-items: center; background: rgba(11, 37, 64, 0.094); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 0px 0px 10px 10px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: column; height: auto; margin: 0px 0px 20px; padding: 30px; width: auto; max-width: 100%; } /* cn-solution-box9: 施主 元請け （マージン+30%） 下請け （マ */ .cn-solution-box9 { place-content: center flex-start; align-items: center; flex-flow: column; margin: 0px; padding: 0px; max-width: 100%; } /* cn-solution-txt5: 施主 */ .cn-solution-txt5 { background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; color: #0b2540ff; flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; line-height: 1.4; padding: 10px 20px; text-align: center; width: 500px; max-width: 100%; justify-content: center; } /* cn-solution-icon1: */ .cn-solution-icon1 { color: rgb(51, 51, 51); font-size: 24px; margin: 5px 0px; max-width: 100%; } /* cn-solution-box10: 元請け （マージン+30%） */ .cn-solution-box10 { place-content: center; align-items: center; background: #0b2540ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-solution-box10: 10px; --gv-cn-solution-box10: 0px; max-width: 100%; } /* cn-solution-txt6: 元請け */ .cn-solution-txt6 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-txt7: （マージン+30%） */ .cn-solution-txt7 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-icon2: */ .cn-solution-icon2 { color: rgb(51, 51, 51); font-size: 24px; margin: 5px 0px; max-width: 100%; } /* cn-solution-box11: 下請け （マージン+20%） */ .cn-solution-box11 { place-content: center; align-items: center; background: #0b2540ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-solution-box11: 10px; --gv-cn-solution-box11: 0px; max-width: 100%; } /* cn-solution-txt8: 下請け */ .cn-solution-txt8 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-txt9: （マージン+20%） */ .cn-solution-txt9 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-icon3: */ .cn-solution-icon3 { color: rgb(51, 51, 51); font-size: 24px; margin: 5px 0px; max-width: 100%; } /* cn-solution-box12: 孫請け （マージン+15%） */ .cn-solution-box12 { place-content: center; align-items: center; background: #0b2540ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-solution-box12: 10px; --gv-cn-solution-box12: 0px; max-width: 100%; } /* cn-solution-txt10: 孫請け */ .cn-solution-txt10 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-txt11: （マージン+15%） */ .cn-solution-txt11 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-icon4: */ .cn-solution-icon4 { color: rgb(51, 51, 51); font-size: 24px; margin: 5px 0px; max-width: 100%; } /* cn-solution-box13: 職人 */ .cn-solution-box13 { place-content: center; align-items: center; background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-solution-box13: 10px; --gv-cn-solution-box13: 0px; max-width: 100%; } /* cn-solution-txt12: 職人 */ .cn-solution-txt12 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-solution-txt13: 依頼の意図が薄まり、コストだけが膨らむ */ .cn-solution-txt13 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; text-decoration: underline; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-solution-txt13 { text-align: center; justify-content: center; } } /* cn-solution-box14: 当社の構造 施主 当社（プロジェクトマネージャー・施工 */ .cn-solution-box14 { place-content: center; align-items: center; flex-flow: column; padding: 0px; } html.js .cn-solution-box14:not(.in) { opacity: 0; transition-delay: 300ms; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; } .cn-solution-box14.in-active { transition-delay: 300ms; transition-duration: 300ms; transition-timing-function: ease-in-out; } /* cn-solution-box15: 当社の構造 施主 当社（プロジェクトマネージャー・施工 */ .cn-solution-box15 { place-content: center flex-start; align-items: center; flex-flow: column; padding: 0px; } /* cn-solution-txt14: 当社の構造 */ .cn-solution-txt14 { background: #df5d00ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 10px 10px 0px 0px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; padding: 15px 20px; text-align: center; width: 100%; max-width: 100%; justify-content: center; } /* cn-solution-box16: 施主 当社（プロジェクトマネージャー・施工統括） 専門チ */ .cn-solution-box16 { place-content: center; align-items: center; background: rgba(223, 93, 0, 0.1); border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 0px 0px 10px 10px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; flex-flow: column; height: auto; margin: 0px 0px 20px; padding: 30px; width: auto; max-width: 100%; } /* cn-solution-box17: 施主 当社（プロジェクトマネージャー・施工統括） 専門チ */ .cn-solution-box17 { place-content: center flex-start; align-items: center; flex-flow: column; gap: 0px; margin: 0px; padding: 0px; --gh-cn-solution-box17: 0px; --gv-cn-solution-box17: 0px; max-width: 100%; } /* cn-solution-txt15: 施主 */ .cn-solution-txt15 { background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; color: #0b2540ff; flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; height: auto; line-height: 1.4; padding: 10px 20px; text-align: center; width: 500px; max-width: 100%; justify-content: center; } /* cn-solution-icon5: */ .cn-solution-icon5 { color: #df5d00ff; font-size: 24px; margin: 5px 0px; max-width: 100%; } /* cn-solution-txt16: 当社（プロジェクトマネージャー・施工統括） */ .cn-solution-txt16 { background: #df5d00ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px 3px 0px 0px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; padding: 10px 20px; text-align: center; width: 500px; max-width: 100%; justify-content: center; } /* cn-solution-txt17: 専門チーム 木工 / 電気 / 設備 / 厨房 / 塗装 / */ .cn-solution-txt17 { background: rgba(223, 93, 0, 0.5); border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 0px 0px 3px 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px; color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 700; height: auto; line-height: 1.4; padding: 15px 20px; text-align: center; width: 500px; max-width: 100%; justify-content: center; } /* cn-solution-txt18: 専門チームを直接編成し 原価・品質・工程を一元管理 */ .cn-solution-txt18 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: #df5d00ff; font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: center; text-decoration: underline; width: auto; max-width: 100%; justify-content: center; } /* cn-blk5-sec1: Structure見積もりの構造STRUCTURE従来の見積 */ .cn-blk5-sec1 { place-content: center; align-items: center; background: rgb(255, 255, 255); display: none; flex-flow: column; height: auto; padding: 0px; width: 100%; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-blk5-sec1 { display: none; } } @media screen and (max-width: 760px) { .cn-blk5-sec1 { display: none; } } @media screen and (max-width: 540px) { .cn-blk5-sec1 { display: none; } } @media screen and (max-width: 360px) { .cn-blk5-sec1 { display: none; } } /* cn-blk5-inner1: */ .cn-blk5-inner1 { padding: 0px; width: 100%; height: auto; flex-flow: column; place-content: center; align-items: center; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-blk5-inner1 { flex-direction: column; } } @media screen and (max-width: 760px) { .cn-blk5-inner1 { flex-direction: column; } } @media screen and (max-width: 540px) { .cn-blk5-inner1 { flex-direction: column; } } @media screen and (max-width: 360px) { .cn-blk5-inner1 { flex-direction: column; } } /* cn-blk5-pic1: Structure見積もりの構造STRUCTURE従来の見積 */ .cn-blk5-pic1 { place-content: center; align-items: center; flex-flow: column; height: 100%; opacity: 1; padding: 0px; width: 100%; max-width: 100%; } /* cn-blk5-box1: Structure見積もりの構造STRUCTURE従来の見積 */ .cn-blk5-box1 { place-content: center flex-start; align-items: center; background: rgba(255, 255, 255, 0.6); flex: 0 0 auto; flex-flow: column; height: 100%; padding: 100px 200px; width: 100%; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-blk5-box1 { padding: 100px; } } /* cn-blk5-box2: Structure見積もりの構造STRUCTURE従来の見積 */ .cn-blk5-box2 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0px; flex-flow: column; gap: 0px; height: auto; padding: 80px; width: 100%; --gh-cn-blk5-box2: 0px; --gv-cn-blk5-box2: 0px; max-width: 100%; } /* cn-blk5-box3: Structure */ .cn-blk5-box3 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-blk5-box3: 10px; --gv-cn-blk5-box3: 0px; } /* cn-blk5-box4: */ .cn-blk5-box4 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-blk5-txt1: Structure */ .cn-blk5-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box5: */ .cn-blk5-box5 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-blk5-txt2: 見積もりの構造 */ .cn-blk5-txt2 { color: #0b2540ff; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 80px; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-blk5-txt3: STRUCTURE */ .cn-blk5-txt3 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 32px auto auto 270px; color: rgba(0, 0, 0, 0.05); font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: auto; z-index: 0; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-blk5-txt3 { left: 148px; right: auto; } } /* cn-blk5-box6: 従来の見積構造業者卸価格¥5,000,000元請マージン ( */ .cn-blk5-box6 { place-content: flex-start center; align-items: flex-start; flex: 0 0 auto; flex-flow: wrap; gap: 40px 15px; height: auto; margin: 0px 0px 30px; padding: 0px; width: calc(100% - (var(--gh-cn-blk5-box2) * 0)); --gh-cn-blk5-box6: 15px; --gv-cn-blk5-box6: 40px; max-width: calc(100% - (var(--gh-cn-blk5-box2) * 0)); } /* cn-blk5-box7: 従来の見積構造業者卸価格¥5,000,000元請マージン ( */ .cn-blk5-box7 { place-content: center flex-start; align-items: center; background: rgb(244, 244, 244); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; padding: 30px 30px 0px; width: 460px; max-width: 100%; } /* cn-blk5-txt4: 従来の見積構造 */ .cn-blk5-txt4 { background: #0b2540ff; border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 40px; padding: 5px 30px; text-align: center; translate: 0px -50px; width: auto; max-width: 100%; justify-content: center; } /* cn-blk5-box8: 業者卸価格¥5,000,000元請マージン (30%)+¥1 */ .cn-blk5-box8 { place-content: center flex-start; align-items: center; flex-flow: column; padding: 0px; translate: 0px -50px; } /* cn-blk5-box9: 業者卸価格¥5,000,000元請マージン (30%)+¥1 */ .cn-blk5-box9 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: column; gap: 10px; margin: 0px 0px 15px; padding: 0px; width: 400px; --gh-cn-blk5-box9: 0px; --gv-cn-blk5-box9: 10px; max-width: 100%; } /* cn-blk5-box10: 業者卸価格¥5,000,000 */ .cn-blk5-box10 { place-content: center space-between; align-items: center; background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box10: 10px; --gv-cn-blk5-box10: 0px; max-width: 100%; } /* cn-blk5-txt5: 業者卸価格 */ .cn-blk5-txt5 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt6: ¥5,000,000 */ .cn-blk5-txt6 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 0, 0); font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box11: 元請マージン (30%)+¥1,500,000 */ .cn-blk5-box11 { place-content: center space-between; align-items: center; background: rgba(11, 37, 64, 0.1); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box11: 10px; --gv-cn-blk5-box11: 0px; max-width: 100%; } /* cn-blk5-txt7: 元請マージン (30%) */ .cn-blk5-txt7 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt8: +¥1,500,000 */ .cn-blk5-txt8 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 74, 151); font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box12: 下請マージン (20%)+¥1,000,000 */ .cn-blk5-box12 { place-content: center space-between; align-items: center; background: rgba(11, 37, 64, 0.1); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box12: 10px; --gv-cn-blk5-box12: 0px; max-width: 100%; } /* cn-blk5-txt9: 下請マージン (20%) */ .cn-blk5-txt9 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt10: +¥1,000,000 */ .cn-blk5-txt10 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 74, 151); font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box13: 孫請マージン (15%)+¥750,000 */ .cn-blk5-box13 { place-content: center space-between; align-items: center; background: rgba(11, 37, 64, 0.1); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box13: 10px; --gv-cn-blk5-box13: 0px; max-width: 100%; } /* cn-blk5-txt11: 孫請マージン (15%) */ .cn-blk5-txt11 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt12: +¥750,000 */ .cn-blk5-txt12 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 74, 151); font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box14: */ .cn-blk5-box14 { background: rgb(210, 210, 210); flex: 0 0 auto; height: 2px; margin: 0px 0px 10px; width: 400px; max-width: 100%; } /* cn-blk5-box15: 合計¥8,250,000 */ .cn-blk5-box15 { place-content: center space-between; align-items: center; background: rgba(11, 37, 64, 0); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex: 0 0 auto; flex-flow: row; gap: 10px; height: auto; padding: 0px; width: 400px; --gh-cn-blk5-box15: 10px; --gv-cn-blk5-box15: 0px; max-width: 100%; } /* cn-blk5-txt13: 合計 */ .cn-blk5-txt13 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt14: ¥8,250,000 */ .cn-blk5-txt14 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 0, 0); font-family: Inter, sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box16: 当社の見積構造業者卸価格¥5,000,000当社手数料 (1 */ .cn-blk5-box16 { place-content: center; align-items: center; background: rgb(244, 244, 244); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; padding: 30px 30px 0px; width: 460px; max-width: 100%; } /* cn-blk5-box17: 当社の見積構造業者卸価格¥5,000,000当社手数料 (1 */ .cn-blk5-box17 { place-content: center flex-start; align-items: center; flex-flow: column; gap: 0px; padding: 0px; --gh-cn-blk5-box17: 0px; --gv-cn-blk5-box17: 0px; } /* cn-blk5-txt15: 当社の見積構造 */ .cn-blk5-txt15 { background: #df5d00ff; border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-radius: 3px; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 40px; padding: 5px 30px; text-align: center; translate: 0px -50px; width: auto; max-width: 100%; justify-content: center; } /* cn-blk5-box18: 業者卸価格¥5,000,000当社手数料 (12%)+¥60 */ .cn-blk5-box18 { place-content: center flex-start; align-items: center; flex-flow: column; gap: 0px; padding: 0px; translate: 0px -50px; --gh-cn-blk5-box18: 0px; --gv-cn-blk5-box18: 0px; } /* cn-blk5-box19: 業者卸価格¥5,000,000当社手数料 (12%)+¥60 */ .cn-blk5-box19 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: column; gap: 10px; margin: 0px 0px 15px; padding: 0px; width: 400px; --gh-cn-blk5-box19: 0px; --gv-cn-blk5-box19: 10px; max-width: 100%; } /* cn-blk5-box20: 業者卸価格¥5,000,000 */ .cn-blk5-box20 { place-content: center space-between; align-items: center; background: rgb(255, 255, 255); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box20: 10px; --gv-cn-blk5-box20: 0px; max-width: 100%; } /* cn-blk5-txt16: 業者卸価格 */ .cn-blk5-txt16 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt17: ¥5,000,000 */ .cn-blk5-txt17 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: rgb(0, 0, 0); font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box21: 当社手数料 (12%)+¥600,000 */ .cn-blk5-box21 { place-content: center space-between; align-items: center; background: rgba(223, 93, 0, 0.1); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex-flow: row; gap: 10px; height: auto; padding: 10px 20px; width: 500px; --gh-cn-blk5-box21: 10px; --gv-cn-blk5-box21: 0px; max-width: 100%; } /* cn-blk5-txt18: 当社手数料 (12%) */ .cn-blk5-txt18 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt19: +¥600,000 */ .cn-blk5-txt19 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: #df5d00ff; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box22: */ .cn-blk5-box22 { background: rgb(210, 210, 210); flex: 0 0 auto; height: 2px; margin: 0px 0px 10px; width: 400px; max-width: 100%; } /* cn-blk5-box23: 合計¥5,600,000 */ .cn-blk5-box23 { place-content: center space-between; align-items: center; background: rgba(11, 37, 64, 0); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 3px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex: 0 0 auto; flex-flow: row; gap: 10px; height: auto; padding: 0px; width: 400px; --gh-cn-blk5-box23: 10px; --gv-cn-blk5-box23: 0px; max-width: 100%; } /* cn-blk5-txt20: 合計 */ .cn-blk5-txt20 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 25px; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt21: ¥5,600,000 */ .cn-blk5-txt21 { border-width: 0px; border-style: solid; border-color: rgb(181, 75, 0); color: #df5d00ff; font-family: Inter, sans-serif; font-size: 25px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-box24: 削減額¥2,650,000 */ .cn-blk5-box24 { place-content: center; align-items: center; background: #0b2540ff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0px; flex-flow: column; height: 160px; width: calc(100% - (var(--gh-cn-blk5-box2) * 0)); max-width: calc(100% - (var(--gh-cn-blk5-box2) * 0)); } /* cn-blk5-txt22: 削減額 */ .cn-blk5-txt22 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-blk5-txt23: ¥2,650,000 */ .cn-blk5-txt23 { color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 50px; font-style: normal; font-weight: 600; height: auto; line-height: 1.4; text-align: left; text-decoration: none; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-features-sec1: Features 選ばれる4つの強み FEATURE */ .cn-features-sec1 { place-content: center flex-start; align-items: center; background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); border-radius: 0px; flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; --g-color-0: #0b2540ff; --g-position-0: 30%; --g-color-1: #133c66ff; --g-position-1: 100%; --g-color-2: #133c66ff; --g-position-2: 100%; --g-color-3: #133c66ff; --g-position-3: 100%; --g-color-4: #133c66ff; --g-position-4: 100%; --g-color-5: #133c66ff; --g-position-5: 100%; --g-color-6: #133c66ff; --g-position-6: 100%; --g-color-7: #133c66ff; --g-position-7: 100%; --g-color-8: #133c66ff; --g-position-8: 100%; --g-color-9: #133c66ff; --g-position-9: 100%; --g-color-10: #133c66ff; --g-position-10: 100%; --g-color-11: #133c66ff; --g-position-11: 100%; --g-angle: 0deg; } @media screen and (max-width: 1280px) { .cn-features-sec1 { padding: 100px; } } @media screen and (max-width: 760px) { .cn-features-sec1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-features-sec1 { padding: 100px 25px; } } /* cn-features-inner1: */ .cn-features-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-features-inner1 { padding: 100px; flex-direction: column; } } @media screen and (max-width: 760px) { .cn-features-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-features-inner1 { padding: 100px 25px; flex-direction: column; } } /* cn-features-box1: Features */ .cn-features-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-features-box1: 10px; --gv-cn-features-box1: 0px; } /* cn-features-box2: */ .cn-features-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-features-txt1: Features */ .cn-features-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-features-box3: */ .cn-features-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-features-txt2: 選ばれる4つの強み */ .cn-features-txt2 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 70px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-features-txt2 { font-size: 40px; } } /* cn-features-txt3: FEATURES */ .cn-features-txt3 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 37px 0px auto; color: rgba(255, 255, 255, 0.1); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 1; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-features-txt3 { inset: 34px 0px auto; } } @media screen and (max-width: 760px) { .cn-features-txt3 { left: 0px; padding: 0px; right: 0px; top: 59px; } } @media screen and (max-width: 540px) { .cn-features-txt3 { font-size: 60px; left: 0px; right: 0px; top: 69px; } } /* cn-features-box4: 01 業者卸価格開示の透明見積 すべての項目で業者卸価格 */ .cn-features-box4 { place-content: flex-start center; align-items: flex-start; flex: 0 0 auto; flex-flow: wrap; gap: 20px; margin: 0px 0px 50px; padding: 0px; width: 100%; --gh-cn-features-box4: 20px; --gv-cn-features-box4: 20px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-features-box4 { gap: 40px 20px; --gh-cn-features-box4: 20px; --gv-cn-features-box4: 40px; } } /* cn-features-box5: 01 業者卸価格開示の透明見積 すべての項目で業者卸価格 */ .cn-features-box5 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-radius: 3px; flex: 0 0 auto; flex-flow: column; gap: 0px; height: 350px; margin: 0px; overflow: hidden; padding: 0px; width: 285px; --gh-cn-features-box5: 0px; --gv-cn-features-box5: 0px; max-width: 100%; } html.js .cn-features-box5:not(.in) { opacity: 0; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-features-box5: 0px; --gv-cn-features-box5: 0px; } .cn-features-box5.in-active { transition-duration: 200ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .cn-features-box5 { flex: 0 0 auto; width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); --gh-cn-features-box5: 0px; --gv-cn-features-box5: 0px; max-width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); } } @media screen and (max-width: 540px) { .cn-features-box5 { height: auto; width: calc(100% - (var(--gh-cn-features-box4) * 0)); --gh-cn-features-box5: 0px; --gv-cn-features-box5: 0px; max-width: calc(100% - (var(--gh-cn-features-box4) * 0)); } } /* cn-features-box6: */ .cn-features-box6 { place-content: flex-start; align-items: flex-start; border-radius: 0px; flex: 0 0 auto; flex-flow: column; gap: 40px; height: 180px; overflow: hidden; padding: 0px; width: calc(100% - (var(--gh-cn-features-box5) * 0)); --gh-cn-features-box6: 0px; --gv-cn-features-box6: 40px; max-width: calc(100% - (var(--gh-cn-features-box5) * 0)); } @media screen and (max-width: 760px) { .cn-features-box6 { flex: 0 0 auto; height: 180px; --gh-cn-features-box6: 0px; --gv-cn-features-box6: 40px; } } @media screen and (max-width: 540px) { .cn-features-box6 { flex: 0 0 auto; height: 190px; --gh-cn-features-box6: 0px; --gv-cn-features-box6: 40px; width: calc(100% - (var(--gh-cn-features-box5) * 0)); max-width: calc(100% - (var(--gh-cn-features-box5) * 0)); } } /* cn-features-pic1: */ .cn-features-pic1 { flex: 0 0 auto; height: calc(100% - (var(--gv-cn-features-box6) * 0)); width: calc(100% - (var(--gh-cn-features-box6) * 0)); max-width: calc(100% - (var(--gh-cn-features-box6) * 0)); } /* cn-features-box7: 01 業者卸価格開示の透明見積 すべての項目で業者卸価格 */ .cn-features-box7 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 8px; padding: 16px 24px 24px; width: calc(100% - (var(--gh-cn-features-box5) * 0)); --gh-cn-features-box7: 0px; --gv-cn-features-box7: 8px; max-width: calc(100% - (var(--gh-cn-features-box5) * 0)); } @media screen and (max-width: 540px) { .cn-features-box7 { padding: 12px 16px 25px; --gh-cn-features-box7: 0px; --gv-cn-features-box7: 8px; } } /* cn-features-txt4: 01 */ .cn-features-txt4 { background: #df5d00ff; border-radius: 2px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; padding: 5px 8px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt4 { font-size: 11px; } } /* cn-features-txt5: 業者卸価格開示の透明見積 */ .cn-features-txt5 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: auto; line-height: 1.5; text-align: left; width: calc(100% - (var(--gh-cn-features-box7) * 0)); max-width: calc(100% - (var(--gh-cn-features-box7) * 0)); justify-content: flex-start; } /* cn-features-txt6: すべての項目で業者卸価格を開示。マージンも明示します。 */ .cn-features-txt6 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt6 { font-size: 11px; } } /* cn-features-box8: 02 損益分岐点から逆算する構造設計 業態別の売上構造を */ .cn-features-box8 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-radius: 3px; flex: 0 0 auto; flex-flow: column; gap: 0px; height: 350px; margin: 0px; overflow: hidden; padding: 0px; width: 285px; --gh-cn-features-box8: 0px; --gv-cn-features-box8: 0px; max-width: 100%; } html.js .cn-features-box8:not(.in) { opacity: 0; transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-features-box8: 0px; --gv-cn-features-box8: 0px; } .cn-features-box8.in-active { transition-delay: 200ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .cn-features-box8 { flex: 0 0 auto; width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); --gh-cn-features-box8: 0px; --gv-cn-features-box8: 0px; max-width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); } } @media screen and (max-width: 540px) { .cn-features-box8 { height: auto; width: calc(100% - (var(--gh-cn-features-box4) * 0)); --gh-cn-features-box8: 0px; --gv-cn-features-box8: 0px; max-width: calc(100% - (var(--gh-cn-features-box4) * 0)); } } /* cn-features-box9: */ .cn-features-box9 { place-content: flex-start; align-items: flex-start; border-radius: 0px; flex: 0 0 auto; flex-flow: column; gap: 40px; height: 180px; overflow: hidden; padding: 0px; width: calc(100% - (var(--gh-cn-features-box8) * 0)); --gh-cn-features-box9: 0px; --gv-cn-features-box9: 40px; max-width: calc(100% - (var(--gh-cn-features-box8) * 0)); } @media screen and (max-width: 760px) { .cn-features-box9 { flex: 0 0 auto; height: 180px; --gh-cn-features-box9: 0px; --gv-cn-features-box9: 40px; } } @media screen and (max-width: 540px) { .cn-features-box9 { flex: 0 0 auto; height: 190px; --gh-cn-features-box9: 0px; --gv-cn-features-box9: 40px; width: calc(100% - (var(--gh-cn-features-box8) * 0)); max-width: calc(100% - (var(--gh-cn-features-box8) * 0)); } } /* cn-features-pic2: */ .cn-features-pic2 { flex: 0 0 auto; height: calc(100% - (var(--gv-cn-features-box9) * 0)); width: calc(100% - (var(--gh-cn-features-box9) * 0)); max-width: calc(100% - (var(--gh-cn-features-box9) * 0)); } /* cn-features-box10: 02 損益分岐点から逆算する構造設計 業態別の売上構造を */ .cn-features-box10 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 8px; padding: 16px 24px 24px; width: calc(100% - (var(--gh-cn-features-box8) * 0)); --gh-cn-features-box10: 0px; --gv-cn-features-box10: 8px; max-width: calc(100% - (var(--gh-cn-features-box8) * 0)); } @media screen and (max-width: 540px) { .cn-features-box10 { padding: 12px 16px 25px; --gh-cn-features-box10: 0px; --gv-cn-features-box10: 8px; } } /* cn-features-txt7: 02 */ .cn-features-txt7 { background: #df5d00ff; border-radius: 2px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; padding: 5px 8px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt7 { font-size: 11px; } } /* cn-features-txt8: 損益分岐点から逆算する構造設計 */ .cn-features-txt8 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: auto; line-height: 1.35; padding: 0px; text-align: left; width: calc(100% - (var(--gh-cn-features-box10) * 0)); max-width: calc(100% - (var(--gh-cn-features-box10) * 0)); justify-content: flex-start; } /* cn-features-txt9: 業態別の売上構造を理解した設計。動線・回転率を最適化。 */ .cn-features-txt9 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt9 { font-size: 11px; } } /* cn-features-box11: 03 多重下請けを排除した 直接発注 職人との直接取引。 */ .cn-features-box11 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-radius: 3px; flex: 0 0 auto; flex-flow: column; gap: 0px; height: 350px; margin: 0px; overflow: hidden; padding: 0px; width: 285px; --gh-cn-features-box11: 0px; --gv-cn-features-box11: 0px; max-width: 100%; } html.js .cn-features-box11:not(.in) { opacity: 0; transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-features-box11: 0px; --gv-cn-features-box11: 0px; } .cn-features-box11.in-active { transition-delay: 400ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .cn-features-box11 { flex: 0 0 auto; width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); --gh-cn-features-box11: 0px; --gv-cn-features-box11: 0px; max-width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); } } @media screen and (max-width: 540px) { .cn-features-box11 { height: auto; width: calc(100% - (var(--gh-cn-features-box4) * 0)); --gh-cn-features-box11: 0px; --gv-cn-features-box11: 0px; max-width: calc(100% - (var(--gh-cn-features-box4) * 0)); } } /* cn-features-box12: */ .cn-features-box12 { place-content: flex-start; align-items: flex-start; border-radius: 0px; flex: 0 0 auto; flex-flow: column; gap: 40px; height: 180px; overflow: hidden; padding: 0px; width: calc(100% - (var(--gh-cn-features-box11) * 0)); --gh-cn-features-box12: 0px; --gv-cn-features-box12: 40px; max-width: calc(100% - (var(--gh-cn-features-box11) * 0)); } @media screen and (max-width: 760px) { .cn-features-box12 { flex: 0 0 auto; height: 180px; --gh-cn-features-box12: 0px; --gv-cn-features-box12: 40px; } } @media screen and (max-width: 540px) { .cn-features-box12 { flex: 0 0 auto; height: 190px; --gh-cn-features-box12: 0px; --gv-cn-features-box12: 40px; width: calc(100% - (var(--gh-cn-features-box11) * 0)); max-width: calc(100% - (var(--gh-cn-features-box11) * 0)); } } /* cn-features-pic3: */ .cn-features-pic3 { flex: 0 0 auto; height: calc(100% - (var(--gv-cn-features-box12) * 0)); width: calc(100% - (var(--gh-cn-features-box12) * 0)); max-width: calc(100% - (var(--gh-cn-features-box12) * 0)); } /* cn-features-box13: 03 多重下請けを排除した 直接発注 職人との直接取引。 */ .cn-features-box13 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 8px; padding: 16px 24px 24px; width: calc(100% - (var(--gh-cn-features-box11) * 0)); --gh-cn-features-box13: 0px; --gv-cn-features-box13: 8px; max-width: calc(100% - (var(--gh-cn-features-box11) * 0)); } @media screen and (max-width: 540px) { .cn-features-box13 { padding: 12px 16px 25px; --gh-cn-features-box13: 0px; --gv-cn-features-box13: 8px; } } /* cn-features-txt10: 03 */ .cn-features-txt10 { background: #df5d00ff; border-radius: 2px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; padding: 5px 8px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt10 { font-size: 11px; } } /* cn-features-txt11: 多重下請けを排除した 直接発注 */ .cn-features-txt11 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: auto; line-height: 1.35; text-align: left; width: calc(100% - (var(--gh-cn-features-box13) * 0)); max-width: calc(100% - (var(--gh-cn-features-box13) * 0)); justify-content: flex-start; } /* cn-features-txt12: 職人との直接取引。中間マージンを削減し、品質を担保。 */ .cn-features-txt12 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt12 { font-size: 11px; } } /* cn-features-box14: 04 意思決定を支援する 第三者視点（押し売りなし） 売 */ .cn-features-box14 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-radius: 3px; flex: 0 0 auto; flex-flow: column; gap: 0px; height: 350px; margin: 0px; overflow: hidden; padding: 0px; width: 285px; --gh-cn-features-box14: 0px; --gv-cn-features-box14: 0px; max-width: 100%; } html.js .cn-features-box14:not(.in) { opacity: 0; transition-delay: 600ms; transition-duration: 200ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-features-box14: 0px; --gv-cn-features-box14: 0px; } .cn-features-box14.in-active { transition-delay: 600ms; transition-duration: 200ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .cn-features-box14 { flex: 0 0 auto; width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); --gh-cn-features-box14: 0px; --gv-cn-features-box14: 0px; max-width: calc(50% - (var(--gh-cn-features-box4) * 0.5)); } } @media screen and (max-width: 540px) { .cn-features-box14 { height: auto; width: calc(100% - (var(--gh-cn-features-box4) * 0)); --gh-cn-features-box14: 0px; --gv-cn-features-box14: 0px; max-width: calc(100% - (var(--gh-cn-features-box4) * 0)); } } /* cn-features-box15: */ .cn-features-box15 { place-content: flex-start; align-items: flex-start; border-radius: 0px; flex: 0 0 auto; flex-flow: column; gap: 40px; height: 180px; overflow: hidden; padding: 0px; width: calc(100% - (var(--gh-cn-features-box14) * 0)); --gh-cn-features-box15: 0px; --gv-cn-features-box15: 40px; max-width: calc(100% - (var(--gh-cn-features-box14) * 0)); } @media screen and (max-width: 760px) { .cn-features-box15 { flex: 0 0 auto; height: 180px; --gh-cn-features-box15: 0px; --gv-cn-features-box15: 40px; } } @media screen and (max-width: 540px) { .cn-features-box15 { flex: 0 0 auto; height: 190px; --gh-cn-features-box15: 0px; --gv-cn-features-box15: 40px; width: calc(100% - (var(--gh-cn-features-box14) * 0)); max-width: calc(100% - (var(--gh-cn-features-box14) * 0)); } } /* cn-features-pic4: */ .cn-features-pic4 { flex: 0 0 auto; height: calc(100% - (var(--gv-cn-features-box15) * 0)); width: calc(100% - (var(--gh-cn-features-box15) * 0)); max-width: calc(100% - (var(--gh-cn-features-box15) * 0)); } /* cn-features-box16: 04 意思決定を支援する 第三者視点（押し売りなし） 売 */ .cn-features-box16 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 8px; padding: 16px 24px 24px; width: calc(100% - (var(--gh-cn-features-box14) * 0)); --gh-cn-features-box16: 0px; --gv-cn-features-box16: 8px; max-width: calc(100% - (var(--gh-cn-features-box14) * 0)); } @media screen and (max-width: 540px) { .cn-features-box16 { padding: 12px 16px 25px; --gh-cn-features-box16: 0px; --gv-cn-features-box16: 8px; } } /* cn-features-txt13: 04 */ .cn-features-txt13 { background: #df5d00ff; border-radius: 2px; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; padding: 5px 8px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt13 { font-size: 11px; } } /* cn-features-txt14: 意思決定を支援する 第三者視点（押し売りなし） */ .cn-features-txt14 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 18px; font-weight: 700; height: auto; line-height: 1.35; text-align: left; width: calc(100% - (var(--gh-cn-features-box16) * 0)); max-width: calc(100% - (var(--gh-cn-features-box16) * 0)); justify-content: flex-start; } /* cn-features-txt15: 売り手ではなく、診断者として。経営者の立場で判断。 */ .cn-features-txt15 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-features-txt15 { font-size: 11px; } } /* cn-commitment-sec1: Commitment 品質へのこだわり 第三者検査 */ .cn-commitment-sec1 { place-content: center flex-start; align-items: center; background: #f0f0f0ff; flex-flow: column; gap: 0px; height: auto; padding: 100px 150px; width: 100%; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-commitment-sec1 { height: auto; padding: 100px; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } @media screen and (max-width: 760px) { .cn-commitment-sec1 { padding: 100px 50px; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } @media screen and (max-width: 540px) { .cn-commitment-sec1 { padding: 100px 25px; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } /* cn-commitment-inner1: */ .cn-commitment-inner1 { padding: 100px 150px; width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); height: auto; flex-flow: column; place-content: center flex-start; align-items: center; gap: 0px; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; max-width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); } @media screen and (max-width: 1280px) { .cn-commitment-inner1 { padding: 100px; height: auto; flex-direction: column; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } @media screen and (max-width: 760px) { .cn-commitment-inner1 { padding: 100px 50px; flex-direction: column; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } @media screen and (max-width: 540px) { .cn-commitment-inner1 { padding: 100px 25px; flex-direction: column; --gh-cn-commitment-sec1: 0px; --gv-cn-commitment-sec1: 0px; } } /* cn-commitment-box1: Commitment */ .cn-commitment-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; height: auto; padding: 0px; --gh-cn-commitment-box1: 10px; --gv-cn-commitment-box1: 0px; max-width: 100%; } /* cn-commitment-box2: */ .cn-commitment-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-commitment-txt1: Commitment */ .cn-commitment-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-commitment-box3: */ .cn-commitment-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-commitment-txt2: 品質へのこだわり */ .cn-commitment-txt2 { color: #0b2540ff; flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: 60px; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 50px; text-align: center; width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); max-width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-commitment-txt2 { font-size: 40px; } } /* cn-commitment-box4: 第三者検査 施工中・完成時に独立した検査機関による品質チェ */ .cn-commitment-box4 { place-content: center flex-start; align-items: center; flex-flow: column; gap: 10px; padding: 0px; --gh-cn-commitment-box4: 0px; --gv-cn-commitment-box4: 10px; } html.js .cn-commitment-box4:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-commitment-box4: 0px; --gv-cn-commitment-box4: 10px; } .cn-commitment-box4.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } /* cn-commitment-box5: 第三者検査 施工中・完成時に独立した検査機関による品質チェ */ .cn-commitment-box5 { place-content: center; align-items: center; flex-flow: wrap; gap: 10px; padding: 0px; --gh-cn-commitment-box5: 10px; --gv-cn-commitment-box5: 10px; } /* cn-commitment-pic1: 第三者検査 施工中・完成時に独立した検査機関による品質チェ */ .cn-commitment-pic1 { place-content: center flex-start; align-items: center; background: rgb(250, 250, 250); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: wrap; gap: 16px; overflow: hidden; padding: 25px; width: 500px; --gh-cn-commitment-pic1: 16px; --gv-cn-commitment-pic1: 16px; max-width: 100%; } .cn-commitment-pic1::before { filter: grayscale(50%) brightness(50%); --gh-cn-commitment-pic1: 16px; --gv-cn-commitment-pic1: 16px; } @media screen and (max-width: 760px) { .cn-commitment-pic1 { width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); --gh-cn-commitment-pic1: 16px; --gv-cn-commitment-pic1: 16px; max-width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); } } @media screen and (max-width: 540px) { .cn-commitment-pic1 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 10px; padding: 20px; --gh-cn-commitment-pic1: 0px; --gv-cn-commitment-pic1: 10px; } } /* cn-commitment-box6: 第三者検査 施工中・完成時に独立した検査機関による品質チェ */ .cn-commitment-box6 { place-content: flex-start; align-items: flex-start; flex: 1 1 0%; flex-flow: column; gap: 8px; padding: 0px; width: auto; --gh-cn-commitment-box6: 0px; --gv-cn-commitment-box6: 8px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-commitment-box6 { gap: 4px; --gh-cn-commitment-box6: 0px; --gv-cn-commitment-box6: 4px; } } /* cn-commitment-txt3: 第三者検査 */ .cn-commitment-txt3 { color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: 30px; line-height: 1.5; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-commitment-txt4: 施工中・完成時に独立した検査機関による品質チェックを実施 */ .cn-commitment-txt4 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-commitment-txt4 { font-size: 11px; } } /* cn-commitment-pic2: 業者卸価格開示 すべての材料・工賃の明細を提示。不透明な項 */ .cn-commitment-pic2 { place-content: center flex-start; align-items: center; background: rgb(250, 250, 250); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: wrap; gap: 16px; overflow: hidden; padding: 25px; width: 500px; --gh-cn-commitment-pic2: 16px; --gv-cn-commitment-pic2: 16px; max-width: 100%; } .cn-commitment-pic2::before { filter: grayscale(50%) brightness(50%); --gh-cn-commitment-pic2: 16px; --gv-cn-commitment-pic2: 16px; } @media screen and (max-width: 760px) { .cn-commitment-pic2 { width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); --gh-cn-commitment-pic2: 16px; --gv-cn-commitment-pic2: 16px; max-width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); } } @media screen and (max-width: 540px) { .cn-commitment-pic2 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 10px; padding: 20px; --gh-cn-commitment-pic2: 0px; --gv-cn-commitment-pic2: 10px; } } /* cn-commitment-box7: 業者卸価格開示 すべての材料・工賃の明細を提示。不透明な項 */ .cn-commitment-box7 { place-content: flex-start; align-items: flex-start; flex: 1 1 0%; flex-flow: column; gap: 8px; padding: 0px; width: auto; --gh-cn-commitment-box7: 0px; --gv-cn-commitment-box7: 8px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-commitment-box7 { gap: 4px; --gh-cn-commitment-box7: 0px; --gv-cn-commitment-box7: 4px; } } /* cn-commitment-txt5: 業者卸価格開示 */ .cn-commitment-txt5 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: 30px; line-height: 1.5; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-commitment-txt6: すべての材料・工賃の明細を提示。不透明な項目はゼロ */ .cn-commitment-txt6 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-commitment-txt6 { font-size: 11px; } } /* cn-commitment-pic3: 行政対応 保健所・消防・建築確認など、必要な申請をすべて代 */ .cn-commitment-pic3 { place-content: center flex-start; align-items: center; background: rgb(250, 250, 250); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: wrap; gap: 16px; overflow: hidden; padding: 25px; width: 500px; --gh-cn-commitment-pic3: 16px; --gv-cn-commitment-pic3: 16px; max-width: 100%; } .cn-commitment-pic3::before { filter: grayscale(50%) brightness(50%); --gh-cn-commitment-pic3: 16px; --gv-cn-commitment-pic3: 16px; } @media screen and (max-width: 760px) { .cn-commitment-pic3 { width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); --gh-cn-commitment-pic3: 16px; --gv-cn-commitment-pic3: 16px; max-width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); } } @media screen and (max-width: 540px) { .cn-commitment-pic3 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 10px; padding: 20px; --gh-cn-commitment-pic3: 0px; --gv-cn-commitment-pic3: 10px; } } /* cn-commitment-box8: 行政対応 保健所・消防・建築確認など、必要な申請をすべて代 */ .cn-commitment-box8 { place-content: flex-start; align-items: flex-start; flex: 1 1 0%; flex-flow: column; gap: 8px; padding: 0px; width: auto; --gh-cn-commitment-box8: 0px; --gv-cn-commitment-box8: 8px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-commitment-box8 { gap: 4px; --gh-cn-commitment-box8: 0px; --gv-cn-commitment-box8: 4px; } } /* cn-commitment-txt7: 行政対応 */ .cn-commitment-txt7 { color: rgb(255, 255, 255); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: 30px; line-height: 1.5; text-align: left; width: 100px; max-width: 100%; justify-content: flex-start; } /* cn-commitment-txt8: 保健所・消防・建築確認など、必要な申請をすべて代行 */ .cn-commitment-txt8 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-commitment-txt8 { font-size: 11px; } } /* cn-commitment-pic4: アフター対応 開店後の不具合にも迅速対応。1年間の保証付き */ .cn-commitment-pic4 { place-content: center flex-start; align-items: center; background: rgb(250, 250, 250); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: wrap; gap: 16px; overflow: hidden; padding: 25px; width: 500px; --gh-cn-commitment-pic4: 16px; --gv-cn-commitment-pic4: 16px; max-width: 100%; } .cn-commitment-pic4::before { filter: grayscale(50%) brightness(50%); --gh-cn-commitment-pic4: 16px; --gv-cn-commitment-pic4: 16px; } @media screen and (max-width: 760px) { .cn-commitment-pic4 { width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); --gh-cn-commitment-pic4: 16px; --gv-cn-commitment-pic4: 16px; max-width: calc(100% - (var(--gh-cn-commitment-box5) * 0)); } } @media screen and (max-width: 540px) { .cn-commitment-pic4 { place-content: flex-start; align-items: flex-start; flex-flow: column; gap: 10px; padding: 20px; --gh-cn-commitment-pic4: 0px; --gv-cn-commitment-pic4: 10px; } } /* cn-commitment-box9: アフター対応 開店後の不具合にも迅速対応。1年間の保証付き */ .cn-commitment-box9 { place-content: flex-start; align-items: flex-start; flex: 1 1 0%; flex-flow: column; gap: 8px; padding: 0px; width: auto; --gh-cn-commitment-box9: 0px; --gv-cn-commitment-box9: 8px; max-width: 100%; } @media screen and (max-width: 540px) { .cn-commitment-box9 { gap: 4px; --gh-cn-commitment-box9: 0px; --gv-cn-commitment-box9: 4px; } } /* cn-commitment-txt9: アフター対応 */ .cn-commitment-txt9 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-weight: 700; height: 30px; line-height: 1.5; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-commitment-txt10: 開店後の不具合にも迅速対応。1年間の保証付き */ .cn-commitment-txt10 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-commitment-txt10 { font-size: 11px; } } /* cn-commitment-txt11: COMMITMENT */ .cn-commitment-txt11 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 49px 0px auto; color: rgba(0, 0, 0, 0.05); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); z-index: 0; max-width: calc(100% - (var(--gh-cn-commitment-sec1) * 0)); justify-content: center; } @media screen and (max-width: 1280px) { .cn-commitment-txt11 { left: 0px; right: 0px; top: 47px; } } @media screen and (max-width: 760px) { .cn-commitment-txt11 { font-size: 80px; left: 0px; right: 0px; top: 53px; } } @media screen and (max-width: 540px) { .cn-commitment-txt11 { font-size: 50px; left: 0px; right: 0px; top: 70px; width: auto; max-width: 100%; } } /* cn-service-sec1: Service サービス内容 サービス01 見積診 */ .cn-service-sec1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-sec1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-service-sec1 { padding: 100px 25px; } } /* cn-service-inner1: */ .cn-service-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-service-inner1 { padding: 100px 25px; flex-direction: column; } } /* cn-service-box1: Service */ .cn-service-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; height: auto; padding: 0px; --gh-cn-service-box1: 10px; --gv-cn-service-box1: 0px; max-width: 100%; } /* cn-service-box2: */ .cn-service-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-service-txt1: Service */ .cn-service-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: #0b2540ff; font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-service-box3: */ .cn-service-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-service-txt2: サービス内容 */ .cn-service-txt2 { color: #0b2540ff; flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: 60px; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 50px; text-align: center; width: 100%; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt2 { font-size: 40px; } } /* cn-service-box4: サービス01 見積診断 サービス02 構造設計 */ .cn-service-box4 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 0px 10px; padding: 0px; width: 100%; --gh-cn-service-box4: 10px; --gv-cn-service-box4: 0px; max-width: 100%; } html.js .cn-service-box4:not(.in) { opacity: 0; transition-duration: 300ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-cn-service-box4: 10px; --gv-cn-service-box4: 0px; } .cn-service-box4.in-active { transition-duration: 300ms; transition-timing-function: ease-in-out; } /* cn-service-box5: サービス01 見積診断 サービス02 構造設計 */ .cn-service-box5 { place-content: center; align-items: center; flex-flow: wrap; gap: 10px; padding: 0px; --gh-cn-service-box5: 10px; --gv-cn-service-box5: 10px; } @media screen and (max-width: 1280px) { .cn-service-box5 { gap: 15px 10px; --gh-cn-service-box5: 10px; --gv-cn-service-box5: 15px; } } /* cn-service-box6: サービス01 見積診断 */ .cn-service-box6 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box6: 0px; --gv-cn-service-box6: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box6 { flex: 0 0 auto; width: 190px; --gh-cn-service-box6: 0px; --gv-cn-service-box6: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box6 { flex: 0 0 auto; width: 150px; --gh-cn-service-box6: 0px; --gv-cn-service-box6: 0px; max-width: 100%; } } /* cn-service-txt3: サービス01 */ .cn-service-txt3 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box6) * 0)); max-width: calc(100% - (var(--gh-cn-service-box6) * 0)); justify-content: center; } /* cn-service-box7: 見積診断 */ .cn-service-box7 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box6) * 0)); --gh-cn-service-box7: 0px; --gv-cn-service-box7: 8px; max-width: calc(100% - (var(--gh-cn-service-box6) * 0)); } /* cn-service-txt4: 見積診断 */ .cn-service-txt4 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box7) * 0)); max-width: calc(100% - (var(--gh-cn-service-box7) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt4 { font-size: 14px; } } /* cn-service-box8: サービス02 構造設計 */ .cn-service-box8 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box8: 0px; --gv-cn-service-box8: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box8 { flex: 0 0 auto; width: 190px; --gh-cn-service-box8: 0px; --gv-cn-service-box8: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box8 { flex: 0 0 auto; width: 150px; --gh-cn-service-box8: 0px; --gv-cn-service-box8: 0px; max-width: 100%; } } /* cn-service-txt5: サービス02 */ .cn-service-txt5 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box8) * 0)); max-width: calc(100% - (var(--gh-cn-service-box8) * 0)); justify-content: center; } /* cn-service-box9: 構造設計 */ .cn-service-box9 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box8) * 0)); --gh-cn-service-box9: 0px; --gv-cn-service-box9: 8px; max-width: calc(100% - (var(--gh-cn-service-box8) * 0)); } /* cn-service-txt6: 構造設計 */ .cn-service-txt6 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box9) * 0)); max-width: calc(100% - (var(--gh-cn-service-box9) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt6 { font-size: 14px; } } /* cn-service-box10: サービス03 原価算出 */ .cn-service-box10 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box10: 0px; --gv-cn-service-box10: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box10 { flex: 0 0 auto; width: 190px; --gh-cn-service-box10: 0px; --gv-cn-service-box10: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box10 { flex: 0 0 auto; width: 150px; --gh-cn-service-box10: 0px; --gv-cn-service-box10: 0px; max-width: 100%; } } /* cn-service-txt7: サービス03 */ .cn-service-txt7 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box10) * 0)); max-width: calc(100% - (var(--gh-cn-service-box10) * 0)); justify-content: center; } /* cn-service-box11: 原価算出 */ .cn-service-box11 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box10) * 0)); --gh-cn-service-box11: 0px; --gv-cn-service-box11: 8px; max-width: calc(100% - (var(--gh-cn-service-box10) * 0)); } /* cn-service-txt8: 原価算出 */ .cn-service-txt8 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box11) * 0)); max-width: calc(100% - (var(--gh-cn-service-box11) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt8 { font-size: 14px; } } /* cn-service-box12: サービス04 業者選定 */ .cn-service-box12 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box12: 0px; --gv-cn-service-box12: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box12 { flex: 0 0 auto; width: 190px; --gh-cn-service-box12: 0px; --gv-cn-service-box12: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box12 { flex: 0 0 auto; width: 150px; --gh-cn-service-box12: 0px; --gv-cn-service-box12: 0px; max-width: 100%; } } /* cn-service-txt9: サービス04 */ .cn-service-txt9 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box12) * 0)); max-width: calc(100% - (var(--gh-cn-service-box12) * 0)); justify-content: center; } /* cn-service-box13: 業者選定 */ .cn-service-box13 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box12) * 0)); --gh-cn-service-box13: 0px; --gv-cn-service-box13: 8px; max-width: calc(100% - (var(--gh-cn-service-box12) * 0)); } /* cn-service-txt10: 業者選定 */ .cn-service-txt10 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box13) * 0)); max-width: calc(100% - (var(--gh-cn-service-box13) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt10 { font-size: 14px; } } /* cn-service-box14: サービス05 施工管理 */ .cn-service-box14 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box14: 0px; --gv-cn-service-box14: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box14 { flex: 0 0 auto; width: 190px; --gh-cn-service-box14: 0px; --gv-cn-service-box14: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box14 { flex: 0 0 auto; width: 150px; --gh-cn-service-box14: 0px; --gv-cn-service-box14: 0px; max-width: 100%; } } /* cn-service-txt11: サービス05 */ .cn-service-txt11 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box14) * 0)); max-width: calc(100% - (var(--gh-cn-service-box14) * 0)); justify-content: center; } /* cn-service-box15: 施工管理 */ .cn-service-box15 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box14) * 0)); --gh-cn-service-box15: 0px; --gv-cn-service-box15: 8px; max-width: calc(100% - (var(--gh-cn-service-box14) * 0)); } /* cn-service-txt12: 施工管理 */ .cn-service-txt12 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box15) * 0)); max-width: calc(100% - (var(--gh-cn-service-box15) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt12 { font-size: 14px; } } /* cn-service-box16: サービス06 アフター対応 */ .cn-service-box16 { place-content: flex-start; align-items: flex-start; background: rgb(250, 250, 250); border-bottom: 0px solid #0b2540ff; border-left: 0px solid #0b2540ff; border-radius: 5px; border-right: 0px solid #0b2540ff; border-top: 0px solid #0b2540ff; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: 180px; --gh-cn-service-box16: 0px; --gv-cn-service-box16: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-service-box16 { flex: 0 0 auto; width: 190px; --gh-cn-service-box16: 0px; --gv-cn-service-box16: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .cn-service-box16 { flex: 0 0 auto; width: 150px; --gh-cn-service-box16: 0px; --gv-cn-service-box16: 0px; max-width: 100%; } } /* cn-service-txt13: サービス06 */ .cn-service-txt13 { background: #0b2540ff; color: rgb(250, 250, 250); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 700; height: auto; line-height: 1.5; padding: 10px 16px; text-align: center; width: calc(100% - (var(--gh-cn-service-box16) * 0)); max-width: calc(100% - (var(--gh-cn-service-box16) * 0)); justify-content: center; } /* cn-service-box17: アフター対応 */ .cn-service-box17 { place-content: flex-start; align-items: flex-start; background: rgb(244, 245, 246); flex: 0 0 auto; flex-flow: column; gap: 8px; height: auto; padding: 25px 15px; width: calc(100% - (var(--gh-cn-service-box16) * 0)); --gh-cn-service-box17: 0px; --gv-cn-service-box17: 8px; max-width: calc(100% - (var(--gh-cn-service-box16) * 0)); } /* cn-service-txt14: アフター対応 */ .cn-service-txt14 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 600; height: auto; letter-spacing: normal; line-height: 1.75; text-align: center; width: calc(100% - (var(--gh-cn-service-box17) * 0)); max-width: calc(100% - (var(--gh-cn-service-box17) * 0)); justify-content: center; } @media screen and (max-width: 540px) { .cn-service-txt14 { font-size: 14px; } } /* cn-service-txt15: SERVICE */ .cn-service-txt15 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 45px 0px auto; color: rgba(0, 0, 0, 0.05); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 0; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-service-txt15 { left: 0px; right: 0px; top: 42px; } } @media screen and (max-width: 760px) { .cn-service-txt15 { left: 0px; right: 0px; top: 47px; } } @media screen and (max-width: 540px) { .cn-service-txt15 { inset: 75px 0px auto; font-size: 60px; } } /* cn-contact-pic1: Contact 無料診断のお申し込み 無料診断。営業 */ .cn-contact-pic1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; height: auto; padding: 100px 150px; width: 100%; max-width: 100%; } .cn-contact-pic1::before { filter: brightness(50%); } @media screen and (max-width: 760px) { .cn-contact-pic1 { padding: 100px 50px; } } @media screen and (max-width: 540px) { .cn-contact-pic1 { padding: 100px 15px; } } /* cn-contact-inner1: */ .cn-contact-inner1 { padding: 100px 150px; width: 100%; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } .cn-contact-inner1::before { flex-direction: column; } @media screen and (max-width: 760px) { .cn-contact-inner1 { padding: 100px 50px; flex-direction: column; } } @media screen and (max-width: 540px) { .cn-contact-inner1 { padding: 100px 15px; flex-direction: column; } } /* cn-contact-box1: Contact */ .cn-contact-box1 { place-content: center; align-items: center; flex-flow: row; gap: 0px 10px; padding: 0px; --gh-cn-contact-box1: 10px; --gv-cn-contact-box1: 0px; } /* cn-contact-box2: */ .cn-contact-box2 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-contact-txt1: Contact */ .cn-contact-txt1 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-contact-box3: */ .cn-contact-box3 { background: #df5d00ff; flex: 0 0 auto; height: 2px; margin: 0px; width: 10px; max-width: 100%; } /* cn-contact-txt2: 無料診断のお申し込み */ .cn-contact-txt2 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 50px; font-style: italic; font-weight: 800; height: auto; letter-spacing: -0.05em; line-height: 1.2; margin: 0px 0px 10px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .cn-contact-txt2 { font-size: 40px; } } /* cn-contact-txt3: 無料診断。営業は一切ありません。 第三者の視点で、見積の妥当 */ .cn-contact-txt3 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 700; height: auto; line-height: 1.4; margin: 0px 0px 70px; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* cn-contact-box4: 必須 お名前 必須 メールアドレス 任意 電 */ .cn-contact-box4 { place-content: center flex-start; align-items: center; background: transparent; flex: 0 0 auto; flex-flow: column; gap: 64px; height: auto; margin: 0px 0px 30px; padding: 0px; width: 100%; --gh-cn-contact-box4: 0px; --gv-cn-contact-box4: 64px; max-width: 100%; } @media screen and (max-width: 1280px) { .cn-contact-box4 { flex: 0 0 auto; width: 100%; --gh-cn-contact-box4: 0px; --gv-cn-contact-box4: 64px; } } @media screen and (max-width: 760px) { .cn-contact-box4 { flex-flow: column; --gh-cn-contact-box4: 0px; --gv-cn-contact-box4: 64px; } } @media screen and (max-width: 540px) { .cn-contact-box4 { gap: 32px; --gh-cn-contact-box4: 0px; --gv-cn-contact-box4: 32px; } } /* cn-contact-form1: 必須 お名前 必須 メールアドレス 任意 電 */ .cn-contact-form1 { place-content: flex-start center; align-items: flex-start; background: rgb(245, 245, 245); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px 0px; flex: 0 0 auto; gap: 32px; margin: 0px; opacity: 1; padding: 32px; width: 750px; --gh-cn-contact-form1: 0px; --gv-cn-contact-form1: 32px; max-width: 100%; } html.js .cn-contact-form1:not(.in) { opacity: 0; transform: translate(0px, 20px); transition-delay: 0ms; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); --gh-cn-contact-form1: 0px; --gv-cn-contact-form1: 32px; } .cn-contact-form1.in-active { transition-delay: 0ms; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } @media screen and (max-width: 540px) { .cn-contact-form1 { gap: 24px; padding: 32px 20px; --gh-cn-contact-form1: 0px; --gv-cn-contact-form1: 24px; } } /* cn-contact-label1: 必須 お名前 */ .cn-contact-label1 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label1: 0px; --gv-cn-contact-label1: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label1 { gap: 8px; --gh-cn-contact-label1: 0px; --gv-cn-contact-label1: 8px; } } /* cn-contact-box5: 必須 お名前 */ .cn-contact-box5 { place-content: center flex-start; align-items: center; flex-flow: row-reverse; gap: 8px; margin: 0px; padding: 0px; --gh-cn-contact-box5: 8px; --gv-cn-contact-box5: 0px; max-width: 100%; } /* cn-contact-box6: 必須 */ .cn-contact-box6 { place-content: flex-start; align-items: flex-start; background: #df5d00ff; border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box6: 0px; --gv-cn-contact-box6: 16px; } @media screen and (max-width: 760px) { .cn-contact-box6 { flex-direction: column; --gh-cn-contact-box6: 0px; --gv-cn-contact-box6: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box6 { gap: 16px; --gh-cn-contact-box6: 0px; --gv-cn-contact-box6: 16px; } } /* cn-contact-txt4: 必須 */ .cn-contact-txt4 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt4 { font-size: 11px; } } /* cn-contact-txt5: お名前 */ .cn-contact-txt5 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt5 { font-size: 14px; } } /* cn-contact-input1: */ .cn-contact-input1 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 54px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: calc(100% - (var(--gh-cn-contact-label1) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label1) * 0)); } .cn-contact-input1:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-input1::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-label2: 必須 メールアドレス */ .cn-contact-label2 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label2: 0px; --gv-cn-contact-label2: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label2 { gap: 8px; --gh-cn-contact-label2: 0px; --gv-cn-contact-label2: 8px; } } /* cn-contact-box7: 必須 メールアドレス */ .cn-contact-box7 { place-content: center flex-start; align-items: center; flex-flow: row-reverse; gap: 8px; margin: 0px; padding: 0px; --gh-cn-contact-box7: 8px; --gv-cn-contact-box7: 0px; max-width: 100%; } /* cn-contact-box8: 必須 */ .cn-contact-box8 { place-content: flex-start; align-items: flex-start; background: #df5d00ff; border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box8: 0px; --gv-cn-contact-box8: 16px; } @media screen and (max-width: 760px) { .cn-contact-box8 { flex-direction: column; --gh-cn-contact-box8: 0px; --gv-cn-contact-box8: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box8 { gap: 16px; --gh-cn-contact-box8: 0px; --gv-cn-contact-box8: 16px; } } /* cn-contact-txt6: 必須 */ .cn-contact-txt6 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt6 { font-size: 11px; } } /* cn-contact-txt7: メールアドレス */ .cn-contact-txt7 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt7 { font-size: 14px; } } /* cn-contact-input2: */ .cn-contact-input2 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 54px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: calc(100% - (var(--gh-cn-contact-label2) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label2) * 0)); } .cn-contact-input2:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-input2::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-label3: 任意 電話番号 */ .cn-contact-label3 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label3: 0px; --gv-cn-contact-label3: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label3 { gap: 8px; --gh-cn-contact-label3: 0px; --gv-cn-contact-label3: 8px; } } /* cn-contact-box9: 任意 電話番号 */ .cn-contact-box9 { place-content: center flex-start; align-items: center; flex-flow: row-reverse; gap: 8px; margin: 0px; padding: 0px; --gh-cn-contact-box9: 8px; --gv-cn-contact-box9: 0px; max-width: 100%; } /* cn-contact-box10: 任意 */ .cn-contact-box10 { place-content: flex-start; align-items: flex-start; background: rgb(230, 230, 230); border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box10: 0px; --gv-cn-contact-box10: 16px; } @media screen and (max-width: 760px) { .cn-contact-box10 { flex-direction: column; --gh-cn-contact-box10: 0px; --gv-cn-contact-box10: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box10 { gap: 16px; --gh-cn-contact-box10: 0px; --gv-cn-contact-box10: 16px; } } /* cn-contact-txt8: 任意 */ .cn-contact-txt8 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt8 { font-size: 11px; } } /* cn-contact-txt9: 電話番号 */ .cn-contact-txt9 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt9 { font-size: 14px; } } /* cn-contact-input3: */ .cn-contact-input3 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 54px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: calc(100% - (var(--gh-cn-contact-label3) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label3) * 0)); } .cn-contact-input3:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-input3::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-label4: 必須 業態 */ .cn-contact-label4 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label4: 0px; --gv-cn-contact-label4: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label4 { gap: 8px; --gh-cn-contact-label4: 0px; --gv-cn-contact-label4: 8px; } } /* cn-contact-box11: 必須 業態 */ .cn-contact-box11 { place-content: center flex-start; align-items: center; flex-flow: row-reverse; gap: 8px; margin: 0px; padding: 0px; --gh-cn-contact-box11: 8px; --gv-cn-contact-box11: 0px; max-width: 100%; } /* cn-contact-box12: 必須 */ .cn-contact-box12 { place-content: flex-start; align-items: flex-start; background: #df5d00ff; border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box12: 0px; --gv-cn-contact-box12: 16px; } @media screen and (max-width: 760px) { .cn-contact-box12 { flex-direction: column; --gh-cn-contact-box12: 0px; --gv-cn-contact-box12: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box12 { gap: 16px; --gh-cn-contact-box12: 0px; --gv-cn-contact-box12: 16px; } } /* cn-contact-txt10: 必須 */ .cn-contact-txt10 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt10 { font-size: 11px; } } /* cn-contact-txt11: 業態 */ .cn-contact-txt11 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt11 { font-size: 14px; } } /* cn-contact-input4: */ .cn-contact-input4 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 54px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: calc(100% - (var(--gh-cn-contact-label4) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label4) * 0)); } .cn-contact-input4:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-input4::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-label5: 必須 出展予定エリア */ .cn-contact-label5 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label5: 0px; --gv-cn-contact-label5: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label5 { gap: 8px; --gh-cn-contact-label5: 0px; --gv-cn-contact-label5: 8px; } } /* cn-contact-box13: 必須 出展予定エリア */ .cn-contact-box13 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: row-reverse; gap: 8px; height: auto; margin: 0px; padding: 0px; width: 157px; --gh-cn-contact-box13: 8px; --gv-cn-contact-box13: 0px; max-width: 100%; } /* cn-contact-box14: 必須 */ .cn-contact-box14 { place-content: flex-start; align-items: flex-start; background: #df5d00ff; border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box14: 0px; --gv-cn-contact-box14: 16px; } @media screen and (max-width: 760px) { .cn-contact-box14 { flex-direction: column; --gh-cn-contact-box14: 0px; --gv-cn-contact-box14: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box14 { gap: 16px; --gh-cn-contact-box14: 0px; --gv-cn-contact-box14: 16px; } } /* cn-contact-txt12: 必須 */ .cn-contact-txt12 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt12 { font-size: 11px; } } /* cn-contact-txt13: 出展予定エリア */ .cn-contact-txt13 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt13 { font-size: 14px; } } /* cn-contact-input5: */ .cn-contact-input5 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 54px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: calc(100% - (var(--gh-cn-contact-label5) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label5) * 0)); } .cn-contact-input5:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-input5::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-label6: 必須 お問い合わせ内容 */ .cn-contact-label6 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; gap: 12px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); --gh-cn-contact-label6: 0px; --gv-cn-contact-label6: 12px; max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } @media screen and (max-width: 540px) { .cn-contact-label6 { gap: 8px; --gh-cn-contact-label6: 0px; --gv-cn-contact-label6: 8px; } } /* cn-contact-box15: 必須 お問い合わせ内容 */ .cn-contact-box15 { place-content: center flex-start; align-items: center; flex-flow: row-reverse; gap: 8px; margin: 0px; padding: 0px; --gh-cn-contact-box15: 8px; --gv-cn-contact-box15: 0px; max-width: 100%; } /* cn-contact-box16: 必須 */ .cn-contact-box16 { place-content: flex-start; align-items: flex-start; background: #df5d00ff; border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 2px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-cn-contact-box16: 0px; --gv-cn-contact-box16: 16px; } @media screen and (max-width: 760px) { .cn-contact-box16 { flex-direction: column; --gh-cn-contact-box16: 0px; --gv-cn-contact-box16: 16px; } } @media screen and (max-width: 540px) { .cn-contact-box16 { gap: 16px; --gh-cn-contact-box16: 0px; --gv-cn-contact-box16: 16px; } } /* cn-contact-txt14: 必須 */ .cn-contact-txt14 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 12px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt14 { font-size: 11px; } } /* cn-contact-txt15: お問い合わせ内容 */ .cn-contact-txt15 { border-radius: 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; letter-spacing: 0em; line-height: 1.75; margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt15 { font-size: 14px; } } /* cn-contact-textarea1: */ .cn-contact-textarea1 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 16px; font-weight: 400; height: 200px; justify-content: center; letter-spacing: 0em; line-height: 1.75; opacity: 1; overflow: hidden auto; padding: 16px; text-align: left; text-shadow: none; width: calc(100% - (var(--gh-cn-contact-label6) * 0)); max-width: calc(100% - (var(--gh-cn-contact-label6) * 0)); } .cn-contact-textarea1:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .cn-contact-textarea1::-webkit-input-placeholder { color: rgb(204, 204, 204); } /* cn-contact-btn1: 送信する */ .cn-contact-btn1 { background: rgb(34, 34, 34); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px; color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 400; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 12px; text-align: left; width: calc(100% - (var(--gh-cn-contact-form1) * 0)); max-width: calc(100% - (var(--gh-cn-contact-form1) * 0)); } .cn-contact-btn1:hover { background: #df5d00ff; transform: translate(0px, 0px); } /* cn-contact-txt16: 送信する */ .cn-contact-txt16 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 700; height: auto; line-height: 1.75; padding: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .cn-contact-txt16 { font-size: 14px; } } /* cn-contact-box17: 営業電話は一切ありません 診断は完全無料です email */ .cn-contact-box17 { place-content: center; align-items: center; flex-flow: wrap; gap: 10px 30px; height: auto; padding: 0px; --gh-cn-contact-box17: 30px; --gv-cn-contact-box17: 10px; max-width: 100%; } @media screen and (max-width: 760px) { .cn-contact-box17 { flex-flow: wrap; gap: 10px 30px; --gh-cn-contact-box17: 30px; --gv-cn-contact-box17: 10px; } } /* cn-contact-box18: 営業電話は一切ありません */ .cn-contact-box18 { place-content: center; align-items: center; flex-flow: row; gap: 0px 5px; padding: 0px; --gh-cn-contact-box18: 5px; --gv-cn-contact-box18: 0px; } /* cn-contact-icon1: */ .cn-contact-icon1 { color: #df5d00ff; font-size: 22px; } /* cn-contact-txt17: 営業電話は一切ありません */ .cn-contact-txt17 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-contact-box19: 診断は完全無料です */ .cn-contact-box19 { place-content: center; align-items: center; flex-flow: row; gap: 0px 5px; padding: 0px; --gh-cn-contact-box19: 5px; --gv-cn-contact-box19: 0px; } /* cn-contact-icon2: */ .cn-contact-icon2 { color: #df5d00ff; font-size: 22px; } /* cn-contact-txt18: 診断は完全無料です */ .cn-contact-txt18 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-contact-box20: email 3営業日以内に結果をお送りします */ .cn-contact-box20 { place-content: center; align-items: center; flex-flow: row; gap: 0px 5px; padding: 0px; --gh-cn-contact-box20: 5px; --gv-cn-contact-box20: 0px; } /* cn-contact-icon3: email */ .cn-contact-icon3 { color: #df5d00ff; font-size: 22px; } /* cn-contact-txt19: 3営業日以内に結果をお送りします */ .cn-contact-txt19 { color: rgb(255, 255, 255); font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 600; height: auto; line-height: 1.4; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* cn-contact-txt20: CONTACT */ .cn-contact-txt20 { border-bottom: 0px solid #df5d00ff; border-left: 0px solid #df5d00ff; border-right: 0px solid #df5d00ff; border-top: 0px solid #df5d00ff; inset: 50px 0px auto; color: rgba(255, 255, 255, 0.1); flex: 0 0 auto; font-family: Poppins, sans-serif; font-size: 100px; font-weight: 700; height: auto; line-height: 1.4; padding: 0px; position: absolute; text-align: center; width: 100%; z-index: 1; max-width: 100%; justify-content: center; } @media screen and (max-width: 1280px) { .cn-contact-txt20 { inset: 47px 0px auto; } } @media screen and (max-width: 760px) { .cn-contact-txt20 { left: 0px; right: 0px; top: 56px; } } @media screen and (max-width: 540px) { .cn-contact-txt20 { font-size: 60px; left: 0px; right: 0px; top: 68px; } }