@charset "utf-8";

/* ふわっと表示↓*/
.element {
    /* 最初は非表示 */
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    transition: transform 1s, opacity 1s, visibility 1s;

  }
  /* フェードイン時に入るクラス */
  .is-fadein {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  /* ふわっと表示↑*/


body{font-family: 'Noto Sans JP', sans-serif;}
/*↓コンテンツ１*/
.content1img{width:70%;max-width:250px;margin:0 auto;display:block;padding-top:5.5%;padding-bottom:5.5%;}
#content1{background-image:url("../img/nagare/background1.png"); background-repeat: no-repeat;
    background-size:cover;margin: 0 auto;padding-top:140px;}
/*↑コンテンツ１*/

/*↓コンテンツ2*/
.content2menu{display:flex;justify-content: center;margin-top: 3%;margin-bottom: 3%;}

.contentmenu1{font-size:15px;color:#231815;font-weight:800;margin-left: 3.5%;margin-right: 3.5%;position: relative;}
.contentmenu2{font-size:15px;color:#231815;font-weight:800;margin-left: 3.5%;margin-right: 3.5%;position: relative;}
.contentmenu3{font-size:15px;color:#231815;font-weight:800;margin-left: 3.5%;margin-right: 3.5%;position: relative;}
.contentmenu4{font-size:15px;color:#231815;font-weight:800;margin-left: 3.5%;margin-right: 3.5%;position: relative;}
.contentmenu5{font-size:15px;color:#231815;font-weight:800;margin-left: 3.5%;margin-right: 3.5%;position: relative;}

.content2menu .contentmenu1:hover {
    color: #ff2a2a;
    cursor: pointer;
  }
  .content2menu .contentmenu2:hover {
    color: #ffca00;
    cursor: pointer;
  }
  .content2menu .contentmenu3:hover {
    color: #007df8;
    cursor: pointer;
  }
  .content2menu .contentmenu4:hover {
    color: #00ae56;
    cursor: pointer;
  }

  .content2menu .contentmenu5:hover {
    color: #ff98a2;
    cursor: pointer;
  }


.contentmenu1:before {
    z-index: 40;
    content: ""!important;
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 80px;
    left: -18px;
    bottom: -85px;
    background-image: url(../img/nagare/underline1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.contentmenu2:before {
    z-index: 40;
    content: ""!important;
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 80px;
    left: -18px;
    bottom: -85px;
    background-image: url(../img/nagare/underline2.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.contentmenu3:before {
    z-index: 40;
    content: ""!important;
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 80px;
    left: -18px;
    bottom: -85px;
    background-image: url(../img/nagare/underline3.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.contentmenu4:before {
    z-index: 40;
    content: ""!important;
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 80px;
    left: -18px;
    bottom: -85px;
    background-image: url(../img/nagare/underline4.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.contentmenu5:before {
    z-index: 40;
    content: ""!important;
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 80px;
    left: -18px;
    bottom: -85px;
    background-image: url(../img/nagare/underline5.png);
    background-size: contain;
    background-repeat: no-repeat;
}
/*↑コンテンツ2*/

/*↓コンテンツ3*/
.content3{background-image:url("../img/nagare/background2.png"); background-repeat: no-repeat;
    background-size:cover;margin: 0 auto;}

.content3inner{margin:0 auto;max-width: 1920px;display:block;padding-top:5%;padding-bottom:5%;padding-left: 5%;padding-right:5%;}

.nagare{margin:0 auto;display:block;margin-left:10%;}
.nagareborder{border-left: 3px dotted #534741;width:784px;margin:0 auto;}
.nagare p{font-size:15px;color:black;font-weight:800;margin-top: 1%;margin-bottom: 1%;}
.nagare h2{font-size:25px;font-weight:800;margin-top: 1%;margin-bottom: 1%;padding-top:3%;}
.nagaretell{font-size:23px;font-weight:800;color:#231815;}
.nagaretell span{font-size:34px;font-weight:900;color:#231815;}
.nagaretime{font-size:14px;font-weight:800;color:black;margin-bottom:1.5%;margin-top: 1.5%;}

.nagare1{margin-bottom: 8%;position:relative;}
.nagare2{margin-bottom: 8%;position:relative;}
.nagare3{margin-bottom: 8%;position:relative;}
.nagare4{margin-bottom: 8%;position:relative;}
.nagare5{position:relative;}

.nagarenumber1{width:75px;position:absolute;left:-16%;}
.nagarenumber2{width:75px;position:absolute;left:-16%;}
.nagarenumber3{width:75px;position:absolute;left:-16%;}
.nagarenumber4{width:75px;position:absolute;left:-16%;}
.nagarenumber5{width:75px;position:absolute;left:-16%;top:16%;}

.nagarebr{display:none;}

/*ボタン↓*/
.spnagarebr{display:none;}
.nagarebuttonflex{display:flex;margin-top: 5%;}
.nagarebutton{width:200px;margin-top: 5%;margin-right: 3%;
    padding:10px 15px;text-align: center;border-radius: 50px;font-weight:bold;
    background: linear-gradient(to right,
        #1a71b4,
        #24bddc,
        #77b848,
        #d2d65b,
        #f9c94f,
        #ec6350);
        margin-top: 2%;
        color:white;
        position:relative;}
    
.nagarebutton1{width:220px;}
 .nagarebutton1 a:hover {
        background: #534741;
        cursor: pointer;
      }
    .nagarebutton::before{
        z-index: 40;
        content:""!important;
        display: inline-block;
        position:absolute;
        width:7px;
        height:17px;
        left:15px;
        bottom:11px;
        background-image:url(../img/nagare/10.svg);
        background-repeat: no-repeat;
        opacity: 1!important;}
/*ボタン↑*/

/*↑コンテンツ3*/

/*↓コンテンツ4*/
.content4inner{padding-bottom:5%;}
.content4img{width:300px;margin:0 auto;display:block;padding-top:5%;padding-bottom:2%;}
.content4{margin: 0 auto;}
.content4 p{font-size:18px;font-weight:bold;text-align: center;color:black;margin-bottom: 2%;}

.ryoukinall{display:flex;justify-content:flex-start;background-color:#F1F1F1;padding:1% 4%;width:650px;margin:0 auto;border-radius: 15px;}
.ryoukinicon{background-color: white;border-radius: 50%;font-size:18px;text-align: center;line-height:95px;
    height:95px;width:95px;color:black;font-weight:bold;left:0;}
.ryoukintxt{line-height:95px;height:95px;font-size:18px;color:black;font-weight:bold;margin-left: 5%;}
/*↑コンテンツ4*/


/*sp追記↓*/
.content3spbr{display:none;}
.content2menusp{display:none;}
.nagare5sptxt{display:none;}
.nagare5sptxth2{display:none;}
/*sp追記↑*/


/*流れ改行↓*/
@media screen and (max-width : 890px ){
    .nagarebr{display:block;}
    .nagareborder{width:600px;}
    .nagarenumber1{left:-18%;}
.nagarenumber2{left:-18%;}
.nagarenumber3{left:-18%;}
.nagarenumber4{left:-18%;}
.nagarenumber5{left:-18%;}
}
/*流れ改行↑*/

@media screen and (min-width:799px) and ( max-width:1080px) {
    .content1img{
        padding-right: 6vw;
    }
}


@media screen and (max-width : 800px ){

/*コンテンツ1↓*/
#content1{padding-top:70px;}
.content1img{width:90%;max-width:215px;padding-top:15%;padding-bottom:15%;padding-right:10%;}
/*コンテンツ1↑*/

/*コンテンツ２↓*/
.content2menu{display:none;}
.content2menusp{display:block;}
.content2menuspflex{display:flex;justify-content:space-around;padding-left:5%;padding-right:5%;
margin-top: 5%;margin-bottom: 8%;}
.contentmenu5{display:flex;justify-content: center;position:relative;}
.contentmenu5:before{left:auto;}
.content2inner{padding-top:5%;padding-bottom:12%;}

.contentmenu1{font-size:18px;}
.contentmenu2{font-size:18px;}
.contentmenu3{font-size:18px;}
.contentmenu4{font-size:18px;}
.contentmenu5{font-size:18px;}

.contentmenu1:before{width:150px;left:-38px;bottom:-80px;background-image: url(../img/nagare/nagare_sp/1.png);}
.contentmenu2:before{width:150px;;left:-38px;bottom:-80px;background-image: url(../img/nagare/nagare_sp/2.png);}
.contentmenu3:before{width:150px;left:-38px;bottom:-80px;background-image: url(../img/nagare/nagare_sp/3.png);}
.contentmenu4:before{width:150px;left:-38px;bottom:-80px;background-image: url(../img/nagare/nagare_sp/4.png);}
.contentmenu5:before{width:150px;bottom:-80px;left:auto;background-image: url(../img/nagare/nagare_sp/5.png);}
/*コンテンツ２↑*/

/*コンテンツ３↓*/
.spnagarebr{display:block;}
.nagareborder{width:100%;}
.content3spbr{display:block;}
.nagare h2{font-size:20px;margin-bottom: 5%;}
.nagare p{font-size:14px;margin-bottom: 5%;}
.nagaretell{font-size:20px;}
.nagaretell span{font-size:25px;}
.nagaretime{font-size:12px;margin-bottom: 8%;}

.content3inner{padding-left:12%;position:relative;padding-bottom:32%;padding-top:15%;}

.nagarebuttonflex{display:block;}
.nagarebutton a{font-size:15px;}
.nagarebutton{margin-bottom: 4%;}
.nagare{margin-left: 12%;}

.nagarebutton1{margin-top: 2%;}

.nagarenumber1{width:min(calc((100 / 1500) * 170vw), 170px);left:-21%;position: absolute;}
.nagarenumber2{width:min(calc((100 / 1500) * 170vw), 170px);left:-21%;position: absolute;}
.nagarenumber3{width:min(calc((100 / 1500) * 170vw), 170px);left:-21%;position: absolute;}
.nagarenumber4{width:min(calc((100 / 1500) * 170vw), 170px);left:-21%;position: absolute;}
.nagarenumber5{width:min(calc((100 / 1500) * 170vw), 170px);left:-21%;position: absolute;top:56%;}

.nagare5webtxt{opacity:0;}
.nagare5sptxth2{display:block;padding-left:min(calc((100 / 1500) * 165vw), 165px);}
.nagare5sptxt{display:block;font-size: 14px;padding-left:min(calc((100 / 1500) * 165vw), 165px);
    color: black;
    font-weight: 800;
    margin-top: 1%;
    margin-bottom: 1%;
width:85%;}

.nagare5spitem{position:absolute;bottom:15%;}


/*コンテンツ３↑*/

/*コンテンツ4↓*/
.content4 p{margin-bottom: 11%;}
.ryoukinall{width:auto;border-radius: 0;}
.content4img{max-width:280px;width:90%;}
.ryoukinall{padding:6% 4%;margin-bottom: 10%;}
/*コンテンツ4↑*/
}

/*流れ５↓*/
@media screen and (max-width : 750px ){
    .nagare5spitem{bottom:13%;}
}
/*流れ５↑*/

/*流れ５↓*/
@media screen and (max-width : 550px ){
    .nagare5spitem{bottom:12%;}
}
@media screen and (max-width : 500px ){
    .nagare5spitem{bottom:8%;}
}
@media screen and (max-width : 450px ){
    .nagare5spitem{bottom:7%;}
}
@media screen and (max-width : 400px ){
    .nagare5spitem{bottom:6%;}
}
/*流れ５↑*/