@charset "UTF-8";
/*//////////////////
  共通変数
//////////////////*/
main {
  font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
  font-weight: 400; }
  main .commonBtn_P {
    letter-spacing: 0.1em;
    transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }
    main .commonBtn_P:hover {
      background-color: rgba(0, 0, 0, 0) !important;
      opacity: 0.4; }
  main br.sm {
    display: none; }
  @media screen and (max-width: 890px) {
    main br.sm {
      display: block; } }
  main .headline {
    margin-bottom: 120px;
    width: 100%;
    background: url(../../img/pictbear/Header_Background_PictBear_PC.jpg) no-repeat center bottom;
    background-size: cover;
    position: relative; }
    main .headline .bg_gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 400px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 10%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.52) 40%, rgba(255, 255, 255, 0.76) 60%, rgba(255, 255, 255, 0.86) 70%, rgba(255, 255, 255, 0.92) 80%, rgba(255, 255, 255, 0.98) 90%, white 100%); }
    main .headline h1 {
      font-size: 30px;
      text-align: center;
      margin-bottom: 25px;
      color: #fff;
      line-height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
      font-weight: 600;
      letter-spacing: 0.03em; }
    main .headline h1 + p {
      font-size: 16px;
      line-height: 33.6px;
      text-align: center;
      color: #fff;
      margin-bottom: 30px; }
    main .headline .dl {
      width: 296px;
      color: #fff;
      border: 1px solid #fff;
      margin: 0 auto 0px auto;
      position: relative;
      font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
      font-weight: 600; }
      main .headline .dl span {
        padding-left: 26px;
        background: url(../../img/fenrirfs/Icon_Download_White.svg) no-repeat left 11px;
        display: inline-block;
        min-height: 18px;
        line-height: 40px; }
    main .headline .note {
      text-align: center;
      margin-bottom: 0;
      margin-top: 36px;
      font-size: 13px;
      color: #fff; }
      main .headline .note a {
        font-size: 13px;
        color: #fff;
        text-decoration: underline;
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 300;
        letter-spacing: 0.1em; }
    main .headline .main_img {
      max-width: 960px;
      width: calc(100vw - 12.8vw);
      margin: 0 auto;
      position: relative; }
      main .headline .main_img img {
        width: 100%;
        text-align: center; }
  main .main_feature {
    max-width: 960px;
    width: calc(100vw - 12.8vw);
    margin: 0 auto; }
    main .main_feature h2 {
      font-size: 26px;
      line-height: 1.6em;
      color: #222;
      font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
      font-weight: 600;
      margin-bottom: 60px;
      text-align: center;
      letter-spacing: 0.06em; }
    main .main_feature > ul {
      max-width: 960px;
      width: calc(100vw - 12.8vw);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 180px auto; }
      main .main_feature > ul li {
        max-width: 296px;
        width: calc(((100vw - 12.8vw) - 72px) / 3);
        padding-top: calc(((((100vw - 12.8vw) - 72px) / 3) * 0.675) + 22px);
        position: relative;
        margin-right: 36px;
        text-align: center;
        min-height: 74px;
        font-size: 15px;
        border-radius: 4px;
        line-height: 27px;
        box-shadow: 0px 0px 32px rgba(61, 80, 81, 0.15);
        color: #464849;
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 600;
        cursor: pointer;
        letter-spacing: 0.1em;
        transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 300ms cubic-bezier(0.165, 0.84, 0.44, 1); }
        main .main_feature > ul li:before {
          content: "";
          background-color: #80B0D1;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: absolute;
          max-width: 296px;
          max-height: 200px;
          width: calc(((100vw - 12.8vw) - 72px) / 3);
          height: calc((((100vw - 12.8vw) - 72px) / 3) * 0.675);
          left: 0;
          top: 0;
          border-radius: 4px 4px 0px 0px; }
        main .main_feature > ul li:nth-child(1):before {
          background-image: url(../../img/pictbear/Icon_PictBear_1_PC.svg); }
        main .main_feature > ul li:nth-child(2):before {
          background-image: url(../../img/pictbear/Icon_PictBear_2_PC.svg); }
        main .main_feature > ul li:nth-child(3):before {
          background-image: url(../../img/pictbear/Icon_PictBear_3_PC.svg); }
        main .main_feature > ul li:hover {
          box-shadow: 0px 16px 42px rgba(61, 80, 81, 0.1);
          transform: translate(0, -18px);
          transition-duration: 300ms; }
        main .main_feature > ul li:last-child {
          margin-right: 0; }
    main .main_feature article {
      margin-bottom: 180px; }
      main .main_feature article > div:first-child {
        max-width: 960px;
        width: calc(100vw - 12.8vw);
        display: flex;
        justify-content: center;
        margin-bottom: 44px; }
        main .main_feature article > div:first-child h3 {
          width: 460px;
          margin-right: 40px;
          font-size: 26px;
          color: #222;
          line-height: 1.6em;
          text-align: left;
          font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
          font-weight: 600;
          letter-spacing: 0.06em; }
        main .main_feature article > div:first-child p {
          width: 460px;
          font-size: 15px;
          color: #222;
          line-height: 2.1em;
          letter-spacing: 0.1em;
          text-align: left; }
      main .main_feature article .img {
        max-width: 960px;
        width: calc(100vw - 12.8vw);
        margin: 0 auto 38px auto;
        position: relative; }
        main .main_feature article .img img:first-child {
          width: calc(100% - 2px);
          border: 1px solid #A7AEB1;
          display: block;
          position: absolute;
          top: 0;
          transition: opacity 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
          z-index: 2; }
        main .main_feature article .img img:last-child {
          width: calc(100% - 2px);
          border: 1px solid #A7AEB1;
          display: block;
          position: absolute;
          top: 0;
          display: none;
          z-index: 1; }
      main .main_feature article .list_scroll ul {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        margin: 0 auto 30px auto; }
        main .main_feature article .list_scroll ul li {
          font-size: 15px;
          padding: 0 20px 12px 20px;
          border-bottom: 1px solid #CFD8DC;
          font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
          font-weight: 600;
          cursor: pointer;
          transition: border-bottom 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
          letter-spacing: 0.06em; }
          @media screen and (max-width: 890px) {
            main .main_feature article .list_scroll ul li {
              line-height: 1.4em; } }
          main .main_feature article .list_scroll ul li fd-width.half {
            line-height: 0.5; }
          main .main_feature article .list_scroll ul li p {
            display: none; }
            main .main_feature article .list_scroll ul li p.title {
              display: block;
              color: #CFD8DC;
              text-align: center;
              transition: color 300ms cubic-bezier(0.165, 0.84, 0.44, 1); }
          main .main_feature article .list_scroll ul li.current {
            border-bottom: 1px solid #80B0D1; }
            main .main_feature article .list_scroll ul li.current p.title {
              color: #80B0D1; }
          main .main_feature article .list_scroll ul li:hover p.title {
            color: #80B0D1; }
        main .main_feature article .list_scroll ul li:last-of-type {
          margin-right: 0; }
      main .main_feature article .detail {
        font-size: 15px;
        line-height: 31px;
        color: #222;
        text-align: center;
        line-height: 2.1em;
        letter-spacing: 0.1em;
        position: relative; }
        main .main_feature article .detail span {
          display: block;
          width: 100%;
          transition: opacity 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
          top: 0;
          background-color: #FFFFFF; }
        main .main_feature article .detail span:first-child {
          z-index: 2;
          position: absolute; }
        main .main_feature article .detail span:last-child {
          z-index: 1;
          position: absolute;
          display: none; }
  main .other_feature {
    max-width: 960px;
    width: calc(100vw - 12.8vw);
    margin: 0 auto 120px auto; }
    main .other_feature h2 {
      font-size: 26px;
      line-height: 1.6em;
      color: #222;
      margin-bottom: 60px;
      text-align: center;
      font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
      font-weight: 600;
      letter-spacing: 0.06em; }
    main .other_feature ul {
      width: auto;
      margin: 0 auto; }
      main .other_feature ul li {
        padding-left: 500px;
        position: relative;
        min-height: 260px;
        margin-bottom: 38px; }
        main .other_feature ul li:before {
          content: "";
          position: absolute;
          width: 458px;
          height: 260px;
          background-size: cover;
          left: 0;
          top: 0;
          border: 0.5px solid #A7AEB1; }
        main .other_feature ul li:last-child {
          margin-bottom: 0; }
        main .other_feature ul li h3 {
          font-size: 16px;
          line-height: 100%;
          color: #222;
          margin-bottom: 24px;
          font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
          font-weight: 600;
          letter-spacing: 0.06em; }
        main .other_feature ul li p {
          font-size: 15px;
          color: #222;
          line-height: 2.1em;
          letter-spacing: 0.1em; }
        main .other_feature ul li:nth-child(1):before {
          background-image: url(../../img/pictbear/Others1.jpg); }
        main .other_feature ul li:nth-child(2):before {
          background-image: url(../../img/pictbear/Others2.jpg); }
        main .other_feature ul li:nth-child(3):before {
          background-image: url(../../img/pictbear/Others3.jpg); }
        main .other_feature ul li:nth-child(4):before {
          background-image: url(../../img/pictbear/Others4.jpg); }
        main .other_feature ul li:nth-child(5):before {
          background-image: url(../../img/pictbear/Others5.jpg); }
        main .other_feature ul li:nth-child(6):before {
          background-image: url(../../img/pictbear/Others6.png); }
  main .dl_link {
    width: 100%;
    background-color: #E4E9EB; }
    main .dl_link > div {
      max-width: 960px;
      width: calc(100vw - 12.8vw);
      margin: 0 auto;
      padding-top: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid #A7AEB1; }
      main .dl_link > div:last-child {
        border: none; }
      main .dl_link > div .name {
        font-size: 22px;
        line-height: 100%;
        color: #222;
        text-align: center;
        margin-bottom: 28px;
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 600; }
        main .dl_link > div .name.big {
          font-size: 30px; }
      main .dl_link > div .price {
        font-size: 15px;
        line-height: 100%;
        color: #75797B;
        text-align: center;
        margin-bottom: 15px; }
      main .dl_link > div .os {
        font-size: 15px;
        line-height: 100%;
        color: #75797B;
        text-align: center;
        margin-bottom: 38px;
        letter-spacing: 0.04em; }
      main .dl_link > div .detail {
        font-size: 15px;
        line-height: 31px;
        color: #464849;
        text-align: center;
        margin-bottom: 30px;
        line-height: 2.1em;
        letter-spacing: 0.1em; }
      main .dl_link > div .note {
        margin-bottom: 0;
        margin-top: 30px;
        text-align: center;
        transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }
        main .dl_link > div .note a {
          font-size: 13px;
          color: #222;
          text-decoration: underline;
          transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }
          main .dl_link > div .note a:hover {
            transition-duration: 300ms; }
      main .dl_link > div .link {
        width: 290px;
        color: #222;
        border: 1px solid #222;
        margin: 0 auto 0px auto;
        position: relative; }
        main .dl_link > div .link span {
          padding-left: 26px;
          background: url(../../img/fenrirfs/Icon_Download_Black.svg) no-repeat left 11px;
          display: inline-block;
          min-height: 18px;
          line-height: 40px; }
  main.note h1 {
    font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 44px;
    color: #222;
    text-align: center;
    margin: 80px 0 80px 0; }
  main.note section article {
    width: 960px;
    margin: 0 auto 80px auto;
    display: flex;
    justify-content: center; }
    main.note section article h2 {
      width: 296px;
      font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
      font-weight: 600;
      font-size: 22px;
      color: #222; }
      main.note section article h2 span {
        font-family: -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, Hiragino Sans, Yu Gothic Medium, Yu Gothic, sans-serif;
        font-weight: 500;
        letter-spacing: 0.03em;
        font-size: 14px;
        margin-top: 8px;
        color: #A7AEB1;
        display: block; }
    main.note section article ul {
      width: 614px; }
      main.note section article ul li {
        font-size: 15px;
        color: #222;
        position: relative;
        line-height: 2.1em;
        margin-bottom: 1em;
        padding-left: 1em;
        letter-spacing: 0.06em; }
        main.note section article ul li:last-child {
          margin-bottom: 0px; }
        main.note section article ul li:before {
          content: "・";
          position: absolute;
          left: 0; }
    main.note section article:last-child {
      margin-bottom: 120px; }