@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:415px;margin:0 auto;display:block;padding-top:5.95%;padding-bottom:5.95%;}
#content1{background-image:url("../img/dekirukoto/background1.png"); background-repeat: no-repeat;
    background-size:cover;margin: 0 auto;padding-top:140px;}

/*コンテンツ2*/
.content2 h2{font-size:30px;text-align: center;color:#231815;font-weight:900;margin-bottom:2.5%;margin-top:4%;}
.content2txt{font-size:15px;text-align: center;width:38%;margin:0 auto;display:block;color:black;font-weight:bold;}

/*コンテンツ3*/
.content3flex {display:flex; justify-content: center; margin:3% auto; max-width:1100px; width:100%;}
.content3flex div {width:100%; margin:0 -20px;}
.doimg{margin:0 auto; display:block; width:100%; }
.dotxt{text-align: center; font-size:20px; font-weight:500; margin-top: 12%;}

/*↓コンテンツ4*/
.content4{background-image:url("../img/dekirukoto/background1.png"); background-repeat: no-repeat;
    background-size:cover;margin: 0 auto;}

.content4flex{display:flex;margin:0 auto;justify-content: center;padding-top:1.5%;padding-bottom:1.5%;}
.content4img1{max-width:540px;width:min(calc((100 / 1920) * 540vw), 540px);margin-right:30px;position:relative;}
.content4img2{max-width:540px;width:min(calc((100 / 1920) * 540vw), 540px);position:relative;}

.webbutton1::before{
  content:"";
  display: inline-block;
  position:absolute;
  width:min(calc((100 / 1500) * 60vw), 40px);
  height:min(calc((100 / 1500) * 60vw), 40px);
  left:-10px;
  top:30%;
  background-image:url(../img/dekirukoto/buttonyajirusi.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index:30;
  }

  .webbutton1:hover:before{
    content:"";
    display: inline-block;
    position:absolute;
    width:min(calc((100 / 1500) * 60vw), 40px);
    height:min(calc((100 / 1500) * 60vw), 40px);
    left:0;
    top:30%;
    background-image:url(../img//dekirukoto/buttonyajirusi.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index:30;
  }

  .webbutton2::before{
    content:"";
    display: inline-block;
    position:absolute;
    width:min(calc((100 / 1500) * 60vw), 40px);
    height:min(calc((100 / 1500) * 60vw), 40px);
    left:-10px;
    top:30%;
    background-image:url(../img/dekirukoto/buttonyajirusi.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index:30;
    }
  
    .webbutton2:hover:before{
      content:"";
      display: inline-block;
      position:absolute;
      width:min(calc((100 / 1500) * 60vw), 40px);
      height:min(calc((100 / 1500) * 60vw), 40px);
      left:0;
      top:30%;
      background-image:url(../img/dekirukoto/buttonyajirusi.svg);
      background-size: contain;
      background-repeat: no-repeat;
      z-index:30;
    }


  
/*↑コンテンツ4*/

/*↓コンテンツ5*/
.content5inner{margin:0 auto;max-width: 1920px;}
/*↓コンテンツflex共通*/
.content5 h2{font-size:min(calc((100 / 1920) * 25vw), 25px);width:46%;padding:2%;background-color: white;margin: 0 auto; 
    color:#231815;font-weight:900;text-align: center; margin-top: 3%;border-radius: 50px;margin-bottom: 5%;}
.content5img1{width:min(calc((100 / 1920) * 450vw), 450px);border-radius: 12px;}
.content5 p{font-size:14px;line-height: 180%;font-weight:800;}
/*↑コンテンツflex共通*/

/*↓コンテンツflex1*/
.content5flex1{display:flex;position:relative;justify-content: center;margin-top: 5%;align-items: center}
.content5flex1::before {
    background-color: #FFCA00;
    content: "";
    display: block;
    height:min(calc((100 / 1920) * 320vw), 320px);
    position: absolute;
    left: 0;
    bottom:0;
    width: 43.5%;
    z-index: -1;
    border-radius: 0px 0px 40px 0px;
}
.content5right{width:30%;margin-bottom: 0;margin-left: 3%;}
.content5h31{font-size:min(calc((100 / 1920) * 25vw), 25px);text-align: left;margin-bottom: 8%;font-weight:900;}
.content5list{font-size:min(calc((100 / 1920) * 25vw), 25px);font-weight:800;}
.content5listspan{font-size:15px;}
.content5pwhite{white-space:nowrap;}
/*↑コンテンツflex1*/

/*↓コンテンツflex2*/
.content5inner{margin:0 auto;max-width: 1920px;margin-top: 6%;margin-bottom: 8%;}
.content5flex2{display:flex;position:relative;justify-content: center;margin-top: 5%;align-items:center}
.content5flex2::before {
    background-color: #FFCA00;
    content: "";
    display: block;
    height:min(calc((100 / 1920) * 320vw), 320px);
    position: absolute;
    right: 0;
    bottom:0;
    width: 43.5%;
    z-index: -1;
    border-radius: 0px 0px 0px 40px;
}

.content5left2{width:30%;margin-bottom: 0;margin-right: 3%;}
.content5h32{font-size:min(calc((100 / 1920) * 25vw), 25px);text-align:right;margin-bottom: 8%;}
/*↑コンテンツflex2*/

/*↓イラスト*/
.content5illust1{position:absolute;width:min(calc((100 / 1920) * 50vw), 50px);right:23%;top:0%;}
.content5illust2{position:absolute;width:min(calc((100 / 1920) * 117vw), 117px);left:19%;top:0%;}
.content5illust3{position:absolute;width:min(calc((100 / 1920) * 130vw), 130px);right:23%;top:0%;}
.content5illust4{position:absolute;width:min(calc((100 / 1920) * 54vw), 54px);left:25%;top:3%;}
.content5illust5{position:absolute;width:min(calc((100 / 1920) * 130vw), 130px);right:22%;top:0%;}
.content51{position:relative;}
.content52{position:relative;}
.content53{position:relative;}
.content54{position:relative;}
.content55{position:relative;}
/*↑イラスト*/

/*↑コンテンツ5*/

/*↓sp追記*/
.content2brsp{display:none;}
.content5sp{display:none;}
.sp5illust1img{display:none;}
.spbutton{display:none;}

/*↑sp追記*/

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

.webbutton1{display:none;}
.webbutton2{display:none;}
.spbutton{display:block;}
/*↓コンテンツ1*/
#content1{padding-top:70px;}
.content1img{max-width:340px;width:90%;padding-top:17.5%;padding-bottom: 17.5%;}
/*↑コンテンツ1*/

/*↓コンテンツ2*/
.content2 h2{font-size:23px;margin-top: 14%;margin-bottom: 9%;}
.content2brsp{display:block;}
.content2txt{font-size:14px;width:80%;margin-bottom: 6%;}
/*↑コンテンツ2*/

/*コンテンツ3*/
.content3flex {max-width:800px; width:100%; flex-wrap:wrap; padding-bottom:30px;}
.content3flex div {max-width:400px; flex-basis:50%;}
.content3flex .dotxt{font-size:14px; margin-top: 0;}

/*↓コンテンツ4*/
.content4flex{display:block;padding-top:10%;padding-bottom:10%; position:relative;}
.content4img1{margin-right: 0;width:90%;margin:0 auto;display:block;margin-bottom: 4%;}
.content4img2{margin-left: 0;width:90%;margin:0 auto;display:block;margin-top: 4%;}
/*↑コンテンツ4*/

/*↓コンテンツ5*/
.content5list{width:85%;margin: auto;display:block;font-size:25px;}
.content5pwhite{white-space:normal;}
.content5web{display:none;}
.content5sp{display:block;margin-top: 17%;margin-bottom: 5%;}
.content5img1{width:93%;margin: 0 auto;display:block;}
.content5 h2{font-size:20px;}
.content5 h3{font-size:20px;text-align: center;}
.content5 p{font-size:14px;width:85%;margin: 0 auto;display:block;}
.content5spback{position:relative;padding-bottom:0.1%;margin-bottom: 7%;}
.content5spback::after{background-color: #FFCA00;
    content: "";
    display: block;
    height: min(calc((100 / 1920) * 1250vw), 1250px);
    position: absolute;
    right: 0;
    bottom: 0;
    width:100%;
    z-index: -1;}

.content5spitem{margin-bottom: 20%;}

.sp5illust1{position:relative;}
.sp5illust2{position:relative;}
.sp5illust3{position:relative;}
.sp5illust4{position:relative;}

.sp5illust1img{width: 53px;position:absolute;z-index:20;right:3%;bottom:-8.5%;display:block;}

.sp5illustimg2{width: min(calc((100 / 1920) * 450vw), 450px);position: absolute;z-index: 20;left: 3%;top:100%;}
.sp5illustimg3{width: min(calc((100 / 1920) * 500vw), 500px);position: absolute;z-index: 20;right: 3%;top:100%;}
.sp5illustimg4{width: min(calc((100 / 1920) * 250vw), 250px);position: absolute;z-index: 20;left: 23%;top:100%;}
.sp5illustimg5{width:  min(calc((100 / 1920) * 500vw), 500px);position: absolute;z-index: 20;right: 3%;top:100%;}
/*↑コンテンツ5*/

}