/*===============================================
●画面の横幅が769px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 769px) {

  /* ボタン共通 */
  a.link_btn {
    display: inline-block;
    margin: 40px auto 0;
  }
  a.link_btn > span {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #C3BFB7;
  }
  a.link_btn > img {
    display: inline-block;
    width: 80px;
    margin-left: 15px;
  }

  /* kv */
  #kv {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0 auto;
    padding-top: 60px;
    display: flex;
  }
  #kv > div:nth-of-type(1) {
    width: 60%;
  }
  #kv > div:nth-of-type(2) {
    position: relative;
    width: 40%;
    margin-top: 50px;
  }
  #kv > div:nth-of-type(2) > ul {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    overflow: hidden;
  }
  #kv > div:nth-of-type(2) > a.btn {
    position: absolute;
    bottom: -40px;
    right: 50px;
    width: 231px;
  }
  #kv > img.img02 {
    position: absolute;
    bottom: -20%;
    left: -2%;
    width: 30%;
  }

  /* concept */
  #concept {
    position: relative;
    width: 100%;
    margin: 40px auto 0;
    padding: 120px 0 200px;
    background: url(../images/index/concept_bg.webp) top center no-repeat;
    background-size: cover;
  }
  #concept > div.inner {
    position: relative;
    width: 960px;
    margin: 0 auto;
    text-align: left;
    padding: 260px 0 0 280px;
  }
  #concept > div.inner > h2 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 362px;
  }
  #concept > div.inner > p:nth-of-type(1) {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.8;
  }
  #concept > div.inner > p:nth-of-type(2) {
    width: 448px;
    margin: 30px 0 0 0;
    font-size: 14px;
    line-height: 2.4;
  }
  #concept > div.inner > a.link_btn {
    margin: 30px 0 0 0;
  }
  #concept > img.img01 {
    position: absolute;
    z-index: 2;
    top: 210px;
    right: 0;
    width: 389px;
  }
  #concept > div.inner > img.img02 {
    position: absolute;
    z-index: 2;
    top: 227px;
    left: -150px;
    width: 327px;
  }
  #concept > div.inner > img.img03 {
    width: 742px;
    margin: 120px 0 0 90px;
  }
  #concept > div.inner > img.illust01 {
    position: absolute;
    z-index: 1;
    top: -26px;
    left: -450px;
    width: 627px;
  }
  #concept > div.inner > img.illust02 {
    position: absolute;
    z-index: 1;
    top: 395px;
    right: -70px;
    width: 296px;
  }
  #concept > div.inner > img.illust03 {
    position: absolute;
    z-index: 1;
    bottom: 109px;
    left: -91px;
    width: 347px;
  }
  #concept > div.inner > img.illust04 {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 522px;
    width: 108px;
  }

  /* work */
  #work {
    width: 100%;
    margin: 0 auto;
    padding: 120px 0;
    background: url(../images/index/work_bg.webp) top center no-repeat;
    background-size: cover;
  }
  #work > div.inner {
    width: 95%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 110px 100px 150px;
    background-color: #ffffff;
    border-radius: 10px;
  }
  #work > div.inner > h2 {
    width: 960px;
    margin: 0 auto;
  }
  #work > div.inner > h2 > img {
    width: 736px;
    margin: 0;
  }
  #work > div.inner > ul {
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
  }
  #work > div.inner > ul > li {
    width: 295px;
    text-align: left;
  }
  #work > div.inner > ul > li > p:nth-of-type(1) {
    margin: 30px auto 0;
    font-size: 18px;
    font-weight: 700;
  }
  #work > div.inner > ul > li > p:nth-of-type(2) {
    margin-top: 15px;
    font-size: 14px;
    line-height: 2;
  }
  #work > div.inner > div {
    position: relative;
    width: 960px;
    margin: 115px auto 0;
  }
  #work > div.inner > div > img.img {
    width: 634px;
    margin-left: 326px;
  }
  #work > div.inner > div > div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 475px;
    padding: 60px 0 40px;
    text-align: left;
    background-color: #ffffff;
    border-top-right-radius: 30px;
  }
  #work > div.inner > div > div > p:nth-of-type(1) {
    margin: 0 auto;
    font-size: 18px;
    font-weight: 700;
  }
  #work > div.inner > div > div > p:nth-of-type(2) {
    width: 375px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 2;
  }
  #work > div.inner > div > img.illust01 {
    position: absolute;
    z-index: 1;
    top: -120px;
    left: -50px;
    width: 207px;
  }
  #work > div.inner > div > img.illust02 {
    position: absolute;
    z-index: 2;
    bottom: -76px;
    right: 0;
    width: 108px;
  }

  /* voice */
  #voice {
    width: 100%;
    margin: 0 auto;
    padding: 130px 0 300px;
    background: url(../images/index/voice_bg.webp) top center no-repeat;
    background-size: cover;
  }
  #voice > h2 {
    width: 960px;
    margin: 0 auto;
  }
  #voice > h2 > img {
    width: 273px;
    margin: 0;
  }
  #voice ul {
    width: 95%;
    max-width: 1160px;
    margin: 0 auto;
  }
  #voice ul li {
    position: relative;
    padding-top: 85px;
    padding-bottom: 30px;
    background: url(../images/index/voice_staff_bg.webp) center center no-repeat;
    background-size: 100%;
  }
  #voice ul li img.staff {
    width: auto;
    height: 428px;
    margin: 0 auto;
  }
  #voice ul li img.no {
    position: absolute;
    top: 40px;
    left: 0;
    width: auto;
    height: 78px;
  }
  #voice ul li div {
    position: absolute;
    top: 85px;
    left: 35px;
    height: 320px;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #voice ul li div > p {
    display: inline-block;
    margin-right: 7px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.15em;
    padding: 10px;
    text-align: left;
  }
  #voice ul li div > p > span {
    padding: 10px;
    background-color: #ffffff;
  }
  #voice ul li a {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    width: 223px;
  }
  #voice .features_work_slider{
    opacity: 0;
    transition: opacity .3s linear;
  }
  #voice .features_work_slider.slick-initialized{
    opacity: 1;
  }
  #voice .slide-arrow {
    top: 45%;
    margin: auto;
    position: absolute;
    z-index: 10;
    width: 36px !important;
  }
  #voice .prev-arrow {
    left: -30px;
    cursor: pointer;
  }
  #voice .next-arrow {
    right: -30px;
    cursor: pointer;
  }

  #voice a.link_btn {
    margin: 20px auto 0;
  }

  /* photo */
  #photo {
    width: 100%;
    margin: -150px auto 0;
  }

  /* recruit */
  #recruit {
    position: relative;
    width: 960px;
    height: 280px;
    margin: 160px auto 0;
    background: url(../images/index/recruit_bg.webp) center center no-repeat;
    background-size: cover;
  }
  #recruit > img.illust {
    position: absolute;
    top: -83px;
    left: 40px;
    width: 129px;
  }
  #recruit > img.bg {
    width: 960px;
  }
  #recruit > img.title {
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 310px;
  }
  #recruit > a {
    display: block;
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 298px;
  }

  /* news */
  #news {
    position: relative;
    width: 960px;
    margin: 280px auto 0;
  }
  #news > h2 {
    width: 395px;
    margin: 0;
  }
  #news > img.bg {
    position: absolute;
    top: -280px;
    left: -386px;
    width: 627px;
  }
  #news > img.illust09 {
    position: absolute;
    top: -107px;
    left: 489px;
    width: 184px;
  }
  #news > div {
    display: flex;
    flex-wrap: wrap;
    margin: 70px auto 0;
  }
  #news > div > div {
    width: 295px;
    margin-right: 37.5px;
    margin-bottom: 30px;
  }
  #news > div > div:nth-of-type(3n) {
    margin-right: 0;
  }
  #news > div > div > a {
    display: block;
    position: relative;
    width: 100%;
  }
  #news > div > div > a > img.new {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 67px;
  }
  #news > div > div > a > div:nth-of-type(1) {
    width: 100%;
    height: 220px;
    border-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #news > div > div > a > div:nth-of-type(2) {
    margin-top: 30px;
    font-size: 14px;
    text-align: left;
  }
  #news > div > div > a > div:nth-of-type(2) > p:nth-of-type(2) {
    margin-top: 15px;
    line-height: 1.7;
  }
  #news > a.link_btn {
    margin-top: 20px;
  }



}

/*===============================================
●画面の横幅が768px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 768px) {

  /* ボタン共通 */
  a.link_btn {
    display: inline-block;
    margin: 30px auto 0;
  }
  a.link_btn > span {
    display: inline-block;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #C3BFB7;
  }
  a.link_btn > img {
    display: inline-block;
    width: 54px;
    margin-left: 10px;
  }

  /* kv */
  #kv {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0 auto;
    padding-top: 60px;
    display: flex;
  }
  #kv > div:nth-of-type(1) {
    width: 100%;
  }
  #kv > div:nth-of-type(2) {
    position: absolute;
    top: 65px;
    right: 0;
    width: 65%;
  }
  #kv > div:nth-of-type(2) > ul {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    overflow: hidden;
  }
  #kv > div:nth-of-type(2) > a.btn {
    position: absolute;
    bottom: -24%;
    right: 5%;
    width: 45%;
  }

  /* concept */
  #concept {
    width: 100%;
    margin: -5% auto 0;
    padding: 106px 0 60px;
    background: url(../images/index/concept_bg_sp.webp) top center no-repeat;
    background-size: cover;
  }
  #concept > div.inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
  #concept > div.inner > h2 {
    position: relative;
    z-index: 2;
    width: 174px;
    margin: 0;
  }
  #concept > div.inner > p:nth-of-type(1) {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.9;
  }
  #concept > div.inner > p:nth-of-type(2) {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    font-size: 14px;
    line-height: 2.4;
  }
  #concept > div.inner > a.link_btn {
    margin: 40px 0 0 0;
  }
  #concept > img.img01 {
    position: absolute;
    z-index: 2;
    top: 210px;
    right: 0;
    width: 389px;
  }
  #concept > img.img {
    margin: 0 auto;
  }
  #concept > div.inner > img.illust01 {
    position: absolute;
    z-index: 1;
    top: -160px;
    left: -187px;
    width: 371px;
  }
  #concept > div.inner > img.illust04 {
    position: absolute;
    z-index: 1;
    top: 15px;
    left: 241px;
    width: 54px;
  }

  /* work */
  #work {
    width: 100%;
    margin: 0 auto;
    padding: 40px;
    background: url(../images/index/work_bg.webp) top center no-repeat;
    background-size: cover;
  }
  #work > div.inner {
    width: 100%;
    height: 520px;
    margin: 0 auto;
    padding: 40px 26px 60px;
    text-align: left;
    background-color: #ffffff;
    border-radius: 10px;

    overflow-y: scroll;
  }
  #work > div.inner > h2 {
    width: 230px;
    margin: 0;
  }
  #work > div.inner > ul {
    margin: 0 auto;
  }
  #work > div.inner > ul > li {
    margin: 30px auto 0;
    text-align: left;
  }
  #work > div.inner > ul > li > p:nth-of-type(1) {
    margin: 20px auto 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }
  #work > div.inner > ul > li > p:nth-of-type(2) {
    margin-top: 10px;
    font-size: 14px;
    line-height: 2;
  }
  #work > div.inner > a.link_btn {
    margin: 30px 0 0 0;
  }
  #work > div.inner > div {
    position: relative;
    margin: 70px auto 0;
  }
  #work > div.inner > div > img.img {
    margin: 0 auto;
  }
  #work > div.inner > div > div {
    position: relative;
    z-index: 2;
    width: 95%;
    margin: -20px 0 0 0;
    padding: 25px 20px 0 20px;
    text-align: left;
    background-color: #ffffff;
    border-top-right-radius: 30px;
  }
  #work > div.inner > div > div > p:nth-of-type(1) {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }
  #work > div.inner > div > div > p:nth-of-type(2) {
    margin-top: 15px;
    font-size: 14px;
    line-height: 2;
  }
  #work > div.inner > div > img.illust01 {
    position: absolute;
    z-index: 1;
    top: -35px;
    left: -20px;
    width: 69px;
  }
  #work > div.inner > div > img.illust02 {
    position: absolute;
    z-index: 2;
    bottom: 31px;
    right: -20px;
    width: 50px;
  }

  /* voice */
  #voice {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 150px;
    background: url(../images/index/voice_bg_sp.webp) top center no-repeat;
    background-size: cover;
  }
  #voice > h2 {
    width: 165px;
    margin: 0 0 0 5%;
  }
  #voice ul {
    width: 100%;
    margin: 35px auto 0;
  }
  #voice ul li {
    position: relative;
    padding-top: 35px;
    padding-bottom: 25px;
    background: url(../images/index/voice_staff_bg.webp) center center no-repeat;
    background-size: cover;
  }
  #voice ul li img.staff {
    width: auto;
    height: 344px;
    margin: 0 auto;
  }
  #voice ul li img.no {
    position: absolute;
    top: 0;
    left: 30px;
    width: auto;
    height: 62px;
  }
  #voice ul li div {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-155%);
    width: 100px;
    height: 294px;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #voice ul li div > p {
    display: inline-block;
    margin-right: 7px;
    font-size: 12px;
    line-height: 1.3;
    padding: 10px;
    text-align: left;
  }
  #voice ul li div > p > span {
    padding: 10px;
    background-color: #ffffff;
  }
  #voice ul li a {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    width: 223px;
  }
  #voice .features_work_slider{
    opacity: 0;
    transition: opacity .3s linear;
  }
  #voice .features_work_slider.slick-initialized{
    opacity: 1;
  }
  #voice .slide-arrow {
    top: 45%;
    margin: auto;
    position: absolute;
    z-index: 10;
    width: 19px !important;
  }
  #voice .prev-arrow {
    left: 20px;
    cursor: pointer;
  }
  #voice .next-arrow {
    right: 20px;
    cursor: pointer;
  }

  #voice a.link_btn {
    margin: 15px auto 0;
  }

  /* photo */
  #photo {
    width: 100%;
    margin: -70px auto 0;
  }

  /* recruit */
  #recruit {
    position: relative;
    width: 90%;
    height: 150px;
    margin: 70px auto 0;
    background: url(../images/index/recruit_bg_sp.webp) center center no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  #recruit > img.illust {
    position: absolute;
    top: -37px;
    left: 10px;
    width: 65px;
  }
  #recruit > img.title {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 155px;
  }
  #recruit > a {
    display: block;
    position: absolute;
    top: 77px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 174px;
  }

  /* news */
  #news {
    position: relative;
    width: 90%;
    margin: 90px auto 0;
  }
  #news > h2 {
    width: 237px;
    margin: 0;
  }
  #news > img.bg {
    position: absolute;
    top: -157px;
    left: -196px;
    width: 370px;
  }
  #news > img.illust09 {
    position: absolute;
    top: -38px;
    left: 250px;
    width: 76px;
  }
  #news > div {
    margin: 40px auto 0;
  }
  #news > div > div {
    width: 100%;
    margin-top: 20px;
  }
  #news > div > div > a {
    display: flex;
    position: relative;
    width: 100%;
  }
  #news > div > div > a > img.new {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 58px;
  }
  #news > div > div > a > div:nth-of-type(1) {
    width: 160px;
    height: 120px;
    border-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #news > div > div > a > div:nth-of-type(2) {
    flex: 1;
    padding: 10px 0 0 20px;
    font-size: 12px;
    text-align: left;
  }
  #news > div > div > a > div:nth-of-type(2) > p:nth-of-type(2) {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.7;
  }

}