/* ========================================================= top.css トップページ（/）専用 クラス名の意味: hero-=最初の大きな画像 / aboutus-=私たちについて / news-=お知らせ / service-=事業内容・自社サービス works-=実績紹介 / company-=会社概要 / contact-=お問い合わせ 各ルールの上のコメントは、その部品に入っている文字（どの部品かの目印）。 ========================================================= */ /* top-root: Ⓒ2025 OTAKKY AI About us New */ .top-root { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); border-radius: 0px; flex-flow: column; height: 100%; margin: 0px; opacity: 1; padding: 0px; width: 100%; max-width: 100%; } /* hero-pic1: trending_flat オタクの執念を、社会実装せよ。 */ .hero-pic1 { place-content: center flex-end; align-items: center; inset: auto; flex-flow: column; gap: 548px; height: 750px; margin: 0px; padding: 5px 30px 40px; position: relative; translate: 0px; width: 100%; z-index: -1; --gh-hero-pic1: 0px; --gv-hero-pic1: 548px; max-width: 100%; } html.js .hero-pic1:not(.in) { filter: blur(100px); opacity: 0; transition-duration: 2000ms; transition-timing-function: ease-in-out; --gh-hero-pic1: 0px; --gv-hero-pic1: 548px; } .hero-pic1.in-active { transition-duration: 2000ms; transition-timing-function: ease-in-out; } .hero-pic1::before { background-position: center center; background-repeat: no-repeat; background-size: cover; --gh-hero-pic1: 0px; --gv-hero-pic1: 548px; } @media screen and (max-width: 760px) { .hero-pic1 { padding: 5px 35px 40px; --gh-hero-pic1: 0px; --gv-hero-pic1: 548px; } } @media screen and (max-width: 540px) { .hero-pic1 { padding: 5px 15px 40px; --gh-hero-pic1: 0px; --gv-hero-pic1: 548px; } } /* hero-icon1: trending_flat */ .hero-icon1 { bottom: 92px; color: rgb(51, 51, 51); display: flex; font-size: 24px; position: absolute; right: 116px; rotate: 90deg; scale: 1.2; z-index: 1; } @media screen and (max-width: 1280px) { .hero-icon1 { display: flex; } } @media screen and (max-width: 760px) { .hero-icon1 { display: none; } } @media screen and (max-width: 540px) { .hero-icon1 { display: none; } } @media screen and (max-width: 360px) { .hero-icon1 { display: none; } } /* hero-pic2: */ .hero-pic2 { place-content: flex-end flex-start; align-items: flex-end; bottom: 35px; display: flex; flex-flow: column; height: 139px; position: absolute; right: 59px; width: 139px; z-index: 1; max-width: 100%; } @media screen and (max-width: 1280px) { .hero-pic2 { display: flex; } } @media screen and (max-width: 760px) { .hero-pic2 { display: none; } } @media screen and (max-width: 540px) { .hero-pic2 { display: none; } } @media screen and (max-width: 360px) { .hero-pic2 { display: none; } } /* hero-box1: */ .hero-box1 { background: rgb(238, 238, 238); border-radius: 0px; height: 0px; margin: 0px; opacity: 1; padding: 0px; width: 0px; max-width: 100%; } /* hero-box2: オタクの執念を、社会実装せよ。 表面的なデータでは辿り着け */ .hero-box2 { place-content: center flex-start; align-items: center; background: transparent; flex: 0 0 auto; flex-flow: row; gap: 40px; height: auto; margin: 0px; padding: 0px; width: 1280px; --gh-hero-box2: 40px; --gv-hero-box2: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .hero-box2 { gap: 32px; --gh-hero-box2: 32px; --gv-hero-box2: 0px; } } @media screen and (max-width: 760px) { .hero-box2 { flex-flow: column-reverse; gap: 50px; --gh-hero-box2: 0px; --gv-hero-box2: 50px; } } @media screen and (max-width: 540px) { .hero-box2 { gap: 40px; --gh-hero-box2: 40px; --gv-hero-box2: 0px; } } /* hero-box3: オタクの執念を、社会実装せよ。 表面的なデータでは辿り着け */ .hero-box3 { place-content: flex-start; align-items: flex-start; background: transparent; flex: 0 0 auto; gap: 15px; height: auto; padding: 0px; width: calc(50% - (var(--gh-hero-box2) * 0.5)); --gh-hero-box3: 0px; --gv-hero-box3: 15px; max-width: calc(50% - (var(--gh-hero-box2) * 0.5)); } html.js .hero-box3:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); translate: 0px 20px; --gh-hero-box3: 0px; --gv-hero-box3: 15px; } .hero-box3.in-active { transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } @media screen and (max-width: 760px) { .hero-box3 { flex: 0 0 auto; width: calc(100% - (var(--gh-hero-box2) * 0)); --gh-hero-box3: 0px; --gv-hero-box3: 15px; max-width: calc(100% - (var(--gh-hero-box2) * 0)); } } @media screen and (max-width: 540px) { .hero-box3 { gap: 15px; --gh-hero-box3: 0px; --gv-hero-box3: 15px; } } /* hero-box4: オタクの執念を、社会実装せよ。 */ .hero-box4 { place-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: 8px; padding: 0px; width: calc(100% - (var(--gh-hero-box3) * 0)); --gh-hero-box4: 0px; --gv-hero-box4: 8px; max-width: calc(100% - (var(--gh-hero-box3) * 0)); } /* hero-txt1: オタクの執念を、社会実装せよ。 */ .hero-txt1 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 30px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; text-align: left; width: calc(100% - (var(--gh-hero-box4) * 0)); max-width: calc(100% - (var(--gh-hero-box4) * 0)); justify-content: flex-start; } @media screen and (max-width: 760px) { .hero-txt1 { font-size: 30px; } } @media screen and (max-width: 540px) { .hero-txt1 { font-size: 25px; } } /* hero-txt2: 表面的なデータでは辿り着けない「本質」を、AIとともに掘り尽 */ .hero-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 10px; font-style: normal; font-weight: 300; height: auto; letter-spacing: normal; line-height: 1.75; margin: 0px; text-align: left; width: calc(100% - (var(--gh-hero-box3) * 0)); max-width: calc(100% - (var(--gh-hero-box3) * 0)); justify-content: flex-start; } @media screen and (max-width: 540px) { .hero-txt2 { font-size: 13px; padding: 0px 90px 0px 0px; } } /* aboutus-sec1: About us 私たちについて 「 探究心に、進化の知 */ .aboutus-sec1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; padding: 150px 40px; width: 100%; z-index: -3; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .aboutus-sec1 { padding: 150px 40px; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; } } @media screen and (max-width: 760px) { .aboutus-sec1 { height: auto; margin: 0px; padding: 160px 40px; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; width: 100%; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-sec1 { height: auto; padding: 90px 40px 100px; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; } } .aboutus-inner { padding: 150px 40px; width: calc(100% - (var(--gh-aboutus-sec1) * 0)); height: auto; flex-flow: column; place-content: center flex-start; align-items: center; gap: 0px; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; max-width: calc(100% - (var(--gh-aboutus-sec1) * 0)); } @media screen and (max-width: 1280px) { .aboutus-inner { padding: 150px 40px; flex-direction: column; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; } } @media screen and (max-width: 760px) { .aboutus-inner { padding: 160px 40px; height: auto; flex-direction: column; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; } } @media screen and (max-width: 540px) { .aboutus-inner { padding: 90px 40px 100px; height: auto; flex-direction: column; --gh-aboutus-sec1: 0px; --gv-aboutus-sec1: 0px; } } /* aboutus-box1: About us 私たちについて 「 探究心に、進化の知 */ .aboutus-box1 { place-content: center; align-items: center; flex-flow: column; gap: 64px; margin: 0px 0px 150px; padding: 0px; width: 1280px; z-index: 3; --gh-aboutus-box1: 0px; --gv-aboutus-box1: 64px; max-width: 100%; } @media screen and (max-width: 760px) { .aboutus-box1 { margin: 0px 0px 120px; --gh-aboutus-box1: 0px; --gv-aboutus-box1: 64px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box1 { gap: 32px; margin: 0px 0px 80px; --gh-aboutus-box1: 0px; --gv-aboutus-box1: 32px; max-width: 100%; } } /* aboutus-box2: About us 私たちについて 「 探究心に、進化の知 */ .aboutus-box2 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-flow: wrap; gap: 40px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: calc(100% - (var(--gh-aboutus-box1) * 0)); --gh-aboutus-box2: 40px; --gv-aboutus-box2: 40px; max-width: calc(100% - (var(--gh-aboutus-box1) * 0)); } html.js .aboutus-box2:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-aboutus-box2: 40px; --gv-aboutus-box2: 40px; } .aboutus-box2.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .aboutus-box2 { gap: 24px; --gh-aboutus-box2: 24px; --gv-aboutus-box2: 24px; } } /* aboutus-box3: About us 私たちについて */ .aboutus-box3 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; padding: 0px; width: 317px; --gh-aboutus-box3: 0px; --gv-aboutus-box3: 0px; max-width: 100%; } /* aboutus-txt1: About us */ .aboutus-txt1 { color: rgb(34, 34, 34); font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .aboutus-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .aboutus-txt1 { font-size: 32px; } } /* aboutus-txt2: 私たちについて */ .aboutus-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt2 { font-size: 11px; } } /* aboutus-box4: 「 探究心に、進化の知性を。」 私たちは、対象を誰よりも深 */ .aboutus-box4 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 15px; margin: 0px; padding: 0px; width: 703px; --gh-aboutus-box4: 0px; --gv-aboutus-box4: 15px; max-width: 100%; } @media screen and (max-width: 760px) { .aboutus-box4 { flex: 0 0 auto; margin: 0px; width: calc(100% - (var(--gh-aboutus-box2) * 0)); --gh-aboutus-box4: 0px; --gv-aboutus-box4: 15px; max-width: calc(100% - (var(--gh-aboutus-box2) * 0)); } } /* aboutus-txt3: 「 探究心に、進化の知性を。」 */ .aboutus-txt3 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 18px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 2; text-align: left; width: 684px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt3 { font-size: 14px; } } /* aboutus-txt4: 私たちは、対象を誰よりも深く愛し、研究し尽くす「プロフェッシ */ .aboutus-txt4 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 2; text-align: left; width: calc(100% - (var(--gh-aboutus-box4) * 0)); max-width: calc(100% - (var(--gh-aboutus-box4) * 0)); justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt4 { font-size: 14px; } } /* aboutus-box5: Mission - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-box5 { place-content: center; align-items: center; background: transparent; flex-wrap: nowrap; gap: 8px; padding: 0px; width: calc(100% - (var(--gh-aboutus-sec1) * 0)); z-index: 4; --gh-aboutus-box5: 0px; --gv-aboutus-box5: 8px; max-width: calc(100% - (var(--gh-aboutus-sec1) * 0)); } @media screen and (max-width: 760px) { .aboutus-box5 { padding: 0px; --gh-aboutus-box5: 0px; --gv-aboutus-box5: 8px; } } @media screen and (max-width: 540px) { .aboutus-box5 { padding: 0px; --gh-aboutus-box5: 0px; --gv-aboutus-box5: 8px; } } /* aboutus-box6: Mission - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-box6 { place-content: stretch center; align-items: stretch; flex: 0 0 auto; flex-flow: wrap; gap: 8px; margin: 0px; padding: 0px; width: 1280px; --gh-aboutus-box6: 8px; --gv-aboutus-box6: 8px; max-width: 100%; } html.js .aboutus-box6:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-aboutus-box6: 8px; --gv-aboutus-box6: 8px; } .aboutus-box6.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 1280px) { .aboutus-box6 { width: auto; --gh-aboutus-box6: 8px; --gv-aboutus-box6: 8px; max-width: 100%; } } @media screen and (max-width: 760px) { .aboutus-box6 { gap: 24px; --gh-aboutus-box6: 24px; --gv-aboutus-box6: 24px; } } @media screen and (max-width: 540px) { .aboutus-box6 { gap: 12px; --gh-aboutus-box6: 12px; --gv-aboutus-box6: 12px; } } /* aboutus-box7: Mission - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-box7 { place-content: center; 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: 8px; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 4px 0px; flex-flow: column; gap: 40px; height: auto; mix-blend-mode: normal; padding: 45px 24px; width: calc(50% - (var(--gh-aboutus-box6) * 0.5)); --gh-aboutus-box7: 0px; --gv-aboutus-box7: 40px; max-width: calc(50% - (var(--gh-aboutus-box6) * 0.5)); --g-color-0: #f7f7f7ff; --g-position-0: 0%; --g-color-1: #ffffffff; --g-position-1: 100%; --g-color-2: #ffffffff; --g-position-2: 100%; --g-color-3: #ffffffff; --g-position-3: 100%; --g-color-4: #ffffffff; --g-position-4: 100%; --g-color-5: #ffffffff; --g-position-5: 100%; --g-color-6: #ffffffff; --g-position-6: 100%; --g-color-7: #ffffffff; --g-position-7: 100%; --g-color-8: #ffffffff; --g-position-8: 100%; --g-color-9: #ffffffff; --g-position-9: 100%; --g-color-10: #ffffffff; --g-position-10: 100%; --g-color-11: #ffffffff; --g-position-11: 100%; --g-angle: 90deg; } .aboutus-box7:hover { opacity: 1; --gh-aboutus-box7: 0px; --gv-aboutus-box7: 40px; } @media screen and (max-width: 1280px) { .aboutus-box7 { padding: 24px 32px; --gh-aboutus-box7: 0px; --gv-aboutus-box7: 40px; } } @media screen and (max-width: 760px) { .aboutus-box7 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 16px; width: calc(100% - (var(--gh-aboutus-box6) * 0)); --gh-aboutus-box7: 16px; --gv-aboutus-box7: 16px; max-width: calc(100% - (var(--gh-aboutus-box6) * 0)); } } @media screen and (max-width: 540px) { .aboutus-box7 { height: auto; padding: 30px; --gh-aboutus-box7: 0px; --gv-aboutus-box7: 40px; } } /* aboutus-box8: Mission - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-box8 { place-content: center; align-items: center; flex: 1 1 0%; flex-flow: column; gap: 0px; height: auto; padding: 0px; width: calc(100% - (var(--gh-aboutus-box7) * 0)); --gh-aboutus-box8: 0px; --gv-aboutus-box8: 0px; max-width: calc(100% - (var(--gh-aboutus-box7) * 0)); } @media screen and (max-width: 760px) { .aboutus-box8 { flex: 1 1 0%; width: auto; --gh-aboutus-box8: 0px; --gv-aboutus-box8: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box8 { gap: 8px; height: auto; --gh-aboutus-box8: 0px; --gv-aboutus-box8: 8px; } } /* aboutus-txt5: Mission */ .aboutus-txt5 { color: rgb(159, 160, 160); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: 13px; line-height: 1.5; margin: 0px 0px 5px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt5 { font-size: 15px; } } /* aboutus-box9: - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-box9 { place-content: center; align-items: center; flex-flow: row; gap: 16px; margin: 0px 0px 20px; padding: 0px; --gh-aboutus-box9: 16px; --gv-aboutus-box9: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .aboutus-box9 { gap: 12px; --gh-aboutus-box9: 12px; --gv-aboutus-box9: 0px; } } @media screen and (max-width: 540px) { .aboutus-box9 { gap: 8px; --gh-aboutus-box9: 8px; --gv-aboutus-box9: 0px; } } /* aboutus-txt6: - 偏愛的な研究を、普遍的な価値へ - */ .aboutus-txt6 { color: rgb(0, 0, 0); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 500; height: auto; line-height: 1.5; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt6 { font-size: 15px; } } /* aboutus-txt7: 私たちが目指すのは、属人的な「こだわり」を、AIによって再現 */ .aboutus-txt7 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 2; text-align: left; width: 400px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt7 { font-size: 13px; } } /* aboutus-box10: Vision - 知性の進化で、愛すべきプロダクトが 溢 */ .aboutus-box10 { place-content: center; 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: 8px; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 4px 0px; flex-flow: column; gap: 40px; height: auto; padding: 45px 40px; width: calc(50% - (var(--gh-aboutus-box6) * 0.5)); --gh-aboutus-box10: 0px; --gv-aboutus-box10: 40px; max-width: calc(50% - (var(--gh-aboutus-box6) * 0.5)); --g-color-0: #f7f7f7ff; --g-position-0: 0%; --g-color-1: #ffffffff; --g-position-1: 100%; --g-color-2: #ffffffff; --g-position-2: 100%; --g-color-3: #ffffffff; --g-position-3: 100%; --g-color-4: #ffffffff; --g-position-4: 100%; --g-color-5: #ffffffff; --g-position-5: 100%; --g-color-6: #ffffffff; --g-position-6: 100%; --g-color-7: #ffffffff; --g-position-7: 100%; --g-color-8: #ffffffff; --g-position-8: 100%; --g-color-9: #ffffffff; --g-position-9: 100%; --g-color-10: #ffffffff; --g-position-10: 100%; --g-color-11: #ffffffff; --g-position-11: 100%; --g-angle: 90deg; } .aboutus-box10:hover { opacity: 1; --gh-aboutus-box10: 0px; --gv-aboutus-box10: 40px; } @media screen and (max-width: 1280px) { .aboutus-box10 { padding: 24px 32px; --gh-aboutus-box10: 0px; --gv-aboutus-box10: 40px; } } @media screen and (max-width: 760px) { .aboutus-box10 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 16px; width: calc(100% - (var(--gh-aboutus-box6) * 0)); --gh-aboutus-box10: 16px; --gv-aboutus-box10: 16px; max-width: calc(100% - (var(--gh-aboutus-box6) * 0)); } } @media screen and (max-width: 540px) { .aboutus-box10 { padding: 30px; --gh-aboutus-box10: 0px; --gv-aboutus-box10: 40px; } } /* aboutus-box11: Vision - 知性の進化で、愛すべきプロダクトが 溢 */ .aboutus-box11 { place-content: center; align-items: center; flex: 1 1 0%; flex-flow: column; gap: 0px; height: auto; padding: 0px; width: calc(100% - (var(--gh-aboutus-box10) * 0)); --gh-aboutus-box11: 0px; --gv-aboutus-box11: 0px; max-width: calc(100% - (var(--gh-aboutus-box10) * 0)); } @media screen and (max-width: 760px) { .aboutus-box11 { flex: 1 1 0%; width: auto; --gh-aboutus-box11: 0px; --gv-aboutus-box11: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box11 { gap: 8px; --gh-aboutus-box11: 0px; --gv-aboutus-box11: 8px; } } /* aboutus-txt8: Vision */ .aboutus-txt8 { color: rgb(159, 160, 160); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 1.5; margin: 0px 0px 5px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt8 { font-size: 15px; } } /* aboutus-box12: - 知性の進化で、愛すべきプロダクトが 溢れる世界を - */ .aboutus-box12 { place-content: center; align-items: center; flex-flow: row; gap: 16px; margin: 0px 0px 20px; padding: 0px; --gh-aboutus-box12: 16px; --gv-aboutus-box12: 0px; max-width: 100%; } @media screen and (max-width: 760px) { .aboutus-box12 { gap: 12px; --gh-aboutus-box12: 12px; --gv-aboutus-box12: 0px; } } @media screen and (max-width: 540px) { .aboutus-box12 { gap: 8px; --gh-aboutus-box12: 8px; --gv-aboutus-box12: 0px; } } /* aboutus-txt9: - 知性の進化で、愛すべきプロダクトが 溢れる世界を - */ .aboutus-txt9 { color: rgb(0, 0, 0); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 15px; font-weight: 500; height: auto; line-height: 1.5; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt9 { font-size: 15px; } } /* aboutus-txt10: テクノロジーの進化は、人間の情熱を奪うものではなく、解放する */ .aboutus-txt10 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 2; text-align: left; width: 400px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt10 { font-size: 13px; } } /* aboutus-box13: Value - Deep Research - 徹底 */ .aboutus-box13 { place-content: flex-end flex-start; align-items: flex-end; background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 4px 0px; flex-flow: column; gap: 40px; height: auto; padding: 45px 40px; width: calc(100% - (var(--gh-aboutus-box6) * 0)); --gh-aboutus-box13: 0px; --gv-aboutus-box13: 40px; max-width: calc(100% - (var(--gh-aboutus-box6) * 0)); --g-color-0: #f7f7f7ff; --g-position-0: 0%; --g-color-1: #ffffffff; --g-position-1: 100%; --g-color-2: #ffffffff; --g-position-2: 100%; --g-color-3: #ffffffff; --g-position-3: 100%; --g-color-4: #ffffffff; --g-position-4: 100%; --g-color-5: #ffffffff; --g-position-5: 100%; --g-color-6: #ffffffff; --g-position-6: 100%; --g-color-7: #ffffffff; --g-position-7: 100%; --g-color-8: #ffffffff; --g-position-8: 100%; --g-color-9: #ffffffff; --g-position-9: 100%; --g-color-10: #ffffffff; --g-position-10: 100%; --g-color-11: #ffffffff; --g-position-11: 100%; --g-angle: 90deg; } .aboutus-box13:hover { opacity: 1; --gh-aboutus-box13: 0px; --gv-aboutus-box13: 40px; } @media screen and (max-width: 1280px) { .aboutus-box13 { padding: 24px 32px; --gh-aboutus-box13: 0px; --gv-aboutus-box13: 40px; } } @media screen and (max-width: 760px) { .aboutus-box13 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 16px; width: 100%; --gh-aboutus-box13: 16px; --gv-aboutus-box13: 16px; } } @media screen and (max-width: 540px) { .aboutus-box13 { padding: 30px; --gh-aboutus-box13: 0px; --gv-aboutus-box13: 40px; } } /* aboutus-box14: Value - Deep Research - 徹底 */ .aboutus-box14 { place-content: center; align-items: center; flex: 1 1 0%; flex-flow: column; gap: 0px; height: auto; padding: 0px 30px; width: calc(100% - (var(--gh-aboutus-box13) * 0)); --gh-aboutus-box14: 0px; --gv-aboutus-box14: 0px; max-width: calc(100% - (var(--gh-aboutus-box13) * 0)); } @media screen and (max-width: 760px) { .aboutus-box14 { flex: 1 1 0%; width: auto; --gh-aboutus-box14: 0px; --gv-aboutus-box14: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box14 { gap: 8px; padding: 0px; --gh-aboutus-box14: 0px; --gv-aboutus-box14: 8px; } } /* aboutus-txt11: Value */ .aboutus-txt11 { color: rgb(159, 160, 160); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 1.5; margin: 0px 0px 25px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt11 { font-size: 15px; margin: 0px 0px 5px; max-width: 100%; } } /* aboutus-box15: - Deep Research - 徹底的な対象理解 */ .aboutus-box15 { place-content: center flex-start; align-items: center; flex-flow: wrap; margin: 0px 0px 20px; padding: 0px; width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); max-width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); } @media screen and (max-width: 760px) { .aboutus-box15 { place-content: center; align-items: center; flex-flow: wrap; } } @media screen and (max-width: 540px) { .aboutus-box15 { margin: 0px 0px 25px; width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); max-width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); } } /* aboutus-box16: - Deep Research - 徹底的な対象理解 */ .aboutus-box16 { place-content: center; align-items: center; flex-flow: row; gap: 16px; margin: 0px 90px 0px 0px; padding: 0px; width: auto; --gh-aboutus-box16: 16px; --gv-aboutus-box16: 0px; max-width: calc(100% - 90px); } @media screen and (max-width: 760px) { .aboutus-box16 { gap: 12px; margin: 0px 0px 10px; --gh-aboutus-box16: 12px; --gv-aboutus-box16: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box16 { flex: 0 0 auto; gap: 8px; margin: 0px 0px 15px; width: 100%; --gh-aboutus-box16: 8px; --gv-aboutus-box16: 0px; max-width: 100%; } } /* aboutus-txt12: - Deep Research - 徹底的な対象理解 */ .aboutus-txt12 { color: rgb(0, 0, 0); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 500; height: auto; line-height: 1.5; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt12 { font-size: 15px; } } /* aboutus-txt13: 表面的なデータに頼らず、その本質をオタクのように徹底的に掘り */ .aboutus-txt13 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 2; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt13 { flex: 0 0 auto; font-size: 13px; line-height: 2; width: 100%; max-width: 100%; } } /* aboutus-box17: - AI-NativeEvolution - 技術による */ .aboutus-box17 { place-content: center flex-start; align-items: center; flex-flow: wrap; margin: 0px 0px 20px; padding: 0px; width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); max-width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); } @media screen and (max-width: 760px) { .aboutus-box17 { place-content: center; align-items: center; flex-flow: wrap; } } @media screen and (max-width: 540px) { .aboutus-box17 { place-content: center; align-items: center; margin: 0px 0px 25px; width: 233px; max-width: 100%; } } /* aboutus-box18: - AI-NativeEvolution - 技術による */ .aboutus-box18 { place-content: center; align-items: center; flex-flow: row; gap: 16px; margin: 0px 65px 0px 0px; padding: 0px; width: auto; --gh-aboutus-box18: 16px; --gv-aboutus-box18: 0px; max-width: calc(100% - 65px); } @media screen and (max-width: 760px) { .aboutus-box18 { gap: 12px; margin: 0px 0px 10px; --gh-aboutus-box18: 12px; --gv-aboutus-box18: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box18 { gap: 8px; margin: 0px 0px 15px; --gh-aboutus-box18: 8px; --gv-aboutus-box18: 0px; max-width: 100%; } } /* aboutus-txt14: - AI-NativeEvolution - 技術による */ .aboutus-txt14 { color: rgb(0, 0, 0); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 500; height: auto; line-height: 1.5; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt14 { flex: 0 0 auto; font-size: 15px; width: 224px; max-width: 100%; } } /* aboutus-txt15: AIを単なるツールではなく、自身の思考を拡張するパートナーと */ .aboutus-txt15 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 2; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt15 { font-size: 13px; } } /* aboutus-box19: - Ageless Passion - 持続的な情熱と */ .aboutus-box19 { place-content: center flex-start; align-items: center; flex-flow: wrap; height: auto; margin: 0px; padding: 0px; width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); max-width: calc(90% - (var(--gh-aboutus-box14) * 0.10000000000000003)); } @media screen and (max-width: 760px) { .aboutus-box19 { place-content: center; align-items: center; flex-flow: wrap; } } @media screen and (max-width: 540px) { .aboutus-box19 { place-content: center; align-items: center; } } /* aboutus-box20: - Ageless Passion - 持続的な情熱と */ .aboutus-box20 { place-content: center; align-items: center; flex-flow: row; gap: 16px; margin: 0px 75px 0px 0px; padding: 0px; width: auto; --gh-aboutus-box20: 16px; --gv-aboutus-box20: 0px; max-width: calc(100% - 75px); } @media screen and (max-width: 760px) { .aboutus-box20 { gap: 12px; margin: 0px 0px 10px; --gh-aboutus-box20: 12px; --gv-aboutus-box20: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-box20 { gap: 8px; margin: 0px 0px 15px; --gh-aboutus-box20: 8px; --gv-aboutus-box20: 0px; max-width: 100%; } } /* aboutus-txt16: - Ageless Passion - 持続的な情熱と */ .aboutus-txt16 { color: rgb(0, 0, 0); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 500; height: auto; line-height: 1.5; margin: 0px; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .aboutus-txt16 { font-size: 15px; } } /* aboutus-txt17: 一時的なトレンドではなく、一生をかけて向き合う価値のあるもの */ .aboutus-txt17 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-weight: 400; height: auto; line-height: 2; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .aboutus-txt17 { font-size: 13px; } } /* aboutus-pic1: */ .aboutus-pic1 { inset: 0px 0px -29px; height: auto; padding: 0px 40px; position: absolute; width: auto; z-index: 1; max-width: 100%; } .aboutus-pic1::before { background-position: right center; } @media screen and (max-width: 1280px) { .aboutus-pic1 { inset: -14px -101px -15px 101px; } } @media screen and (max-width: 760px) { .aboutus-pic1::before { background-position: right center; } } @media screen and (max-width: 760px) { .aboutus-pic1 { inset: 139px -76px auto auto; height: 1045px; width: 580px; max-width: 100%; } } @media screen and (max-width: 540px) { .aboutus-pic1::before { background-position: right center; } } @media screen and (max-width: 540px) { .aboutus-pic1 { inset: 157px -385px 151px -987px; height: 1266px; width: auto; max-width: 100%; } } /* news-sec1: News お知らせ 2026.07.07 プレスリリー */ .news-sec1 { place-content: center flex-start; align-items: center; background: rgb(246, 246, 246); flex-flow: column; height: 720px; padding: 150px 40px; width: 100%; max-width: 100%; } .news-inner { padding: 150px 40px; width: 100%; height: 720px; flex-flow: column; place-content: center flex-start; align-items: center; max-width: 100%; } /* news-box1: News お知らせ */ .news-box1 { place-content: flex-start; align-items: flex-start; flex-flow: wrap; gap: 40px; margin: 0px 0px 50px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: 1280px; --gh-news-box1: 40px; --gv-news-box1: 40px; max-width: 100%; } html.js .news-box1:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-news-box1: 40px; --gv-news-box1: 40px; } .news-box1.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .news-box1 { gap: 24px; --gh-news-box1: 24px; --gv-news-box1: 24px; } } /* news-box2: News お知らせ */ .news-box2 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; padding: 0px; width: 317px; --gh-news-box2: 0px; --gv-news-box2: 0px; max-width: 100%; } /* news-txt1: News */ .news-txt1 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: 56px; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .news-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .news-txt1 { font-size: 32px; } } /* news-txt2: お知らせ */ .news-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .news-txt2 { font-size: 11px; } } /* news-box3: 2026.07.07 プレスリリース 【お知らせ】候 */ .news-box3 { place-content: flex-start; align-items: flex-start; gap: 30px; height: auto; margin: 0px 0px 100px; width: 992px; --gh-news-box3: 0px; --gv-news-box3: 30px; max-width: 100%; } /* news-link1: 2026.07.07 プレスリリース 【お知らせ】候 */ .news-link1 { background: rgba(255, 255, 255, 0); border-width: 0px 0px 1px; border-style: solid; border-color: rgb(0, 0, 0); flex-direction: row; gap: 40px; justify-content: flex-start; width: calc(100% - (var(--gh-news-box3) * 0)); --gh-news-link1: 40px; --gv-news-link1: 0px; max-width: calc(100% - (var(--gh-news-box3) * 0)); } .news-link1.link-active { --gh-news-link1: 40px; --gv-news-link1: 0px; } @media screen and (max-width: 760px) { .news-link1 { flex-direction: column; overflow: hidden auto; --gh-news-link1: 0px; --gv-news-link1: 40px; } } @media screen and (max-width: 540px) { .news-link1 { overflow: hidden auto; width: 100%; --gh-news-link1: 40px; --gv-news-link1: 0px; } } /* news-box4: 2026.07.07 プレスリリース 【お知らせ】候 */ .news-box4 { place-content: center space-between; align-items: center; flex: 1 1 0%; flex-flow: row; gap: 0px; padding: 0px 0px 10px; --gh-news-box4: 0px; --gv-news-box4: 0px; } /* news-box5: 2026.07.07 プレスリリース 【お知らせ】候 */ .news-box5 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: row; gap: 0px; height: auto; padding: 0px; width: calc(90% - (var(--gh-news-box4) * 0.10000000000000003)); --gh-news-box5: 0px; --gv-news-box5: 0px; max-width: calc(90% - (var(--gh-news-box4) * 0.10000000000000003)); } /* news-txt3: 2026.07.07 */ .news-txt3 { color: rgb(102, 102, 102); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 400; margin: 0px 20px 0px 0px; max-width: calc(100% - 20px); } @media screen and (max-width: 760px) { .news-txt3 { font-size: 12px; } } /* news-txt4: プレスリリース */ .news-txt4 { background: rgb(217, 217, 217); border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: 'Noto Sans', sans-serif; font-size: 10px; font-weight: 400; margin: 0px 20px 0px 0px; padding: 5px 10px; max-width: calc(100% - 20px); } @media screen and (max-width: 760px) { .news-txt4 { font-size: 12px; } } /* news-txt5: 【お知らせ】候補日を自動生成する「アポ候補日生成メーカー」を */ .news-txt5 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight: 500; height: auto; line-height: 1.2; margin: 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } .news-txt5:hover { color: rgb(141, 141, 141); } @media screen and (max-width: 760px) { .news-txt5 { font-size: 20px; } } /* news-icon1: chevron_right */ .news-icon1 { color: rgb(51, 51, 51); flex: 0 0 auto; font-size: 20px; margin: 0px; width: calc(3% - (var(--gh-news-box4) * 0.97)); max-width: calc(3% - (var(--gh-news-box4) * 0.97)); } /* news-link2: お知らせ一覧へ chevron_right */ .news-link2 { place-content: center; 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: 200px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; flex-flow: row; padding: 13px; width: 250px; max-width: 100%; --g-color-0: #f5f5f5; --g-position-0: 0%; --g-color-1: #ffffff; --g-position-1: 100%; --g-color-2: #ffffff; --g-position-2: 100%; --g-color-3: #ffffff; --g-position-3: 100%; --g-color-4: #ffffff; --g-position-4: 100%; --g-color-5: #ffffff; --g-position-5: 100%; --g-color-6: #ffffff; --g-position-6: 100%; --g-color-7: #ffffff; --g-position-7: 100%; --g-color-8: #ffffff; --g-position-8: 100%; --g-color-9: #ffffff; --g-position-9: 100%; --g-color-10: #ffffff; --g-position-10: 100%; --g-color-11: #ffffff; --g-position-11: 100%; --g-angle: 90deg; } .news-link2:hover { box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset; transition-duration: 500ms; transition-timing-function: ease; } /* news-txt6: お知らせ一覧へ */ .news-txt6 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 400; height: auto; line-height: 1.4; text-align: center; width: 185px; max-width: 100%; justify-content: center; } /* news-icon2: chevron_right */ .news-icon2 { color: rgb(51, 51, 51); font-size: 20px; margin: 0px; max-width: 100%; } /* service-sec1: Service 事業内容 「 AIを使える力に変える。」 */ .service-sec1 { place-content: flex-end flex-start; align-items: flex-end; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; padding: 150px 40px; width: 100%; z-index: -3; --gh-service-sec1: 0px; --gv-service-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .service-sec1 { height: auto; padding: 150px 40px; --gh-service-sec1: 0px; --gv-service-sec1: 0px; } } @media screen and (max-width: 760px) { .service-sec1 { height: 1813px; --gh-service-sec1: 0px; --gv-service-sec1: 0px; width: 100%; max-width: 100%; } } @media screen and (max-width: 540px) { .service-sec1 { height: auto; padding: 100px 40px; --gh-service-sec1: 0px; --gv-service-sec1: 0px; width: 100%; max-width: 100%; } } .service-inner { padding: 150px 40px; width: calc(100% - (var(--gh-service-sec1) * 0)); height: auto; flex-flow: column; place-content: flex-end flex-start; align-items: flex-end; gap: 0px; --gh-service-sec1: 0px; --gv-service-sec1: 0px; max-width: calc(100% - (var(--gh-service-sec1) * 0)); } @media screen and (max-width: 1280px) { .service-inner { padding: 150px 40px; height: auto; flex-direction: column; --gh-service-sec1: 0px; --gv-service-sec1: 0px; } } @media screen and (max-width: 760px) { .service-inner { height: 1813px; flex-direction: column; --gh-service-sec1: 0px; --gv-service-sec1: 0px; width: calc(100% - (var(--gh-service-sec1) * 0)); max-width: calc(100% - (var(--gh-service-sec1) * 0)); } } @media screen and (max-width: 540px) { .service-inner { padding: 100px 40px; height: auto; flex-direction: column; --gh-service-sec1: 0px; --gv-service-sec1: 0px; width: calc(100% - (var(--gh-service-sec1) * 0)); max-width: calc(100% - (var(--gh-service-sec1) * 0)); } } /* service-box1: Service 事業内容 「 AIを使える力に変える。」 */ .service-box1 { place-content: center; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; gap: 150px; margin: 0px 0px 120px; padding: 0px; width: calc(100% - (var(--gh-service-sec1) * 0)); z-index: 3; --gh-service-box1: 0px; --gv-service-box1: 150px; max-width: calc(100% - (var(--gh-service-sec1) * 0)); } @media screen and (max-width: 540px) { .service-box1 { gap: 32px; --gh-service-box1: 0px; --gv-service-box1: 32px; } } /* service-box2: Service 事業内容 「 AIを使える力に変える。」 */ .service-box2 { place-content: flex-start; align-items: flex-start; flex-flow: wrap; gap: 40px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: 1280px; --gh-service-box2: 40px; --gv-service-box2: 40px; max-width: 100%; } html.js .service-box2:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-service-box2: 40px; --gv-service-box2: 40px; } .service-box2.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .service-box2 { gap: 24px; --gh-service-box2: 24px; --gv-service-box2: 24px; } } /* service-box3: Service 事業内容 */ .service-box3 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; padding: 0px; width: 317px; --gh-service-box3: 0px; --gv-service-box3: 0px; max-width: 100%; } /* service-txt1: Service */ .service-txt1 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: 56px; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .service-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .service-txt1 { font-size: 32px; } } /* service-txt2: 事業内容 */ .service-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .service-txt2 { font-size: 11px; } } /* service-box4: 「 AIを使える力に変える。」 AI・DXシステム開発、ク */ .service-box4 { place-content: flex-start; align-items: flex-start; flex: 1 1 0%; flex-wrap: nowrap; gap: 15px; margin: 0px; padding: 0px; width: auto; --gh-service-box4: 0px; --gv-service-box4: 15px; max-width: 100%; } @media screen and (max-width: 760px) { .service-box4 { flex: 0 0 auto; margin: 0px; width: calc(100% - (var(--gh-service-box2) * 0)); --gh-service-box4: 0px; --gv-service-box4: 15px; max-width: calc(100% - (var(--gh-service-box2) * 0)); } } /* service-txt3: 「 AIを使える力に変える。」 */ .service-txt3 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 18px; font-style: normal; font-weight: 500; height: auto; letter-spacing: normal; line-height: 2; text-align: left; width: 684px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .service-txt3 { font-size: 14px; } } /* service-txt4: AI・DXシステム開発、クリエイティブとテクノロジーの融合、 */ .service-txt4 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 2; text-align: left; width: 684px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .service-txt4 { font-size: 14px; } } /* service-list1: AI・DXシステム開発 生成AIの導入、業務効率化、業種特 */ .service-list1 { place-content: center; align-items: center; border-radius: 5px; flex-flow: wrap; gap: 10px; padding: 0px; transition-delay: 500ms; transition-duration: 500ms; width: 1280px; --gh-service-list1: 10px; --gv-service-list1: 10px; max-width: 100%; } html.js .service-list1:not(.in) { opacity: 0; transition-duration: 500ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-service-list1: 10px; --gv-service-list1: 10px; } .service-list1.in-active { transition-duration: 500ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .service-list1 { gap: 10px; --gh-service-list1: 10px; --gv-service-list1: 10px; } } /* service-item1: AI・DXシステム開発 生成AIの導入、業務効率化、業種特 */ .service-item1 { place-content: center flex-start; align-items: center; background: rgb(245, 245, 245); border-width: 0px; border-style: solid; border-color: transparent; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 8px 8px 25px; width: calc(33.33% - (var(--gh-service-list1) * 0.6667)); --gh-service-item1: 0px; --gv-service-item1: 0px; max-width: calc(33.33% - (var(--gh-service-list1) * 0.6667)); } .service-item1:hover { opacity: 1; --gh-service-item1: 0px; --gv-service-item1: 0px; } @media screen and (max-width: 760px) { .service-item1 { flex: 0 0 auto; width: calc(50% - (var(--gh-service-list1) * 0.5)); --gh-service-item1: 0px; --gv-service-item1: 0px; max-width: calc(50% - (var(--gh-service-list1) * 0.5)); } } @media screen and (max-width: 540px) { .service-item1 { width: calc(100% - (var(--gh-service-list1) * 0)); --gh-service-item1: 0px; --gv-service-item1: 0px; max-width: calc(100% - (var(--gh-service-list1) * 0)); } } /* service-box5: */ .service-box5 { place-content: flex-start; align-items: flex-start; border-radius: 4px; flex: 0 0 auto; flex-flow: column; gap: 16px; height: 220px; margin: 0px 0px 25px; overflow: hidden; padding: 0px; width: calc(100% - (var(--gh-service-item1) * 0)); --gh-service-box5: 0px; --gv-service-box5: 16px; max-width: calc(100% - (var(--gh-service-item1) * 0)); } /* service-pic1: */ .service-pic1 { border-radius: 0px; flex: 0 0 auto; height: calc(100% - (var(--gv-service-box5) * 0)); width: calc(100% - (var(--gh-service-box5) * 0)); max-width: calc(100% - (var(--gh-service-box5) * 0)); } .service-pic1::before { background-size: 437px auto; } /* service-item1: AI・DXシステム開発 生成AIの導入、業務効率化、業種特 */ .service-item1:hover .service-pic1 { scale: 1.05; } /* service-box6: AI・DXシステム開発 生成AIの導入、業務効率化、業種特 */ .service-box6 { place-content: center flex-start; align-items: center; background: transparent; flex: 1 1 0%; flex-flow: column; gap: 8px; height: auto; padding: 0px; width: calc(100% - (var(--gh-service-item1) * 0)); --gh-service-box6: 0px; --gv-service-box6: 8px; max-width: calc(100% - (var(--gh-service-item1) * 0)); } @media screen and (max-width: 760px) { .service-box6 { gap: 6px; --gh-service-box6: 0px; --gv-service-box6: 6px; } } @media screen and (max-width: 540px) { .service-box6 { gap: 4px; --gh-service-box6: 0px; --gv-service-box6: 4px; } } /* service-txt5: AI・DXシステム開発 */ .service-txt5 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 15px; font-weight: 400; height: auto; line-height: 1.5; text-align: center; width: auto; max-width: 100%; justify-content: center; } /* service-txt6: 生成AIの導入、業務効率化、業種特化の最適化システムを 最小 */ .service-txt6 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 2; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .service-txt6 { font-size: 11px; } } /* service-pic2: */ .service-pic2 { place-content: center flex-end; align-items: center; inset: 0px; flex-flow: column; height: auto; padding: 0px; position: absolute; width: auto; z-index: 1; max-width: 100%; } .service-pic2::before { background-position: right bottom; } /* service-box7: Service 自社サービス一覧 ジャッジメント 少額 */ .service-box7 { place-content: center; align-items: center; flex-flow: wrap; gap: 30px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: calc(100% - (var(--gh-service-sec1) * 0)); z-index: 1; --gh-service-box7: 30px; --gv-service-box7: 30px; max-width: calc(100% - (var(--gh-service-sec1) * 0)); } html.js .service-box7:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-service-box7: 30px; --gv-service-box7: 30px; } .service-box7.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .service-box7 { gap: 24px; --gh-service-box7: 24px; --gv-service-box7: 24px; } } /* service-box8: Service 自社サービス一覧 */ .service-box8 { place-content: center; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; padding: 0px; width: 317px; --gh-service-box8: 0px; --gv-service-box8: 0px; max-width: 100%; } /* service-txt7: Service */ .service-txt7 { color: rgb(34, 34, 34); font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 30px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -2px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .service-txt7 { font-size: 48px; } } @media screen and (max-width: 540px) { .service-txt7 { font-size: 32px; } } /* service-txt8: 自社サービス一覧 */ .service-txt8 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .service-txt8 { font-size: 11px; } } /* service-list2: ジャッジメント 少額訴訟 訴状書類作成 chevron_ */ .service-list2 { place-content: stretch center; align-items: stretch; border-radius: 8px; flex-flow: wrap; gap: 10px; padding: 0px; width: 1280px; z-index: 1; --gh-service-list2: 10px; --gv-service-list2: 10px; max-width: 100%; } @media screen and (max-width: 760px) { .service-list2 { gap: 10px; --gh-service-list2: 10px; --gv-service-list2: 10px; } } /* service-item2: ジャッジメント 少額訴訟 訴状書類作成 chevron_ */ .service-item2 { place-content: flex-start; align-items: flex-start; background: rgb(245, 245, 245); border-width: 0px; border-style: solid; border-color: transparent; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; flex: 0 0 auto; flex-flow: column; gap: 0px; overflow: hidden; padding: 0px; width: calc(33.33% - (var(--gh-service-list2) * 0.6667)); --gh-service-item2: 0px; --gv-service-item2: 0px; max-width: calc(33.33% - (var(--gh-service-list2) * 0.6667)); } .service-item2:hover { box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset; opacity: 1; transition-delay: 0ms; transition-duration: 500ms; --gh-service-item2: 0px; --gv-service-item2: 0px; } @media screen and (max-width: 760px) { .service-item2 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: column; width: calc(50% - (var(--gh-service-list2) * 0.5)); --gh-service-item2: 0px; --gv-service-item2: 0px; max-width: calc(50% - (var(--gh-service-list2) * 0.5)); } } @media screen and (max-width: 540px) { .service-item2 { width: calc(100% - (var(--gh-service-list2) * 0)); --gh-service-item2: 0px; --gv-service-item2: 0px; max-width: calc(100% - (var(--gh-service-list2) * 0)); } } /* service-link1: ジャッジメント 少額訴訟 訴状書類作成 chevron_ */ .service-link1 { place-content: center flex-start; align-items: center; background: transparent; flex: 1 1 0%; flex-flow: row; gap: 0px; height: auto; padding: 25px 16px; width: calc(100% - (var(--gh-service-item2) * 0)); --gh-service-link1: 0px; --gv-service-link1: 0px; max-width: calc(100% - (var(--gh-service-item2) * 0)); } @media screen and (max-width: 760px) { .service-link1 { gap: 0px; --gh-service-link1: 0px; --gv-service-link1: 0px; } } @media screen and (max-width: 540px) { .service-link1 { gap: 0px; --gh-service-link1: 0px; --gv-service-link1: 0px; } } @media screen and (max-width: 360px) { .service-link1 { gap: 0px; --gh-service-link1: 0px; --gv-service-link1: 0px; } } /* service-box9: ジャッジメント 少額訴訟 訴状書類作成 */ .service-box9 { place-content: flex-start center; align-items: flex-start; background: rgba(238, 238, 238, 0); flex: 0 0 auto; flex-flow: column; height: 49px; width: calc(78% - (var(--gh-service-link1) * 0.22000000000000006)); max-width: calc(78% - (var(--gh-service-link1) * 0.22000000000000006)); } @media screen and (max-width: 540px) { .service-box9 { flex: 0 0 auto; width: calc(77% - (var(--gh-service-link1) * 0.22999999999999998)); max-width: calc(77% - (var(--gh-service-link1) * 0.22999999999999998)); } } @media screen and (max-width: 360px) { .service-box9 { width: 150px; max-width: 100%; } } /* service-txt9: ジャッジメント */ .service-txt9 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 400; height: auto; line-height: 1.75; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } /* service-item2: ジャッジメント 少額訴訟 訴状書類作成 chevron_ */ .service-item2:hover .service-txt9:hover { color: rgb(0, 0, 0); } .service-item2:hover .service-txt9 { color: rgb(0, 0, 0); } @media screen and (max-width: 1280px) { .service-txt9 { color: rgb(0, 0, 0); } } @media screen and (max-width: 1280px) { .service-item2:hover .service-txt9 { color: rgb(0, 0, 0); } } @media screen and (max-width: 540px) { .service-txt9 { font-size: 14px; } } /* service-txt10: 少額訴訟 訴状書類作成 */ .service-txt10 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; 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) { .service-txt10 { font-size: 11px; } } /* service-pic3: chevron_right */ .service-pic3 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: column; height: 64px; width: 70px; max-width: 100%; } /* service-item2: ジャッジメント 少額訴訟 訴状書類作成 chevron_ */ .service-item2:hover .service-pic3 { opacity: 0; } @media screen and (max-width: 1280px) { .service-pic3 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: column; width: 70px; } } @media screen and (max-width: 540px) { .service-pic3 { flex: 0 0 auto; height: 64px; width: 70px; } } /* service-icon1: chevron_right */ .service-icon1 { color: rgb(51, 51, 51); font-size: 24px; } /* service-pic4: chevron_right */ .service-pic4 { place-content: center; align-items: center; flex-flow: column; height: 64px; translate: -70px; width: 69px; z-index: -1; max-width: 100%; } @media screen and (max-width: 1280px) { .service-pic4 { place-content: center; align-items: center; flex-flow: column; } } /* service-icon2: chevron_right */ .service-icon2 { color: rgb(51, 51, 51); font-size: 24px; } /* works-sec1: Works 実績紹介 2026.8.12 システム開 */ .works-sec1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; padding: 150px 40px; width: 1500px; z-index: -3; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .works-sec1 { height: auto; padding: 150px 40px; --gh-works-sec1: 0px; --gv-works-sec1: 0px; } } @media screen and (max-width: 760px) { .works-sec1 { height: 1881px; margin: 0px; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .works-sec1 { height: auto; padding: 100px 40px; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } } .works-inner { padding: 150px 40px; width: 1500px; height: auto; flex-flow: column; place-content: center flex-start; align-items: center; gap: 0px; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .works-inner { padding: 150px 40px; height: auto; flex-direction: column; --gh-works-sec1: 0px; --gv-works-sec1: 0px; } } @media screen and (max-width: 760px) { .works-inner { height: 1881px; flex-direction: column; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } } @media screen and (max-width: 540px) { .works-inner { padding: 100px 40px; height: auto; flex-direction: column; --gh-works-sec1: 0px; --gv-works-sec1: 0px; max-width: 100%; } } /* works-box1: Works 実績紹介 */ .works-box1 { place-content: center; align-items: center; flex-flow: column; gap: 64px; margin: 0px 0px 100px; padding: 0px; width: 1280px; z-index: 3; --gh-works-box1: 0px; --gv-works-box1: 64px; max-width: 100%; } @media screen and (max-width: 760px) { .works-box1 { margin: 0px 0px 120px; --gh-works-box1: 0px; --gv-works-box1: 64px; max-width: 100%; } } @media screen and (max-width: 540px) { .works-box1 { gap: 32px; margin: 0px 0px 100px; --gh-works-box1: 0px; --gv-works-box1: 32px; max-width: 100%; } } /* works-box2: Works 実績紹介 */ .works-box2 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-flow: wrap; gap: 40px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: calc(100% - (var(--gh-works-box1) * 0)); --gh-works-box2: 40px; --gv-works-box2: 40px; max-width: calc(100% - (var(--gh-works-box1) * 0)); } html.js .works-box2:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-works-box2: 40px; --gv-works-box2: 40px; } .works-box2.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .works-box2 { gap: 24px; --gh-works-box2: 24px; --gv-works-box2: 24px; } } /* works-box3: Works 実績紹介 */ .works-box3 { place-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: 0px; padding: 0px; width: auto; --gh-works-box3: 0px; --gv-works-box3: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .works-box3 { width: auto; --gh-works-box3: 0px; --gv-works-box3: 0px; } } @media screen and (max-width: 760px) { .works-box3 { width: auto; --gh-works-box3: 0px; --gv-works-box3: 0px; } } /* works-txt1: Works */ .works-txt1 { color: rgb(34, 34, 34); font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .works-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .works-txt1 { font-size: 32px; } } /* works-txt2: 実績紹介 */ .works-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .works-txt2 { font-size: 11px; } } /* works-box4: 2026.8.12 システム開発 補助金マッチングAIエ */ .works-box4 { place-content: flex-start; align-items: flex-start; flex-flow: wrap; gap: 10px; margin: 0px 0px 50px; padding: 0px; width: 1280px; --gh-works-box4: 10px; --gv-works-box4: 10px; max-width: 100%; } @media screen and (max-width: 1280px) { .works-box4 { width: 1280px; --gh-works-box4: 10px; --gv-works-box4: 10px; } } @media screen and (max-width: 760px) { .works-box4 { width: auto; --gh-works-box4: 10px; --gv-works-box4: 10px; max-width: 100%; } } @media screen and (max-width: 540px) { .works-box4 { margin: 0px 0px 50px; --gh-works-box4: 10px; --gv-works-box4: 10px; } } /* works-link1: 2026.8.12 システム開発 補助金マッチングAIエ */ .works-link1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; margin: 0px 0px 30px; width: calc(25% - (var(--gh-works-box4) * 0.75)); max-width: calc(25% - (var(--gh-works-box4) * 0.75)); } @media screen and (max-width: 760px) { .works-link1 { flex-direction: column; overflow: hidden auto; width: calc(50% - (var(--gh-works-box4) * 0.5)); max-width: calc(50% - (var(--gh-works-box4) * 0.5)); } } @media screen and (max-width: 540px) { .works-link1 { margin: 0px 0px 30px; overflow: hidden auto; width: calc(100% - (var(--gh-works-box4) * 0)); max-width: calc(100% - (var(--gh-works-box4) * 0)); } } /* works-img1: */ .works-img1 { background: rgb(245, 245, 245); filter: grayscale(100%); height: auto; mix-blend-mode: normal; width: 100%; max-width: 100%; } .works-img1::before { background-repeat: no-repeat; background-size: 285px auto; } .works-img1:hover { filter: grayscale(0%); mix-blend-mode: normal; scale: 1; } @media screen and (max-width: 760px) { .works-img1 { height: auto; width: 100%; } } /* works-box5: 2026.8.12 システム開発 補助金マッチングAIエ */ .works-box5 { align-content: flex-start; align-items: flex-start; margin: 0px; width: 100%; max-width: 100%; } @media screen and (max-width: 760px) { .works-box5 { margin: 0px; } } /* works-box6: 2026.8.12 システム開発 */ .works-box6 { place-content: center flex-start; align-items: center; flex-flow: row; margin: 20px 0px 7px; padding: 0px; width: 181px; max-width: 100%; } /* works-txt3: 2026.8.12 */ .works-txt3 { color: rgb(102, 102, 102); font-family: Poppins, sans-serif; font-size: 10px; font-weight: 400; height: 15px; margin: 0px 10px 0px 0px; max-width: calc(100% - 10px); } @media screen and (max-width: 760px) { .works-txt3 { font-size: 12px; } } /* works-txt4: システム開発 */ .works-txt4 { background: rgb(245, 245, 245); color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 400; height: 15px; margin: 0px; padding: 10px; max-width: 100%; } @media screen and (max-width: 760px) { .works-txt4 { font-size: 10px; } } /* works-txt5: 補助金マッチングAIエージェント開発 */ .works-txt5 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; margin: 0px 0px 10px; text-align: left; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .works-txt5 { font-size: 15px; } } @media screen and (max-width: 540px) { .works-txt5 { color: rgb(0, 0, 0); font-size: 15px; } } /* works-link2: 実績一覧へ chevron_right */ .works-link2 { place-content: center; 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: 200px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; flex-flow: row; padding: 13px; width: 250px; max-width: 100%; --g-color-0: #f5f5f5; --g-position-0: 0%; --g-color-1: #ffffff; --g-position-1: 100%; --g-color-2: #ffffff; --g-position-2: 100%; --g-color-3: #ffffff; --g-position-3: 100%; --g-color-4: #ffffff; --g-position-4: 100%; --g-color-5: #ffffff; --g-position-5: 100%; --g-color-6: #ffffff; --g-position-6: 100%; --g-color-7: #ffffff; --g-position-7: 100%; --g-color-8: #ffffff; --g-position-8: 100%; --g-color-9: #ffffff; --g-position-9: 100%; --g-color-10: #ffffff; --g-position-10: 100%; --g-color-11: #ffffff; --g-position-11: 100%; --g-angle: 90deg; } .works-link2:hover { box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset; transition-duration: 500ms; transition-timing-function: ease; } /* works-txt6: 実績一覧へ */ .works-txt6 { color: rgb(51, 51, 51); font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 400; height: auto; line-height: 1.4; text-align: center; width: 185px; max-width: 100%; justify-content: center; } /* works-icon1: chevron_right */ .works-icon1 { color: rgb(51, 51, 51); font-size: 20px; margin: 0px; max-width: 100%; } /* company-sec1: Company 会社概要 会社名 株式会社オタッキーA */ .company-sec1 { place-content: flex-end flex-start; align-items: flex-end; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; margin: 0px; padding: 150px 40px; width: 100%; z-index: -3; --gh-company-sec1: 0px; --gv-company-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .company-sec1 { height: auto; padding: 150px 40px; --gh-company-sec1: 0px; --gv-company-sec1: 0px; } } @media screen and (max-width: 540px) { .company-sec1 { flex: 0 0 auto; height: auto; margin: 0px; padding: 100px 40px; width: 100%; --gh-company-sec1: 0px; --gv-company-sec1: 0px; } } .company-inner { padding: 150px 40px; width: calc(100% - (var(--gh-company-sec1) * 0)); height: auto; flex-flow: column; place-content: flex-end flex-start; align-items: flex-end; gap: 0px; --gh-company-sec1: 0px; --gv-company-sec1: 0px; max-width: calc(100% - (var(--gh-company-sec1) * 0)); } @media screen and (max-width: 1280px) { .company-inner { padding: 150px 40px; height: auto; flex-direction: column; --gh-company-sec1: 0px; --gv-company-sec1: 0px; } } @media screen and (max-width: 540px) { .company-inner { padding: 100px 40px; width: 100%; height: auto; flex-direction: column; --gh-company-sec1: 0px; --gv-company-sec1: 0px; } } /* company-box1: Company 会社概要 会社名 株式会社オタッキーA */ .company-box1 { place-content: center; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; gap: 100px; margin: 0px; padding: 0px; width: calc(100% - (var(--gh-company-sec1) * 0)); z-index: 3; --gh-company-box1: 0px; --gv-company-box1: 100px; max-width: calc(100% - (var(--gh-company-sec1) * 0)); } @media screen and (max-width: 1280px) { .company-box1 { margin: 0px; --gh-company-box1: 0px; --gv-company-box1: 100px; } } @media screen and (max-width: 540px) { .company-box1 { gap: 32px; --gh-company-box1: 0px; --gv-company-box1: 32px; } } /* company-box2: Company 会社概要 */ .company-box2 { place-content: flex-start; align-items: flex-start; flex-flow: wrap; gap: 40px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: 1280px; --gh-company-box2: 40px; --gv-company-box2: 40px; max-width: 100%; } html.js .company-box2:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-company-box2: 40px; --gv-company-box2: 40px; } .company-box2.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .company-box2 { gap: 24px; --gh-company-box2: 24px; --gv-company-box2: 24px; } } /* company-box3: Company 会社概要 */ .company-box3 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; height: auto; padding: 0px; width: 317px; --gh-company-box3: 0px; --gv-company-box3: 0px; max-width: 100%; } /* company-txt1: Company */ .company-txt1 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .company-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .company-txt1 { font-size: 32px; } } /* company-txt2: 会社概要 */ .company-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .company-txt2 { font-size: 11px; } } /* company-list1: 会社名 株式会社オタッキーAI 事業内容 SaaS開発 */ .company-list1 { place-content: center; align-items: center; gap: 0px; padding: 0px; width: calc(75% - (var(--gh-company-box1) * 0.24999999999999994)); --gh-company-list1: 0px; --gv-company-list1: 0px; max-width: calc(75% - (var(--gh-company-box1) * 0.24999999999999994)); } html.js .company-list1:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: ease-in-out; translate: 0px 20px; --gh-company-list1: 0px; --gv-company-list1: 0px; } .company-list1.in-active { transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: ease-in-out; } @media screen and (max-width: 760px) { .company-list1 { flex: 0 0 auto; width: calc(100% - (var(--gh-company-box1) * 0)); --gh-company-list1: 0px; --gv-company-list1: 0px; max-width: calc(100% - (var(--gh-company-box1) * 0)); } } /* company-item1: 会社名 株式会社オタッキーAI */ .company-item1 { place-content: center flex-start; align-items: center; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(154, 154, 154); flex: 0 0 auto; flex-flow: row; gap: 180px; padding: 32px 0px 32px 10px; width: calc(100% - (var(--gh-company-list1) * 0)); --gh-company-item1: 180px; --gv-company-item1: 0px; max-width: calc(100% - (var(--gh-company-list1) * 0)); } .company-item1:hover { opacity: 1; --gh-company-item1: 180px; --gv-company-item1: 0px; } @media screen and (max-width: 1280px) { .company-item1 { gap: 100px; --gh-company-item1: 100px; --gv-company-item1: 0px; } } @media screen and (max-width: 760px) { .company-item1 { gap: 70px; --gh-company-item1: 70px; --gv-company-item1: 0px; } } @media screen and (max-width: 540px) { .company-item1 { gap: 40px; padding: 24px 0px; --gh-company-item1: 40px; --gv-company-item1: 0px; } } /* company-txt3: 会社名 */ .company-txt3 { color: rgb(0, 0, 0); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: left; width: 90px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .company-txt3 { flex: 0 0 auto; width: 60px; max-width: 100%; } } @media screen and (max-width: 540px) { .company-txt3 { flex: 0 0 auto; font-size: 11px; width: 64px; max-width: 100%; } } /* company-txt4: 株式会社オタッキーAI */ .company-txt4 { color: rgb(34, 34, 34); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 400; height: auto; line-height: 1.75; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .company-txt4 { font-size: 14px; } } /* company-pic1: */ .company-pic1 { place-content: center flex-end; align-items: center; inset: 0px; flex-flow: column; height: auto; opacity: 0.3; padding: 0px; position: absolute; width: auto; z-index: 1; max-width: 100%; } .company-pic1::before { background-position: right center; } @media screen and (max-width: 540px) { .company-pic1::before { background-position: right bottom; } } @media screen and (max-width: 540px) { .company-pic1 { inset: 0px; } } /* contact-sec1: Contact お問い合わせ まずはお気軽にお問い合わせ */ .contact-sec1 { place-content: center flex-start; align-items: center; background: rgb(255, 255, 255); flex-flow: column; gap: 0px; height: auto; margin: 0px; padding: 150px 40px; width: 100%; z-index: -3; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; max-width: 100%; } @media screen and (max-width: 1280px) { .contact-sec1 { height: auto; padding: 150px 40px; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; } } @media screen and (max-width: 760px) { .contact-sec1 { height: 1285px; margin: 0px; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; width: 100%; max-width: 100%; } } @media screen and (max-width: 540px) { .contact-sec1 { height: auto; padding: 100px 40px; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; width: 100%; max-width: 100%; } } .contact-inner { padding: 150px 40px; width: calc(100% - (var(--gh-contact-sec1) * 0)); height: auto; flex-flow: column; place-content: center flex-start; align-items: center; gap: 0px; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; max-width: calc(100% - (var(--gh-contact-sec1) * 0)); } @media screen and (max-width: 1280px) { .contact-inner { padding: 150px 40px; height: auto; flex-direction: column; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; } } @media screen and (max-width: 760px) { .contact-inner { height: 1285px; flex-direction: column; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; width: calc(100% - (var(--gh-contact-sec1) * 0)); max-width: calc(100% - (var(--gh-contact-sec1) * 0)); } } @media screen and (max-width: 540px) { .contact-inner { padding: 100px 40px; height: auto; flex-direction: column; --gh-contact-sec1: 0px; --gv-contact-sec1: 0px; width: calc(100% - (var(--gh-contact-sec1) * 0)); max-width: calc(100% - (var(--gh-contact-sec1) * 0)); } } /* contact-box1: Contact お問い合わせ まずはお気軽にお問い合わせ */ .contact-box1 { place-content: center; align-items: center; flex-flow: column; gap: 64px; margin: 0px; padding: 0px; width: 1280px; z-index: 3; --gh-contact-box1: 0px; --gv-contact-box1: 64px; max-width: 100%; } @media screen and (max-width: 1280px) { .contact-box1 { margin: 0px; --gh-contact-box1: 0px; --gv-contact-box1: 64px; } } @media screen and (max-width: 760px) { .contact-box1 { margin: 0px 0px 120px; --gh-contact-box1: 0px; --gv-contact-box1: 64px; max-width: 100%; } } @media screen and (max-width: 540px) { .contact-box1 { gap: 32px; margin: 0px; --gh-contact-box1: 0px; --gv-contact-box1: 32px; max-width: 100%; } } /* contact-box2: Contact お問い合わせ まずはお気軽にお問い合わせ */ .contact-box2 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 40px; padding: 0px; transition-delay: 10ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); width: calc(100% - (var(--gh-contact-box1) * 0)); --gh-contact-box2: 40px; --gv-contact-box2: 40px; max-width: calc(100% - (var(--gh-contact-box1) * 0)); } html.js .contact-box2:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; translate: 0px 20px; --gh-contact-box2: 40px; --gv-contact-box2: 40px; } .contact-box2.in-active { transition-delay: 500ms; transition-duration: 500ms; } @media screen and (max-width: 760px) { .contact-box2 { gap: 24px; --gh-contact-box2: 24px; --gv-contact-box2: 24px; } } /* contact-box3: Contact お問い合わせ */ .contact-box3 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 0px; padding: 0px; width: 317px; --gh-contact-box3: 0px; --gv-contact-box3: 0px; max-width: 100%; } /* contact-txt1: Contact */ .contact-txt1 { color: rgb(34, 34, 34); font-family: Poppins, sans-serif; font-feature-settings: "palt"; font-size: 40px; font-style: normal; font-weight: 400; height: auto; letter-spacing: 0em; line-height: 1.4; margin: 0px 0px -5px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 760px) { .contact-txt1 { font-size: 48px; } } @media screen and (max-width: 540px) { .contact-txt1 { font-size: 32px; } } /* contact-txt2: お問い合わせ */ .contact-txt2 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.4; text-align: center; width: auto; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .contact-txt2 { font-size: 11px; } } /* contact-txt3: まずはお気軽にお問い合わせください。ご相談・ご質問・情報収集 */ .contact-txt3 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: normal; font-size: 10px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 2; text-align: left; width: 646px; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .contact-txt3 { font-size: 14px; } } /* contact-box4: */ .contact-box4 { place-content: flex-start; align-items: flex-start; flex: 0 0 auto; flex-wrap: nowrap; gap: 15px; margin: 0px; padding: 0px; width: 703px; --gh-contact-box4: 0px; --gv-contact-box4: 15px; max-width: 100%; } @media screen and (max-width: 760px) { .contact-box4 { flex: 0 0 auto; margin: 0px; width: calc(100% - (var(--gh-contact-box2) * 0)); --gh-contact-box4: 0px; --gv-contact-box4: 15px; max-width: calc(100% - (var(--gh-contact-box2) * 0)); } } /* contact-box5: 任意 会社名 必須 氏名 必須 メールアドレ */ .contact-box5 { place-content: center flex-start; align-items: center; background: transparent; border-width: 0px; border-style: solid; border-color: rgba(159, 159, 159, 0); flex: 0 0 auto; flex-flow: column; gap: 64px; height: auto; margin: 0px; padding: 0px; width: 1280px; --gh-contact-box5: 0px; --gv-contact-box5: 64px; max-width: 100%; } @media screen and (max-width: 760px) { .contact-box5 { flex-flow: column; --gh-contact-box5: 0px; --gv-contact-box5: 64px; } } @media screen and (max-width: 540px) { .contact-box5 { gap: 32px; --gh-contact-box5: 0px; --gv-contact-box5: 32px; } } /* contact-form1: 任意 会社名 必須 氏名 必須 メールアドレ */ .contact-form1 { place-content: center; align-items: center; background: transparent; border-radius: 0px; flex: 0 0 auto; gap: 32px; margin: 0px; opacity: 1; padding: 0px; width: 880px; --gh-contact-form1: 0px; --gv-contact-form1: 32px; max-width: 100%; } html.js .contact-form1:not(.in) { opacity: 0; transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); translate: 0px 20px; --gh-contact-form1: 0px; --gv-contact-form1: 32px; } .contact-form1.in-active { transition-delay: 500ms; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } @media screen and (max-width: 540px) { .contact-form1 { gap: 24px; --gh-contact-form1: 0px; --gv-contact-form1: 24px; } } /* contact-label1: 任意 会社名 */ .contact-label1 { align-content: flex-start; align-items: flex-start; background: transparent; border-width: 0px; border-style: solid; border-color: rgb(159, 159, 159); border-radius: 0px; flex-flow: row; gap: 32px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-label1: 32px; --gv-contact-label1: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } @media screen and (max-width: 760px) { .contact-label1 { flex-flow: column; gap: 12px; --gh-contact-label1: 0px; --gv-contact-label1: 12px; } } @media screen and (max-width: 540px) { .contact-label1 { gap: 8px; --gh-contact-label1: 8px; --gv-contact-label1: 0px; } } /* contact-box6: 任意 会社名 */ .contact-box6 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 10px; margin: 0px; padding: 0px; width: calc(33.33% - (var(--gh-contact-label1) * 0.6667)); --gh-contact-box6: 10px; --gv-contact-box6: 10px; max-width: calc(33.33% - (var(--gh-contact-label1) * 0.6667)); } @media screen and (max-width: 760px) { .contact-box6 { flex: 0 0 auto; width: auto; --gh-contact-box6: 10px; --gv-contact-box6: 10px; max-width: 100%; } } /* contact-box7: 任意 */ .contact-box7 { place-content: flex-start; align-items: flex-start; background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(159, 159, 159); border-radius: 5px; flex-flow: column; gap: 16px; margin: 0px; padding: 2px 12px; --gh-contact-box7: 0px; --gv-contact-box7: 16px; max-width: 100%; } @media screen and (max-width: 760px) { .contact-box7 { flex-direction: column; --gh-contact-box7: 0px; --gv-contact-box7: 16px; } } @media screen and (max-width: 540px) { .contact-box7 { gap: 16px; --gh-contact-box7: 0px; --gv-contact-box7: 16px; } } /* contact-txt4: 任意 */ .contact-txt4 { color: rgb(0, 0, 0); font-family: Poppins, 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) { .contact-txt4 { font-size: 11px; } } /* contact-txt5: 会社名 */ .contact-txt5 { border-radius: 0px; color: rgb(34, 34, 34); font-family: Poppins, 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) { .contact-txt5 { font-size: 14px; } } /* contact-input1: */ .contact-input1 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(102, 102, 102); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; 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: auto; max-width: 100%; } .contact-input1:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .contact-input1::-webkit-input-placeholder { color: rgb(204, 204, 204); } @media screen and (max-width: 760px) { .contact-input1 { flex: 0 0 auto; width: calc(100% - (var(--gh-contact-label1) * 0)); max-width: calc(100% - (var(--gh-contact-label1) * 0)); } } /* contact-label2: 必須 氏名 */ .contact-label2 { align-content: flex-start; align-items: flex-start; background: transparent; border-width: 0px; border-style: solid; border-color: rgb(159, 159, 159); border-radius: 0px; flex-flow: row; gap: 32px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-label2: 32px; --gv-contact-label2: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } @media screen and (max-width: 760px) { .contact-label2 { flex-flow: column; gap: 12px; --gh-contact-label2: 0px; --gv-contact-label2: 12px; } } @media screen and (max-width: 540px) { .contact-label2 { gap: 8px; --gh-contact-label2: 8px; --gv-contact-label2: 0px; } } /* contact-box8: 必須 氏名 */ .contact-box8 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 10px; margin: 0px; padding: 0px; width: calc(33.33% - (var(--gh-contact-label2) * 0.6667)); --gh-contact-box8: 10px; --gv-contact-box8: 10px; max-width: calc(33.33% - (var(--gh-contact-label2) * 0.6667)); } @media screen and (max-width: 760px) { .contact-box8 { flex: 0 0 auto; width: auto; --gh-contact-box8: 10px; --gv-contact-box8: 10px; max-width: 100%; } } /* contact-box9: 必須 */ .contact-box9 { place-content: flex-start; align-items: flex-start; background: rgb(159, 160, 160); border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 5px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-contact-box9: 0px; --gv-contact-box9: 16px; } @media screen and (max-width: 760px) { .contact-box9 { flex-direction: column; --gh-contact-box9: 0px; --gv-contact-box9: 16px; } } @media screen and (max-width: 540px) { .contact-box9 { gap: 16px; --gh-contact-box9: 0px; --gv-contact-box9: 16px; } } /* contact-txt6: 必須 */ .contact-txt6 { color: rgb(255, 255, 255); font-family: Poppins, 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) { .contact-txt6 { font-size: 11px; } } /* contact-txt7: 氏名 */ .contact-txt7 { border-radius: 0px; color: rgb(34, 34, 34); margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } /* contact-input2: */ .contact-input2 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(102, 102, 102); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; 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: auto; max-width: 100%; } .contact-input2:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .contact-input2::-webkit-input-placeholder { color: rgb(204, 204, 204); } @media screen and (max-width: 760px) { .contact-input2 { flex: 0 0 auto; width: calc(100% - (var(--gh-contact-label2) * 0)); max-width: calc(100% - (var(--gh-contact-label2) * 0)); } } /* contact-label3: 必須 メールアドレス */ .contact-label3 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; flex-flow: row; gap: 32px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-label3: 32px; --gv-contact-label3: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } @media screen and (max-width: 760px) { .contact-label3 { flex-flow: column; gap: 12px; --gh-contact-label3: 0px; --gv-contact-label3: 12px; } } @media screen and (max-width: 540px) { .contact-label3 { gap: 8px; --gh-contact-label3: 8px; --gv-contact-label3: 0px; } } /* contact-box10: 必須 メールアドレス */ .contact-box10 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 10px; margin: 0px; padding: 0px; width: calc(33.33% - (var(--gh-contact-label3) * 0.6667)); --gh-contact-box10: 10px; --gv-contact-box10: 10px; max-width: calc(33.33% - (var(--gh-contact-label3) * 0.6667)); } @media screen and (max-width: 760px) { .contact-box10 { flex: 0 0 auto; width: auto; --gh-contact-box10: 10px; --gv-contact-box10: 10px; max-width: 100%; } } /* contact-box11: 必須 */ .contact-box11 { place-content: flex-start; align-items: flex-start; background: rgb(159, 160, 160); border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 5px; flex-flow: column; gap: 16px; padding: 2px 12px; --gh-contact-box11: 0px; --gv-contact-box11: 16px; } @media screen and (max-width: 760px) { .contact-box11 { flex-direction: column; --gh-contact-box11: 0px; --gv-contact-box11: 16px; } } @media screen and (max-width: 540px) { .contact-box11 { gap: 16px; --gh-contact-box11: 0px; --gv-contact-box11: 16px; } } /* contact-txt8: 必須 */ .contact-txt8 { color: rgb(255, 255, 255); font-family: Poppins, 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) { .contact-txt8 { font-size: 11px; } } /* contact-txt9: メールアドレス */ .contact-txt9 { border-radius: 0px; color: rgb(34, 34, 34); margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } /* contact-input3: */ .contact-input3 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(102, 102, 102); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 1 1 0%; height: 54px; justify-content: center; margin: 0px; opacity: 1; padding: 0px 16px; text-align: left; width: auto; max-width: 100%; } .contact-input3:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .contact-input3::-webkit-input-placeholder { color: rgb(204, 204, 204); } @media screen and (max-width: 760px) { .contact-input3 { flex: 0 0 auto; width: calc(100% - (var(--gh-contact-label3) * 0)); max-width: calc(100% - (var(--gh-contact-label3) * 0)); } } /* contact-label4: 必須 お問い合わせ内容 */ .contact-label4 { align-content: flex-start; align-items: flex-start; background: transparent; border-radius: 0px; flex-flow: row; gap: 32px; height: auto; margin: 0px; opacity: 1; overflow: visible; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-label4: 32px; --gv-contact-label4: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } @media screen and (max-width: 760px) { .contact-label4 { flex-flow: column; gap: 12px; --gh-contact-label4: 0px; --gv-contact-label4: 12px; } } @media screen and (max-width: 540px) { .contact-label4 { gap: 8px; --gh-contact-label4: 8px; --gv-contact-label4: 0px; } } /* contact-box12: 必須 お問い合わせ内容 */ .contact-box12 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: wrap; gap: 10px; margin: 0px; padding: 0px; width: calc(33.33% - (var(--gh-contact-label4) * 0.6667)); --gh-contact-box12: 10px; --gv-contact-box12: 10px; max-width: calc(33.33% - (var(--gh-contact-label4) * 0.6667)); } @media screen and (max-width: 760px) { .contact-box12 { flex: 0 0 auto; width: auto; --gh-contact-box12: 10px; --gv-contact-box12: 10px; max-width: 100%; } } /* contact-box13: 必須 */ .contact-box13 { place-content: flex-start; align-items: flex-start; background: rgb(159, 160, 160); border-width: 0px; border-style: solid; border-color: rgb(34, 34, 34); border-radius: 5px; flex-flow: column; gap: 16px; height: auto; padding: 2px 12px; --gh-contact-box13: 0px; --gv-contact-box13: 16px; max-width: 100%; } @media screen and (max-width: 760px) { .contact-box13 { flex-direction: column; --gh-contact-box13: 0px; --gv-contact-box13: 16px; } } @media screen and (max-width: 540px) { .contact-box13 { gap: 16px; --gh-contact-box13: 0px; --gv-contact-box13: 16px; } } /* contact-txt10: 必須 */ .contact-txt10 { color: rgb(255, 255, 255); font-family: Poppins, 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) { .contact-txt10 { font-size: 11px; } } /* contact-txt11: お問い合わせ内容 */ .contact-txt11 { border-radius: 0px; color: rgb(34, 34, 34); margin: 0px; opacity: 1; padding: 0px; text-align: left; max-width: 100%; justify-content: flex-start; } /* contact-textarea1: */ .contact-textarea1 { background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(102, 102, 102); border-radius: 4px; box-shadow: none; color: rgb(34, 34, 34); flex: 1 1 0%; font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; 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: auto; max-width: 100%; } .contact-textarea1:focus { outline: none; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112); } .contact-textarea1::-webkit-input-placeholder { color: rgb(204, 204, 204); } @media screen and (max-width: 760px) { .contact-textarea1 { flex: 0 0 auto; height: 200px; width: calc(100% - (var(--gh-contact-label4) * 0)); max-width: calc(100% - (var(--gh-contact-label4) * 0)); } } /* contact-box14: プライバシーポリシーを開く */ .contact-box14 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: row; gap: 12px; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-box14: 12px; --gv-contact-box14: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } @media screen and (max-width: 540px) { .contact-box14 { gap: 24px; --gh-contact-box14: 24px; --gv-contact-box14: 0px; } } /* contact-link1: プライバシーポリシーを開く */ .contact-link1 { place-content: center flex-start; align-items: center; flex-flow: row; gap: 12px; padding: 0px; --gh-contact-link1: 12px; --gv-contact-link1: 0px; } .contact-link1:hover { transition-duration: 2000ms; transition-timing-function: ease-in-out; --gh-contact-link1: 12px; --gv-contact-link1: 0px; } @media screen and (max-width: 540px) { .contact-link1 { gap: 10px; --gh-contact-link1: 10px; --gv-contact-link1: 0px; } } /* contact-txt12: プライバシーポリシーを開く */ .contact-txt12 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.75; text-align: left; text-decoration: underline; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .contact-txt12 { font-size: 14px; } } /* contact-icon1: */ .contact-icon1 { color: rgb(34, 34, 34); font-size: 12px; } /* contact-label5: プライバシーポリシーに同意する */ .contact-label5 { place-content: center; align-items: center; flex: 0 0 auto; flex-direction: row; gap: 12px; height: auto; margin: 0px; padding: 0px; width: calc(100% - (var(--gh-contact-form1) * 0)); --gh-contact-label5: 12px; --gv-contact-label5: 0px; max-width: calc(100% - (var(--gh-contact-form1) * 0)); } /* contact-input4: */ .contact-input4 { flex: 0 0 auto; height: 16px; margin: 5px 0px 0px; padding: 0px; width: 16px; max-width: 100%; } /* contact-txt13: プライバシーポリシーに同意する */ .contact-txt13 { color: rgb(34, 34, 34); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.75; text-align: left; text-decoration: none; width: auto; max-width: 100%; justify-content: flex-start; } @media screen and (max-width: 540px) { .contact-txt13 { font-size: 14px; } } /* contact-btn1: 送信する chevron_right */ .contact-btn1 { align-content: center; align-items: center; background: linear-gradient(90deg, #f5f5f5, #ffffff); border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.07) 2px 2px 5px 0px; color: rgb(34, 34, 34); flex-flow: row; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0em; line-height: 1.4; margin: 0px; opacity: 1; padding: 12px; text-align: left; width: 247px; max-width: 100%; } .contact-btn1:hover { background: linear-gradient(90deg, #f5f5f5, #ffffff); box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset; translate: 0px; } /* contact-txt14: 送信する */ .contact-txt14 { color: rgb(0, 0, 0); font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt"; font-size: 13px; font-weight: 400; height: auto; line-height: 1.75; text-align: center; width: 189px; max-width: 100%; justify-content: center; } @media screen and (max-width: 540px) { .contact-txt14 { font-size: 14px; } } /* contact-icon2: chevron_right */ .contact-icon2 { color: rgb(51, 51, 51); font-size: 20px; margin: 0px; max-width: 100%; } /* contact-pic1: */ .contact-pic1 { inset: 53px 0px 0px auto; display: flex; height: 1102px; padding: 0px 40px; position: absolute; width: 773px; z-index: 1; max-width: 100%; } .contact-pic1::before { background-position: right center; background-repeat: no-repeat; } @media screen and (max-width: 1280px) { .contact-pic1 { display: flex; } } @media screen and (max-width: 760px) { .contact-pic1::before { background-position: right center; } } @media screen and (max-width: 760px) { .contact-pic1 { inset: 117px -123px auto auto; display: flex; height: 935px; width: 520px; max-width: 100%; } } @media screen and (max-width: 540px) { .contact-pic1::before { background-position: right center; } } @media screen and (max-width: 540px) { .contact-pic1 { inset: auto -555px 140px -897px; display: none; height: 1266px; width: auto; max-width: 100%; } } @media screen and (max-width: 360px) { .contact-pic1 { display: none; } } /* 10秒で1回転する丸（元サイトの #loop と同じ） */ .spin { animation: spin 10s linear infinite; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ========================================================= 元サイト（STUDIO）の表示崩れを直した箇所 ========================================================= */ /* 修正1: お知らせのタイトルが長いと、1024px 前後では右の「>」に重なり、840px 以下では右にはみ出して切れていた。 タイトル行を「>」の手前までの幅に広げ、その中で折り返す */ .news-box5 { flex: 1 1 0%; width: auto; max-width: none; min-width: 0; margin-right: 16px; } .news-txt5 { flex: 1 1 0%; min-width: 0; } /* 修正2: スマホ幅（540px 以下）では日付・カテゴリの下にタイトルを置き、画面幅いっぱいで折り返す */ @media screen and (max-width: 540px) { .news-box5 { flex-wrap: wrap; row-gap: 10px; } .news-txt5 { flex: 1 1 100%; } } /* 修正3: お知らせ欄の高さが 720px 固定で、スマホ幅では「お知らせ一覧へ」ボタンが次の「Service」見出しに重なっていた。 760px 以下では中身に合わせて伸びるようにする（720px より低くはしない） */ @media screen and (max-width: 760px) { .news-inner { height: auto; min-height: 720px; } }