.tools-top{
max-width:1100px;
margin:0 auto;
}

.tools-intro{
background:#f8fbff;
border:1px solid #d9e7f5;
border-radius:12px;
padding:20px;
margin:0 0 25px 0;
line-height:1.9;
box-sizing:border-box;
}

.tools-intro p{
margin:0;
}

.tools-sections{
display:flex;
flex-direction:column;
gap:24px;
}

.tool-section{
background:#ffffff;
border:1px solid #e3e3e3;
border-radius:14px;
padding:22px;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
box-sizing:border-box;
}

.tool-section-title{
font-size:24px;
margin:0 0 18px 0;
padding-bottom:10px;
border-bottom:2px solid #eeeeee;
color:#222;
}

.tool-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
}

.tool-card{
border:1px solid #e8e8e8;
border-radius:12px;
padding:16px;
background:#fcfcfc;
transition:all 0.25s ease;
box-sizing:border-box;
width:100%;
max-width:100%;
min-width:0;
}

.tool-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,0.06);
background:#fff;
}

.tool-card-title{
font-size:18px;
font-weight:bold;
margin:0 0 10px 0;
line-height:1.6;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-card-title a{
text-decoration:none;
}

.tool-card-title a:hover{
text-decoration:underline;
}

.tool-card p{
margin:0;
line-height:1.8;
font-size:14px;
color:#333;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-comment-list{
margin:0;
padding-left:20px;
}

.tool-comment-item{
margin-bottom:14px;
line-height:1.8;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-popular{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
margin:0 0 24px 0;
}

.tool-popular-card{
background:linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
border:1px solid #d9e7f5;
border-radius:12px;
padding:16px;
box-sizing:border-box;
width:100%;
max-width:100%;
min-width:0;
}

.tool-popular-label{
display:inline-block;
font-size:12px;
background:#2d7dd2;
color:#fff;
padding:4px 8px;
border-radius:999px;
margin-bottom:10px;
}

.tool-popular-card h2{
font-size:18px;
margin:0 0 8px 0;
line-height:1.6;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-popular-card h2 a{
text-decoration:none;
}

.tool-popular-card h2 a:hover{
text-decoration:underline;
}

.tool-popular-card p{
margin:0;
font-size:14px;
line-height:1.8;
color:#333;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-ranking-box{
background:#ffffff;
border:1px solid #e3e3e3;
border-radius:14px;
padding:18px;
box-shadow:0 3px 10px rgba(0,0,0,0.04);
box-sizing:border-box;
margin-bottom:20px;
}

.tool-ranking-title{
font-size:20px;
font-weight:bold;
margin:0 0 14px 0;
padding-bottom:10px;
border-bottom:2px solid #eeeeee;
line-height:1.5;
color:#222;
display:flex;
align-items:center;
gap:8px;
}

.tool-ranking-title img{
width:20px;
height:auto;
flex-shrink:0;
}

.tool-ranking-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}

.tool-ranking-item{
margin:0;
padding:0;
}

.tool-ranking-link{
display:block;
text-decoration:none;
color:#222;
border:1px solid #ececec;
border-radius:10px;
padding:12px;
background:#fcfcfc;
transition:all 0.25s ease;
}

.tool-ranking-link:hover{
background:#f7fbff;
border-color:#d9e7f5;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
transform:translateY(-1px);
text-decoration:none;
}

.tool-ranking-no{
display:inline-block;
font-weight:bold;
font-size:13px;
color:#2d7dd2;
margin-bottom:6px;
}

.tool-ranking-name{
display:block;
font-size:15px;
font-weight:bold;
line-height:1.6;
margin-bottom:4px;
word-break:break-word;
overflow-wrap:anywhere;
}

.tool-ranking-rate{
display:block;
font-size:13px;
color:#666;
}

/* タブレット */
@media screen and (max-width: 900px){
.tool-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.tool-popular{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

/* スマホ */
@media screen and (max-width: 767px){
.tool-section{
padding:16px;
}

.tool-section-title{
font-size:20px;
}

.tool-card,
.tool-popular-card{
padding:12px;
}

.tool-card-title{
font-size:16px;
}

.tool-popular-card h2{
font-size:16px;
}

.tool-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.tool-popular{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.tool-ranking-box{
padding:16px;
}

.tool-ranking-title{
font-size:18px;
}

.tool-ranking-link{
padding:10px;
}

.tool-ranking-name{
font-size:14px;
}
}

/* 極端に狭い端末 */
@media screen and (max-width: 480px){
.tool-grid,
.tool-popular{
grid-template-columns:1fr;
}
}