編集の要約なし |
編集の要約なし |
||
| 91行目: | 91行目: | ||
} | } | ||
.content:nth-child(1) { | .content:nth-child(1) { | ||
} | } | ||
.content:nth-child(2) { | .content:nth-child(2) { | ||
} | } | ||
.content:nth-child(3) { | .content:nth-child(3) { | ||
} | } | ||
.content:nth-child(4) { | .content:nth-child(4) { | ||
} | } | ||
/* スライドレールの枠 */ | /* スライドレールの枠 */ | ||
2024年10月3日 (木) 00:01時点における版
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 10px;
}
.column {
flex: 1 1 calc(50% - 10px);
min-width: 300px;
box-sizing: border-box;
padding: 10px;
border-radius: 8px;
}
.h2_blue {
font-size: 1em;
color: #fcfcfc;
text-shadow: 0 0 10px #3fbbe8, 0 0 3px #3fbbe8, 0 0 1px #3fbbe8;
background: linear-gradient(#163f6a, #406b97);
padding: 6px 15px !important;
margin: 20px 0 15px 0 !important;
border-radius: 3px;
font-weight: 700;
}
.menu-container {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.menulist {
flex: 0 0 calc(32% - 5px);
margin-bottom: 3px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 40px;
font-size: 14px;
font-weight: 400;
text-align: center;
white-space: normal;
word-wrap: break-word;
cursor: pointer;
background-image: none;
border: 1px solid #ccc !important;
border-radius: 2px;
box-sizing: border-box;
}
.column2{
flex: 0 1 100%;
}
.h2_gray{
font-size:1em;
color: #fcfcfc;
background: linear-gradient(to right, #879294, #c0d5e1);
padding: 6px 15px !important;
margin: 0 0 15px 0 !important;
font-weight: 700;
}
.h2_blue2_bg {
}
@media (max-width: 768px) {
.column {
flex: 1 1 100%;
}
.menulist {
flex: 0 0 100%;
}
.menulist {
flex: 0 0 calc(32% - 5px);
margin-bottom: 3px;
}
}
/*スライダー*/
* {
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
}
/* スライドする要素 */
.content {
width: 300px;
height: 300px;
}
.content:nth-child(1) {
}
.content:nth-child(2) {
}
.content:nth-child(3) {
}
.content:nth-child(4) {
}
/* スライドレールの枠 */
.wrap {
overflow: hidden;
display: flex;
align-items: center;
height: 340px;
margin-bottom: 100px;
width:50%;
}
/* content4つをまとめたスライドブロック */
.slideshow {
display: flex;
animation: loop-slide 20s infinite linear 1s both;
}
@keyframes loop-slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
animation-play-state: paused;
}
/* ホバー時の装飾（パターン3） */
.content-hover {
transition: all 0.2s;
margin-right: 20px;
}
.content-hover:hover {
transform: translateY(-20px);
border-radius: 0 10%;
box-shadow: 0 3px 10px 0 #333;
opacity: 0.8;
cursor: pointer;
}