#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.Area1{
    width: 100%;
    position: relative;
}
.lab-all{
    position: absolute;
    top: 30px;
}
.cement-concrete-lab{
    position: absolute;
    right: 60px;
    bottom: 60px;
}
.cement-concrete-lab h2{
    font-family: "Story Script", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    color: rgb(48, 87, 87);
}

.Area1 h1{
    position: relative;
    display: inline-block;
    margin: 1rem 0 1rem -10px;
    padding: 1rem 3rem;
    color: #fff;
    border-radius: 0 100vh 100vh 0;
    background: #0075a9;
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    }

.Area1 h1::before{
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    content: '';
    border-top: 10px solid #005276;
    border-left: 10px solid transparent;
}

.Area2{
    display: flex;
    width: 100%;
}

.Area3{
    display: flex;
    width: 100%;
}

.left{
    width: 50%;
}

.right{
    width: 50%;
}
.content2{
    position: relative;
    height: 100vh;
}
.content{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}

/*==================================================
スライダーのためのcss
===================================*/
.slider2 {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider2-item01 {
    background:url(../img/dairy1.jpg);
}

.slider2-item02 {
    background:url(../img/jikkensitu.jpg);
}

.slider2-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

.message{
    width: 100%;
    z-index: 1;
}
.message h1 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 30px;
}

.message h2 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 25px;
}
.ken{
    text-align: center;
}
.syoukai{
    text-align: center;
}
.btn{
    text-align: center;
    z-index: 2;
}

.fluid {
    width:60vh;/*横幅*/
    height: 50vh;/*縦幅*/
    background:#3ec9d3;/*背景色*/
    animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}

/*linkページ*/
.slider_fade{
    width: 100%;
    height: 100vh;
    margin: 0%;
}

@keyframes fluidrotate {  

    0%, 100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
        
}
@media only screen and (max-width: 768px) {
    .left{
        width: 100%;
        position: relative;
}
    .right{
        position: absolute;
        width: 100%;
}
    .slider2{
        z-index: -1;
        pointer-events: none; /* ← 下のボタンにタップを通す */
}
.Area2 .right{
    position: absolute;
    pointer-events: none; /* ← ここが重要。重なっていてもクリックを透過させる */
}
    .fluid {
    width:50vh;/*横幅*/
    height: 45vh;/*縦幅*/
    background:#3ec9d3;/*背景色*/
    animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}
    .content{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 20%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}
}