@charset "UTF-8"; /* Noto Sans JP は Google Fonts Early Access (fonts.gstatic.com/ea/...) が廃止 済みで 404 + CORS エラーになるため、style.css 内の @font-face 直リンクは撤去。 代わりに index.html / thanks.html の で https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap を 経由で読み込む。 */ /*============================================================ common ==============================================================*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ::selection { background: #FFC370; } ::-moz-selection { background: #FFC370; } html { font-size: 62.5%; } body { font-family: "ryo-gothic-plusn", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; font-size: 1.6rem; line-height: 1.7; } img { display: block; width: auto; height: auto; max-width: 100%; margin: auto; } input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; } h1 { margin: 0; } ul { list-style: none; } .cf:after { content: ""; display: block; clear: both; } .center { text-align: center; } .pc { display: inherit; } .notepc { display: none; } .sp { display: none; } .inner { max-width: 1000px; margin: auto; padding: 0 20px; } header { position: fixed; top: 0; width: 100%; -webkit-transition: .6s ease-in-out all; transition: .6s ease-in-out all; background: #fff; z-index: 100; } header ul li{ margin: 0; } a:visited { text-decoration: none; } a { color: #fff; text-decoration: none; } .scrollin_main{ opacity: 0; -webkit-transition: .8s ease-out all; transition: .8s ease-out all } .scrollin { opacity: 0; transform: translateY(80px); -webkit-transition: 1s cubic-bezier(0, 0, 0.38, 1.1) all; transition: 1s cubic-bezier(0, 0, 0.38, 1.1) all } .fadeIn { opacity: 1; transform: translateY(0); } .nav_flex { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; } header nav { display: flex; justify-content: space-between; align-items: center; } .header-logo { margin-left: 80px; } .header_link_list { display: flex; justify-content: space-between; align-items: center; } .cta { display: block; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); box-shadow: 0px 5px 10px rgba(40,65,160,0.2); color: #fff; -mos-transition: .5s ease-out all; -webkit-transition: .5s ease-out all; transition: .5s ease-out all; } .cta:hover { box-shadow: 0px 5px 15px rgba(40,65,160,0.5); } .nav_flex{ height: 80px; box-shadow: 0 0 5px rgba(0,0,0,0.05); } .flex{ display: flex; flex-wrap:wrap; } .logo_flex { display: flex; justify-content: flex-start; align-items: center; } .header-address{ font-size: 12px; color: #333; margin: 10px 0 0 10px; } /*============================================================ body ==============================================================*/ .main_over{ position: relative; overflow: hidden; } #main{ margin-top: 53px; position: relative; height: 634px; background: url(../img/mv_bg.png) center center no-repeat; } h1{ margin: 0 auto 35px; font-size: 5rem; line-height: 1.4; text-shadow: 0 3px 6px rgba(0,0,0,0.16); color: #fff; letter-spacing: 3px; } h1+p{ margin: 0 auto 44px; font-size: 2rem; line-height: 1.8; text-shadow: 0 3px 6px rgba(0,0,0,0.16); color: #fff; } .main_wrap{ padding:136px 0 157px; } .main_cta{ max-width: 411px; margin-left: 0; padding: 15px 75px; font-size: 2.4rem; font-weight: bold; border-radius: 45px; text-align: center; line-height: 1; letter-spacing: 2px; } .mv_img{ position: absolute; top: 0; right: -130px; z-index: 1; } #achievement{ margin: 200px auto 102px; } #achievement .h2_text{ position: relative; } #achievement .h2_text::before{ content: ""; position: absolute; top: -120px; left: 0; right: 0; width: 1px; height: 78px; margin: auto; background: linear-gradient(180deg, rgba(253,208,0,1) 0%, rgba(241,74,0,1) 100%); } .h2_ttl{ margin-bottom: 60px; font-size: 3.2rem; text-align: center; line-height: 1.7; letter-spacing: 1px; } .h2_text{ margin: 8px auto 30px; font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: center; color: #F14A00; letter-spacing: 3px; } .achievement_txt{ margin-bottom: 87px; text-align: center; } .client_text{ font-size: 14px; margin: 40px 0px 40px 40px; } .client_text li{ text-align: center; } .industry_text{ margin-left: 40px; text-align: center; color: #F14A00; } .industry_list{ margin: 0px 40px; text-align: center; } /* #case-studies: 事例カード（リンクなし表示のみ） */ #case-studies{ padding: 72px 0; background: #faf8f3; } /* スワイプ可能を示すヒント */ .case-hint{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; padding: 8px 16px; background: rgba(241,74,0,0.06); color: #F14A00; font-size: 1.3rem; font-weight: bold; border-radius: 20px; width: fit-content; } .case-hint__icon{ font-size: 1.8rem; letter-spacing: -2px; animation: caseHintPulse 1.6s ease-in-out infinite; } @keyframes caseHintPulse{ 0%, 100%{ transform: translateX(0); opacity: .6; } 50%{ transform: translateX(4px); opacity: 1; } } /* キャリッジ + ナビボタン用ラッパ */ .case-carousel{ position: relative; } /* 端のフェード（次/前にコンテンツがあることを示唆） */ .case-carousel::before, .case-carousel::after{ content: ""; position: absolute; top: 10px; bottom: 30px; width: 40px; pointer-events: none; z-index: 2; } .case-carousel::before{ left: 0; background: linear-gradient(90deg, #faf8f3 0%, rgba(250,248,243,0) 100%); } .case-carousel::after{ right: 0; background: linear-gradient(-90deg, #faf8f3 0%, rgba(250,248,243,0) 100%); } .case-nav{ position: absolute; top: calc(50% - 14px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #F14A00; border: 1px solid #eee5d4; box-shadow: 0 4px 14px rgba(0,0,0,0.12); font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; transition: background .2s, color .2s, transform .15s; } .case-nav:hover{ background: #F14A00; color: #fff; } .case-nav:active{ transform: translateY(-50%) scale(0.95); } .case-nav--prev{ left: -8px; } .case-nav--next{ right: -8px; } /* 横スクロールカルーセル: 1カードずつ snap で見せる単列レイアウト */ .case-grid{ display: flex !important; flex-wrap: nowrap !important; gap: 24px; margin: 20px -20px 0; padding: 10px 20px 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #F14A00 transparent; list-style: none; } .case-grid::-webkit-scrollbar{ height: 8px; } .case-grid::-webkit-scrollbar-track{ background: rgba(0,0,0,0.05); border-radius: 4px; } .case-grid::-webkit-scrollbar-thumb{ background: #F14A00; border-radius: 4px; } .case-card{ flex: 0 0 380px; max-width: 380px; scroll-snap-align: start; background: #fff; border: 1px solid #eee5d4; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; list-style: none; position: relative; } .case-card__cover{ position: relative; width: 100%; aspect-ratio: 488 / 717; background: #f4f6fc; overflow: hidden; } .case-card__cover img{ width: 100%; height: 100%; object-fit: contain; display: block; } .case-card__body{ position: relative; background: #fff; padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; z-index: 1; } .case-card__name{ font-size: 1.8rem; font-weight: bold; color: #222; line-height: 1.4; margin: 0; } .case-card__client{ font-size: 1.3rem; color: #666; } .case-card__desc{ font-size: 1.4rem; line-height: 1.6; color: #333; flex: 1; } .case-card__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .case-card__tag{ display: inline-block; padding: 4px 10px; background: rgba(241,74,0,0.08); color: #F14A00; font-size: 1.1rem; border-radius: 12px; font-weight: 500; } /* #strength: ONLY ONE + about 統合セクション */ #strength{ padding: 72px 0; background: #faf8f3; } .strength_lead{ text-align: center; margin: 0 auto 60px; max-width: 880px; line-height: 1.9; } .strength_lead .accent-mark{ font-weight: bold; } .strength_grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .strength_box{ background: #fff; padding: 0 0 28px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 16px; overflow: hidden; } .strength_box__cover{ width: 100%; aspect-ratio: 16 / 10; background: #faf6ec; overflow: hidden; } .strength_box__cover img{ width: 100%; height: 100%; object-fit: cover; display: block; } .strength_box__title{ font-size: 1.7rem; font-weight: bold; color: #222; line-height: 1.4; padding: 0 16px; margin-top: 8px; } .strength_box__text{ font-size: 1.4rem; line-height: 1.7; color: #333; text-align: left; padding: 0 20px; } /* ========================================= #dev-process (Quality Assurance) 再設計 ========================================= */ .qa-section{ padding: 80px 0; background: #fff; } .qa-lead{ text-align: center; font-size: 1.6rem; margin: 0 auto 50px; max-width: 760px; line-height: 1.8; } .qa-lead strong{ color: #F14A00; } /* お悩みアイコンカード */ .qa-pains{ background: #faf8f3; border-radius: 12px; padding: 32px 32px 28px; margin-bottom: 60px; border: 1px solid #eee5d4; } .qa-pains__head{ text-align: center; font-size: 1.7rem; font-weight: bold; color: #333; margin: 0 0 20px; } .qa-pains__grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; } .qa-pain{ background: #fff; border-radius: 8px; padding: 20px 12px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .qa-pain__icon{ font-size: 2.4rem; line-height: 1; } .qa-pain p{ font-size: 1.3rem; line-height: 1.5; margin: 0; color: #333; } .qa-pains__note{ margin: 20px 0 0; font-size: 1.4rem; line-height: 1.7; color: #333; text-align: center; } .qa-pains__note strong{ color: #F14A00; } /* Before / After 比較 */ .qa-compare{ display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 16px; margin-bottom: 60px; } .qa-compare__col{ background: #faf8f3; border-radius: 12px; padding: 24px 22px; border: 1px solid #eee5d4; } .qa-compare__col--before{ border-top: 3px solid #c4bdb0; } .qa-compare__col--after{ border-top: 3px solid #F14A00; } .qa-compare__label{ font-size: 1.4rem; font-weight: bold; margin: 0 0 12px; color: #888; } .qa-compare__col--after .qa-compare__label{ color: #F14A00; } .qa-compare__bar{ display: flex; height: 36px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .qa-compare__seg{ display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #555; white-space: nowrap; overflow: hidden; } .qa-compare__seg--design{ background: #ece5d8; } .qa-compare__seg--build{ background: #d8cdb6; color: #5a4d34; } .qa-compare__seg--warn{ background: #ffd9c4; color: #c73d00; font-weight: bold; } .qa-compare__seg--check{ background: #F14A00; color: #fff; font-weight: bold; } .qa-compare__cap{ margin: 0; font-size: 1.3rem; color: #555; line-height: 1.5; } .qa-compare__arrow{ text-align: center; font-size: 2.4rem; color: #F14A00; font-weight: bold; } /* 3つのポイント: 横並びタイムライン */ .qa-timeline{ margin-bottom: 40px; } .qa-timeline__head{ text-align: center; font-size: 1.8rem; font-weight: bold; color: #222; margin: 0 0 28px; } .qa-timeline__steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; position: relative; } .qa-step{ background: #fff; border-radius: 12px; padding: 28px 22px 24px; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .qa-step + .qa-step::before{ content: "→"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); font-size: 2rem; color: #F14A00; font-weight: bold; } .qa-step__num{ display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 2.6rem; font-weight: bold; color: #F14A00; line-height: 1; margin-bottom: 8px; } .qa-step__title{ font-size: 1.6rem; font-weight: bold; color: #222; margin: 0 0 10px; line-height: 1.4; } .qa-step__text{ font-size: 1.3rem; line-height: 1.7; color: #333; margin: 0; } /* 詳細アコーディオン */ .qa-details{ background: #fff; border-radius: 12px; padding: 0; margin-bottom: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); overflow: hidden; } .qa-details summary{ cursor: pointer; padding: 18px 24px; font-size: 1.4rem; font-weight: bold; color: #222; list-style: none; position: relative; } .qa-details summary::-webkit-details-marker{ display: none; } .qa-details summary::after{ content: "＋"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; color: #F14A00; transition: transform .2s; } .qa-details[open] summary::after{ content: "−"; } .qa-details__inner{ padding: 0 24px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .qa-detail__title{ font-size: 1.4rem; font-weight: bold; color: #222; margin: 0 0 10px; } .qa-detail__title span{ color: #F14A00; font-family: 'Montserrat', sans-serif; margin-right: 6px; } .qa-detail ul{ list-style: none; padding: 0; margin: 0; } .qa-detail li{ font-size: 1.3rem; line-height: 1.6; margin-bottom: 8px; padding-left: 14px; position: relative; } .qa-detail li::before{ content: "▸"; position: absolute; left: 0; color: #F14A00; } .qa-note{ text-align: center; font-size: 1.2rem; color: #666; margin: 16px 0 0; line-height: 1.7; } .qa-note strong{ color: #F14A00; } @media screen and (max-width: 1000px){ .qa-pains__grid{ grid-template-columns: repeat(3, 1fr); } .qa-compare{ grid-template-columns: 1fr; gap: 12px; } .qa-compare__arrow{ transform: rotate(90deg); } .qa-timeline__steps{ grid-template-columns: 1fr; gap: 32px; } .qa-step + .qa-step::before{ content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); } .qa-details__inner{ grid-template-columns: 1fr; gap: 24px; } } @media screen and (max-width: 480px){ .qa-pains{ padding: 24px 18px 22px; } .qa-pains__grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } .qa-section{ padding: 60px 0; } } .link_icon{ display: inline-block; margin-left: 5px; } .interview_content01 .link_icon{ display: inline-block; margin-left: 5px; } .accent-mark{ display: inline-block; background: linear-gradient(transparent 60%, rgba(241,74,0,0.25) 60%); padding: 0 2px; } #interview{ padding: 72px 0 0; background:rgba(241,141,0,0.2); } #interview .h2_ttl{ margin-bottom: 72px; } #interview h3{ font-size: 2.4rem; text-align: center; } #interview .interview_content_box h3{ text-align: left; margin-bottom: 20px; } .interview_content01_h3{ margin-bottom: 20px; } .interview_content01_h3{ padding-top: 40px; } .interview_content01{ margin-bottom: 60px; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); } .interview_content01_box{ margin-bottom: 60px; } .interview_content_box,.interview_content_box02, .interview_content_box02_ri,.interview_content_box02_left{ width: 50%; height: 327px; background: #fff; } .interview_content_box:first-child{ padding: 50px 40px; } .interview_content_box:nth-child(2){ padding: 38px 30px 0 10px; } .interview_content02{ padding: 50px 40px; margin-bottom: 60px; background: #fff; } .interview_content02_text02{ margin-bottom: 20px; } .interview_content02 h3{ margin-bottom: 40px; } .interview_img{ width: 70%; } .interview_content02_text03{ color: #F14A00; margin-top: 20px; } .interview_content02 a{ text-decoration: underline; color: #333333; } .interview_content03{ margin-top: 60px; padding: 54px 0; background: #F18D00; } .interview_content03 img{ margin:auto; } .interview_content03 .inner{ display: flex; justify-content: space-between; } .interview_content03_box{ margin-left: 80px; } #interview .interview_content03_box h3{ font-size: 2rem; margin-bottom: 10px; color: #fff; text-align: left; } .interview_content03_box p{ color: #fff; margin-bottom: 34px; } .interview_content03_box02{ display: flex; justify-content: space-between; flex-wrap: wrap; } .interview_wrap{ padding-bottom: 40px; } .interview_img_le{ padding: 0px 10px 0px 30px; } .interview_content_box02_left{ padding: 30px 10px 0px 30px; } .interview_img_ri{ padding: 0px 30px 0px 10px; } .interview_content_box02_ri{ padding: 0px 30px 0px 10px; height: auto; } .interview_img06{ width: 210px; } .interview_content_text span{ color: #F14A00; } .interview_content_text a{ text-decoration: underline; color: #333333; } #renewal-service{ padding: 72px 0; background: #fff; } #renewal-service .h2_ttl{ margin-bottom: 40px; } #renewal-service .service_lead{ max-width: 900px; margin: 0 auto 50px; text-align: center; } #renewal-service .service_cards{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 50px; } #renewal-service .service_card{ flex: 1; min-width: 280px; padding: 32px; background: #fff; border-top: 6px solid #F14A00; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); } #renewal-service .service_card h3{ font-size: 2rem; margin-bottom: 10px; color: #F14A00; text-align: left; } #renewal-service .service_card p{ color: #333; } #renewal-service .service_steps{ padding: 36px 32px; background: #FFF7ED; } #renewal-service .service_steps h3{ font-size: 2rem; margin-bottom: 18px; color: #333; text-align: left; } #renewal-service .service_steps ol{ margin: 0; padding-left: 20px; } #renewal-service .service_steps li{ margin-bottom: 18px; } #renewal-service .service_steps li:last-child{ margin-bottom: 0; } #renewal-service .service_steps li span{ display: inline-block; margin-bottom: 6px; font-weight: bold; } #renewal-service .service_steps li p{ margin: 0; } .legacy-issues{ margin: 50px auto 40px; padding: 30px 28px; background: #f6f6f6; box-shadow: 0px 0px 18px rgba(0,0,0,0.06); } .legacy-issues h3{ font-size: 2rem; margin-bottom: 14px; color: #333; } .legacy-issues ul{ padding-left: 18px; margin: 0; } .legacy-issues li{ margin-bottom: 10px; line-height: 1.6; } .legacy-issues li:last-child{ margin-bottom: 0; } .service-scheme{ margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; } .scheme-node{ position: relative; flex: 1; min-width: 180px; padding: 22px 18px; background: #fff; border: 1px solid rgba(241,74,0,0.2); border-radius: 12px; box-shadow: 0px 10px 24px rgba(0,0,0,0.05); } .scheme-node::after{ content: ""; position: absolute; top: 50%; right: -14px; width: 18px; height: 1px; background: #F14A00; transform: translateY(-50%); } .scheme-node:last-child::after{ display: none; } .scheme-node::before{ content: ""; position: absolute; top: 50%; right: -14px; width: 8px; height: 8px; border-top: 2px solid #F14A00; border-right: 2px solid #F14A00; transform: translateY(-50%) rotate(45deg); } .scheme-node:last-child::before{ display: none; } .scheme-label{ font-weight: bold; color: #F14A00; margin-bottom: 6px; } .scheme-text{ margin: 0; color: #333; line-height: 1.5; } #faq { padding: 72px 0 5px; background:rgba(242,242,242); } .faq_icon { width: 28px; } .qa { width: 80%; margin: 0 auto 40px auto; max-width: 100%; } .question { display: flex; align-items: center; margin-bottom: 0; cursor: pointer; position: relative; padding-right: 40px; } .question::after { content: "+"; position: absolute; right: 0; font-size: 24px; font-weight: bold; color: #333; transition: transform 0.3s; } .question.accordion_open::after { content: "−"; } .question.accordion_open { margin-bottom: 14px; } .question img { width: 24px; margin: 3px; } .qa p { padding-left: 30px; } .qa_table { margin-left: 30px; width: 100%; border-color: lightgray; } .qa_table td{ padding-left: 3px; } #contact { margin: 100px auto 60px; } .contact_box { margin-bottom: 60px; } .contact_tbl tr{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 40px; } .contact_tbl tr:last-child{ padding-bottom: 0; } .contact_tbl .radiobtn{ justify-content: flex-start; } .contact_tbl .align{ align-items: flex-start; } .radio_wrap{ margin-left: 30px; } .radio-input{ display: none; } .radio-input + label, .radio-input + .mfp_element_hidden + label{ padding-left: 20px; position:relative; margin-right: 20px; } .radio-input + label::before, .radio-input + .mfp_element_hidden + label::before{ content: ""; display: block; position: absolute; top: 5px; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 50%; } .radio-input:checked + .mfp_element_hidden + .radio_text::after, .radio-input:checked + .radio_text::after{ content: ""; display: block; position: absolute; top: 7px; left: 2px; width: 11px; height: 11px; background: #F14A00; border-radius: 50%; } label.radio_text:nth-of-type(2){ margin-left: -30px; } .radio_text + .mfp_element_hidden{ display: none; } .contact_tbl { width: 100%; margin-bottom: 10px; border-collapse: collapse; } .contact_tbl th { position: relative; margin-left: 70px; text-align: left; vertical-align: middle; } .checkbox_wrap{ width: 654px; display: flex; justify-content:flex-start; flex-wrap: wrap; } .checkbox { display: none; } .checkbox + .checkbox-icon , .checkbox + .mfp_element_hidden + .checkbox-icon { position: relative; vertical-align: middle; } .checkbox + .checkbox-icon::before , .checkbox + .mfp_element_hidden + .checkbox-icon::before{ content: ""; display: block; position: absolute; top: -4px; bottom: 0; left: -29px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox:checked + .checkbox-icon::before, .checkbox:checked + .mfp_element_hidden + .checkbox-icon::before{ content: ""; display: block; position: absolute; top: -4px; bottom: 0; left: -29px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox:checked + .checkbox-icon::after, .checkbox:checked + .mfp_element_hidden + .checkbox-icon::after{ content: ""; display: block; position: absolute; top: -9px; bottom: 0; left: -23px; width: 7px; height: 14px; margin: auto; transform: rotate(40deg); border-bottom: 3px solid #ef5924; border-right: 3px solid #ef5924; } .contact_req, .contact_any { position: absolute; top: 0; left: -70px; margin: auto; padding: 5px 11px; font-size: 1.4rem; font-weight: bold; color: #fff; background: #F14A00; } .contact_req .select{ } .contact_any { background: #7D7D7D; } .contact_tbl .small { display: inline-block; margin-left: 5px; font-size: 1.2rem; font-weight: normal; } .contact_input { width: 683px; padding: 16px 17px; font-size: 1.4rem; border: 1px solid #707070; border-radius: 5px; font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; line-height: 1.5; } textarea.contact_input { width: 683px !important; height: 123px !important; } select.contact_input { cursor: pointer; } .contact_input::placeholder { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; font-size: 1.6rem; color: #333333; opacity: 0.5; } .contact_btn { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; cursor: pointer; } .checkbox_input { display: none; } .privacy_wrap{ margin: 70px auto 0; text-align: center; } form#mailformpro .privacy_wrap label{ margin-right: 0; } .privacy_txt { text-align: center; display: inline-block; padding-left: 20px; position:relative; cursor: pointer; line-height: 1; color: #333333; } .privacy_txt::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: -20px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox_input:checked + .privacy_txt::after, .checkbox_input:checked + input + .privacy_txt::after { content: ""; display: block; position: absolute; top: -5px; bottom: 0; left: -14px; width: 7px; height: 14px; margin: auto; transform: rotate(40deg); border-bottom: 3px solid #ef5924; border-right: 3px solid #ef5924; } .form#mailformpro label:last-child{ margin-left: 0; } form#mailformpro label.mfp_not_checked { padding: 0 !important; border: none !important; } form#mailformpro label.mfp_checked { padding: 0 !important; border: none !important; background-color: inherit !important; box-shadow: none !important; } label.radio, label.radio_text{ position : relative; cursor : pointer; display : inline-block; overflow : hidden; box-sizing : border-box; } label.radio { width : 18px; height : 18px; border : 1px solid #F14A00; border-radius : 100%; } .contact_btn{ display: block; margin: 32px auto; padding: 15px 154px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); box-shadow: 0px 5px 10px rgba(40,65,160,0.3); font-size: 2.4rem; font-weight: bold; border-radius: 50px; letter-spacing: 3px; color: #fff; -mos-transition: .5s ease-out all; -webkit-transition: .5s ease-out all; transition: .5s ease-out all; } .contact_btn:hover { box-shadow: 0px 5px 15px rgba(40,65,160,0.5); } .error { display: inline-block; text-align: center; } .privacy{ overflow-x: scroll; height: 300px; margin: 0 auto 20px; padding: 20px; border: 1px solid #ccc; border-radius: 10px; } .pulldown{ position: relative; display: block; } .pulldown::before{ content: ""; position: absolute; top: 50%; right: 10px; display: block; width: 0; height: 0; margin: -2px 0 0 0; border: 5px solid transparent; border-top: 7px solid #333; } select { cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; display: block; width: 200px; padding: 0.5em 1em; color: #333; border: none; border-radius: 5px; background: transparent; } ::-webkit-{ display: none; } ::-ms-expand { display: none; } #info{ border-top: 2px solid rgba(241,141,0,0.2); margin: 40px auto 40px; letter-spacing: 0; } #info .inner{ width: 433px; text-align: center; } #info .inner p:first-child{ margin: 40px auto 0; } .info_tel{ position: relative; display: block; margin:5px auto; font-size: 49px; line-height: 1; font-weight: bold; line-height: 1; color: #333; } .info_tel img{ display: inline-block; margin-right: 8px; } #info .flex{ justify-content: space-between; } .corporate_link { margin-top: 20px; } .corporate_link a{ color: blue; } .link_icon{ display: inline-block; margin-left: 5px; } .link{ color: #333; text-decoration: underline; margin-bottom: 5px; transition: 0.3s ease all; } .link:hover{ opacity: 0.7; } #thanks{ padding: 10vw 0; } .page_txt{ text-align: center; } #thanks{ height: calc(100vh - 57px); } #thanks .h2_ttl{ margin-bottom: 40px; } footer{ padding: 15px 0; background: #F18D00; color: #fff; text-align: center; } .pagetop { position: fixed; bottom: 100px; right: 260px; z-index: 1000; transition: .3s ease all; } .pagetop a { position: fixed; display: block; width: 205px; padding: 15px 0; text-decoration: none; color: #fff; font-weight: bold; text-align: center; border-radius: 50px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); letter-spacing: 3px; z-index: 1000; transition: 0.5s ease all; } .pagetop a:hover { box-shadow: 0px 5px 20px rgba(40,65,160,0.4); } .pagetop.hide{ opacity: 0; } .pagetop_txt01{ font-size: 1.6rem; } .pagetop_txt02{ font-size: 2.4rem; line-height: 1; } /*============================================================ breakpoint 1700px ==============================================================*/ @media screen and (max-width: 1700px) { .mv_img{ width:55.4vw; } } /*============================================================ breakpoint 1500px ==============================================================*/ @media screen and (max-width: 1500px) { .mv_img{ width:52vw; } } /*============================================================ breakpoint 1000px ==============================================================*/ @media screen and (max-width: 1000px) { .mv_img{ width: 52vw; top: 380px; } .strength_grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; } .interview_content_box, .interview_content_box02{ width: 100%; height: auto; } .interview_content01 img { margin:0 auto 30px; } .interview_content_box:first-child { padding: 84px 40px 30px; } .interview_wrap.reverse{ flex-wrap: wrap-reverse; } .interview_content03_box02{ display: block; } .interview_content03_box02 img{ margin: auto; } .interview_content03 .app_btn img{ margin: 20px auto; } .interview_content_box02_left,.interview_content_box, .interview_content_box02, .interview_content_box02_ri, .interview_content_box02_left{ width: 100%; height: auto; } .interview_img_le, .interview_content_box02_left,.interview_img_ri, .interview_content_box02_ri{ padding:10px 30px 20px; } .interview_content_box:nth-child(2){ padding: 10px 30px 20px; } .contact_tbl tr { flex-direction: column; align-items:baseline; } .contact_tbl td{ width: 100%; } .contact_input{ width: 100%; } .contact_tbl th{ margin-bottom: 40px; } .interview_content03 .inner{ flex-wrap: wrap; } .interview_content03 img { margin: auto; } #service-list{ padding: 90px 0 70px; } .service-grid{ gap: 20px; } .service-item{ padding: 20px 14px; } #renewal-service .legacy-issues{ margin: 40px auto 30px; } .service-scheme{ gap: 14px; } .scheme-node::after, .scheme-node::before{ display: none; } #renewal-service{ padding: 80px 0; } #renewal-service .service_cards{ gap: 20px; } } /*============================================================ breakpoint 768px ==============================================================*/ @media screen and (max-width: 768px) { img{ align-self: flex-start; height: auto; } .pc { display: none; } .notepc { display: none; } .sp { display: inherit; } body { font-size: 1.4rem; } .nav_flex{ padding: 0; height: 60px; } .header-logo .sp{ width: 125px; margin-top: 8px; } #main{ background: url(/lp/_shared/images/sp/mv_bg-sp.png) center center/cover no-repeat; margin: 36px auto 0; } .mv_img{ width: 400px; top: 67vw; right: -50px; } .main_wrap{ height: 479px; } .header-cta{ padding: 19.6px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); margin-right: 0; } .header-cta img{ width: 29px; } .header-logo{ margin-left: 20px; } .header-address{ margin: 14px 0 0 10px; } .h2_text{ margin: 8px auto 10px; } .interview_content03 .inner{ flex-wrap: wrap; } .interview_content03 img{ margin: auto; } .interview_content03_box{ margin: 20px auto; } .interview_content03_box02{ display: flex; justify-content: space-between; flex-wrap: wrap; } .interview_content03_box02 a{ display: block; margin: 5px auto; } .contact_tbl th{ display: block; } .contact_tbl tr{ display: block; } .contact_input{ display: block; width: 100%; } .contact_tbl td{ display: block; width: 100%; } .contact_tbl th{ margin-left: 50px; } textarea.contact_input{ width: 100% !important; } .contact_tbl th{ margin-bottom: 20px; } .contact_req, .contact_any{ top: -3px; left: -50px; padding: 2px 7px; } #service-list{ padding: 80px 0 60px; } .service-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; } .service-icon{ width: 72px; height: 72px; } .service-scheme{ gap: 12px; } .scheme-node{ flex: 1 1 calc(50% - 12px); } .scheme-node::after, .scheme-node::before{ display: none; } #renewal-service{ padding: 80px 0; } #renewal-service .service_card{ min-width: 100%; padding: 28px; } #renewal-service .service_steps{ padding: 30px 24px; } } /*============================================================ breakpoint 680px-sp ==============================================================*/ @media screen and (max-width: 480px) { h1{ margin: 45px auto 15px; font-size: 2.8rem; } h1+p{ font-size: 1.4rem; } .main_cta{ font-size: 1.8rem; padding: 11px; } .mv_img{ width: 302.5px; top: 132vw; right: -50px; } .h2_ttl{ font-size: 2.4rem; line-height: 1.5; } .case-grid{ margin: 20px -20px 0; padding: 10px 20px 30px; gap: 16px; } .case-card{ flex: 0 0 82%; max-width: 82%; } .case-nav{ display: none; } .case-carousel::before, .case-carousel::after{ width: 20px; } .strength_grid{ grid-template-columns: repeat(2, 1fr); } .strength_box{ padding: 32px 20px 28px; } .interview_content_box:first-child{ padding: 40px 30px 20px; } .interview_content_box:nth-child(2){ padding: 0 30px 20px; } .interview_content02{ padding: 30px; } .interview_content01 .interview_wrap img{ padding: 30px 30px 0; } .interview_content_box02{ padding: 0 30px; } #interview h3{ margin-bottom: 20px; font-size: 2rem; } .interview_content01_h3{ margin-bottom: 20px; } .contact_btn{ width: 100%; padding: 15px; } .privacy_wrap{ margin: 40px auto 0; } .contact_btn{ margin: 10px auto 20px; } .radio_wrap{ margin-left: 0; } .checkbox_wrap { width: 100%; display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; margin-left: 30px; } #info .inner{ width: 100%; } .info_tel{ letter-spacing: -2px; } #thanks{ padding: 160px 0 0; } #thanks { height: calc(100vh - 53px); } .page_txt{ text-align: left; } .jins_icon{ width: 42.5px; } .app_btn{ width: 127.5px; } .googleplay{ width: 126px; } .interview_wrap{ margin-bottom: 30px; } .interview_content01 img{ padding: 0 30px 30px; } .interview_img_le, .interview_content_box02_left, .interview_img_ri, .interview_content_box02_ri { padding: 30px ; } .interview_content_box:nth-child(2) { padding: 0 30px; } .interview_content03 img,.interview_content03 .app_btn img,.interview_content03_box02 a{ margin: auto; } .interview_content03_box02{ align-items: center; } .info_tel{ font-size: 4.5rem; } .interview_content01 .link_icon{ display: inline-block; margin: 0 0 0 5px; padding: 0; } #service-list{ padding: 60px 0 50px; } #service-list .service-lead{ margin: 0 auto 24px; } .service-grid{ gap: 16px; grid-template-columns: repeat(2, 1fr); } .service-item{ padding: 18px 12px; } .service-icon{ width: 64px; height: 64px; } .legacy-issues{ padding: 24px 20px; margin: 30px auto 24px; } .service-scheme{ flex-direction: column; } .scheme-node{ width: 100%; } #renewal-service .service_lead{ margin: 0 auto 30px; } #renewal-service .service_card{ padding: 24px; } #renewal-service .service_steps{ padding: 24px 20px; } } /*============================================================ breakpoint 375px-sp ==============================================================*/ @media screen and (max-width: 375px) { h1{ margin: 45px auto 15px; font-size: 2.3rem; } .mv_img{ width: 280px; top: 150vw; right: -50px; } .header-address{ display: none; } } /*============================================================ breakpoint 320px-SE ==============================================================*/ @media screen and (max-width: 320px) { h1{ margin: 45px auto 15px; font-size: 2.0rem; } .mv_img{ width: 280px; top: 175vw; right: -50px; } .info_tel{ letter-spacing: -2px; font-size: 40px; } #info .inner p:first-child{ font-size: 1.3rem; } #info .flex li{ margin: auto; } body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; background: #ffffff; color: #333; } #service-list { padding: 80px 20px; background: #ffffff; } #service-list .inner { max-width: 1100px; margin: 0 auto; } .h2_text { text-align: center; font-size: 0.875rem; letter-spacing: 0.25em; color: #f97316; font-weight: 600; margin-bottom: 16px; } .h2_ttl { text-align: center; font-size: 1.75rem; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; } .service-lead { text-align: center; color: #555; margin-bottom: 48px; font-size: 0.9375rem; line-height: 1.8; } .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; } @media (max-width: 900px) { .service-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .h2_ttl { font-size: 1.5rem; } } .service-item { display: flex; flex-direction: column; align-items: center; padding: 28px 16px; background: #ffffff; border-radius: 12px; border: 1px solid #e5e5e5; transition: all 0.3s ease; } .service-item:hover { border-color: #f97316; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15); } .service-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border: 2px solid #fdba74; border-radius: 16px; margin-bottom: 16px; transition: all 0.3s ease; } .service-item:hover .service-icon { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border-color: #f97316; transform: scale(1.05); } .service-icon svg { width: 32px; height: 32px; color: #ea580c; } .service-item p { font-size: 0.875rem; font-weight: 600; color: #333; text-align: center; margin: 0; line-height: 1.4; } } /*============================================================ AI Prototype / Dev Process Section ==============================================================*/ #dev-process { padding: 72px 0; background: #fdfdfd; /* 既存のFAQセクションに近い清潔感のある背景 */ } /* 図解表示エリア */ .process-diagram-wrapper { margin: 0 auto 60px; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0px 10px 24px rgba(0,0,0,0.05); /* .service-itemと共通の影 */ border: 1px solid rgba(241,74,0,0.1); /* 既存のアクセントカラーを薄く使用 */ } .process-diagram-wrapper img { width: 100%; max-width: 900px; height: auto; display: block; margin: auto; } /* 詳細カードグリッド */ .process-detail-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .process-card { flex: 1; min-width: 300px; padding: 32px; background: #fff; border-top: 6px solid #F14A00; /* .service_cardと共通のオレンジボーダー */ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); /* 既存の共通シャドウ */ position: relative; transition: transform .3s ease; } .process-card:hover { transform: translateY(-5px); /* 既存のホバー挙動と統一 */ } .process-phase-tag { display: inline-block; background: rgba(241,74,0,0.1); color: #F14A00; padding: 4px 12px; border-radius: 4px; font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; } .process-card h3 { font-size: 2.2rem; margin-bottom: 15px; color: #333; font-weight: bold; } .process-card p { font-size: 1.5rem; line-height: 1.8; color: #555; } /* レスポンシブ調整 (既存の1000px, 768pxブレイクポイントに準拠) */ @media screen and (max-width: 1000px) { .process-card { min-width: 100%; } } @media screen and (max-width: 768px) { #dev-process { padding: 60px 0; } .process-diagram-wrapper { padding: 15px; margin-bottom: 40px; } .process-card { padding: 24px; } } /*============================================================ Service List (15 Items / Image Style) ==============================================================*/ #service-list { background: #f4f8fb; /* 画像に合わせた薄いグレーの背景 */ padding: 72px 0; } .service-grid-new { display: grid; grid-template-columns: repeat(5, 1fr); /* 5列構成 */ gap: 20px; list-style: none; padding: 0; margin: 0; } .service-item-new { background: #ffffff; border-radius: 12px; padding: 30px 15px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; border: 1px solid #eef2f6; display: flex; flex-direction: column; } .service-item-new:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(3, 80, 156, 0.1); border-color: #A5C8ED; } .service-icon-new { width: 70px; height: 70px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; } .service-icon-new svg { width: 44px; height: 44px; } .service-item-new h3 { font-size: 1.7rem; color: #03509C; /* からくりネイビー */ margin-bottom: 12px; font-weight: bold; letter-spacing: 0.5px; } .service-item-new p { font-size: 1.25rem; line-height: 1.6; color: #555; margin: 0; text-align: left; /* 説明文は左寄せの方が見やすいため調整 */ } /* レスポンシブ調整 */ @media screen and (max-width: 1200px) { .service-grid-new { grid-template-columns: repeat(4, 1fr); /* 中画面で4列 */ } } @media screen and (max-width: 900px) { .service-grid-new { grid-template-columns: repeat(3, 1fr); /* タブレットで3列 */ } } @media screen and (max-width: 640px) { .service-grid-new { grid-template-columns: repeat(2, 1fr); /* スマホで2列 */ gap: 12px; } .service-item-new { padding: 20px 10px; } .service-item-new h3 { font-size: 1.4rem; } .service-item-new p { font-size: 1.1rem; } } /*============================================================ Quality Assurance Section - 追加CSS ※ #renewal-service と同じスタイルを適用 ※ style.css の末尾に追記してください ==============================================================*/ #dev-process { padding: 72px 0; background: #fff; } #dev-process .h2_ttl { margin-bottom: 40px; } #dev-process .service_lead { max-width: 900px; margin: 0 auto 50px; text-align: center; } /* 比較図（SVG画像）のコンテナ */ .process-diagram-container { margin: 0 auto 50px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); } .process-diagram-container img { width: 100%; max-width: 1000px; height: auto; display: block; margin: auto; } /* サービスカード */ #dev-process .service_cards { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 50px; } #dev-process .service_card { flex: 1; min-width: 280px; padding: 32px; background: #fff; border-top: 6px solid #F14A00; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); } #dev-process .service_card h3 { font-size: 2rem; margin-bottom: 10px; color: #F14A00; text-align: left; } #dev-process .service_card h3 small { font-size: 1.4rem; font-weight: normal; color: #666; } #dev-process .service_card p { color: #333; } /* カードサマリー（強調テキスト） */ #dev-process .card-summary { font-size: 1.6rem; font-weight: bold; color: #F14A00; margin-bottom: 15px; line-height: 1.5; } /* 例ボックス */ #dev-process .example-box { background: #fafafa; border-left: 4px solid #F14A00; padding: 18px 20px; margin-top: 20px; } #dev-process .example-title { margin: 0 0 12px 0; font-weight: bold; color: #F14A00; font-size: 1.4rem; } #dev-process .example-box ul { margin: 0; padding-left: 0; list-style: none; } #dev-process .example-box li { margin-bottom: 10px; line-height: 1.7; font-size: 1.4rem; } #dev-process .example-box li:last-child { margin-bottom: 0; } /* 課題セクション（legacy-issuesを流用） */ #dev-process .legacy-issues { margin: 50px auto 40px; padding: 30px 28px; background: ; box-shadow: 0px 0px 18px rgba(0,0,0,0.06); } #dev-process .legacy-issues h3 { font-size: 2rem; margin-bottom: 14px; color: #333; } #dev-process .legacy-issues ul { padding-left: 18px; margin: 0; } #dev-process .legacy-issues li { margin-bottom: 10px; line-height: 1.6; } #dev-process .legacy-issues li:last-child { margin-bottom: 0; } #dev-process .issues-note { margin-top: 20px; font-weight: bold; color: #F14A00; font-size: 1.5rem; } /* 進め方（service_stepsを流用） */ #dev-process .service_steps { padding: 36px 32px; background: #FFF7ED; } #dev-process .service_steps h3 { font-size: 2rem; margin-bottom: 18px; color: #333; text-align: left; } #dev-process .service_steps ol { margin: 0; padding-left: 20px; } #dev-process .service_steps li { margin-bottom: 18px; } #dev-process .service_steps li:last-child { margin-bottom: 0; } #dev-process .service_steps li span { display: inline-block; margin-bottom: 6px; font-weight: bold; } #dev-process .service_steps li p { margin: 0; } /* フロー図（service-schemeを流用） */ #dev-process .service-scheme { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; } #dev-process .scheme-node { position: relative; flex: 1; min-width: 180px; padding: 22px 18px; background: #fff; border: 1px solid rgba(241,74,0,0.2); border-radius: 12px; box-shadow: 0px 10px 24px rgba(0,0,0,0.05); } #dev-process .scheme-node::after { content: ""; position: absolute; top: 50%; right: -14px; width: 18px; height: 1px; background: #F14A00; transform: translateY(-50%); } #dev-process .scheme-node:last-child::after { display: none; } #dev-process .scheme-node::before { content: ""; position: absolute; top: 50%; right: -14px; width: 8px; height: 8px; border-top: 2px solid #F14A00; border-right: 2px solid #F14A00; transform: translateY(-50%) rotate(45deg); } #dev-process .scheme-node:last-child::before { display: none; } #dev-process .scheme-label { font-weight: bold; color: #F14A00; margin-bottom: 6px; } #dev-process .scheme-text { margin: 0; color: #333; line-height: 1.5; } /* レスポンシブ */ @media screen and (max-width: 1000px) { #dev-process .service_card { min-width: 100%; } #dev-process .scheme-node::after, #dev-process .scheme-node::before { display: none; } } @media screen and (max-width: 768px) { #dev-process { padding: 80px 0; } .process-diagram-container { padding: 10px; margin-bottom: 40px; } #dev-process .service_card { min-width: 100%; padding: 28px; } #dev-process .service_steps { padding: 30px 24px; } #dev-process .scheme-node { flex: 1 1 calc(50% - 12px); } } @media screen and (max-width: 480px) { #dev-process .service_lead { margin: 0 auto 30px; } #dev-process .service_card { padding: 24px; } #dev-process .example-box { padding: 15px; } #dev-process .example-box li { font-size: 1.3rem; } #dev-process .legacy-issues { padding: 24px 20px; margin: 30px auto 24px; } #dev-process .service_steps { padding: 24px 20px; } #dev-process .service-scheme { flex-direction: column; } #dev-process .scheme-node { width: 100%; } } /*============================================================ example-box スタイル ※ #renewal-service と #dev-process 共通で使用 ※ style.css の末尾に追記してください ==============================================================*/ /* カードサマリー（強調テキスト） */ .card-summary { font-size: 1.6rem; font-weight: bold; color: #F14A00; margin-bottom: 15px; line-height: 1.5; } /* サブタイトル */ #renewal-service .service_card h3 small, #dev-process .service_card h3 small { font-size: 1.4rem; font-weight: normal; color: #666; } /* 例ボックス */ .example-box { background: #fafafa; border-left: 4px solid #F14A00; padding: 18px 20px; margin-top: 20px; } .example-title { margin: 0 0 12px 0; font-weight: bold; color: #F14A00; font-size: 1.4rem; } .example-box ul { margin: 0; padding-left: 0; list-style: none; } .example-box li { margin-bottom: 10px; line-height: 1.7; font-size: 1.4rem; } .example-box li:last-child { margin-bottom: 0; } .example-box li strong { color: #333; } /* 課題セクションの補足テキスト */ .issues-note { margin-top: 20px; font-weight: bold; color: #F14A00; font-size: 1.5rem; } /* レスポンシブ */ @media screen and (max-width: 768px) { .example-box { padding: 15px; } .example-box li { font-size: 1.3rem; } .card-summary { font-size: 1.5rem; } } @media screen and (max-width: 480px) { .example-box { padding: 12px 15px; } .example-box li { font-size: 1.2rem; margin-bottom: 8px; } .example-title { font-size: 1.3rem; } } /*============================================================ MV scrim — 業界別LP用: 明るい/情報量の多い背景でも白文字を可読化。 mv_img（右横アプリ画像）削除に伴い、背景に暗いグラデーションを重ねる。 ==============================================================*/ #main { position: relative; } #main::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.05) 100%); z-index: 0; } #main .inner { position: relative; z-index: 1; } @media screen and (max-width: 768px) { #main::after { background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.45) 100%); } }