:root {
--qysea-red: #e81123;
--dark-gray: #333;
--light-gray: #f5f5f5;
--accent: #0073e6;
}
*,*::before,*::after{box-sizing:border-box;}
body{
font-family:"Segoe UI",Arial,sans-serif;
color:var(--dark-gray);
line-height:1.65;
margin:0;
padding:0;
background:var(--light-gray);
}
/*--- サイト背景と調和するフルイドコンテナ ---*/
.case-study{
width:calc(100% - 4rem); /* 2remのガターを維持 */
max-width:1280px; /* デスクトップでの快適な幅 */
margin:3rem auto;
padding:clamp(1.8rem,4vw,3rem);
}
h1{
font-size:clamp(1.8rem,2.2vw+1rem,2.6rem);
margin-top:0;
color:#fff; /* 要求された白いタイトル */
line-height:1.25;
}
h2{
margin-top:2.2rem;
font-size:clamp(1.25rem,1.4vw+0.9rem,1.7rem);
border-left:4px solid var(--qysea-red);
padding-left:0.6rem;
}
hr{border:none;border-top:2px solid var(--light-gray);margin:2rem 0;}
ul{margin:1rem 0 1.2rem 1.2rem;padding-left:0.2rem;}
li{margin-bottom:0.6rem;}
li strong{color:var(--accent);}
p,img,ul{max-width:100%;}
img{display:block;width:100%;height:auto;border-radius:8px;margin:0.8rem 0;}
.cta{margin-top:2.6rem;text-align:center;}
.btn{
background:var(--qysea-red);
color:#fff;
padding:0.9rem 1.8rem;
text-decoration:none;
border-radius:6px;
font-weight:600;
display:inline-block;
transition:background 0.2s ease;
}
.btn:hover{background:#c50e1d;}