@charset "UTF-8";

/* 以下のPC用の設定 */
@media screen and ( min-width:640px ) {
    .wrap{
        padding:  0 10%;
    }
    .hero{
        /* padding-top: 80px; */
    }
    .title_img{
    width: 50%;
    display: block;
    margin: 0 auto;
    }
    .contents{
    border: 2px solid #00C3CD;
    width: 13rem;
    padding: 15px;
    text-align: center;
    margin: 0 5px;
    }
    .flex{
        display: flex;
        justify-content: center;
    }
    .slider img {
    width:30vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;

    width: 100%;
    height: 30vw;
    /* CSSでの切り抜き */
    object-fit: cover;
    object-position: 0 0;
    }
    .slider .slick-slide {
    /* padding: 0 1rem; */
    width: 40vw;
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}
    .flex2{
        display: flex;
        /* justify-content: center; */
        margin: 30px 0;
    }
    .item{
        padding: 0 .5em;
        width: 60%;
    }
}