@charset "UTF-8"; /* ============================================================================= theme-ramlabel ── assets/css/about.css ============================================================================= ABOUTページ（/about/）だけが読み込むCSSです。 ★なぜ style.css に足さず、別ファイルにしたのか style.css は2100行あります。1ページのために全文を差し替えると、 他ページの指定を巻き込んで壊す危険が上回ります。 このCSSはABOUTページでしか使わないので、 読み込む場所もABOUTページだけに限定しました。 読み込みは about.html の で行っています。 style.css の「あと」に読みます。順番を入れ替えないでください。 ★クラス名はすべて ab- で始めています。 既存のCSSとぶつからないようにするためです。 ★色・書体・余白の変数（--ink など）は style.css の :root で 定義済みのものを使っています。このファイルには :root がありません。 style.css を読まずにこのファイルだけを読むと、色が付きません。 ----------------------------------------------------------------------------- 【設計の考え方】 ・本文は style.css と同じ font-weight: 300（細字）のまま。 見出しだけ 700 に振り、その落差をページの骨格にしています。 本文まで太らせると、他ページと別サイトに見えます。 ・罫線はセクションの区切りにしか使いません。 項目同士は余白で分けています。 ・反転（黒地）は「しないこと」の1箇所だけです。 否定を並べる章だから反転させています。他所では使わないでください。 ============================================================================= */ .ab{ /* 見出し用の書体。style.css の :root には無いので、ここで定義します。 欧文は Helvetica 系、和文は本文と同じヒラギノを太らせて使います。 */ --font-display:"Helvetica Neue",Helvetica,Arial, "Hiragino Sans","Hiragino Kaku Gothic ProN", "メイリオ",Meiryo,sans-serif; --ab-gutter:clamp(20px,4vw,64px); overflow:hidden; /* 巨大文字が横に溢れたときの保険 */ } .ab-wrap{ max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--ab-gutter); } /* --- 角括弧の極小ラベル ------------------------------------------------------- 参照デザインの [ ABOUT ] にあたるものです。 全角の［］ではなく半角＋余白で組むと、字面が締まります。 */ .ab-label{ display:block; font-family:var(--font-display); font-size:10px; font-weight:400; letter-spacing:.18em; line-height:1; color:var(--sub); white-space:nowrap; } .ab-label::before{content:"[ ";} .ab-label::after{content:" ]";} /* --- 見出しの基本形 --------------------------------------------------------- 細字300の本文に対して、ここだけ700。この落差がこのページの骨格です。 和文は line-height を詰めると仮名が浮くので 1.18 で止めています。 */ .ab-display{ font-family:var(--font-display); font-weight:700; line-height:1.18; letter-spacing:-.02em; margin:0; } /* ----------------------------------------------------------------------------- 1. ヒーロー ページを開いた瞬間に、キーコピーだけが視界を占める状態をつくります。 ----------------------------------------------------------------------------- */ .ab-hero{ padding-block:clamp(56px,11vw,150px) clamp(48px,8vw,110px); border-bottom:1px solid var(--line); } .ab-hero__label{margin-bottom:clamp(32px,7vw,86px);} .ab-hero__title{ font-size:clamp(38px,9.4vw,148px); } /* 「つくることで、」の読点のあとは、字送りの穴を詰めます */ .ab-hero__title span{display:block;} .ab-hero__title span:last-child{text-indent:-.04em;} .ab-hero__lead{ margin:clamp(36px,6vw,72px) 0 0; margin-left:auto; /* 右に寄せて、巨大文字との間に余白の谷をつくる */ max-width:34em; font-size:14px; line-height:2.15; } /* ----------------------------------------------------------------------------- 2. コンセプト本文 左にラベル、右に本文の2カラム。ラベルは読み進めても動きません。 ----------------------------------------------------------------------------- */ .ab-section{ padding-block:clamp(64px,10vw,150px); border-bottom:1px solid var(--line); } .ab-cols{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,4fr); gap:clamp(28px,5vw,72px); align-items:start; } .ab-cols__label{position:sticky;top:100px;} .ab-body p{ margin:0 0 1.9em; max-width:36em; font-size:15px; line-height:2.2; } .ab-body p:last-child{margin-bottom:0;} /* --- 本文の途中に差し込むサブコピー ----------------------------------------- 引用符も罫線も付けません。太さと大きさだけで段を割ります。 */ .ab-pull{ margin:clamp(44px,6vw,80px) 0; font-size:clamp(24px,4.2vw,52px); } /* --- 「おまかせします」では伸びません、の段 --------------------------------- 丸投げを歓迎しない、という一番角の立つ話なので、 前後を罫線で挟んで、独立した申し出として読ませます。 */ .ab-ask{ margin:clamp(48px,7vw,90px) 0; } .ab-ask p{margin:0;max-width:34em;} .ab-ask strong{font-weight:700;} /* ----------------------------------------------------------------------------- 3. できること 4項目。見出しは大きく、内訳は右端に小さく。 番号は振りません（並びに順序の意味はありますが、手順ではないため）。 ----------------------------------------------------------------------------- */ .ab-do{list-style:none;margin:0;padding:0;} /* 罫線を使わないぶん、項目の間隔で切ります。 見出しが大きいので、これだけで十分に段が分かれます。 */ .ab-do__item{margin-bottom:clamp(52px,8vw,104px);} .ab-do__item:last-child{margin-bottom:0;} .ab-do__head{display:flex;align-items:baseline;gap:1em;flex-wrap:wrap;} .ab-do__title{font-size:clamp(32px,6vw,78px);} .ab-do__en{ font-family:var(--font-display); font-size:10px;font-weight:400;letter-spacing:.18em;color:var(--sub); } .ab-do__text{margin:1em 0 0;font-size:14px;line-height:2.1;max-width:30em;} .ab-do__tags{ margin:1.5em 0 0;padding:0;list-style:none; font-size:14px;font-weight:700;line-height:2.1; letter-spacing:.04em;color:var(--ink); } /* ----------------------------------------------------------------------------- 4. しないこと ── 黒地 このページで唯一の反転です。否定の章だから反転させています。 ----------------------------------------------------------------------------- */ .ab-not{ background:var(--ink); color:var(--paper); padding-block:clamp(64px,10vw,150px); border:0; } .ab-not .ab-label{color:rgba(255,255,255,.5);} .ab-not__list{list-style:none;margin:0;padding:0;} .ab-not__item{ padding-block:clamp(26px,3.6vw,44px); border-top:1px solid rgba(255,255,255,.22); } .ab-not__item:last-child{border-bottom:1px solid rgba(255,255,255,.22);} .ab-not__title{font-size:clamp(20px,3.4vw,40px);} .ab-not__text{ margin:.9em 0 0;max-width:34em; font-size:14px;line-height:2.15; color:rgba(255,255,255,.72); } /* ----------------------------------------------------------------------------- 5. 名前について RAM と LABEL を左右に並べます。由来が2つあることが、形で伝わります。 ----------------------------------------------------------------------------- */ .ab-name{ display:grid; grid-template-columns:1fr; gap:clamp(48px,8vw,96px); } .ab-name__word{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,3.3vw,46px); line-height:1; letter-spacing:4px; margin:0 0 clamp(18px,2.6vw,30px); } .ab-name__text{margin:0;font-size:14px;line-height:2.2;max-width:26em;} .ab-name__text + .ab-name__text{margin-top:1.6em;} /* ----------------------------------------------------------------------------- 6. 問い合わせ 参照デザインの巨大な EMAIL に倣います。押せる面積そのものが見出しです。 ----------------------------------------------------------------------------- */ .ab-contact{padding-block:clamp(64px,10vw,150px);} .ab-contact__lead{margin:0 0 clamp(28px,4vw,48px);font-size:14px;max-width:30em;} .ab-contact__link{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:clamp(44px,11vw,150px); line-height:1; letter-spacing:-.03em; padding-bottom:.06em; border-bottom:2px solid var(--ink); transition:opacity .25s ease; } .ab-contact__link:hover{opacity:.45;} /* ----------------------------------------------------------------------------- スマートフォン 2カラムはすべて1カラムへ。ラベルの追従も解除します。 ----------------------------------------------------------------------------- */ @media (max-width:820px){ .ab-cols{grid-template-columns:1fr;gap:20px;} .ab-cols__label{position:static;} .ab-hero__lead{margin-left:0;} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }