@charset "UTF-8";
/*//////////////////
  共通変数
//////////////////*/
/*//////////////////
  
  myriad-pro:300;
  myriad-pro,Semibold:600;
  myriad-pro,bold:700;
  
//////////////////*/
body,
#container {
  min-width: auto; }

#container {
  position: relative; }

footer {
  position: relative;
  z-index: 1; }

a:hover {
  opacity: 1; }

main {
  margin-top: 0;
  padding-top: 56px;
  position: relative;
  z-index: 2; }
  main .headline {
    padding-top: 46px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #fff 57px, rgba(255, 255, 255, 0) 296px), url(../../img/about/about_top_sp.jpg?20190308_1) no-repeat center bottom/100% auto;
    width: 100%;
    transition: opacity 400ms cubic-bezier(0.165, 0.84, 0.44, 1.05);
    position: relative; }
    main .headline h1 {
      letter-spacing: 0.02em; }
    main .headline h1,
    main .headline p {
      text-shadow: rgba(255, 255, 255, 0.4) 0px 0px 10px; }
    main .headline .about_link {
      position: absolute;
      width: calc(100% - (6.4vw * 2));
      bottom: 20px;
      display: flex;
      justify-content: center;
      margin: 0 6.4vw; }
      main .headline .about_link a {
        background: #fff !important;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 4px;
        height: 40px;
        width: 100%;
        font-size: 13px;
        font-family: myriad-pro, Hiragino Kaku Gothic W6 JIS2004;
        font-weight: 600;
        letter-spacing: 0.15em;
        border: none; }
      main .headline .about_link a:first-of-type {
        margin-right: 12px; }
  main #about_massage {
    padding-top: 100vh; }
    main #about_massage > div {
      height: auto;
      padding: 0 calc(6.4vw * 1.6);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start; }
      main #about_massage > div .text {
        width: 100%;
        padding-bottom: 100vh;
        opacity: 1 !important; }
        main #about_massage > div .text h2 {
          margin-bottom: 20px;
          font-size: 22px;
          line-height: 1.5;
          letter-spacing: 0.05em;
          font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
          font-weight: 700;
          text-align: center;
          color: #222; }
        main #about_massage > div .text p {
          font-size: 14px;
          line-height: 2.2;
          font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
          font-weight: 400;
          letter-spacing: 0.12em;
          color: #222; }
        main #about_massage > div .text p:first-of-type {
          margin-bottom: 80px; }
        main #about_massage > div .text p:last-of-type {
          margin-bottom: 0px; }
      main #about_massage > div .pc_bg {
        display: none; }
    main #about_massage .technology .text h2,
    main #about_massage .technology .text p {
      color: #E4E9EB; }
    main #about_massage > div:nth-child(even) {
      justify-content: flex-end; }
  main #fenrir_design {
    padding: 0 6.4vw 0px; }
    main #fenrir_design h1 {
      font-size: 20px;
      line-height: 1.5em;
      font-family: myriad-pro, Hiragino Kaku Gothic W6 JIS2004;
      font-weight: 600;
      margin-bottom: 26px;
      text-align: center;
      letter-spacing: 0.06em;
      position: relative;
      z-index: 4; }
    main #fenrir_design > p {
      font-size: 13px;
      line-height: 1.8em;
      font-family: myriad-pro, Hiragino Kaku Gothic W3 JIS2004;
      font-weight: 300;
      text-align: center;
      position: relative;
      z-index: 4;
      margin-bottom: 54px;
      letter-spacing: 0.14em; }
    main #fenrir_design ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 0px;
      overflow: hidden;
      position: relative;
      transition: height 400ms cubic-bezier(0.02, 0.01, 0.47, 1); }
      main #fenrir_design ul li {
        overflow: hidden;
        width: calc((100vw - 19.2vw) / 2);
        position: relative;
        margin-bottom: 44px; }
        main #fenrir_design ul li p,
        main #fenrir_design ul li a {
          width: 100%;
          display: block; }
          main #fenrir_design ul li p img,
          main #fenrir_design ul li a img {
            width: 100%;
            height: calc(((100vw - 19.2vw) / 2) * 0.666); }
          main #fenrir_design ul li p span,
          main #fenrir_design ul li a span {
            opacity: 1;
            display: block;
            color: #222;
            font-size: 13px;
            font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
            font-weight: 600;
            line-height: 1.6em;
            text-align: left;
            letter-spacing: 0.12em; }
          main #fenrir_design ul li p:hover,
          main #fenrir_design ul li a:hover {
            opacity: 1 !important; }
        main #fenrir_design ul li:hover img {
          opacity: 0.7; }
        main #fenrir_design ul li:hover span {
          opacity: 1; }
    main #fenrir_design .more {
      margin-top: 44px; }
      main #fenrir_design .more span {
        color: #222;
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 600;
        line-height: 1.87em;
        text-align: left;
        letter-spacing: 0.12em;
        position: relative;
        display: inline-block;
        cursor: pointer; }
        main #fenrir_design .more span:before {
          content: '';
          width: 16px;
          height: 1px;
          display: block;
          background: #222;
          border-radius: 1px;
          position: absolute;
          top: 13px;
          right: -27px;
          transform: rotate(0deg);
          transition: transform 400ms cubic-bezier(0.02, 0.01, 0.47, 1);
          pointer-events: none; }
        main #fenrir_design .more span:after {
          content: '';
          height: 16px;
          width: 1px;
          display: block;
          background: #222;
          border-radius: 1px;
          position: absolute;
          top: 5px;
          right: -20px;
          transform: rotate(0deg);
          transition: transform 400ms cubic-bezier(0.02, 0.01, 0.47, 1);
          pointer-events: none; }
  main #insight {
    padding: 0 5vw 80px; }
    main #insight h1 {
      margin-top: 0px;
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: 26px;
      font-family: myriad-pro, Hiragino Kaku Gothic W6 JIS2004;
      font-weight: 600;
      text-align: center;
      letter-spacing: 0.06em; }
    main #insight p {
      font-size: 13px;
      text-align: center;
      line-height: 1.8;
      font-family: myriad-pro, Hiragino Kaku Gothic W3 JIS2004;
      font-weight: 300;
      margin-bottom: 54px;
      letter-spacing: 0.12em; }
    main #insight ul {
      width: 100%;
      margin-bottom: 40px; }
      main #insight ul li {
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        overflow: hidden;
        background: #dbdcdc;
        margin-bottom: 30px; }
        main #insight ul li a {
          text-decoration: none;
          transition: opacity 0.1s;
          -webkit-font-smoothing: antialiased;
          color: inherit;
          font-size: inherit;
          line-height: inherit;
          opacity: 1; }
          main #insight ul li a figure {
            width: 100%;
            line-height: 0;
            margin: 0;
            padding: 0;
            background-position: center center;
            background-size: cover; }
          main #insight ul li a figure:after {
            content: '';
            box-sizing: border-box;
            padding-top: 52.2%;
            display: block; }
          main #insight ul li a h2 {
            font-size: 14px;
            padding: 18px 18px 24px;
            line-height: 1.8;
            font-family: myriad-pro, Hiragino Kaku Gothic W3 JIS2004;
            font-weight: 300;
            letter-spacing: 0.02em; }
    main #insight .more {
      margin: 0; }
      main #insight .more .commonBtn_P {
        width: 200px;
        height: 47px;
        font-size: 13px;
        margin: 0 auto;
        font-family: myriad-pro, Hiragino Kaku Gothic W6 JIS2004;
        font-weight: 600;
        letter-spacing: 0.02em; }
  main #links {
    padding: 0 6.4vw;
    margin-bottom: 100px; }
    main #links ul {
      max-width: 100%; }
      main #links ul li a {
        display: block;
        width: 100%;
        padding: 28px 0;
        font-size: 15px;
        line-height: 1em;
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 600;
        letter-spacing: 0.12em;
        background: url(../../img/common/next_arrow.svg) no-repeat right center/15px 15px; }
      main #links ul li:first-of-type {
        border-bottom: 0.5px solid #A7AEB1; }

#sp_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1; }
  #sp_bg > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1.05);
    will-change: opacity; }
    #sp_bg > div figure {
      width: calc(100% + 16px);
      height: calc(100% + 16px);
      position: absolute;
      top: -8px;
      left: -8px;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1.05), filter 450ms cubic-bezier(0.165, 0.84, 0.44, 1.05);
      will-change: filter; }
    #sp_bg > div .blur {
      filter: blur(8px); }
    #sp_bg > div > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      opacity: 0;
      will-change: opacity;
      transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1.05); }
  #sp_bg .design {
    z-index: 4; }
    #sp_bg .design figure {
      background-image: url(../../img/about/about_design_sp.jpg?20190308_1); }
    #sp_bg .design div {
      background-color: #fff; }
  #sp_bg .technology {
    z-index: 3; }
    #sp_bg .technology figure {
      background-image: url(../../img/about/about_technology_sp.jpg?20190308_1); }
    #sp_bg .technology div {
      background-color: #464849; }
  #sp_bg .pro {
    z-index: 2; }
    #sp_bg .pro figure {
      background-image: url(../../img/about/about_professional_sp.jpg?20190308_1); }
    #sp_bg .pro div {
      background-color: #fff; }
  #sp_bg .experience {
    z-index: 1; }
    #sp_bg .experience figure {
      background-image: url(../../img/about/about_experience_sp.jpg?20190308_1); }
    #sp_bg .experience div {
      background-color: #fff; }