/* =========================================================
CSS変数 / サイト全体で使用
========================================================= */
:root {
--blue: #07579f;
--blue2: #0c77be;
--blue-dark: #063b70;
--red: #e6242a;
--yellow: #ffd51f;
--orange: #f59a23;
--green: #21a34a;
--pink: #ef4d8b;
--ink: #171717;
--gray: #66727d;
--line: #cdd8e3;
--sans: "Noto Sans JP", "Yu Gothic", sans-serif;
}
/* =========================================================
RESET / BASE
HTML全体の基本設定
========================================================= */
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
color: var(--ink);
font-family: var(--sans);
line-height: 1.75;
background: #fff
}
img {
display: block;
width: 100%
}
a {
color: inherit;
text-decoration: none
}
button {
font: inherit
}
/* =========================================================
HEADER
index.html:
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, .96);
border-bottom: 1px solid #dce5ec;
backdrop-filter: blur(10px)
}
.header-inner {
width: min(1320px, 100%);
min-height: 74px;
margin: auto;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 25px
}
.brand {
display: flex;
align-items: center;
gap: 10px;
min-width: max-content
}
.brand-mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 3px solid var(--blue);
color: var(--blue);
font-weight: 900;
font-size: 24px;
transform: skew(-7deg)
}
.brand-copy {
display: grid;
line-height: 1.15
}
.brand-copy small {
font-size: 9px;
font-weight: 700
}
.brand-copy strong {
font-size: 16px;
font-weight: 900
}
.nav {
margin-left: auto;
display: flex;
gap: 26px
}
.nav a {
font-size: 13px;
font-weight: 800;
position: relative
}
.nav a:after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -8px;
height: 3px;
background: var(--red);
transition: .25s
}
.nav a:hover:after {
right: 0
}
.header-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--yellow);
border: 2px solid #111;
box-shadow: 4px 4px 0 #111;
padding: 10px 16px;
border-radius: 6px;
font-size: 12px;
font-weight: 900;
transition: .2s
}
.header-cta:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #111
}
.menu-btn {
display: none;
margin-left: auto;
border: 0;
background: none
}
.menu-btn span {
display: block;
width: 26px;
height: 2px;
background: #222;
margin: 5px
}
/* =========================================================
HERO
index.html:
========================================================= */
.hero {
position: relative;
overflow: hidden;
background: radial-gradient(circle at 10% 20%, rgba(12, 119, 190, .08) 0 2px, transparent 3px) 0 0/18px 18px, linear-gradient(180deg, #fff, #f8fcff);
border-bottom: 1px solid #dce8f1
}
.hero-inner {
width: min(1260px, 100%);
margin: auto;
padding: 58px 22px 46px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: center
}
/* HERO > メインロゴ
index.html: