html,
body{
  margin:0;
  padding:0;
}

body{
  font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background:#f3ede7;
}

.site-main{
  margin:0;
  padding:0;
}

/* =========================
ds Page
========================= */
.ds-page{
  position:relative;
  overflow:hidden;
}

.ds-hero{
  position:relative;
  width:100%;
  max-width:390px;
  margin:0 auto;
  padding:4px 20px 0;
  box-sizing:border-box;
  z-index:0;
}


/* =========================
Block
========================= */

.ds-block{
  position:relative;
  margin-bottom:20px;
  z-index:2;  
}

.ds-block--mission{
  margin-bottom:24px;
}


/* =========================
Slash
========================= */

.ds-slash{
  position:absolute;
  left:-4px;
  top:-10px;
  width:28px;
  height:auto;
}


.ds-label{
  margin:56px 12px -4px;
  
  font-weight:700;
  font-size:14px;
  line-height:1;
  letter-spacing:0;
  color:#5E698F;
}


/* =========================
ds
========================= */

.ds-title{
  margin:0;
  
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  letter-spacing:0;
  color:#39446D;
  margin-bottom:20px;
}

/* =========================
ds Hero
========================= */
.ds-hero__shape{
  position:absolute;
  display:block;
  height:auto;
  pointer-events:none;
}

.ds-hero__shape--yellow{
  top:0;
  left:0;
  width:160px;
  z-index:1;
}

.ds-text{
  width:353px;
  margin:0;
  
  font-weight:500;
  font-size:16px;
  line-height:29px;
  letter-spacing:0;
  color:#000;
}


/* =========================
ds Hero
========================= */

.ds-works{
  width:100%;
  max-width:390px;
  margin:0 auto;
  padding:0 20px 80px;
  box-sizing:border-box;
}

.ds-works__label{
  margin:0 0 8px;

  
  font-weight:700;
  font-size:14px; /* SP */
  line-height:1;
  letter-spacing:0;

  color:#5E698F;
}

.ds-works__title{
  width:353px;
  margin:0 0 28px;
  
  font-weight:700;
  font-size:24px;
  line-height:38px;
  letter-spacing:0;
  color:#39446D;
}

.ds-works__image{
  width:353px;
  margin:0 0 16px;
}

.ds-works__image img{
  display:block;
  width:100%;
  height:auto;
}

.ds-works__sub{
  margin:0 0 4px;
  
  font-weight:700;
  font-size:14px;
  line-height:1.6;
  letter-spacing:0;
  color:#A8B6D0;
}

.ds-works__name{
  margin:0 0 8px;
  
  font-weight:900;
  font-size:24px;
  line-height:1.4;
  letter-spacing:0;
  color:#39446D;
}

.ds-works__text{
  width:353px;
  margin:0;
  
  font-weight:500;
  font-size:16px;
  line-height:29px;
  letter-spacing:0;
  color:#39446D;
}

.ds-works__image--gap{
  margin-top:60px;
}

.ds-works__name a{
  color:#39446D !important;
  text-decoration:underline;
}

.ds-works__name a:visited{
  color:#39446D !important;
}

.ds-works__name a:hover{
  color:#39446D !important;
  opacity:0.7;
}

.ds-works__name a:active{
  color:#39446D !important;
}

/* =========================
PC（1024〜）
========================= */

@media screen and (min-width:1024px){
  .ds-hero{
    max-width:1280px;
    padding:140px 40px 0;
  }

  .ds-block{
    max-width:760px;
    margin-bottom:24px;
  }

  .ds-slash{
    width:40px;
    left:8px;
    top:8px;
  }

  .ds-label{
    margin:0;
    font-size:20.48px;

    position:relative;
    transform:translate(48px, 12px);
  }

  .ds-title{
    font-size:64px;
    line-height:1.2;
    margin-bottom:24px;
  }

  .ds-text{
    width:760px;
    font-size:18px;
    line-height:32px;
  }

  .ds-hero__shape--yellow{
    display: none;
  }


  /* =========================
  Works
  ========================= */

  .ds-works{
    max-width:1280px;
    padding:60px 40px 80px;
  }

  .ds-slash2{
    position:absolute;
    width:40px;
    left:-4px;
    top:24px;
  }

  .ds-works__label{
    margin:0;
    font-size:20.48px;
  }
  .ds-works__title{
    font-size:64px;
    line-height:1.2;
    margin:0 8px 24px;
  }

  .ds-works__image,
  .ds-works__text,
  .ds-works__name,
  .ds-works__sub{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .ds-works__image{
    width:760px;
    height:538px;
    border-radius:12px;
    overflow:hidden;
  }

  .ds-works__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .ds-works__sub{
    font-size:14px;
    margin-bottom:6px;
  }

  .ds-works__name{
    font-size:28px;
    margin-bottom:12px;
  }

  .ds-works__text{
    width:760px;
    font-size:16px;
    line-height:30px;
    color:#0F3460;
  }

  .ds-works__image--gap{
    margin-top:60px;
  }

/* =========================
PC 斜線
========================= */
  .top-bg-line{
    position:absolute;
    width:752.9px;
    height:2677.5px;
    background:#FFF;
    opacity:0.46;
    border-radius:7.31px;
    transform:rotate(44.12deg);
    transform-origin:left top;
    z-index:0;
    pointer-events:none;
  }

  .ds-page .bg-line--1{
    top:-100px;
    left:1324px;
  }

  .ds-page .bg-line--2{
    top:1636px;
    right:-780px;
  }

  .ds-page section{
  position:relative;
  z-index:1;
}

}