:root {
--blue: #0052b8;
--deep: #08275c;
--sky: #eaf6ff;
--green: #08b54b;
--yellow: #ffd537;
--text: #0c1936;
--muted: #60708f;
--line: #dbe7f7;
--card: #ffffff;
--shadow: 0 20px 50px rgba(7, 39, 92, .12);
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
color: var(--text);
line-height: 1.75;
background: #fff
}
a {
color: inherit;
text-decoration: none
}
img {
max-width: 100%;
display: block
}
.container {
width: min(1120px, calc(100% - 40px));
margin-inline: auto
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(219, 231, 247, .8)
}
.header-inner {
height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px
}
.brand {
display: flex;
align-items: center;
gap: 14px;
font-weight: 800;
color: var(--deep);
letter-spacing: .02em
}
.brand-logo {
width: 250px;
height: auto;
object-fit: contain
}
.brand-text {
font-size: 18px;
white-space: nowrap
}
.nav {
display: flex;
gap: 26px;
font-size: 14px;
font-weight: 700
}
.nav a:hover {
color: var(--blue)
}
.header-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--green);
color: #fff;
padding: 13px 18px;
border-radius: 999px;
font-weight: 700;
box-shadow: 0 10px 26px rgba(8, 181, 75, .25);
font-size: 14px;
white-space: nowrap
}
.header-cta span {
background: #fff;
color: var(--green);
border-radius: 50%;
width: 32px;
height: 32px;
display: grid;
place-items: center;
font-size: 11px
}
.header-cta{
display:inline-flex;
align-items:center;
gap:10px;
transition:all .3s ease;
}
.header-arrow{
display:inline-block;
font-style:normal;
transition:transform .3s ease;
}
.header-cta:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(8,181,75,.35);
}
.header-cta:hover .header-arrow{
transform:translateX(6px);
}
.header-cta{
animation:pulseGlow 3s infinite;
}
@keyframes pulseGlow{

0%{
box-shadow:0 10px 26px rgba(8,181,75,.20);
}
50%{
box-shadow:0 10px 36px rgba(8,181,75,.40);
}
100%{
box-shadow:0 10px 26px rgba(8,181,75,.20);
}
}
.hero {
position: relative;
overflow: hidden;
background: linear-gradient(120deg, #f9fcff 0%, #eef8ff 52%, #e6f4ff 100%);
padding: 82px 0 78px;
background-image: url("assets/hero.jpg");
background-size: cover;
background-position: right center;
}
.hero:before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 82% 18%, rgba(0, 130, 255, .22), transparent 30%), radial-gradient(circle at 0% 100%, rgba(0, 82, 184, .10), transparent 35%);
pointer-events: none
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1.02fr;
align-items: center;
gap: 54px
}
.eyebrow {
display: inline-block;
color: var(--blue);
font-weight: 800;
border-left: 4px solid var(--blue);
padding-left: 12px;
margin: 0 0 20px
}
.hero h1 {
font-size: clamp(42px, 5vw, 72px);
line-height: 1.18;
margin: 0 0 24px;
letter-spacing: -.04em
}
.hero h1 span {
color: var(--blue)
}
.lead {
font-size: 18px;
margin: 0 0 12px;
font-weight: 600
}
.lead.strong {
font-weight: 700
}
.hero-visual img {
border-radius: 34px;
box-shadow: var(--shadow)
}
.main-cta{
position:relative;
display:inline-flex;
align-items:center;
gap:18px;
overflow:hidden;
background:linear-gradient(90deg,var(--green),#00a83c);
color:#fff;
padding:18px 30px;
border-radius:18px;
font-size:19px;
font-weight:700;
line-height:1.45;
box-shadow:0 18px 36px rgba(255,213,55,.45);
margin-top:22px;
transition:transform .3s ease, box-shadow .3s ease;
animation:glowPulse 2.5s ease-in-out infinite;
}
.main-cta small{
display:block;
font-size:16px;
font-weight:700;
opacity:.96;
}
.free{
width:66px;
height:66px;
display:grid;
place-items:center;
background:#fff;
color:var(--green);
border-radius:50%;
font-size:18px;
flex:0 0 auto;
}
.cta-arrow{
display:inline-block;
font-size:24px;
font-weight:700;
transition:transform .3s ease;
}
.main-cta:hover{
transform:translateY(-2px);
}
.main-cta:hover .cta-arrow{
transform:translateX(8px);
}
.main-cta::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transition:.7s;
pointer-events:none;
}
.main-cta:hover::before{
left:120%;
}
.main-cta::after{
content:"";
position:absolute;
inset:-8px;
border-radius:24px;
background:rgba(255,213,55,.45);
filter:blur(18px);
z-index:-1;
animation:ringGlow 2.5s ease-in-out infinite;
pointer-events:none;
}
.main-cta.final::after{
opacity:.35;
filter:blur(10px);
inset:-4px;
}
@keyframes glowPulse{
0%{
box-shadow:0 18px 36px rgba(255,213,55,.35),0 0 0 rgba(255,213,55,0);
}
50%{
box-shadow:0 18px 36px rgba(255,213,55,.45),0 0 25px rgba(255,213,55,.45),0 0 50px rgba(255,213,55,.25);
}
100%{
box-shadow:0 18px 36px rgba(255,213,55,.35),0 0 0 rgba(255,213,55,0);
}
}
@keyframes ringGlow{
0%{
opacity:.2;
transform:scale(1);
}
50%{
opacity:.7;
transform:scale(1.08);
}
100%{
opacity:.2;
transform:scale(1);
}
}

.channel-strip {
background: #fff;
padding: 22px 0;
box-shadow: 0 8px 36px rgba(8, 39, 92, .06)
}
.channel-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px
}
.channel {
display: grid;
place-items: center;
text-align: center;
gap: 4px;
padding: 16px 8px;
border-right: 1px solid var(--line)
}
.channel:last-child {
border-right: 0
}
.channel span {
font-weight: 800;
color: #00a83c;
font-size: 36px
}
.channel strong {
font-size: 14px
}
.channel small {
font-size: 12px;
color: var(--muted);
font-weight: 700
}
.section {
padding: 78px 0
}
.section h2 {
text-align: center;
font-size: 34px;
line-height: 1.35;
margin: 0 0 36px;
color: var(--deep);
letter-spacing: -.02em
}
.section h2:after {
content: "";
display: block;
width: 44px;
height: 4px;
background: var(--blue);
border-radius: 99px;
margin: 12px auto 0
}
.concerns {
background: linear-gradient(#f7fbff, #fff)
}
.concern-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px
}
.concern-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: 50px 18px;
text-align: center;
font-size: 18px;
font-weight: 700;
box-shadow: 0 14px 34px rgba(8, 39, 92, .08);
position: relative
}
.concern-card span {
display: block;
color: var(--green);
font-size: 14px;
font-weight: 500;
margin: 1em auto 0 auto;
border: 1px solid var(--green);
}
.concern-card:before {
content: "✓";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--deep);
color: #fff;
display: grid;
place-items: center
}
.definition-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 44px;
align-items: center
}
.definition h2 {
text-align: left;
font-size: 42px;
}
.definition h2:after {
margin-left: 0
}
.definition p {
font-size: 17px
}
.definition-card {
background: linear-gradient(180deg, #fff, #f3f9ff);
border: 1px solid var(--line);
border-radius: 28px;
padding: 34px;
box-shadow: var(--shadow)
}
.before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
text-align: center
}
.label {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
font-weight: 700;
font-size: 13px
}
.label.muted {
background: #e9eef6;
color: var(--muted)
}
.label.accent {
background: #fff2a8;
color: #8b6500
}
.before-after p {
font-weight: 800
}
.arrow {
color: var(--blue);
font-size: 34px;
font-weight: 900
}
.note {
background: #fff8d6;
text-align: center;
border-radius: 14px;
padding: 12px;
margin: 22px 0 0 !important;
color: #916700;
font-weight: 800
}
.flow {
background: #f7fbff
}
.flow-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px
}
.flow-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 26px;
padding: 26px 18px;
text-align: center;
box-shadow: 0 12px 30px rgba(8, 39, 92, .07)
}
.flow-card span {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
background: var(--blue);
color: #fff;
border-radius: 50%;
font-weight: 800
}
.flow-icon {
font-size: 50px;
margin: 20px 0 10px
}
.flow-card h3 {
margin: 0 0 8px;
color: var(--blue);
font-size: 18px
}
.flow-card p {
font-size: 13px;
color: var(--muted);
font-weight: 600;
margin: 0
}
.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px
}
.service-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
text-align: center;
padding: 30px 18px;
box-shadow: 0 12px 30px rgba(8, 39, 92, .07)
}
.service-card span {
display: inline-grid;
place-items: center;
font-size: 45px;
color: var(--blue);
height: 52px
}
.service-card .line-icon {
background: var(--green);
color: #fff;
border-radius: 12px;
width: 62px;
height: 42px;
font-size: 13px;
font-weight: 800
}
.service-card h3 {
font-size: 18px;
color: var(--deep);
margin: 8px 0
}
.service-card p {
font-size: 13px;
color: var(--muted);
font-weight: 600;
margin: 0
}
.results {
background: #f7fbff
}
.result-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px
}
.result-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 14px;
text-align: center;
display: grid;
gap: 6px;
box-shadow: 0 12px 28px rgba(8, 39, 92, .06);
font-size: 50px
}
.result-card strong {
font-size: 17px;
color: var(--deep)
}
.result-card span {
font-size: 12px;
color: var(--muted);
font-weight: 700
}
.faq-list {
max-width: 820px;
margin: auto;
display: grid;
gap: 12px
}
details {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 18px 22px;
box-shadow: 0 10px 24px rgba(8, 39, 92, .06)
}
summary {
cursor: pointer;
font-weight: 700;
color: var(--deep)
}
details p {
color: var(--muted);
font-weight: 700;
margin: 12px 0 0
}
.final-cta {
background: linear-gradient(120deg, #05225a, #004db3);
color: #fff;
padding: 62px 0
}
.final-grid {
display: grid;
grid-template-columns: 1.1fr auto;
align-items: center;
gap: 32px
}
.final-cta h2 {
font-size: 28px;
line-height: 1.4;
margin: 0 0 10px
}
.final-cta p {
margin: 0;
font-weight: 700;
opacity: .92
}
.main-cta.final {
margin: 0;
background: var(--green);
min-width: 380px;
justify-content: center
}
.site-footer {
background: #061d44;
color: #d8e7ff;
padding: 50px 0
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px
}
.footer-inner strong {
color: #fff;
font-size: 28px
}
.footer-inner p {
margin: 0;
font-size: 15px
}
@media (max-width: 980px) {
.nav {
display: none
}
.header-inner {
height: 70px
}
.brand-logo {
width: 96px
}
.brand-text {
font-size: 16px
}
.header-cta {
font-size: 12px;
padding: 7px 10px
}
.hero {
padding: 54px 0
}
.hero-grid, .definition-grid, .final-grid {
grid-template-columns: 1fr
}
.hero-visual {
order: -1
}
.channel-list {
grid-template-columns: repeat(3, 1fr)
}
.concern-grid, .flow-grid, .result-grid {
grid-template-columns: 1fr 1fr
}
.service-grid {
grid-template-columns: 1fr 1fr
}
.final-cta {
text-align: center
}
.main-cta.final {
min-width: 0;
width: 100%
}
}
@media (max-width: 600px) {
.container {
width: min(100% - 28px, 1120px)
}
.brand-logo {
width: 100%;
height: auto;
object-fit: contain
}
.brand-text {
}
.header-cta span {
display: none
}
.hero {
position: relative;
overflow: hidden;
background: linear-gradient(120deg, #f9fcff 0%, #eef8ff 52%, #e6f4ff 100%);
padding: 22px 0 78px;
background-image: url("assets/hero_sp.jpg");
background-size: cover;
background-position: right bottom;
}
.eyebrow {
font-size: 14px;
font-weight: 700;
}
.hero h1 {
font-size: 35px;
font-weight: 800;
padding: 0 0em 1em 0;
margin: 0 0 0px;
}
.lead {
padding: 0 7em 0 0;
}
.lead span{
font-size: 16px;
background:rgba(255,255,255,.75);
padding:.5em .6em;
line-height:1.5em;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
.lead span br {
display: none;
}
.main-cta {
width: 100%;
justify-content: center;
padding: 16px 18px;
font-size: 22px
}
.free {
width: 52px;
height: 52px;
font-size: 14px
}
.channel-list, .concern-grid, .flow-grid, .service-grid, .result-grid {
grid-template-columns: 1fr 1fr;
}
.channel {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.channel strong {
font-size: 18px;
}
.channel small {
font-size: 14px;
}
.section {
padding: 56px 0
}
.section h2 {
font-size: 26px
}
.before-after {
grid-template-columns: 1fr
}
.arrow {
transform: rotate(90deg)
}
.footer-inner {
display: block;
text-align: center
}
.hero-visual img {
border-radius: 20px
}
}