body{
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial;
margin:0;
line-height:1.6;
color:#333;
}

.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}

header{
background:white;
border-bottom:1px solid #eee;
}

.header .container{
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
}

.logo{
font-weight:bold;
}

.hero{
text-align:center;
}

.hero span{
color:#38bdf8;
}

.hero-text{
margin-top:15px;
}

.cta{
display:inline-block;
margin-top:20px;
background:#2563eb;
color:white;
padding:15px 30px;
border-radius:6px;
text-decoration:none;
	text-align:center;
}

.cta-small{
background:#f97a59;
color:white;
padding:8px 14px;
border-radius:5px;
text-decoration:none;
width:25%;
text-align:center;
}

.problem{
background:#f8fafc;
padding:60px 0;
text-align:center;
}

.problem-grid{
display:grid;
grid-template-columns:1fr;
gap:15px;
margin-top:30px;
}

.problem-card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.feature{
padding:20px 0;
text-align:center;
}

.feature-grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
margin-top:30px;
}

.feature-card{
background:white;
padding:25px;
}

.flow{
background:#f1f5f9;
padding:60px 0;
text-align:center;
}

.flow-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:30px;
}

.flow-step{
background:white;
padding:20px;
border-radius:8px;
}

.cta-section{
color:#333;
text-align:center;
}

.big{
font-size:18px;
padding:18px 40px;
}

.cta-fixed{
position:fixed;
bottom:20px;
right:20px;
background:#2563eb;
color:white;
padding:14px 20px;
border-radius:30px;
text-decoration:none;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* タブレット */

@media(min-width:768px){

.problem-grid{
/*grid-template-columns:1fr 1fr;*/
}

.feature-grid{
/*grid-template-columns:1fr 1fr 1fr;*/
}

.flow-grid{
grid-template-columns:repeat(4,1fr);
}

.hero h1{
font-size:42px;
}

}

/* PC */

@media(min-width:1024px){

.hero{
padding:20px 0;
}

}