.sol .container { max-width:98rem; margin:0 auto; padding:0 1.25rem; }@media only screen and (max-width:767.499px){ .sol .container{ padding:0 1.25rem; }} /* --- ページ見出し（既存 section-header の型を踏襲：+ アイコン＋英字） --- */ .sol .sec-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; } .sol .sec-head .section-icon{ display:block; width:1.75rem; height:4.2rem; color:var(--secondary-color); font-size:2.25rem; font-weight:bold; line-height:1; } .sol .sec-head .section-title{ font-size:2.875rem; font-weight:900; line-height:2.2; letter-spacing:.025em; margin:0; }@media only screen and (max-width:767.499px){ .sol .sec-head .section-icon{ width:1rem; height:3rem; font-size:1.5rem; } .sol .sec-head .section-title{ font-size:2rem; }} .sol .sec-lede{ color:var(--text-secondary); font-size:1.5rem; line-height:1.9; margin:0 0 3rem; max-width:56rem; }@media only screen and (max-width:767.499px){ .sol .sec-lede{ font-size:1.125rem; margin-bottom:1.75rem; }} /* --- ヒーロー --- */ .sol-hero{ padding:4.5rem 0 3.5rem; background:var(--bg-secondary); }@media only screen and (max-width:767.499px){ .sol-hero{ padding:2.25rem 0 2rem; }} .sol-crumb{ font-size:.9rem; color:var(--text-secondary); margin-bottom:1.75rem; letter-spacing:.04em; } .sol-crumb a{ color:var(--text-secondary); text-decoration:none; } .sol-crumb a:hover{ color:var(--secondary-color); } .sol-eyebrow{ display:inline-block; font-size:1.25rem; font-weight:700; color:var(--secondary-color); letter-spacing:.14em; margin-bottom:1rem; } .sol-hero h1{ font-size:2.75rem; font-weight:700; line-height:1.55; letter-spacing:.01em; margin:0 0 2rem; }@media only screen and (max-width:767.499px){ .sol-hero h1{ font-size:1.5rem; line-height:1.6; margin-bottom:1.25rem; }} /* 課題ページの pain */ .sol-pain{ border-left:4px solid var(--secondary-color); padding:.25rem 0 .25rem 1.75rem; max-width:54rem; margin:0 0 1.75rem; } .sol-pain p{ font-size:1.25rem; line-height:2; color:var(--text-secondary); margin:0; } .sol-pain b{ color:var(--text-color); font-weight:700; }@media only screen and (max-width:767.499px){ .sol-pain{ padding-left:1rem; border-left-width:3px; } .sol-pain p{ font-size:1rem; }} /* --- セクション枠 --- */ .sol-sec{ padding:4.5rem 0; } .sol-sec + .sol-sec{ border-top:1px solid #E2E2E2; }@media only screen and (max-width:767.499px){ .sol-sec{ padding:2.5rem 0; }} /* --- 課題の棚（ハブ） --- */ .sol-shelf{ margin-bottom:2.75rem; } .sol-shelf:last-child{ margin-bottom:0; } .sol-shelf-h{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; } .sol-shelf-h .t{ font-size:1.5rem; font-weight:700; letter-spacing:.08em; } .sol-shelf-h .rule{ flex:1; height:1px; background:#E2E2E2; } .sol-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(26rem,1fr)); gap:1.25rem; } .sol-card{ display:block; background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.75rem 1.75rem 1.5rem; text-decoration:none; color:var(--text-color); transition:all .3s ease; } .sol-card:hover{ border-color:var(--secondary-color); } .sol-card h3{ font-size:1.5rem; font-weight:700; margin:0 0 .625rem; line-height:1.6; } .sol-card p{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:0; } .sol-card .go{ display:inline-block; margin-top:1rem; font-size:1.125rem; font-weight:700; color:var(--secondary-color); }@media only screen and (max-width:767.499px){ .sol-cards{ grid-template-columns:1fr; gap:.875rem; } .sol-card{ padding:1.25rem; border-radius:.75rem; } .sol-card h3{ font-size:1.125rem; } .sol-card p{ font-size:1rem; }} /* --- 業界カード --- */ .sol-icards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(28rem,1fr)); gap:1.25rem; } .sol-icard{ background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.75rem; display:flex; flex-direction:column; min-height:12rem; } .sol-icard.on{ border-color:var(--secondary-color); } .sol-icard h3{ font-size:1.5rem; font-weight:700; margin:0 0 .5rem; display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; } .sol-icard h3 .en{ font-size:.875rem; letter-spacing:.18em; color:var(--secondary-color); font-weight:700; } .sol-icard p{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:0; flex:1; } .sol-icard .foot{ margin-top:1.125rem; font-size:1.125rem; } .sol-icard .foot a{ text-decoration:none; font-weight:700; color:var(--secondary-color); } .sol-icard .foot a.ask{ color:var(--text-secondary); font-weight:500; }@media only screen and (max-width:767.499px){ .sol-icards{ grid-template-columns:1fr; gap:.875rem; } .sol-icard{ padding:1.25rem; min-height:0; border-radius:.75rem; }} .sol-menu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(28rem,1fr)); gap:1.25rem; list-style:none; margin:0; padding:0; } .sol-menu li{ background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.5rem 1.625rem; } .sol-menu h4{ font-size:1.5rem; font-weight:700; margin:0 0 .5rem; display:flex; gap:.75rem; align-items:baseline; } .sol-menu h4 .m{ font-size:1rem; letter-spacing:.14em; color:var(--secondary-color); } .sol-menu p{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:0; }@media only screen and (max-width:767.499px){ .sol-menu{ grid-template-columns:1fr; gap:.875rem; } .sol-menu li{ padding:1.125rem 1.25rem; border-radius:.75rem; }} .sol-tech{ display:inline-block; font-size:1rem; color:var(--text-secondary); border:1px solid #E2E2E2; border-radius:.5rem; padding:.75rem 1.25rem; margin-top:1.25rem; line-height:1.8; } .sol-product{ background:var(--bg-secondary); border-radius:1rem; padding:1.5rem 1.75rem; font-size:1.25rem; color:var(--text-secondary); } .sol-product a{ color:var(--secondary-color); font-weight:700; text-decoration:none; margin-left:.5rem; } /* --- 事例 --- */ .sol-case{ background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.875rem; margin-bottom:1rem; } .sol-case:last-of-type{ margin-bottom:0; } .sol-case .tag{ display:inline-block; font-size:.875rem; letter-spacing:.1em; color:var(--secondary-color); border:1px solid #F0C89A; border-radius:2rem; padding:.25rem .875rem; font-weight:700; margin-bottom:.875rem; } .sol-case h4{ font-size:1.5rem; font-weight:700; line-height:1.7; margin:0 0 1.125rem; } .sol-ba{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .sol-ba .h{ font-size:.875rem; letter-spacing:.14em; font-weight:700; color:var(--text-secondary); margin:0 0 .375rem; } .sol-ba .after .h{ color:var(--secondary-color); } .sol-ba p{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:0; } .sol-ba .after p{ color:var(--text-color); }@media only screen and (max-width:767.499px){ .sol-case{ padding:1.25rem; border-radius:.75rem; } .sol-ba{ grid-template-columns:1fr; gap:1rem; } .sol-case h4{ font-size:1.125rem; } .sol-ba p{ font-size:1rem; }} .sol-todo{ background:var(--bg-secondary); border-left:3px solid #C9C9C9; padding:.875rem 1.25rem; font-size:1rem; color:var(--text-secondary); margin-top:1rem; border-radius:0 .5rem .5rem 0; } .sol-related{ display:flex; flex-wrap:wrap; gap:1rem; } .sol-related a{ border:1px solid #E2E2E2; background:#fff; border-radius:2rem; text-decoration:none; color:var(--text-color); font-size:1.125rem; padding:.875rem 1.5rem; font-weight:500; transition:all .3s ease; } .sol-related a:hover{ border-color:var(--secondary-color); color:var(--secondary-color); } .sol-list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; } .sol-list li{ font-size:1.125rem; line-height:1.85; padding-left:1.25rem; position:relative; color:var(--text-secondary); } .sol-list li::before{ content:""; position:absolute; left:0; top:.8em; width:.5rem; height:1px; background:var(--secondary-color); } /* --- プレビュー用のコントロール（実装には入りません） --- */ /* ハブ：SOLUTIONS をセクション見出しに昇格させたため、 H1 はその下のリード文として一段下のサイズに置く */ .sol-hero .sec-head{ margin-bottom:.25rem; } .sol-hero .sec-head + h1{ font-size:2rem; line-height:1.65; font-weight:700; margin-bottom:1.75rem; }@media only screen and (max-width:767.499px){ .sol-hero .sec-head + h1{ font-size:1.25rem; line-height:1.7; margin-bottom:1.25rem; }}/* @media は入れ子を保持 */ .logo-slider{--logo-max-height-sp: 1.75rem; --logo-max-height-pc: 4rem; --logo-max-width-sp: 7rem; --logo-max-width-pc: 12rem; height: 2.875rem; overflow-x: hidden; position: relative; width: 99.5vw; margin-left: calc(-50vw + 50%); background-color: #fff;} .logo-slider:hover .logo-slider__track{animation-play-state: paused;} .logo-slider__track{display: flex; align-items: center; animation: slideInfinite 28s linear infinite; width: max-content; height: 2.875rem;} .logo-slider__item{display: flex; align-items: center; justify-content: center; margin-right: 2rem; transition: opacity 0.3s ease;} .logo-slider__item img{height: auto; width: auto; max-height: var(--logo-max-height-sp); max-width: var(--logo-max-width-sp); object-fit: contain;} .sol .solution-about-section{background: white; border-radius: 3.75rem; overflow: hidden; position: relative; padding: 2rem 0 7.5rem;} .sol .solution-about-section .solution-header{padding-top: 2.5rem;} .sol .solution-about-section .section-header{display: flex; align-items: center; justify-content: space-between; width: 100%;} .sol .solution-about-section .section-header .section-title{font-size: 2.25rem; font-weight: 700; line-height: 1.444; margin: 0; display: flex; align-items: center; gap: 2rem;} .sol .solution-about-section .section-header .section-title .accordion-button{background: var(--text-color); border: none; border-radius: 0.625rem; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-left: auto;} .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon{display: block; width: 1.875rem; height: 1.875rem; position: relative;} .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon::before, .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon::after{content: ""; position: absolute; top: 50%; left: 50%; background: white; transition: all 0.3s ease;} .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon::before{width: 100%; height: 2px; transform: translate(-50%, -50%);} .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon::after{width: 2px; height: 100%; transform: translate(-50%, -50%);} .sol .solution-about-section .section-header .section-title .accordion-button[aria-expanded=false] .accordion-icon::after{transform: translate(-50%, -50%) rotate(0deg);} .sol .solution-about-section .section-header .section-title .accordion-button[aria-expanded=true] .accordion-icon::after{transform: translate(-50%, -50%) rotate(90deg);} .sol .solution-about-section .section-header .section-title .accordion-button:hover{background: var(--text-color);} .sol .solution-about-section .solution-content{transition: all 0.3s ease;} .sol .solution-about-section .solution-content .solution-description{font-size: 1.5rem; line-height: 2; padding: 3rem 0.2rem 0; margin: 0;} .sol .flow-section{background: white; padding: 5.5rem 0 7.5rem;} .sol .flow-section .section-header{display: flex; align-items: center; gap: 0.75rem; margin-bottom: 6rem;} .sol .flow-section .section-header .section-icon{display: block; width: 1.75rem; height: 4.2rem; color: var(--secondary-color); font-size: 2.25rem; font-weight: bold; line-height: 1;} .sol .flow-section .section-header .section-title{font-size: 2.875rem; font-weight: 900; line-height: 2.5; margin: 0; letter-spacing: -0.025em;} .sol .flow-section .flow-content{display: flex; gap: 2rem;} .sol .flow-section .flow-content .flow-step{flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; background: white; border-radius: 1.25rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 5.5rem 1.6rem 1.5rem;} .sol .flow-section .flow-content .flow-step .step-number{width: 7.5rem; height: 7.5rem; background: var(--btn-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: absolute; top: -3.5rem; left: 50%; transform: translateX(-50%);} .sol .flow-section .flow-content .flow-step .step-number .en{font-size: 1.75rem; font-weight: bold; line-height: 1.2; color: var(--text-color);} .sol .flow-section .flow-content .flow-step .step-content .step-title{font-size: 1.5rem; font-weight: bold; line-height: 1.45833; margin: 0 0 1rem 0; color: var(--text-color);} .sol .flow-section .flow-content .flow-step .step-content .step-list{list-style: none; padding: 0; margin: 0;} .sol .flow-section .flow-content .flow-step .step-content .step-list li{font-size: 1rem; line-height: 2; color: var(--text-color); position: relative; padding-left: 1rem; text-align: left;} .sol .flow-section .flow-content .flow-step .step-content .step-list li::before{content: "・"; position: absolute; left: 0; color: var(--text-color);} .sol .flow-section .flow-content .flow-step .step-content .step-list li:last-child{margin-bottom: 0;} .sol .service-client-section{background: var(--bg-secondary); padding: 5.5rem 0 7.5rem;} .sol .service-client-section .section-header{display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem;} .sol .service-client-section .section-header .section-icon{display: block; width: 1.75rem; height: 4.2rem; color: var(--secondary-color); font-size: 2.25rem; font-weight: bold; line-height: 1;} .sol .service-client-section .section-header .section-title{font-size: 2.875rem; font-weight: 900; line-height: 2.5; margin: 0; letter-spacing: -0.025em;} .sol .service-client-section .service-client-content{display: flex; flex-direction: column; gap: 3rem;} .sol .service-client-section .service-client-content .client-logos{order: 1;} .sol .service-client-section .service-client-content .client-text{order: 2; text-align: center;} .sol .service-client-section .service-client-content .client-text .client-description{font-size: 1.75rem; font-weight: 700; line-height: 1.71428; color: var(--text-color); margin: 0;}@media only screen and (min-width: 768px){ .logo-slider{height: 6.75rem;} .logo-slider__track{height: 6.75rem;} .logo-slider__item{margin-right: 3rem;}}@media (hover: hover){ .logo-slider__item:hover{opacity: 0.8;}}@media (hover: none){ .logo-slider__item:active{opacity: 0.8;}}@media only screen and (min-width: 768px){ .logo-slider__item img{max-height: var(--logo-max-height-pc); max-width: var(--logo-max-width-pc);}}@media only screen and (max-width: 767.499px){ .sol .solution-about-section{border-radius: 2rem; padding: 1.5rem 0 3.5rem;} .sol .solution-about-section .solution-header{padding-top: 2rem;} .sol .solution-about-section .section-header .section-title{font-size: 1.5rem; line-height: 1.333; gap: 1.4rem;} .sol .solution-about-section .section-header .section-title .accordion-button{width: 2.125rem; height: 2.125rem;} .sol .solution-about-section .section-header .section-title .accordion-button .accordion-icon{width: 1.25rem; height: 1.25rem;} .sol .solution-about-section .solution-content .solution-description{font-size: 1.125rem; line-height: 1.6666; padding-top: 2rem;} .sol .flow-section{padding: 2rem 0 3.25rem;} .sol .flow-section .section-header{gap: 0.75rem; margin-bottom: 1rem;} .sol .flow-section .section-header .section-icon{width: 1rem; height: 3rem; font-size: 1.5rem;} .sol .flow-section .section-header .section-title{font-size: 2rem;} .sol .flow-section .flow-content{flex-direction: column; gap: 1.2rem;} .sol .flow-section .flow-content .flow-step{flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; margin-left: 1.25rem; border-radius: 0.625rem; padding: 1.25rem 1rem 1.25rem 3.5rem;} .sol .flow-section .flow-content .flow-step .step-number{width: 3.375rem; height: 3.375rem; top: 50%; left: -1.25rem; transform: translateY(-50%);} .sol .flow-section .flow-content .flow-step .step-number .en{font-size: 0.875rem; line-height: 1.1428; text-align: center;} .sol .flow-section .flow-content .flow-step .step-content{flex: 1;} .sol .flow-section .flow-content .flow-step .step-content .step-title{font-size: 1.125rem; margin-bottom: 0.75rem;} .sol .flow-section .flow-content .flow-step .step-content .step-list li{font-size: 0.875rem; line-height: 1.714; padding-left: 0.75rem;} .sol .service-client-section{padding: 2rem 0 3.25rem;} .sol .service-client-section .section-header{gap: 0.75rem; margin-bottom: 1.5rem;} .sol .service-client-section .section-header .section-icon{width: 1rem; height: 3rem; font-size: 1.5rem;} .sol .service-client-section .section-header .section-title{font-size: 2rem;} .sol .service-client-section .service-client-content{gap: 2.5rem;} .sol .service-client-section .service-client-content .client-text .client-description{font-size: 1.375rem; line-height: 1.55;}}@keyframes slideInfinite { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* プロダクトをベースに個別構築する課題（遷移先は課題ページ） */ .sol-card--based .chip{ display:inline-block; font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); border:1px solid #EBD9C4; border-radius:2rem; padding:.125rem .75rem; margin-bottom:.75rem; } .sol-card--based:hover .chip{ border-color:var(--secondary-color); color:var(--secondary-color); } /* 「〜について」見出しブロックの調整 - ボタンを外したので flex をやめ、通常のテキスト折り返しに戻す - タイトル部との間が空きすぎるため上余白を詰める */ .sol .solution-about-section .solution-header{ padding-top:0; } .sol .solution-about-section .section-header .section-title{ display:block; gap:0; } /* 「〜について」ブロックの上下バランス調整 変更前 上32px / 見出し下48px / 段落間72px / 下120px → 噛み合っていなかった */ .sol .solution-about-section{ padding:2.5rem 0 3.5rem; } .sol .solution-about-section .solution-content .solution-description{ padding-top:2rem; }@media only screen and (max-width:767.499px){ .sol .solution-about-section{ padding:1.5rem 0 2rem; } .sol .solution-about-section .solution-content .solution-description{ padding-top:1.25rem; }} /* アプローチ本文（既存 .text-block と同じ 1.25rem に揃える） */ .sol .sol-body{ font-size:1.25rem; line-height:2; max-width:56rem; margin:0 0 1.5rem; } .sol .sol-body:last-of-type{ margin-bottom:0; } /* 本文まわりを既存サイト基準まで引き上げ */ .sol .sol-menu p{ font-size:1.25rem; } .sol .sol-menu{ grid-template-columns:repeat(auto-fit,minmax(40rem,1fr)); } .sol .sol-ba p{ font-size:1.25rem; } .sol .sol-list li{ font-size:1.25rem; } .sol .sol-related a{ font-size:1.25rem; } .sol .sol-tech{ font-size:1.125rem; } /* 事例集への導線（CSS 再構築時に失われていたため復旧） */ .sol-caselink{ display:inline-block; font-size:1.25rem; font-weight:700; color:var(--secondary-color); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.125rem; } .sol-caselink:hover{ opacity:.75; }@media only screen and (max-width:767.499px){ .sol .sol-body{ font-size:1rem; } .sol .sol-menu p, .sol .sol-ba p, .sol .sol-list li, .sol .sol-related a{ font-size:1rem; } .sol .sol-menu{ grid-template-columns:1fr; }} /* ヒーロー内の左端を揃える 変更前：h1=0px / 課題文=32px（border4+padding28）/ 相互誘導=28px と3段にずれていた 課題文の縦罫を擬似要素に移し、両ブロックとも padding 1.75rem = 28px に統一 */ .sol .sol-pain{ border-left:0; padding:.25rem 0 .25rem 1.75rem; position:relative; } .sol .sol-pain::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--secondary-color); border-radius:2px; }@media only screen and (max-width:767.499px){ .sol .sol-pain{ padding-left:1rem; } .sol .sol-pain::before{ width:3px; }} /* ヘッダーは背景色を持たない透過（スクロール時にJSで着色）。 直下に色付きセクションを置くとロゴの背後に透けるため、ヒーローは白地にする。 区切りは下罫で取り、相互誘導の箱を逆にグレーにして対比を作る。 */ .sol .sol-hero{ background:#fff; border-bottom:1px solid #E2E2E2; } /* セクションの区切りは罫線ではなく、既存サイトと同じ白／グレーの交互配色で取る */ .sol .sol-hero{ border-bottom:0; } .sol .sol-sec + .sol-sec{ border-top:0; } .sol .sol-sec{ padding:5rem 0; }@media only screen and (max-width:767.499px){ .sol .sol-sec{ padding:2.75rem 0; }} /* 関連プロダクトの導線 本文とリンクが margin-left:.5rem で密着していたため、 flex + gap で離し、幅が足りなければリンクを改行させる。 SERVICE の一覧直下に置いているので上の余白も確保する。 */ .sol .sol-product{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 2rem; margin-top:1.25rem; line-height:1.9; } .sol .sol-product a{ margin-left:0; white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:.125rem; } .sol .sol-product a:hover{ opacity:.75; }@media only screen and (max-width:767.499px){ .sol .sol-product{ gap:.75rem; padding:1.125rem 1.25rem; font-size:1rem; } .sol .sol-product a{ font-size:1.0625rem; }} /* 業界ページ：取り組み領域のうち個別ページを持つものはカードごとリンクにする （矢印マーカーだけ付けてリンクが無い状態だったため） */ .sol .sol-menu li.is-link{ padding:0; transition:border-color .3s ease; } .sol .sol-menu li.is-link:hover{ border-color:var(--secondary-color); } .sol .sol-menu li.is-link > a{ display:block; text-decoration:none; color:inherit; padding:1.5rem 1.625rem; } .sol .sol-menu li.is-link .go{ display:inline-block; margin-top:.875rem; font-size:1.125rem; font-weight:700; color:var(--secondary-color); } /* 事例の一行リストもリンクに */ .sol .sol-list li > a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; } .sol .sol-list li > a:hover{ color:var(--secondary-color); border-bottom-color:currentColor; } .sol .sol-caselink-wrap{ margin:1.75rem 0 0; } /* 実績規模の一文（業界から探す のリード直前） */ .sol .sol-record{ font-size:1.5rem; line-height:1.9; font-weight:700; margin:0 0 1rem; max-width:60rem; } /* 初回相談無料の一文（CLIENT の呼びかけ直後） */ .sol .sol-free{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:1.25rem 0 0; max-width:52rem; }@media only screen and (max-width:767.499px){ .sol .sol-record{ font-size:1.125rem; margin-bottom:.75rem; } .sol .sol-free{ font-size:1rem; margin-top:1rem; }} .sol .uc{ background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.5rem 1.625rem; display:flex; flex-direction:column; } .sol .uc h4{ font-size:1.375rem; font-weight:700; line-height:1.6; margin:0 0 .625rem; } .sol .uc p{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:0; flex:1; } .sol .uc-tag{ display:inline-block; align-self:flex-start; margin-top:1rem; font-size:.9375rem; font-weight:700; color:var(--secondary-color); text-decoration:none; border:1px solid #F0C89A; border-radius:2rem; padding:.25rem .875rem; transition:all .3s ease; } .sol .uc-tag:hover{ border-color:var(--secondary-color); background:var(--bg-third); }@media only screen and (max-width:767.499px){ .sol .uc{ padding:1.25rem; border-radius:.75rem; } .sol .uc h4{ font-size:1.125rem; } .sol .uc p{ font-size:1rem; }} .sol .uc-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; } .sol .uc-col{ display:flex; flex-direction:column; gap:.875rem; } .sol .uc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.875rem; } .sol .uc-cols .uc{ padding:1.25rem 1.375rem; } .sol .uc-cols .uc h4{ font-size:1.25rem; margin-bottom:.5rem; } .sol .uc-cols .uc p{ font-size:1rem; line-height:1.85; } .sol .uc-cols .uc-tag{ font-size:.875rem; margin-top:.875rem; padding:.1875rem .75rem; }@media only screen and (max-width:900px){ .sol .uc-cols{ grid-template-columns:1fr; gap:1.75rem; }}@media only screen and (max-width:767.499px){ .sol .uc-cols .uc h4{ font-size:1.0625rem; } .sol .uc-cols .uc p{ font-size:.9375rem; }} /* ============ USE CASES：現場軸4群＋矢羽ヘッダー ============ 矢羽は clip-path のみ（画像なし・JSなし）。 矢羽を各列の先頭に置くことで、タブレットで群単位に折り返し、 スマホでは自然に「見出し＋その群のカード」の縦積みになる。 */ .sol .uc-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 1.25rem; align-items:start; } .sol .uc-col{ display:flex; flex-direction:column; } .sol .uc-chev{ position:relative; min-height:4.25rem; display:flex; flex-direction:column; justify-content:center; padding:.5rem 1.5rem .5rem 2.25rem; color:#fff; background:var(--text-color); margin-bottom:1.25rem; clip-path:polygon(0 0, calc(100% - 1.125rem) 0, 100% 50%, calc(100% - 1.125rem) 100%, 0 100%, 1.125rem 50%); } .sol .uc-col:first-child .uc-chev{ padding-left:1.5rem; clip-path:polygon(0 0, calc(100% - 1.125rem) 0, 100% 50%, calc(100% - 1.125rem) 100%, 0 100%); } .sol .uc-col:nth-child(even) .uc-chev{ background:#F6C48C; } /* 濃色系の2トーン */ .sol .uc-chev .s{ font-size:.875rem; letter-spacing:.2em; opacity:.72; line-height:1.5; } .sol .uc-chev .t{ font-size:1.125rem; font-weight:700; letter-spacing:.06em; line-height:1.5; } .sol .uc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.875rem; } .sol .uc-cols .uc{ padding:1.25rem 1.375rem; } .sol .uc-cols .uc h4{ font-size:1.25rem; margin-bottom:.5rem; } .sol .uc-cols .uc p{ font-size:1rem; line-height:1.85; } .sol .uc-cols .uc-tag{ font-size:.875rem; margin-top:.875rem; padding:.1875rem .75rem; } /* 基盤帯：注記ではなく「土台の層」として左にアクセントラインを立てる */ .sol .uc-base{ position:relative; margin-top:2rem; background:#fff; border:1px solid #E2E2E2; border-radius:.75rem; padding:1.5rem 1.75rem 1.5rem 2.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.875rem 2rem; } .sol .uc-base::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--secondary-color); border-radius:.75rem 0 0 .75rem; } .sol .uc-base .lead{ font-size:1.125rem; line-height:1.9; margin:0; flex:1; min-width:22rem; } .sol .uc-base .lead b{ font-weight:700; } .sol .uc-base .links{ display:flex; gap:1.5rem; flex-wrap:wrap; margin:0; } .sol .uc-base .links a{ font-size:1.125rem; font-weight:700; color:var(--secondary-color); text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; } .sol .uc-base .links a:hover{ border-bottom-color:currentColor; }@media only screen and (max-width:1000px){ .sol .uc-cols{ grid-template-columns:repeat(2,1fr); gap:1.75rem 1.25rem; } .sol .uc-col:nth-child(3) .uc-chev{ padding-left:1.5rem; clip-path:polygon(0 0, calc(100% - 1.125rem) 0, 100% 50%, calc(100% - 1.125rem) 100%, 0 100%); }}@media only screen and (max-width:767.499px){ /* 矢羽は下向きに退化させ、流れの示唆を残す */ .sol .uc-cols{ grid-template-columns:1fr; gap:1.5rem; } .sol .uc-chev{ min-height:0; padding:.75rem 1.25rem 1.25rem; margin-bottom:1rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - .75rem), 50% 100%, 0 calc(100% - .75rem)); } .sol .uc-col:first-child .uc-chev, .sol .uc-col:nth-child(3) .uc-chev{ padding-left:1.25rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - .75rem), 50% 100%, 0 calc(100% - .75rem)); } .sol .uc-col:last-child .uc-chev{ padding-bottom:.75rem; clip-path:none; border-radius:.375rem; } .sol .uc-chev .t{ font-size:1.0625rem; } .sol .uc-cols .uc h4{ font-size:1.0625rem; } .sol .uc-cols .uc p{ font-size:.9375rem; } .sol .uc-base{ padding:1.25rem 1.25rem 1.25rem 1.75rem; } .sol .uc-base .lead{ font-size:1rem; min-width:0; } .sol .uc-base .links{ gap:1rem; } .sol .uc-base .links a{ font-size:1rem; }} /* 事例の BEFORE / AFTER に流れの矢印を添える */ .sol .sol-ba{ position:relative; } .sol .sol-ba > div:first-child{ position:relative; } .sol .sol-ba > div:first-child::after{ content:""; position:absolute; right:-1.05rem; top:.5rem; width:0; height:0; border-style:solid; border-width:.5rem 0 .5rem .6rem; border-color:transparent transparent transparent var(--secondary-color); }@media only screen and (max-width:767.499px){ .sol .sol-ba > div:first-child::after{ right:auto; left:50%; top:auto; bottom:-1.1rem; transform:translateX(-50%); border-width:.6rem .5rem 0 .5rem; border-color:var(--secondary-color) transparent transparent transparent; }} /* ============ 図版（ページごとに機構を描き分ける）============ 構造は HTML+CSS、絵の部分だけ SVG。文字は実テキストなので どの幅でも読め、スマホでは自然に縦積みへ折り返す。 */ .sol .fig{ margin:2rem 0 1.5rem; } .sol .fig-t{ font-size:1.125rem; font-weight:700; color:var(--text-color); margin-bottom:1rem; }@media only screen and (max-width:767.499px){ .sol .fig{ margin:1.5rem 0 1.25rem; } .sol .fig-t{ font-size:1.0625rem; }} .sol .fig-src{ font-size:.875rem; color:var(--text-secondary); margin:.75rem 0 0; } /* 矢印は列間のすき間に置く */ .sol .cs-n:not(:last-child)::after{ content:""; position:absolute; right:-1.0625rem; top:50%; transform:translateY(-50%); border-style:solid; border-width:.3125rem 0 .3125rem .5rem; border-color:transparent transparent transparent var(--secondary-color); } /* 分析レイヤー */ .sol .cs-band span{ display:block; text-align:center; font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); background:var(--bg-secondary); border-radius:.375rem; padding:.25rem .25rem; } .sol .cs-band span:empty{ background:none; } /* 注記行 */ .sol .cs-loop, .sol .cs-hard{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .75rem; font-size:.875rem; line-height:1.75; color:var(--text-secondary); margin:.25rem 0 0; border:1px dashed #C9C9C9; border-radius:.5rem; padding:.5rem .875rem; } .sol .cs-loop b, .sol .cs-hard b{ flex:0 0 auto; font-size:.875rem; letter-spacing:.08em; color:#fff; background:var(--secondary-color); border-radius:2rem; padding:.0625rem .625rem; } .sol .cs-hard{ border-style:solid; border-color:#F0C89A; background:#FFF4E6; } .sol .fig-src{ font-size:.875rem; color:var(--text-secondary); margin:.625rem 0 0; } /* PC では各ノード内の性質タグを隠す（帯で表現） */ .sol .cs-p{ display:none; }@media only screen and (max-width:1000px){ .sol .cs-row{ grid-template-columns:repeat(2,1fr); gap:1.75rem 1.375rem; } .sol .cs-band{ display:none; } .sol .cs-p{ display:inline-block; font-style:normal; align-self:flex-start; margin-top:.25rem; font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); background:var(--bg-secondary); border-radius:.375rem; padding:.0625rem .5rem; } .sol .cs-n:not(:last-child)::after{ right:-1.0625rem; } .sol .cs-n:nth-child(2n)::after{ right:auto; left:50%; top:auto; bottom:-1.25rem; transform:translateX(-50%); border-width:.5rem .3125rem 0 .3125rem; border-color:var(--secondary-color) transparent transparent transparent; }}@media only screen and (max-width:767.499px){ .sol .cs-row{ grid-template-columns:1fr; gap:1.5rem; } .sol .cs-n:not(:last-child)::after{ right:auto; left:50%; top:auto; bottom:-1.125rem; transform:translateX(-50%); border-width:.5rem .3125rem 0 .3125rem; border-color:var(--secondary-color) transparent transparent transparent; }} /* ============ 工程図：矢羽＋同一色相のグラデーション ============ 左から右へ進むほど濃くなる。色相はブランドのオレンジ1系統に統一し、 明度だけを動かすことで「流れ」を色で示す。 */ .sol .fig--cons{ --f1:#FFF4E6; --f2:#FBDDB6; --f3:#F6B26B; --f4:#EF8B1E; --f5:#C45400; } .sol .fig--cons .fig-t{ font-size:1.375rem; margin-bottom:1.125rem; } .sol .cs{ display:flex; flex-direction:column; gap:.75rem; } .sol .cs-row, .sol .cs-band{ display:grid; grid-template-columns:repeat(5,1fr); gap:0 .375rem; } /* ノード＝矢羽。右辺を尖らせ、左辺を凹ませて連結して見せる */ .sol .cs-n{ position:relative; padding:1.125rem 1.75rem 1.125rem 2.5rem; min-width:0; display:flex; flex-direction:column; gap:.375rem; justify-content:center; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%, 1.5rem 50%); } .sol .cs-row .cs-n:first-child{ padding-left:1.75rem; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%); } .sol .cs-row .cs-n:last-child{ padding-right:1.75rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.5rem 50%); } .sol .cs-row .cs-n:nth-child(1){ background:var(--f1); } .sol .cs-row .cs-n:nth-child(2){ background:var(--f2); } .sol .cs-row .cs-n:nth-child(3){ background:var(--f3); } .sol .cs-row .cs-n:nth-child(4){ background:var(--f4); } .sol .cs-row .cs-n:nth-child(5){ background:var(--f5); } /* 濃い側は白文字に反転させ、どの段でも読める明度差を確保 */ .sol .cs-row .cs-n:nth-child(4), .sol .cs-row .cs-n:nth-child(5){ color:#fff; } .sol .cs-row .cs-n:nth-child(4) i, .sol .cs-row .cs-n:nth-child(5) i{ color:rgba(255,255,255,.92); } .sol .cs-row .cs-n:nth-child(4) .cs-s, .sol .cs-row .cs-n:nth-child(5) .cs-s{ color:rgba(255,255,255,.85); } .sol .cs-row .cs-n:nth-child(4) .cs-fmt, .sol .cs-row .cs-n:nth-child(5) .cs-fmt{ background:rgba(255,255,255,.24); } .sol .cs-n > b{ font-size:1.25rem; line-height:1.5; } .sol .cs-n > i{ font-style:normal; font-size:1.0625rem; line-height:1.7; color:var(--text-secondary); } .sol .cs-s{ align-self:flex-start; font-size:.875rem; font-weight:700; letter-spacing:.12em; color:var(--secondary-color); } .sol .cs-fmt{ align-self:flex-start; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875rem; font-weight:700; background:rgba(0,0,0,.08); border-radius:.25rem; padding:0 .5rem; } .sol .cs-n--io, .sol .cs-n--out, .sol .cs-n--ac{ border:0; } /* 分析レイヤー：同じグラデーションを薄く敷いて対応関係を示す */ .sol .cs-band span{ display:block; text-align:center; font-size:1rem; font-weight:700; letter-spacing:.04em; color:var(--text-color); border-radius:.375rem; padding:.375rem .25rem; } .sol .cs-band span:nth-child(1){ background:var(--f1); } .sol .cs-band span:nth-child(2){ background:var(--f2); } .sol .cs-band span:nth-child(3){ background:var(--f3); } .sol .cs-band span:nth-child(4){ background:var(--f4); color:#fff; } .sol .cs-band span:nth-child(5){ background:var(--f5); color:#fff; } .sol .cs-band span:empty{ background:none; } .sol .cs-loop, .sol .cs-hard{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .875rem; font-size:1.0625rem; line-height:1.85; color:var(--text-secondary); margin:.375rem 0 0; border:0; border-radius:.5rem; padding:.75rem 1.125rem; background:var(--bg-secondary); } .sol .cs-loop b, .sol .cs-hard b{ flex:0 0 auto; font-size:.875rem; letter-spacing:.08em; color:#fff; background:var(--secondary-color); border-radius:2rem; padding:.125rem .75rem; } .sol .cs-hard{ background:#FFF4E6; } .sol .fig-src{ font-size:.875rem; color:var(--text-secondary); margin:.75rem 0 0; } .sol .cs-p{ display:none; }@media only screen and (max-width:1000px){ /* 縦積みでも「下へ流れる」ことが形で分かるよう、矢羽を下向きに倒す */ .sol .cs-row{ grid-template-columns:1fr; gap:.375rem; } .sol .cs-band{ display:none; } .sol .cs-n{ padding:1.25rem 1.5rem 2rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.125rem), 50% 100%, 0 calc(100% - 1.125rem)); } .sol .cs-row .cs-n:first-child{ padding-left:1.5rem; } .sol .cs-row .cs-n:last-child{ padding:1.25rem 1.5rem; clip-path:none; border-radius:0 0 .5rem .5rem; } .sol .cs-p{ display:inline-block; font-style:normal; align-self:flex-start; margin-top:.375rem; font-size:.875rem; font-weight:700; letter-spacing:.04em; color:inherit; background:rgba(0,0,0,.07); border-radius:.375rem; padding:.125rem .625rem; } .sol .cs-row .cs-n:nth-child(4) .cs-p, .sol .cs-row .cs-n:nth-child(5) .cs-p{ background:rgba(255,255,255,.24); }}@media only screen and (max-width:767.499px){ .sol .fig--cons .fig-t{ font-size:1.1875rem; } .sol .cs-n > b{ font-size:1.125rem; } .sol .cs-n > i{ font-size:1rem; } .sol .cs-loop, .sol .cs-hard{ font-size:1rem; }} /* ============ 画像の活用 ============ 旧ソリューションページの素材を再利用。青系のストック画像が続くため、 わずかな暖色オーバーレイと彩度調整でブランドのオレンジ側へ寄せ、 ページ全体の色調を統一する。 */ /* ISSUES カード：遷移先のヒーローと同じ画像を載せ、前後をつなぐ */ .sol .sol-card{ overflow:hidden; } .sol .sol-card-img{ display:block; margin:-1.75rem -1.75rem 1.25rem; position:relative; background:var(--bg-secondary); } .sol .sol-card-img img{ display:block; width:100%; height:10.5rem; object-fit:cover; filter:saturate(.88) contrast(1.02); transition:transform .6s cubic-bezier(.26,.06,0,1); } .sol .sol-card-img::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(244,122,0,.04) 0%, rgba(244,122,0,.18) 100%); } .sol .sol-card:hover .sol-card-img img{ transform:scale(1.045); } /* チップは画像の上に重ねる */ .sol .sol-card--based .chip{ position:relative; z-index:1; }@media only screen and (max-width:767.499px){ .sol .sol-card-img{ margin:-1.25rem -1.25rem 1rem; } .sol .sol-card-img img{ height:9rem; }} /* ============ 境界図（オンプレ専用）============ 流れではなく「囲い」で語る。線を越えないことが要点なので、 矢羽のような方向表現は使わない。 */ .sol .bd{ display:flex; flex-direction:column; } .sol .bd-in{ position:relative; border:2px solid var(--secondary-color); border-radius:.875rem; background:#FFFBF5; padding:2rem 1.5rem 1.5rem; } .sol .bd-lb{ position:absolute; top:-.875rem; left:1.5rem; background:var(--secondary-color); color:#fff; font-size:.9375rem; font-weight:700; letter-spacing:.06em; padding:.1875rem .875rem; border-radius:2rem; } .sol .bd-stack{ display:flex; flex-direction:column; gap:.625rem; } .sol .bd-item{ background:#fff; border:1px solid #EBD9C4; border-radius:.625rem; padding:1rem 1.25rem; } .sol .bd-item b{ display:block; font-size:1.25rem; margin-bottom:.25rem; } .sol .bd-item span{ font-size:1.0625rem; line-height:1.75; color:var(--text-secondary); } .sol .bd-dn{ align-self:center; width:1rem; height:1rem; position:relative; } .sol .bd-dn::after{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); border-style:solid; border-width:.625rem .4375rem 0 .4375rem; border-color:var(--secondary-color) transparent transparent transparent; } /* 境界そのもの */ .sol .bd-line{ display:flex; align-items:center; gap:.875rem; margin:1.25rem 0 .75rem; } .sol .bd-line .bar{ flex:1; height:0; border-top:2px dashed #C9C9C9; } .sol .bd-line .lbl{ flex:0 0 auto; display:flex; align-items:center; gap:.5rem; font-size:1.0625rem; font-weight:700; color:var(--text-color); } .sol .bd-x{ width:1.25rem; height:1.25rem; position:relative; flex:0 0 auto; } .sol .bd-x::before, .sol .bd-x::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:2px; background:#8A7B6B; } .sol .bd-x::before{ transform:rotate(45deg); } .sol .bd-x::after{ transform:rotate(-45deg); } .sol .bd-out{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; padding:1rem 1.25rem; border-radius:.625rem; background:var(--bg-secondary); } .sol .bd-out b{ font-size:1.125rem; color:var(--text-secondary); } .sol .bd-out span{ font-size:1.0625rem; line-height:1.75; color:var(--text-secondary); }@media only screen and (max-width:767.499px){ .sol .bd-in{ padding:1.75rem 1.125rem 1.25rem; } .sol .bd-item b{ font-size:1.125rem; } .sol .bd-item span{ font-size:1rem; } .sol .bd-line .lbl{ font-size:1rem; } .sol .bd-out span{ font-size:1rem; }} /* 画像は APPROACH 本文の右横。元素材 598x360 に対し表示 480px 以下となり、 拡大せずに済むため輪郭が保たれる。 */ .sol .sol-ap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,30rem); gap:2.5rem; align-items:start; } .sol .sol-ap-t .sol-body:last-child{ margin-bottom:0; } .sol .sol-ap-i{ position:relative; border-radius:.75rem; overflow:hidden; background:var(--bg-secondary); } .sol .sol-ap-i img{ display:block; width:100%; height:auto; filter:saturate(.88) contrast(1.02); } .sol .sol-ap-i::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(244,122,0,.04) 0%, rgba(244,122,0,.15) 100%); } /* 製造業ページなど、本文の右に置けない場合は本文カラム幅で敷く */ .sol .sol-mv{ position:relative; max-width:56rem; margin:.5rem 0 0; overflow:hidden; border-radius:.75rem; background:var(--bg-secondary); } .sol .sol-mv img{ display:block; width:100%; aspect-ratio:896/400; object-fit:cover; filter:saturate(.88) contrast(1.02); } .sol .sol-mv::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(244,122,0,.04) 0%, rgba(244,122,0,.15) 100%); } /* ② 連番と業種ラベルを、見出しに対して見劣りしない大きさに */ .sol .sol-menu h4 .m{ font-size:1.625rem; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; line-height:1; } .sol .sol-case .tag{ font-size:1.125rem; letter-spacing:.06em; padding:.3125rem 1.125rem; margin-bottom:1rem; }@media only screen and (max-width:900px){ .sol .sol-ap{ grid-template-columns:1fr; gap:1.5rem; } .sol .sol-ap-i{ max-width:36rem; }}@media only screen and (max-width:767.499px){ .sol .sol-ap-i{ max-width:100%; } .sol .sol-mv{ max-width:100%; border-radius:.5rem; } .sol .sol-mv img{ aspect-ratio:16/9; } .sol .sol-menu h4 .m{ font-size:1.375rem; } .sol .sol-case .tag{ font-size:1.0625rem; }} /* ============ 再調整：2カラム比率・余白のリズム・矢羽の配色 ============ */ /* ① 画像と本文は 50:50、gap 3.25rem。既存テーマの overview-main-content と同値。 本文カラムは約 738px となり、1.25rem の日本語で1行 約37字。 （日本語の可読域は 35〜45字。従来の 896px は45字で上限に張り付いていた） */ .sol .sol-ap{ grid-template-columns:1fr 1fr; gap:3.25rem; align-items:start; margin-bottom:3.25rem; } .sol .sol-ap-t .sol-body{ max-width:none; } /* カラム幅が上限を担うため解除 */ .sol .sol-ap-i{ align-self:start; } /* ② 余白のリズム：近いものは近く、種類が変われば離す APPROACH本文 →（3.25rem）→ 図 →（2.5rem）→ 技術要素タグ */ .sol .sol-ap + .fig{ margin-top:0; } .sol .fig--cons{ margin:0; } .sol .fig--cons + .sol-tech, .sol .fig + .sol-tech{ margin-top:2.5rem; } .sol .sol-ap + .sol-tech{ margin-top:0; } /* ③ USE CASES の矢羽もオレンジのグラデーションに統一。 工程図と同じ色相・同じ「右へ行くほど濃い」原理で、 ページ内の方向表現を1つに揃える。 */ .sol .uc-cols{ --u1:#FAD6AC; --u2:#F6C48C; --u3:#F6B26B; --u4:#EE9F4C; } .sol .uc-col:nth-child(1) .uc-chev{ background:var(--u1); } .sol .uc-col:nth-child(2) .uc-chev{ background:var(--u2); } .sol .uc-col:nth-child(3) .uc-chev{ background:var(--u3); } .sol .uc-col:nth-child(4) .uc-chev{ background:var(--u4); } /* 1〜3段は濃色文字、4段目のみ白抜き（いずれもコントラスト比 4.5:1 以上） */ .sol .uc-col:nth-child(1) .uc-chev, .sol .uc-col:nth-child(2) .uc-chev, .sol .uc-col:nth-child(3) .uc-chev{ color:var(--text-color); } .sol .uc-col:nth-child(1) .uc-chev .s, .sol .uc-col:nth-child(2) .uc-chev .s, .sol .uc-col:nth-child(3) .uc-chev .s{ color:rgba(54,54,54,.72); opacity:1; } .sol .uc-col:nth-child(4) .uc-chev{ color:#fff; } .sol .uc-col:nth-child(4) .uc-chev .s{ color:rgba(255,255,255,.78); opacity:1; }@media only screen and (max-width:900px){ .sol .sol-ap{ grid-template-columns:1fr; gap:1.75rem; margin-bottom:2.5rem; } .sol .sol-ap-i{ max-width:36rem; } .sol .sol-ap-t .sol-body{ max-width:56rem; }}@media only screen and (max-width:767.499px){ .sol .sol-ap-i{ max-width:100%; } .sol .fig--cons + .sol-tech, .sol .fig + .sol-tech{ margin-top:2rem; }} /* 4段目は白文字ではコントラストが不足するため濃色文字に戻す */ .sol .cs-row .cs-n:nth-child(4){ color:var(--text-color); } .sol .cs-row .cs-n:nth-child(4) i{ color:var(--text-secondary); } .sol .cs-row .cs-n:nth-child(4) .cs-s{ color:var(--secondary-color); } .sol .cs-row .cs-n:nth-child(4) .cs-fmt{ background:rgba(0,0,0,.10); color:#fff; } .sol .cs-band span:nth-child(4){ color:var(--text-color); } .sol .cs-row .cs-n:nth-child(4) .cs-p{ background:rgba(0,0,0,.07); } /* ============ CASE：BEFORE → AFTER の変化を矢印で示す ============ 2つのテキストボックスの間（gap の中心）に円形の矢印を置き、 リップルと小さな前進で「変化した」ことを動きでも伝える。 */ .sol .sol-ba{ position:relative; grid-template-columns:1fr 1fr; gap:5.5rem; } .sol .sol-ba::before, .sol .sol-ba::after{ content:""; position:absolute; left:50%; top:50%; width:3.5rem; height:3.5rem; margin:-1.75rem 0 0 -1.75rem; border-radius:50%; pointer-events:none; } /* 外側に広がる波 */ .sol .sol-ba::before{ border:2px solid var(--secondary-color); animation:sol-ba-ring 2.6s cubic-bezier(.26,.06,0,1) infinite; } /* 矢印本体 */ .sol .sol-ba::after{ background:var(--secondary-color) url("data:image/svg+xml;utf8,") center/48% no-repeat; box-shadow:0 .125rem .5rem rgba(244,122,0,.28); animation:sol-ba-push 2.6s cubic-bezier(.4,0,.2,1) infinite; }@keyframes sol-ba-ring{ 0%{ transform:scale(1); opacity:.5 } 70%,100%{ transform:scale(2.1); opacity:0 } }@keyframes sol-ba-push{ 0%,72%,100%{ transform:translateX(0) } 84%{ transform:translateX(.375rem) } }@media only screen and (max-width:900px){ /* 縦積み。矢印は AFTER の上端に接地させ、高さの差に影響されないようにする */ .sol .sol-ba{ grid-template-columns:1fr; gap:4.5rem; } .sol .sol-ba::before, .sol .sol-ba::after{ display:none; } .sol .sol-ba .after{ position:relative; } .sol .sol-ba .after::before, .sol .sol-ba .after::after{ content:""; position:absolute; left:50%; top:-3.375rem; width:3rem; height:3rem; margin-left:-1.5rem; border-radius:50%; pointer-events:none; } .sol .sol-ba .after::before{ border:2px solid var(--secondary-color); animation:sol-ba-ring 2.6s cubic-bezier(.26,.06,0,1) infinite; } .sol .sol-ba .after::after{ background:var(--secondary-color) url("data:image/svg+xml;utf8,") center/48% no-repeat; transform:rotate(90deg); box-shadow:0 .125rem .5rem rgba(244,122,0,.28); animation:sol-ba-push-v 2.6s cubic-bezier(.4,0,.2,1) infinite; }@keyframes sol-ba-push-v{ 0%,72%,100%{ transform:rotate(90deg) translateX(0) } 84%{ transform:rotate(90deg) translateX(.375rem) } }}@media (prefers-reduced-motion:reduce){ .sol .sol-ba::before, .sol .sol-ba::after, .sol .sol-ba .after::before, .sol .sol-ba .after::after{ animation:none; } .sol .sol-ba::before, .sol .sol-ba .after::before{ opacity:.35; }}@media only screen and (max-width:767.499px){ .sol-page .page-header .page-title.jp-title{ font-size:1.9375rem; line-height:1.45; padding:3.75rem 0 1rem; }} /* ============ USE CASES の矢羽：大きく、隙間なく ============ */ /* 列の隙間はカードのためのもの。矢羽は負マージンで隙間を跨ぎ、 互いに食い込んで一本の工程バーとして連なる。 */ .sol .uc-cols{ gap:0; } .sol .uc-col{ padding:0 .625rem; } .sol .uc-chev{ min-height:5.75rem; margin:0 -.625rem 1.125rem; padding:.75rem 1.5rem .75rem 2.75rem; gap:.125rem; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%, 1.5rem 50%); } .sol .uc-col:first-child .uc-chev{ padding-left:1.75rem; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%); } .sol .uc-col:last-child .uc-chev{ padding-right:1.75rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.5rem 50%); } .sol .uc-chev .t{ font-size:1.4375rem; letter-spacing:.04em; line-height:1.35; } .sol .uc-chev .s{ font-size:.875rem; letter-spacing:.16em; } /* 4段目も濃色文字に統一（反転をなくし、左右の見えの差を小さくする） */ .sol .uc-col:nth-child(4) .uc-chev{ color:var(--text-color); } .sol .uc-col:nth-child(4) .uc-chev .s{ color:rgba(54,54,54,.72); opacity:1; }@media only screen and (max-width:1000px){ .sol .uc-cols{ gap:1.75rem 0; }}@media only screen and (max-width:767.499px){ .sol .uc-cols{ gap:1.5rem 0; } .sol .uc-chev{ min-height:0; padding:.875rem 1.25rem 1.5rem; margin:0 -.625rem 1rem; } .sol .uc-chev .t{ font-size:1.1875rem; }} /* ページタイトル：4.5rem は大きすぎたため 0.8 掛け */ .sol-page .page-header .page-title.jp-title{ font-size:3.6rem; padding:4.5rem 0 1.5rem; }@media only screen and (max-width:767.499px){ .sol-page .page-header .page-title.jp-title{ font-size:1.75rem; padding:3.5rem 0 1rem; }} /* ============ CASE の矢印を「流れる矢羽」に統一 ============ */ /* 以前の三角形は撤去（矢印が二重になっていた） */ .sol .sol-ba > div:first-child::after{ content:none; } /* 矢羽が左から右へ連続して流れる。gap の中央に帯として置き、 背景パターンを送ることで「進み続けている」ことを示す。 */ .sol .sol-ba{ position:relative; grid-template-columns:1fr 1fr; gap:6rem; } .sol .sol-ba::before{ content:none; } .sol .sol-ba::after{ content:""; position:absolute; left:50%; top:50%; width:5.25rem; height:2.25rem; margin:-1.125rem 0 0 -2.625rem; border-radius:0; background:none; box-shadow:none; pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:1.375rem 100%; background-repeat:repeat-x; background-position:0 0; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%); animation:sol-ba-run 1.1s linear infinite; }@keyframes sol-ba-run{ from{ background-position:0 0 } to{ background-position:1.375rem 0 } }@media only screen and (max-width:900px){ /* 縦積みでは下向きに流す */ .sol .sol-ba{ grid-template-columns:1fr; gap:4.75rem; } .sol .sol-ba::after{ display:none; } .sol .sol-ba .after{ position:relative; } .sol .sol-ba .after::before{ content:""; position:absolute; left:50%; top:-3.75rem; width:5rem; height:2.25rem; margin-left:-2.5rem; border:0; border-radius:0; transform:rotate(90deg); transform-origin:center; animation:sol-ba-run 1.1s linear infinite; background-image:url("data:image/svg+xml;utf8,"); background-size:1.375rem 100%; background-repeat:repeat-x; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%); } .sol .sol-ba .after::after{ content:none; }}@media (prefers-reduced-motion:reduce){ .sol .sol-ba::after, .sol .sol-ba .after::before{ animation:none; }} /* ============ 中央軸のずれを修正 ============ .client-text は text-align:center。その中で max-width を持つ要素に 左右 auto がないと、囲みの中央と親の中央が食い違って縦線がずれる。 */ .sol .sol-free{ margin-left:auto; margin-right:auto; } /* ============ ハブ冒頭の余白を詰める ============ 見出し→本文、本文→本文とも 2rem 一律で、行間（line-height:2）の ハーフレディングが加算されて実測 50px 前後になっていた。 関係の近さに応じて 2段階に分ける。 */ .sol .solution-about-section .solution-content .solution-description{ padding-top:1.5rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:1.125rem; }@media only screen and (max-width:767.499px){ .sol .solution-about-section .solution-content .solution-description{ padding-top:1.125rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:.875rem; }} /* ============ 業界アイコン ============ */ .sol .sol-icard h3{ display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; } .sol .sol-icard h3 .ic{ flex:0 0 auto; width:1.75rem; height:1.75rem; color:var(--secondary-color); } .sol .sol-icard h3 .nm{ font:inherit; color:inherit; } .sol .sol-icard.on h3 .ic{ color:var(--secondary-color); }@media only screen and (max-width:767.499px){ .sol .sol-icard h3 .ic{ width:1.5rem; height:1.5rem; }} /* ============ ハブ冒頭：2カラム化して縦の長さを半分に ============ 原稿は変えず、レイアウトだけで初見の情報量を圧縮する。 （文言の短縮案は別途ご確認をお願いします） */ .sol .solution-about-section .solution-content{ display:grid; grid-template-columns:1fr 1fr; gap:0 3.25rem; align-items:start; } .sol .solution-about-section .solution-content .solution-description, .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:1.25rem; }@media only screen and (max-width:900px){ .sol .solution-about-section .solution-content{ grid-template-columns:1fr; gap:0; } .sol .solution-about-section .solution-content .solution-description{ padding-top:1.5rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:1.125rem; }} /* ============ 基盤帯：4本の柱が載る「土台」として描く ============ 串刺し（貫通）ではなく、各列の下端から短い脚が降りて基盤に着地する。 基盤は上端に地盤線を持ち、下へ向かって色が沈む。 */ .sol .uc-base{ position:relative; margin-top:3.25rem; padding:2rem 2rem 1.75rem; border:0; border-radius:0 0 .875rem .875rem; border-top:.25rem solid var(--secondary-color); background:linear-gradient(180deg, #FFF4E6 0%, #FBE8CE 100%); box-shadow:inset 0 .5rem .75rem -.5rem rgba(196,84,0,.18); display:flex; flex-wrap:wrap; align-items:center; gap:.875rem 2rem; } /* 上の4列から降りる脚。列中心＝12.5% / 37.5% / 62.5% / 87.5% */ .sol .uc-base::before{ content:""; position:absolute; left:0; right:0; top:-2.5rem; height:2.5rem; pointer-events:none; background-image:repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - .09375rem), var(--secondary-color) calc(12.5% - .09375rem), var(--secondary-color) calc(12.5% + .09375rem), transparent calc(12.5% + .09375rem), transparent 25%); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 100%); opacity:.55; } .sol .uc-base .lead{ font-size:1.1875rem; } .sol .uc-base .lead b{ color:var(--text-color); }@media only screen and (max-width:1000px){ .sol .uc-base{ margin-top:2rem; border-radius:.875rem; } .sol .uc-base::before{ display:none; }}@media only screen and (max-width:767.499px){ .sol .uc-base{ padding:1.25rem 1.25rem 1.125rem; } .sol .uc-base .lead{ font-size:1.0625rem; }} /* 2カラムは撤回。順接の散文を左右に割ると読む順序が壊れる。 並列でない文章は1カラムが正しい。文量そのものを削って解決する。 */ .sol .solution-about-section .solution-content{ display:block; } .sol .solution-about-section .solution-content .solution-description{ padding-top:1.5rem; max-width:64rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:1.125rem; }@media only screen and (max-width:767.499px){ .sol .solution-about-section .solution-content .solution-description{ padding-top:1.125rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:.875rem; }} /* アイコンを一回り拡大（1.75rem → 2.125rem） */ .sol .sol-icard h3 .ic{ width:2.125rem; height:2.125rem; stroke-width:1.6; }@media only screen and (max-width:767.499px){ .sol .sol-icard h3 .ic{ width:1.875rem; height:1.875rem; }} /* ============ ページ内アンカー ============ 冒頭で「このページに何があるか」を示し、読み進めずに目的の節へ跳べるようにする。 長い導入を読ませてから探させるのではなく、導入の直後に選択肢を出す。 */ .sol .sol-jump{ margin-top:2.5rem; } .sol .sol-jump-lb{ display:block; font-size:1rem; font-weight:700; letter-spacing:.08em; color:var(--secondary-color); margin-bottom:.875rem; } .sol .sol-jump ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; } .sol .sol-jump a{ display:flex; flex-direction:column; gap:.25rem; height:100%; background:#fff; border:1px solid #E2E2E2; border-radius:.75rem; padding:1rem 2.75rem 1rem 1.125rem; position:relative; text-decoration:none; transition:border-color .3s cubic-bezier(.26,.06,0,1), background .3s cubic-bezier(.26,.06,0,1); } .sol .sol-jump a b{ font-size:1.1875rem; color:var(--text-color); line-height:1.5; } .sol .sol-jump a span{ font-size:.9375rem; color:var(--text-secondary); line-height:1.6; } /* 下向きの矢印。ホバーで一段沈み、「下へ飛ぶ」ことを示す */ .sol .sol-jump a::after{ content:""; position:absolute; right:1rem; top:50%; margin-top:-.6875rem; width:1.375rem; height:1.375rem; border-radius:50%; background:var(--bg-secondary); background-image:url("data:image/svg+xml;utf8,"); background-size:70%; background-position:center; background-repeat:no-repeat; transition:transform .35s cubic-bezier(.26,.06,0,1), background-color .3s; } .sol .sol-jump a:hover{ border-color:var(--secondary-color); background:#FFFBF5; } .sol .sol-jump a:hover::after{ transform:translateY(.1875rem); background-color:#FBE8CE; } .sol .sol-jump a:focus-visible{ outline:2px solid var(--secondary-color); outline-offset:2px; } /* 固定ヘッダー分のオフセット */ .sol [id^="sec-"]{ scroll-margin-top:7.5rem; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } @media only screen and (max-width:1000px){ .sol .sol-jump ul{ grid-template-columns:repeat(2,1fr); } } @media only screen and (max-width:767.499px){ .sol .sol-jump{ margin-top:1.75rem; } .sol .sol-jump ul{ grid-template-columns:1fr; gap:.5rem; } .sol .sol-jump a{ padding:.875rem 2.5rem .875rem 1rem; border-radius:.625rem; } .sol .sol-jump a b{ font-size:1.0625rem; } .sol .sol-jump a span{ font-size:.875rem; } } /* ============ 矢羽の向き（最終定義）============ 最終段も右向きに尖らせる。営業・顧客対応で事業が終わるのではなく、 ここに載せているのは抜粋であり、先へ続くことを形で示す。 */ .sol .uc-col:last-child .uc-chev{ padding-right:2.75rem; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%, 1.5rem 50%); } .sol .uc-col:first-child .uc-chev{ padding-left:1.75rem; clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%); } @media only screen and (max-width:1000px){ /* 縦積みでは下向きに。最終段も下向きのままにして「続き」を保つ */ .sol .uc-chev{ padding:1rem 1.5rem 1.875rem; margin:0 -.625rem 1rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem)); } .sol .uc-col:first-child .uc-chev, .sol .uc-col:last-child .uc-chev{ padding:1rem 1.5rem 1.875rem; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem)); } } @media only screen and (max-width:767.499px){ .sol .uc-chev, .sol .uc-col:first-child .uc-chev, .sol .uc-col:last-child .uc-chev{ padding:.875rem 1.25rem 1.75rem; } .sol .uc-chev .t{ font-size:1.1875rem; } } /* ============ 基盤帯（作り直し）============ 脚（紐）とグラデーションは撤去。 「支える」を、装飾ではなく“土台の形”そのもので表す。 ・上に載るものより左右に張り出す（基礎は上部構造より広い） ・地盤線を上端に引く（矢羽の最終色と同じ = 同じ系統の要素） ・角丸は下だけ。上辺は直線で切り、地面として途切れさせない ・下辺を厚くして重心を落とす */ .sol .uc-base::before{ content:none; } .sol .uc-base{ position:relative; margin:2.25rem -1.25rem 0; padding:1.75rem 2.5rem 1.625rem; background:#FFF1E0; border:0; border-top:.3125rem solid #EE9F4C; border-bottom:.0625rem solid #EBD9C4; border-radius:0 0 1rem 1rem; box-shadow:none; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 2.5rem; } .sol .uc-base .lead{ flex:1 1 30rem; font-size:1.1875rem; line-height:1.9; margin:0; color:var(--text-secondary); } .sol .uc-base .lead b{ color:var(--text-color); font-weight:700; } .sol .uc-base .links{ display:flex; gap:1.75rem; flex-wrap:wrap; margin:0; } .sol .uc-base .links a{ font-size:1.125rem; font-weight:700; color:#C45400; text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; } .sol .uc-base .links a:hover{ border-bottom-color:currentColor; } @media only screen and (max-width:1000px){ .sol .uc-base{ margin:2rem -1.25rem 0; } } @media only screen and (max-width:767.499px){ .sol .uc-base{ margin:1.5rem -1.25rem 0; padding:1.25rem 1.25rem 1.125rem; border-radius:0; gap:.625rem 1.25rem; } .sol .uc-base .lead{ flex:1 1 100%; font-size:1.0625rem; } .sol .uc-base .links{ gap:1rem; } .sol .uc-base .links a{ font-size:1rem; } } /* ============ アンカーナビ：押せることが見える形に ============ カード（読むもの）ではなくボタン（押すもの）として設計する。 アフォーダンスの手掛かりを4つ重ねる。 1. 厚み：下辺に実体のある影を置き、物理的なキーに見せる 2. 面：地色から浮く塗りと、ブランド色の枠で「操作対象」だと示す 3. 標的：右端の円を塗りつぶし、押す場所を明示する 4. 反応：ホバーで持ち上がり、押下で沈む（動きで押せることを確認させる） */ .sol .sol-jump ul{ gap:.875rem; } .sol .sol-jump a{ background:#fff; border:.09375rem solid #F0C89A; border-radius:.875rem; box-shadow:0 .1875rem 0 #FAD6AC; padding:1.25rem 3.5rem 1.25rem 1.25rem; gap:.3125rem; transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), background-color .18s, border-color .18s; } .sol .sol-jump a b{ font-size:1.25rem; } .sol .sol-jump a span{ font-size:.9375rem; } .sol .sol-jump a::after{ width:1.75rem; height:1.75rem; right:1.125rem; margin-top:-.875rem; background-color:var(--secondary-color); background-size:66%; background-image:url("data:image/svg+xml;utf8,"); box-shadow:0 .0625rem .25rem rgba(196,84,0,.3); } .sol .sol-jump a:hover{ transform:translateY(-.1875rem); box-shadow:0 .375rem 0 #F0C89A; background-color:#FFFBF5; border-color:var(--secondary-color); } .sol .sol-jump a:hover::after{ transform:translateY(.1875rem); background-color:#C45400; } .sol .sol-jump a:active{ transform:translateY(.125rem); box-shadow:0 .0625rem 0 #F0C89A; } .sol .sol-jump-lb{ font-size:1.0625rem; } @media (prefers-reduced-motion:reduce){ .sol .sol-jump a, .sol .sol-jump a::after{ transition:none; } .sol .sol-jump a:hover{ transform:none; } } /* ============ タイトル直下の空きを詰める ============ タイトルの下余白・パンくず・セクション上余白が三重に積み上がっていた */ .sol-page .page-header .page-title.jp-title{ padding:4rem 0 .875rem; } .sol .solution-about-section{ padding-top:1.25rem; } .sol .solution-about-section .solution-header{ padding-top:0; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:.875rem; } @media only screen and (max-width:767.499px){ .sol-page .page-header .page-title.jp-title{ padding:3rem 0 .625rem; } .sol .solution-about-section{ padding-top:1rem; } .sol .solution-about-section .solution-content .solution-description:first-child{ padding-top:.75rem; } } /* ============ 基盤ブロック（作り直し）============ 帯ではなく、業務フローと同じ「バー＋カード」の体裁に揃える。 ただしバーは矢羽にせず、全幅の水平バーにする。 基盤は流れないので方向を持たない。色は工程の系列から外して 濃色にし、上部構造の下に敷かれた地盤として読ませる。 */ .sol .uc-base{ display:block; margin:2.5rem 0 0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; } .sol .uc-base-bar{ display:flex; flex-direction:column; gap:.125rem; justify-content:center; min-height:5.75rem; padding:.75rem 1.75rem; margin:0 -.625rem; background:var(--text-color); color:#fff; border-radius:0; } .sol .uc-base-bar .s{ font-size:.875rem; letter-spacing:.16em; color:rgba(255,255,255,.72); } .sol .uc-base-bar .t{ font-size:1.4375rem; font-weight:700; letter-spacing:.04em; line-height:1.35; } .sol .uc-base-lead{ font-size:1.125rem; line-height:1.9; color:var(--text-secondary); margin:1.125rem 0 1.125rem; max-width:56rem; } .sol .uc-base-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.875rem; } .sol .uc-base-list .uc{ padding:1.25rem 1.375rem; } .sol .uc-base-list .uc h4{ font-size:1.25rem; margin-bottom:.5rem; } .sol .uc-base-list .uc p{ font-size:1rem; line-height:1.85; } .sol .uc-base-list .uc-tag{ font-size:.875rem; margin-top:.875rem; padding:.1875rem .75rem; } /* タイトルの太字を復帰（未使用CSS整理の際に font-weight が失われていた） */ .sol-page .page-header .page-title.jp-title{ font-weight:700; letter-spacing:-.01em; } @media only screen and (max-width:1000px){ .sol .uc-base{ margin-top:2rem; } .sol .uc-base-bar{ min-height:0; padding:1rem 1.5rem; } } @media only screen and (max-width:767.499px){ .sol .uc-base-bar{ padding:.875rem 1.25rem; } .sol .uc-base-bar .t{ font-size:1.1875rem; } .sol .uc-base-lead{ font-size:1.0625rem; margin:1rem 0; } .sol .uc-base-list{ grid-template-columns:1fr; gap:.75rem; } .sol .uc-base-list .uc h4{ font-size:1.0625rem; } .sol .uc-base-list .uc p{ font-size:.9375rem; } } /* ============ アンカーナビ：Flow の丸に合わせる ============ Flow セクションの STEP 円（border-radius:50% / --btn-yellow）と同じ語彙。 押したくなる形の条件を、デザイン工学の観点から4つ満たす。 1. 厚み 下辺に実体のある影を置き、指で押し込める物体に見せる 2. 標的 円は方向を持たず中心が明確なので、押す場所が一意に決まる 3. 反応 ホバーで浮き、押下で沈む。影の高さも連動させて奥行きを保つ 4. 誘い 待機中にごく小さく上下し、順に時間差をつけて視線を運ぶ */ .sol .sol-jump ul{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } .sol .sol-jump a{ display:flex; flex-direction:column; align-items:center; text-align:center; background:none; border:0; box-shadow:none; padding:.5rem .5rem 1rem; gap:.875rem; border-radius:1rem; transition:background-color .2s; } .sol .sol-jump a::after{ content:none; } .sol .sol-jump a .ci{ width:4.75rem; height:4.75rem; border-radius:50%; background-color:var(--btn-yellow); box-shadow:0 .25rem 0 #DFB600; background-image:url("data:image/svg+xml;utf8,"); background-size:44%; background-position:center; background-repeat:no-repeat; transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow .24s cubic-bezier(.34,1.56,.64,1); animation:sol-jump-idle 3.2s ease-in-out infinite; } .sol .sol-jump li:nth-child(2) .ci{ animation-delay:.18s; } .sol .sol-jump li:nth-child(3) .ci{ animation-delay:.36s; } .sol .sol-jump li:nth-child(4) .ci{ animation-delay:.54s; } @keyframes sol-jump-idle{ 0%,78%,100%{ transform:translateY(0) } 88%{ transform:translateY(-.125rem) } } .sol .sol-jump a b{ font-size:1.1875rem; line-height:1.5; } .sol .sol-jump a span:not(.ci){ font-size:.9375rem; line-height:1.6; } .sol .sol-jump a:hover{ background-color:#FFFBF5; } .sol .sol-jump a:hover .ci{ animation:none; transform:translateY(-.1875rem) scale(1.04); box-shadow:0 .4375rem 0 #DFB600; } .sol .sol-jump a:active .ci{ animation:none; transform:translateY(.25rem) scale(1); box-shadow:0 0 0 #DFB600; } .sol .sol-jump a:focus-visible{ outline:2px solid var(--secondary-color); outline-offset:3px; } @media (prefers-reduced-motion:reduce){ .sol .sol-jump a .ci{ animation:none; transition:none; } .sol .sol-jump a:hover .ci{ transform:none; } } @media only screen and (max-width:1000px){ .sol .sol-jump ul{ grid-template-columns:repeat(2,1fr); gap:1rem; } } @media only screen and (max-width:767.499px){ .sol .sol-jump ul{ grid-template-columns:repeat(2,1fr); gap:.75rem; } .sol .sol-jump a{ padding:.375rem .25rem .75rem; gap:.625rem; } .sol .sol-jump a .ci{ width:3.75rem; height:3.75rem; box-shadow:0 .1875rem 0 #DFB600; } .sol .sol-jump a b{ font-size:1.0625rem; } .sol .sol-jump a span:not(.ci){ font-size:.875rem; } } /* ============ タイトル〜本文の空白を詰める ============ .title-component に height:21rem（336px）の固定高があり、 中身（タイトル＋パンくず）より高いぶんがそのまま空白になっていた。 高さを内容なりに戻し、下の余白も積み上げを解消する。 */ .sol-page .title-component{ height:auto; padding-bottom:0; } .sol-page .page-header .page-title.jp-title{ padding:3.5rem 0 .75rem; } .sol-page .breadcrumb{ margin-bottom:0; } .sol main.space-three{ padding-top:1.5rem; } .sol main:not(.space-three){ padding-top:1.5rem; } .sol .solution-about-section{ padding-top:1rem; } .sol .sol-hero{ padding-top:1.5rem; } @media only screen and (max-width:767.499px){ .sol-page .title-component{ padding:2.75rem 0 0; } .sol-page .page-header .page-title.jp-title{ padding:2.5rem 0 .5rem; } .sol main.space-three, .sol main:not(.space-three){ padding-top:1rem; } .sol .solution-about-section{ padding-top:.75rem; } } /* ============ FOUNDATION：1枚の土台スラブ ============ デザイナーとしての判断：画像背景は採らない。 理由 ①手持ちの素材は青系で、濃色バーと色が争う ②高さが 6rem 前後しかなく、写真は判読不能な帯になる ③「基盤」は素材ではなく“層”の話なので、写真より面が正しい 代わりに、全体を1枚の淡色スラブにして、その上にカードを載せる。 ・上に載るものより左右に張り出す（基礎は上部構造より広い） ・カードは白のまま＝上部構造と同じ素材が、この層の上に載っている ・スラブ自体は無地。地盤は主張せず、支えることだけを担う */ .sol .uc-base{ display:block; margin:2.5rem -2.5rem 0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; } .sol .uc-base-in{ background:#FDEDD6; border-radius:1.25rem; padding:2rem 2.5rem 2.25rem; } .sol .uc-base-h{ display:flex; flex-direction:column; gap:.1875rem; } .sol .uc-base-h .s{ font-size:.875rem; font-weight:700; letter-spacing:.18em; color:var(--f5); } .sol .uc-base-h .t{ font-size:1.5rem; font-weight:700; letter-spacing:.04em; line-height:1.4; color:var(--text-color); } .sol .uc-base-lead{ font-size:1.125rem; line-height:1.9; margin:.75rem 0 1.5rem; color:var(--text-secondary); max-width:56rem; } .sol .uc-base-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .sol .uc-base-list .uc{ background:#fff; border:0; padding:1.375rem 1.5rem; border-radius:.875rem; } .sol .uc-base-list .uc h4{ font-size:1.25rem; margin-bottom:.5rem; } .sol .uc-base-list .uc p{ font-size:1rem; line-height:1.85; color:var(--text-secondary); } .sol .uc-base-list .uc-tag{ font-size:.875rem; margin-top:1rem; padding:.1875rem .75rem; } /* ============ ボタン：ホバー時の黄色地を撤去、輪郭を補強 ============ */ .sol .sol-jump a:hover{ background-color:transparent; } .sol .sol-jump a .ci{ border:.09375rem solid #A88400; } @media only screen and (max-width:1000px){ .sol .uc-base{ margin:2rem -1.25rem 0; } .sol .uc-base-in{ padding:1.75rem 1.75rem 2rem; } } @media only screen and (max-width:767.499px){ .sol .uc-base{ margin:1.75rem -1.25rem 0; } .sol .uc-base-in{ padding:1.375rem 1.25rem 1.5rem; border-radius:1rem; } .sol .uc-base-h .t{ font-size:1.25rem; } .sol .uc-base-lead{ font-size:1.0625rem; margin:.625rem 0 1.125rem; } .sol .uc-base-list{ grid-template-columns:1fr; gap:.75rem; } .sol .uc-base-list .uc{ padding:1.125rem 1.25rem; } .sol .uc-base-list .uc h4{ font-size:1.0625rem; } .sol .uc-base-list .uc p{ font-size:.9375rem; } } /* ============ 待機時の動きを、はっきり分かる弾みに ============ 2px の微動は「壊れている？」と感じさせる。 大きく1回跳ね、小さくもう1回跳ねて静止する二段バウンドにする。 影の落差も連動させ、浮いた瞬間に地面との距離が開くようにする。 */ .sol .sol-jump a .ci{ animation:sol-jump-bounce 2.4s cubic-bezier(.34,1.4,.64,1) infinite; } .sol .sol-jump li:nth-child(2) .ci{ animation-delay:.15s; } .sol .sol-jump li:nth-child(3) .ci{ animation-delay:.3s; } .sol .sol-jump li:nth-child(4) .ci{ animation-delay:.45s; } @keyframes sol-jump-bounce{ 0%, 58%, 100%{ transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 66% { transform:translateY(-.5rem); box-shadow:0 .625rem 0 #DFB600; } 74% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 80% { transform:translateY(-.25rem); box-shadow:0 .4375rem 0 #DFB600; } 87% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } } @media (prefers-reduced-motion:reduce){ .sol .sol-jump a .ci{ animation:none; } } /* ============ 待機の弾みを、ゆっくり柔らかく ============ 周期を 2.4秒 → 4.6秒に延ばし、静止時間を長く取る。 跳ね上がりの曲線は、行き過ぎのある弾性系（.34,1.4,.64,1）から 正弦に近い ease-in-out（.45,0,.55,1）へ。角が取れて浮遊感が出る。 */ .sol .sol-jump a .ci{ animation:sol-jump-float 4.6s cubic-bezier(.45,0,.55,1) infinite; } .sol .sol-jump li:nth-child(2) .ci{ animation-delay:.28s; } .sol .sol-jump li:nth-child(3) .ci{ animation-delay:.56s; } .sol .sol-jump li:nth-child(4) .ci{ animation-delay:.84s; } @keyframes sol-jump-float{ 0%, 62%, 100%{ transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 74% { transform:translateY(-.5rem); box-shadow:0 .625rem 0 #DFB600; } 84% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 90% { transform:translateY(-.1875rem); box-shadow:0 .40625rem 0 #DFB600; } 96% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } } @media (prefers-reduced-motion:reduce){ .sol .sol-jump a .ci{ animation:none; } } /* ============ 待機の弾みを「左から右へ流れる波」として読ませる ============ 意図は当初から左→右の波だった（読み順・上の矢羽の流れと同じ向き）。 ただし周期 4.6秒に対し時間差が 0.84秒しかなく、4つの跳ねが 1.5秒幅に散らばって「ばらばら」に見えていた。 跳ねる時間を短くし、時間差を広げて、順番が読み取れるようにする。 4つが跳ね終わるまで 1.35秒 → 3.45秒静止、を繰り返す。 */ .sol .sol-jump a .ci{ animation:sol-jump-wave 4.8s cubic-bezier(.45,0,.55,1) infinite; } .sol .sol-jump li:nth-child(1) .ci{ animation-delay:0s; } .sol .sol-jump li:nth-child(2) .ci{ animation-delay:.45s; } .sol .sol-jump li:nth-child(3) .ci{ animation-delay:.9s; } .sol .sol-jump li:nth-child(4) .ci{ animation-delay:1.35s; } @keyframes sol-jump-wave{ 0%, 72%, 100%{ transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 80% { transform:translateY(-.5rem); box-shadow:0 .625rem 0 #DFB600; } 88% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } 92% { transform:translateY(-.15625rem); box-shadow:0 .375rem 0 #DFB600; } 96% { transform:translateY(0); box-shadow:0 .25rem 0 #DFB600; } } @media (prefers-reduced-motion:reduce){ .sol .sol-jump a .ci{ animation:none; } } /* ============ 基盤スラブを「3つの地層」に分ける ============ スラブ導入時の原則を守る：カードは白のまま＝上部構造と同じ素材、 スラブ（地盤）は無地で支えることだけを担う。 よって層は「白いカード3枚を等幅で積む」だけにし、 半透明の面や台形状の広がりは使わない。 ORIONは唯一のプロダクトとして、ブランド色の輪郭と名前だけで区別する。 */ .sol .uc-strata{ display:flex; flex-direction:column; gap:.75rem; } .sol .uc-stratum{ display:grid; grid-template-columns:3.25rem 1fr auto; gap:1.5rem; align-items:center; background:#fff; border:1px solid #E2E2E2; border-radius:1rem; padding:1.375rem 1.625rem; } .sol .uc-stratum .idx{ font-size:1.625rem; font-weight:700; line-height:1; letter-spacing:.04em; color:#D6D6D6; } .sol .uc-stratum h4{ font-size:1.25rem; font-weight:700; margin:0 0 .375rem; line-height:1.5; } .sol .uc-stratum h4 small{ font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); margin-left:.625rem; } .sol .uc-stratum .bd p{ font-size:1rem; line-height:1.85; color:var(--text-secondary); margin:0; max-width:52rem; } /* 「この工程からご依頼可能」＝ .sol-card--based .chip と同じ非リンクの札 */ .sol .uc-stratum .st-tag{ justify-self:end; white-space:nowrap; font-size:.875rem; font-weight:700; letter-spacing:.06em; color:var(--text-secondary); border:1px solid #EBD9C4; border-radius:2rem; padding:.25rem .875rem; } /* --- 03：プロダクトの区別は「プロダクトをベースに構築」の札が担うため、 カード自体は他の層と同じ扱いにする --- */ .sol .uc-stratum--orion .lk{ display:flex; flex-wrap:wrap; gap:.5rem .625rem; margin-top:.875rem; } .sol .uc-stratum--orion .uc-tag{ margin:0; font-size:.875rem; padding:.1875rem .75rem; } @media only screen and (max-width:767.499px){ .sol .uc-stratum{ grid-template-columns:2.25rem 1fr; gap:.875rem; padding:1.125rem 1.25rem; } .sol .uc-stratum .idx{ font-size:1.25rem; } .sol .uc-stratum h4{ font-size:1.0625rem; } .sol .uc-stratum h4 small{ display:block; margin:.125rem 0 0; } .sol .uc-stratum .bd p{ font-size:.9375rem; } .sol .uc-stratum .st-tag{ grid-column:2; justify-self:start; } .sol .uc-stratum--orion .brand{ font-size:1.375rem; } } /* ============ デザインレビュー1周目の修正 ============ 1) カード画像のアスペクト比を列数に応じて補正 （全カード一律 height:10.5rem のため、全幅カードは7:1の細帯に、 2枚並びは3.4:1になっていた。列が減るほど高さを足して比率を近づける） 2) SparkTalk画像は下部に文言が焼き込まれており、中央crop で 文字が行の途中で切れる。焼き込み文言が収まる位置に crop を移動 3) INDUSTRYカードの英語ラベルを名前の下の行に統一 （コンサル・専門サービスだけ折り返して本文開始位置がズレていた） 4) ジャンプナビの見出しをアイテム列と同じ中央軸に揃える */ .sol-cards .sol-card:only-child .sol-card-img img{ height:14rem; } .sol-cards .sol-card:first-child:nth-last-child(2) .sol-card-img img, .sol-cards .sol-card:first-child:nth-last-child(2) ~ .sol-card .sol-card-img img{ height:12rem; } .sol-card-img img[src*="sparktalk"]{ object-position:center 27%; } .sol .sol-icard h3{ gap:.25rem .625rem; } .sol .sol-icard h3 .en{ flex-basis:100%; } /* 5) 「詳しく見る」をカード下端に揃える（チップ有無で行位置がズレていた） */ .sol .sol-card{ display:flex; flex-direction:column; align-items:stretch; } .sol .sol-card .chip{ align-self:flex-start; } .sol .sol-card .go{ margin-top:auto; padding-top:1rem; } .sol .sol-jump-lb{ text-align:center; } @media only screen and (max-width:767.499px){ .sol-cards .sol-card:only-child .sol-card-img img, .sol-cards .sol-card:first-child:nth-last-child(2) .sol-card-img img, .sol-cards .sol-card:first-child:nth-last-child(2) ~ .sol-card .sol-card-img img{ height:10.5rem; } } /* ============ デザインレビュー2周目の修正 ============ 6) FLOW / CLIENT の見出しに .en が無く、他セクション（DM Sans）と 書体が割れていた → HTML側で .en を付与（このコメントは記録） 7) INDUSTRYの「取り組みについて問い合わせる」がグレーの平文に見え、 リンクと認識しづらい。ページ内の矢印リンクは全てブランド色のため統一 8) 工程チェブロンの英字ラベル（DESIGN等）の不透明度を上げ、 小さい文字のコントラストを確保 */ .sol .sol-icard .foot a.ask{ color:var(--secondary-color); font-weight:700; } .sol .uc-chev .s{ opacity:.85; } /* ============ 修正依頼対応（2026-08-15） ============ 1) ジャンプナビ「具体的な内容はこちら」：本文より小さく見えていたため 1.25remへ拡大し、上の段落ブロックとの間隔を広げる 2) FOUNDATIONの層番号 01-03 が薄いグレーで見えにくい → ブランド色に 3) 工程チェブロンの英字ラベルがページ内最小（11px）だった → 13pxに */ .sol .sol-jump{ margin-top:3rem; } .sol .sol-jump-lb{ font-size:1.25rem; margin-bottom:1.5rem; } .sol .uc-stratum .idx{ color:var(--secondary-color); } .sol .uc-chev .s{ font-size:.875rem; } /* ============ 改行位置の制御とフロー図の右端 ============ 1) 見出し・リード文の不格好な折返し（1文字だけの行送り、単語の途中割れ）を PC幅でのみ明示改行で制御する。モバイルでは自然な折返しに任せる 2) 工程図の最終ノードが四角（終端）に見えていたため、 他ノードと同じ右向きの矢羽にして「業務がその先へ続いていく」形にする */ @media only screen and (max-width:767.499px){ .br-pc{ display:none; } } .sol .cs-row .cs-n:last-child{ clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%, 1.5rem 50%); } /* ============ ヒーロー（about）の演出強化 ============ 要望: リード一式を気持ち下げ、色・動きで期待感を出す。 ・ブランド色（黄→橙）の柔らかな光をタイトル奥に2つ浮かべ、ゆっくり漂わせる ・見出しの「オーダーメイドAI」だけブランドのグラデーション文字に ・見出し→段落→ジャンプナビの順に、下からふわっと立ち上がる入場アニメーション ・reduced-motion 環境ではすべて静止 */ /* 光はセクションではなくページに属する。右上の1つの丸が、 区切りのない紙面をぽわーと照らす（矩形の輪郭を持たない） */ body.sol{ position:relative; } body.sol::before{ /* 乗算で最前面から「照らす」：下の要素の背景に遮られないため、 光と白面の境界に直線が生じ得ない */ content:""; position:absolute; z-index:2; pointer-events:none; top:-16rem; right:-14rem; width:52rem; height:52rem; border-radius:50%; mix-blend-mode:multiply; background:radial-gradient(circle, rgba(255,236,205,1) 0%, rgba(255,244,226,1) 40%, rgba(255,255,255,1) 66%, rgba(255,255,255,1) 100%); animation:sol-breathe 7s ease-in-out infinite alternate; } @keyframes sol-breathe{ from{ opacity:.5; } to{ opacity:1; } } .sol .solution-about-section .section-inner{ position:relative; z-index:1; } /* 全体を気持ち下げる */ .sol .solution-about-section .solution-header{ margin-top:3rem; } /* キーワードのグラデーション文字 */ .sol .solution-about-section .grad{ background:linear-gradient(90deg, #F47A00, #FF9F00 55%, #E8B400); -webkit-background-clip:text; background-clip:text; color:transparent; } /* 入場アニメーション（下からふわっと、時差つき） */ @keyframes sol-rise{ from{ opacity:0; transform:translateY(1.25rem); } to{ opacity:1; transform:none; } } .sol .solution-about-section .section-title{ animation:sol-rise .7s cubic-bezier(.22,.9,.35,1) both; } .sol .solution-about-section .solution-description{ animation:sol-rise .7s cubic-bezier(.22,.9,.35,1) both; } .sol .solution-about-section .solution-description:nth-of-type(1){ animation-delay:.15s; } .sol .solution-about-section .solution-description:nth-of-type(2){ animation-delay:.3s; } .sol .solution-about-section .sol-jump{ animation:sol-rise .7s cubic-bezier(.22,.9,.35,1) both; animation-delay:.45s; } @media (prefers-reduced-motion:reduce){ .sol .solution-about-section::before, .sol .solution-about-section .section-title, .sol .solution-about-section .solution-description, .sol .solution-about-section .sol-jump{ animation:none; } } @media only screen and (max-width:767.499px){ .sol .solution-about-section .solution-header{ margin-top:1.5rem; } } /* ============ FOUNDATION：一気通貫レール（縦の矢羽） ============ 工程チェブロンと同じ矢羽の造形・配色を縦に用いた「背表紙」。 上下両端が尖った形そのものが両方向の矢印として働き、 カード列と同じ高さ・同じ角丸感で右辺に立つため、浮遊感が出ない。 */ .sol .uc-strata{ display:grid; grid-template-columns:1fr 4.5rem; gap:0 .875rem; align-items:stretch; } .sol .uc-strata-list{ display:flex; flex-direction:column; gap:.75rem; min-width:0; } .sol .uc-strata-rail{ display:flex; } .sol .uc-strata-rail b{ flex:1; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; white-space:nowrap; font-size:1.125rem; font-weight:700; letter-spacing:.3em; color:#4A2E14; padding:3.25rem 0; background:linear-gradient(180deg, #FAD6AC, #EE9F4C); clip-path:polygon(50% 0, 100% 2.25rem, 100% calc(100% - 2.25rem), 50% 100%, 0 calc(100% - 2.25rem), 0 2.25rem); } @media only screen and (max-width:767.499px){ .sol .uc-strata{ display:flex; flex-direction:column; } .sol .uc-strata-rail{ display:none; } } /* ============ 「具体的な内容はこちら」の格上げ ============ 小さな注記ではなく、ヒーローから各セクションへ送り出す案内見出しとして扱う。 ・見出しの「オーダーメイドAI」と同じブランドグラデーションの文字 ・シェルフ見出しの罫線イディオムを短い飾り線として左右に継承 */ .sol .sol-jump-lb{ display:flex; align-items:center; justify-content:center; gap:1.125rem; font-size:1.375rem; font-weight:700; letter-spacing:.1em; background:linear-gradient(90deg, #F47A00, #FF9F00 55%, #E8B400); -webkit-background-clip:text; background-clip:text; color:transparent; } .sol .sol-jump-lb::before, .sol .sol-jump-lb::after{ content:""; width:3rem; height:2px; border-radius:1px; flex:0 0 auto; } .sol .sol-jump-lb::before{ background:linear-gradient(90deg, rgba(246,178,107,0), #F6B26B); } .sol .sol-jump-lb::after{ background:linear-gradient(90deg, #F6B26B, rgba(246,178,107,0)); } @media only screen and (max-width:767.499px){ .sol .sol-jump-lb{ font-size:1.125rem; gap:.75rem; } .sol .sol-jump-lb::before, .sol .sol-jump-lb::after{ width:2rem; } } /* ============ 工程ラベル帯の形状を矢羽に統一 ============ ノード（矢羽）の直下に四角い帯が並ぶと形の言語が割れて見えるため、 帯にも同じクリップ形状（左辺の凹み＋右辺の尖り）を適用して揃える */ .sol .cs-band span{ clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 0 100%, 1.5rem 50%); } /* ============ CLIENTセクション：相談コピーの上余白 ============ ロゴ帯の直後に catch が密着して見えるため、間合いを広げる（全ページ共通） */ .sol .service-client-section .client-text{ margin-top:3.5rem; } @media only screen and (max-width:767.499px){ .sol .service-client-section .client-text{ margin-top:2.25rem; } } /* ============ 工程図：3番目ノードのSTEPラベル可読性 ============ ノード3の地色（#F6B26B）とラベルのブランドオレンジが同化するため、 このノードのみ濃色に落とす（4・5番は既に白文字で対応済み） */ .sol .cs-row .cs-n:nth-child(3) .cs-s{ color:#7A4200; } .sol .cs-row .cs-n:nth-child(3) .cs-fmt{ background:rgba(255,255,255,.4); } .sol .cs-row .cs-n:nth-child(4) .cs-s{ color:#fff; } /* ============ 工程図：4番目ノードの文字色 ============ 旧上書きで黒（本文色）に戻っており、オレンジ地に黒文字が浮いていた。 白は地色とのコントラストが2.6:1で不足するため、 矢羽スパインと同じ濃茶に統一（4.5:1以上を確保、配色体系にも一致） */ .sol .cs-row .cs-n:nth-child(4){ color:#4A2E14; } .sol .cs-row .cs-n:nth-child(4) i{ color:rgba(74,46,20,.92); } .sol .cs-row .cs-n:nth-child(4) .cs-s{ color:#4A2E14; } .sol .cs-row .cs-n:nth-child(4) .cs-fmt{ background:rgba(255,255,255,.35); color:#4A2E14; } /* ============ APPROACH：見出しと本文・図の間合い ============ sec-head の下マージンはリード文がある前提の狭い値のため、 リード文を持たないAPPROACHでは本文が詰まって見えていた */ .sol .sec-head + .sol-ap{ margin-top:2.5rem; } .sol .sol-ap + .fig{ margin-top:6.5rem; } /* APPROACHセクション（図を含む節）は下余白を詰め、 図が「本文下端とSERVICE見出しのちょうど中間」に見えるよう均衡させる */ .sol .sol-sec:has(.fig){ padding-bottom:2rem; } /* ============ 横スクロールの禁止 ============ ヒーローの光（body.sol::before、right:-14rem）が右方向にはみ出すと スクロール領域が横に広がるため、bodyで刈り取る。 hidden はスクロールコンテナ化の副作用があるため clip を優先 （非対応ブラウザ向けに hidden をフォールバック） */ html:has(> body.sol){ overflow-x:clip; } body.sol{ overflow-x:clip; } /* ============ 日本語の自然な折返し ============ 既定の折返しは「開発か|ら」のように助詞の途中でも割れる。 word-break:auto-phrase（BudouXによる文節折返し・Chrome/Edge実装済み）を 本文と見出しに適用する。非対応ブラウザは従来挙動のままの漸進的改善 */ body.sol p, body.sol h1, body.sol h2:not(.en), body.sol h3, body.sol h4, body.sol .sec-lede, body.sol .solution-description{ word-break: auto-phrase; }