@charset "utf-8";
/*カード1*/
.card1 {
    width: 812px;
    height: 200px;
    border: 1px solid #cccccc;
    background: linear-gradient(0deg, #eeeeee, #fefefe);
    position: relative;
    box-shadow: 4px 4px 10px 2px #d0cec6;
    display: flex;
}
.card1, .card2, .card3:hover{
    background: none;
    transition: 0.8s;
}
.card1:hover .card1-text p {
    color: blue;
    transition: 0.8s;
}
.card1:hover .arrow1 p {
    background-color: black;
    transition: 0.8s;
}
.card2 {
    width: 812px;
    height: 287px;
    border: 1px solid #cccccc;
    background: linear-gradient(0deg, #eeeeee, #fefefe);
    position: relative;
    box-shadow: 4px 4px 10px 2px #d0cec6;
}
.sample-title {
    font-size: 18px;
    color: blue;
}
.card2 img {
    width: 233px;
    height: 154px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.card2:hover .arrow2 p {
    background-color: black;
    transition: 0.8s;
}
.card2:hover .sample-text{
    color: blue;
    transition: 0.8s;
}
.clear {
    clear: both;
}
.card1-img {
    width: 233px;
    height: 154px;
    position: absolute;
    top: 20px;
    left: 20px;
}
.card1-img img {
    width: 233px;
}
.card1-text {
    display: block;
    position: absolute;
    top: 21px;
    left: 273px;
    font-size: 18px;
    color: blue;
    line-height: 35px;
}
.arrow1 p, .arrow2 p, .arrow3 p {
    color: white;
    background-color: #7e7e7e;
    padding: 2px 7px;
    border-radius: 3px;
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 763px;
}
.card3, .card4 {
    width: 812px;
    height: 110px;
    border: 1px solid #cccccc;
    background: linear-gradient(0deg, #eeeeee, #fefefe);
    position: relative;
    box-shadow: 4px 4px 10px 2px #d0cec6;
}
.card3-text, .card4-text {
    line-height: 2em;
    font-size: 18px;
    position: absolute;
    top: 10%;
    left: 3%;
    color: blue;
}
.card3:hover .arrow3 p {
    background-color: black;
    transition: 0.8s;
}
.card3:hover .card3-text p {
    color: blue;
}