/* ========================================================================== ステップ4　── ヘッダー：すりガラス／お問い合わせを丸く／横幅が小さいときの崩れ 2026-08-06 riho さんの指示 ・すりガラスになっていないので、すりガラスにする ・お問い合わせのボタンが四角なので、カナリーと同じ丸（ピル）にする ・横幅を小さくすると崩れるので、小さくしても大丈夫にする ★崩れの実測（直す前） 1440 ロゴ 71-291 ／ メニュー 416-981 ／ ボタン 1011-1369 ○ 1150 ロゴ 71-291 ／ メニュー 291-857 △ ロゴにくっつく 1024 中身の合計が 1089px になり、画面から はみ出す × 崩れ 960 同上 × 崩れ 900 メニューが消えて、押しても何も出ないボタンだけ残る × 中身に行けない → 1200px より狭いところは、メニューをたたんで開けるようにした。 実測の出どころ すりガラス https://corp.canary-app.jp/ rgba(255,255,255,.8) + blur(8px) 丸ボタン 同上 border-radius:9999px（カナリーは全部このピル） ========================================================================== */ /* --- すりガラス ------------------------------------------------------------ 一番上は透明（プライムと同じ）。スクロールすると 白の80%＋ぼかし8px になる。 ぼかしは常にかけている（上は後ろが白なので見た目は変わらない）。 */ .mk-hdr{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .mk-hdr.is-small{background:rgba(255,255,255,.8);} /* たたんだメニューは、広い画面では出さない（1200px以下でだけ使う） */ .mk-drawer{display:none;} /* --- ボタンを丸く（カナリーと同じピル）-------------------------------------- */ .mk-hdr a.mk-hdr__btn{border-radius:9999px;} /* --- 横幅が小さいときに崩れないようにする ------------------------------------ */ /* 1440 → 1200 は、左右の余白とメニューの間隔だけ詰めて、そのまま並べる */ @media (max-width:1439px){ .mk-hdr{padding:0 40px;} .mk-hdr__nav{gap:22px;} .mk-hdr__cta{gap:8px;margin-left:20px;} .mk-hdr a.mk-hdr__btn{padding:0 16px;font-size:14px;} } /* 1200 以下は、メニューをたたむ（開けるようにしてある） */ @media (max-width:1200px){ .mk-hdr{height:80px;padding:0 20px;background:rgba(255,255,255,.8);} .mk-hdr.is-small{height:64px;} body{padding-top:80px;} .mk-hdr__nav,.mk-hdr__cta{display:none;} .mk-hdr__burger{display:flex;flex-direction:column;justify-content:center;gap:5px; margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;} .mk-hdr__burger span{display:block;width:24px;height:2px;background:#000; transition:transform .2s, opacity .2s;} .mk-hdr.is-open .mk-hdr__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} .mk-hdr.is-open .mk-hdr__burger span:nth-child(2){opacity:0;} .mk-hdr.is-open .mk-hdr__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* たたんだメニューの中身 */ .mk-drawer{position:fixed;left:0;right:0;top:80px;bottom:0;z-index:890; overflow-y:auto;padding:24px 20px 60px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} .mk-hdr.is-small ~ .mk-drawer{top:64px;} .mk-hdr.is-open ~ .mk-drawer{display:block;} .mk-drawer p{margin:24px 0 10px;font-size:14px;line-height:21px;font-weight:700;color:rgba(37,58,79,.5);} .mk-drawer p:first-child{margin-top:0;} .mk-drawer ul{margin:0;padding:0;list-style:none;} .mk-drawer li a{display:block;padding:12px 0;border-bottom:1px solid rgba(37,58,79,.06); font-size:16px;line-height:24px;font-weight:700;color:#000;text-decoration:none;} .mk-drawer .mk-drawer__cta{display:flex;flex-direction:column;gap:10px;margin-top:28px;} .mk-drawer .mk-drawer__cta a{display:flex;align-items:center;justify-content:center; height:52px;border-radius:9999px;font-size:16px;font-weight:700;text-decoration:none;} .mk-drawer .mk-drawer__cta a.is-sub{background:#fff;color:#017cc8;border:1px solid rgba(37,58,79,.06);} .mk-drawer .mk-drawer__cta a.is-main{background:#017cc8;color:#fff;} } /* 900以下も同じ扱い（mk-base 側の指定を打ち消しておく） */ @media (max-width:900px){ .mk-hdr{height:80px;} .mk-hdr.is-small{height:64px;} body{padding-top:80px;} .mk-hdr__logo img{width:180px;} } /* 中身が横にはみ出さないようにする（画面ごと横スクロールになるのを止める） ★2026-08-07 overflow-x:hidden → clip に変更。 hidden はスクロール枠を作るので position:sticky が効かなくなる。 （背景の粒が流れて消えた原因もこれ。目次の追従にも必要） clip は同じく横のはみ出しを切るが、スクロール枠を作らない。 */ html,body{overflow-x:clip;} /* ========================================================================== ヘッダーのドロップダウンの位置 ★2026-08-07 riho さん「項目が被って押せない／業務から探すが被って見えない」 実測でわかったこと ・パネルはメニュー項目に right:0 で貼り付いていたため、 左寄りの項目（業務から探す）では 幅865pxのパネルが画面の左外へ出ていた （項目の実測 x=-311。画面外なので押せない） ・ツール側（幅520px）は、親から padding-right:300px を受け継いでいて 2列ぶんの幅が残らず、項目どうしが重なっていた（kintoneZoho と表示） ========================================================================== */ /* パネルは画面に対して中央に置く（メニュー項目ではなく画面を基準にする） */ .mk-hdr .mk-pop{ position:fixed; top:150px; left:50%; right:auto; transform:translateX(-50%); padding-top:0; } .mk-hdr.is-small .mk-pop{top:64px;} /* ツール側は写真が無いので、右の余白をなくして2列を確保する。 ★「Googleスプレッドシート」が隣の列にはみ出していたので、パネルも広げた。 */ .mk-pop--sm .mk-pop__inner{width:640px;} .mk-pop--sm .mk-pop__list{padding-right:0;grid-template-columns:repeat(2,minmax(0,1fr));} /* 長い名前は折り返す（矢印は右端に固定） */ /* ★親の .mk-hdr__item が white-space:nowrap を持っていて、 パネルの中まで受け継がれ、長い名前が折り返せずはみ出していた */ .mk-pop, .mk-pop *{white-space:normal;} .mk-pop__list a{min-width:0;gap:12px;} /* 写真ぶんの右余白が広すぎて「ホームページ・採用サイト」がはみ出していた */ .mk-pop .mk-pop__list{padding-right:250px;} .mk-pop__pic{width:210px;} .mk-pop__list a::after{flex:0 0 auto;} /* 画面が狭いときはドロップダウン自体を使わない（たたんだメニューへ） */ @media (max-width:1200px){ .mk-hdr .mk-pop{display:none;} } /* ========================================================================== フッターが狭い幅で崩れる ★2026-08-07 実測：右列（お問い合わせ等のボタン）の幅が 1440px → 392　／　1200px → 152　／　1024px → 0 と潰れ、ボタンが縦長の楕円になって文字が縦積みになっていた。 列の幅を固定値でなく可変にして、段階的に折り返す。 ========================================================================== */ @media (max-width:1400px){ .mk-ftr__grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(240px,1.6fr);} } @media (max-width:1100px){ .mk-ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 32px;} /* ★横並びにすると、いちばん高いものに合わせて伸びて巨大な楕円になっていた。 高さを固定し、上端で揃える。 */ .mk-ftr__side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;} .mk-ftr__btn{width:auto;flex:1 1 240px;height:64px;align-self:flex-start;} } @media (max-width:700px){ .mk-ftr__grid{grid-template-columns:1fr;} .mk-ftr__side{flex-direction:column;} .mk-ftr__btn{width:100%;} } /* ボタンの中の文字が縦積みにならないようにする */ .mk-ftr__btn{white-space:nowrap;min-width:0;}