@charset "ANSI";
body {
}
.content .imgWrap {
overflow: hidden;
}

.content .imgEff11 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff11:hover {
transform: scale(1.3);
}
.content .imgEff11:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0; /* 見えないように透過しておく */
content: "Column/Timeline"; /* 表示するテキスト */
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff); /* けっこう暗くしないと文字が見にくいので注意(今は白） */
display: flex;justify-content: center;align-items: center; /* 文字の中央配置 */
color: #ffff00; text-decoration: none; font-size: 0.9vw; text-shadow: 0 0 2px #000; /* 文字の装飾 */
}
.content .imgEff11:hover:before {
opacity: 1; /* マウスオーバーで可視化 */
transform: scale(1.3); /* 文字の拡大率 */
}

.content .imgEff12 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff12:hover {
transform: scale(1.3);
}
.content .imgEff12:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "Column/Theme";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 0.9vw;text-shadow: 0 0 2px #000;
}
.content .imgEff12:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff13 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff13:hover {
transform: scale(1.3);
}
.content .imgEff13:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "PC easy operation";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 0.9vw;text-shadow: 0 0 2px #000;
}
.content .imgEff13:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff14 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff14:hover {
transform: scale(1.3);
}
.content .imgEff14:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "for my friends";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 0.9vw;text-shadow: 0 0 2px #000;
}
.content .imgEff14:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff15 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff15:hover {
transform: scale(1.3);
}
.content .imgEff15:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "it's just my job.";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 0.9vw;text-shadow: 0 0 2px #000;
}
.content .imgEff15:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff16 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff16:hover {
transform: scale(1.3);
}
.content .imgEff16:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "What's Ble d'or";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 0.9vw;text-shadow: 0 0 2px #000;
}
.content .imgEff16:hover:before {
opacity: 1;
transform: scale(1.3);
}


@media screen and (min-width: 320px) and (max-width: 981px) {

.content .imgEff11 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff11:hover {
transform: scale(1.3);
}
.content .imgEff11:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "Column/Timeline";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw; text-shadow: 0 0 2px #000;
}
.content .imgEff11:hover:before {
opacity: 1; /* マウスオーバーで可視化 */
transform: scale(1.3); /* 文字の拡大率 */
}

.content .imgEff12 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff12:hover {
transform: scale(1.3);
}
.content .imgEff12:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "Column/Theme";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw;text-shadow: 0 0 2px #000;
}
.content .imgEff12:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff13 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff13:hover {
transform: scale(1.3);
}
.content .imgEff13:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "PC easy operation";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw;text-shadow: 0 0 2px #000;
}
.content .imgEff13:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff14 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff14:hover {
transform: scale(1.3);
}
.content .imgEff14:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "for my friends";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw;text-shadow: 0 0 2px #000;
}
.content .imgEff14:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff15 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff15:hover {
transform: scale(1.3);
}
.content .imgEff15:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "my work, G.ride";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw;text-shadow: 0 0 2px #000;
}
.content .imgEff15:hover:before {
opacity: 1;
transform: scale(1.3);
}

.content .imgEff16 {
position: relative;width: 100%; height: 100%;transition-duration: 0.8s;
}
.content .imgEff16:hover {
transform: scale(1.3);
}
.content .imgEff16:before {
content: "";position: absolute;width: 100%;height: 100%;
transition-duration: 0.3s;
opacity: 0;
content: "What's Ble d'or";
background: radial-gradient(rgba(0, 0, 0, 0), #ffffff);
display: flex;justify-content: center;align-items: center;
color: #ffff00; text-decoration: none; font-size: 2.0vw;text-shadow: 0 0 2px #000;
}
.content .imgEff16:hover:before {
opacity: 1;
transform: scale(1.3);
}
}