/* 画像ホバー時にふわっと透過させる */
.sqs-block-image img {
transition: opacity 0.3s ease; /* なめらかに変化 */
}
.sqs-block-image:hover img {
opacity: 0.8; /* 80%の不透明度にする */
}
/* コンテンツの左右の余白を少し詰めてシャープに */
.sqs-layout:not(.sqs-editing) .sqs-row .sqs-col-12 {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* モバイル表示でも余白をスッキリさせる */
@media screen and (max-width: 767px) {
.sqs-layout:not(.sqs-editing) .sqs-row .sqs-col-12 {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* リンクの下線を消してシンプルに */
p a, h1 a, h2 a, h3 a {
text-decoration: none !important;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size .3s;
}
/* ホバーした時だけ下線がスッと出る */
p a:hover, h1 a:hover, h2 a:hover, h3 a:hover {
background-size: 100% 1px;
}
/* 通常時はモノクロ */
.sqs-block-image img {
filter: grayscale(100%);
transition: filter 0.5s ease;
-webkit-filter: grayscale(100%); /* Safari用 */
}
/* ホバー時はカラー */
.sqs-block-image:hover img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}
