@charset "UTF-8";
* {
  box-sizing: border-box; }

.opaque {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: #d2d6f1; }

.lt-ie9 .opaque {
  display: none; }

#video-area {
  position: fixed;
  background-attachment: fixed;
  z-index: -2;
  /*最背面に設定*/
  overflow: hidden;
  top: 0;
  z-index: 0;
  width: 100%;
  -webkit-background-size: 250%;
  -moz-background-size: 250%;
  -o-background-size: 250%;
  background-size: 250%;
  -webkit-box-shadow: 0 -50px 20px -20px #232323 inset;
  -moz-box-shadow: 0 -50px 20px -20px #232323 inset;
  box-shadow: 0 -50px 20px -20px #232323 inset; }
  #video-area 　　　#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -2;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vw;
    /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vh;
    /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%; }

.content {
  position: relative;
  z-index: 1;
  padding-top: 45%;
  width: 90%;
  margin: 0 auto; }

@media only screen and (min-width: 36.25em) {
  .content {
    width: 60%;
    padding-top: 35%; } }
#top {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: none; }
  #top p {
    margin: 20px 0;
    font-family: "canto-pen",serif;
    font-size: 4.0rem; }
    @media screen and (max-width: 800px) {
      #top p {
        font-size: 2.8rem;
        margin: 10px 0; } }
  #top .top__rogo {
    position: absolute;
    width: 100%;
    max-width: 1440px;
    top: 50%;
    left: 68%;
    transform: translateY(-50%) translateX(-50%); }
    #top .top__rogo img {
      width: 70%; }
  #top .top__scroll {
    position: absolute;
    left: 50%;
    bottom: 60px;
    height: 50px;
    /*全体の高さ*/ }
    #top .top__scroll span {
      /*描画位置*/
      position: absolute;
      left: -15px;
      top: -15px;
      /*テキストの形状*/
      color: #333;
      text-shadow: 1px 2px 3px #808080;
      font-size: 1.2rem;
      letter-spacing: 0.05em; }
    #top .top__scroll:after {
      content: "";
      /*描画位置*/
      position: absolute;
      top: 0;
      /*線の形状*/
      width: 1px;
      height: 30px;
      background: #333;
      text-shadow: 1px 2px 3px #808080;
      /*線の動き1.4秒かけて動く。永遠にループ*/
      animation: pathmove 1.4s ease-in-out infinite;
      opacity: 0; }
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0; }
  30% {
    height: 30px;
    opacity: 1; }
  100% {
    height: 0;
    top: 50px;
    opacity: 0; } }
  @media screen and (max-width: 1050px) {
    #top .top__rogo {
      top: 50%;
      left: 65%; } }

/*about*/
#top-about {
  background: none; }
  #top-about .top-about_contents {
    display: flex;
    align-items: center;
    justify-content: space-evenly; }
    #top-about .top-about_contents .top-about_right {
      position: relative; }
      #top-about .top-about_contents .top-about_right .top-about_me-photo {
        top: 10%;
        right: 10%;
        width: 450px;
        object-fit: cover; }
      #top-about .top-about_contents .top-about_right .ine {
        position: absolute;
        width: 24vw;
        max-width: 600px; }
      #top-about .top-about_contents .top-about_right .ine01 {
        bottom: -50%;
        left: 37%; }
      #top-about .top-about_contents .top-about_right .ine02 {
        top: -5%;
        right: 42%; }
    #top-about .top-about_contents .top-about_name {
      font-size: 8.0rem;
      margin-bottom: 40px;
      font-family: "a-otf-ryumin-pr6n",serif; }
      @media screen and (max-width: 800px) {
        #top-about .top-about_contents .top-about_name {
          font-size: 6.0rem; } }
    #top-about .top-about_contents .komachi {
      margin-right: 60px; }
    #top-about .top-about_contents rt {
      font-size: 1.4rem;
      translate: 0 -.8em;
      margin-bottom: 10px; }
@-moz-document url-prefix() {
  #top-about .top-about_contents rt {
    position: relative;
    top: -.8em; } }
  #top-about .top-about_discription {
    font-size: 1.6rem;
    margin: 0 auto;
    width: 45vw;
    text-align: left;
    display: inline-block;
    padding-right: 20px; }
    @media screen and (max-width: 800px) {
      #top-about .top-about_discription {
        font-size: 1.4rem; } }
    #top-about .top-about_discription .top-about_sns-link_wrapper {
      display: block;
      text-align: right; }
      #top-about .top-about_discription .top-about_sns-link_wrapper .top-about_sns {
        margin-top: 40px; }
        #top-about .top-about_discription .top-about_sns-link_wrapper .top-about_sns img {
          width: 30px; }
      #top-about .top-about_discription .top-about_sns-link_wrapper .top-about_andmore {
        text-decoration: none;
        font-family: "canto-pen",serif;
        font-size: 1.4rem;
        padding: 2px 18px;
        border-radius: 30px;
        border: solid 1px #333; }
        #top-about .top-about_discription .top-about_sns-link_wrapper .top-about_andmore:hover {
          background: #333;
          color: #fff; }
  @media screen and (max-width: 1050px) {
    #top-about {
      height: auto; }
      #top-about .top-about_contents {
        flex-direction: column-reverse; }
        #top-about .top-about_contents .top-about_right {
          text-align: center; }
          #top-about .top-about_contents .top-about_right .top-about_me-photo {
            width: 60%;
            object-position: 0% 30%; }
          #top-about .top-about_contents .top-about_right .ine01 {
            bottom: -50%;
            left: -16%; }
          #top-about .top-about_contents .top-about_right .ine02 {
            top: -18%;
            right: -6%; } }
      @media screen and (max-width: 1050px) and (max-width: 600px) {
        #top-about .top-about_contents .top-about_right .ine01 {
          bottom: -75%;
          left: -34%; }
        #top-about .top-about_contents .top-about_right .ine02 {
          top: -20%;
          right: -17%; } }
      @media screen and (max-width: 1050px) and (max-width: 600px) {
        #top-about .top-about_contents .top-about_right .ine01 {
          bottom: -75%;
          left: -55%; }
        #top-about .top-about_contents .top-about_right .ine02 {
          top: -20%;
          right: -7%; } }
  @media screen and (max-width: 1050px) {
        #top-about .top-about_contents .top-about_left {
          margin-top: 40px; }
          #top-about .top-about_contents .top-about_left .top-about_name {
            text-align: center;
            margin-bottom: 20px; }
          #top-about .top-about_contents .top-about_left .top-about_discription {
            width: 100%; } }

/*skills*/
#skill {
  background: #FFFBF2; }
  @media (max-width: 1300px) {
    #skill {
      height: 100%; } }
  @media screen and (max-width: 1050px) {
    #skill {
      height: auto;
      padding-bottom: 70px; } }
  #skill .title-skill {
    margin-bottom: 20px; }
  #skill .skills__content-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    position: relative;
    z-index: 3; }
    @media screen and (max-width: 1050px) {
      #skill .skills__content-wrapper {
        display: block; } }
    #skill .skills__content-wrapper .skills__content {
      height: 70vh;
      padding: 40px;
      flex-basis: 50%;
      background: no-repeat url("../assets/img/skill_bg.jpg");
      border-radius: 60px;
      filter: drop-shadow(10px 10px 20px rgba(3, 3, 3, 0.1)); }
      #skill .skills__content-wrapper .skills__content:first-child {
        margin-right: 40px; }
      @media (max-width: 1300px) {
        #skill .skills__content-wrapper .skills__content {
          height: 700px; } }
      @media screen and (max-width: 1050px) {
        #skill .skills__content-wrapper .skills__content {
          height: 100%; }
          #skill .skills__content-wrapper .skills__content:first-child {
            margin-right: 0;
            margin-bottom: 40px; } }
      @media screen and (max-width: 600px) {
        #skill .skills__content-wrapper .skills__content {
          padding: 40px 30px; } }
    #skill .skills__content-wrapper .content_item .item-name {
      font-family: "a-otf-ryumin-pr6n",serif;
      font-size: 4.0rem;
      margin-bottom: 20px; }
      @media screen and (max-width: 800px) {
        #skill .skills__content-wrapper .content_item .item-name {
          margin-bottom: 10px;
          font-size: 3.2rem; } }
    #skill .skills__content-wrapper .content_item p {
      font-size: 1.4rem; }
      #skill .skills__content-wrapper .content_item p span {
        padding-left: 10px;
        color: #8F8E8E; }
        @media screen and (max-width: 700px) {
          #skill .skills__content-wrapper .content_item p span {
            padding: 0;
            display: block; } }
      @media screen and (max-width: 800px) {
        #skill .skills__content-wrapper .content_item p {
          font-size: 1.2rem; } }
    #skill .skills__content-wrapper .content_discription {
      margin-top: 40px; }
      @media screen and (max-width: 800px) {
        #skill .skills__content-wrapper .content_discription {
          font-size: 1.4rem;
          margin-top: 20px; } }

/*work*/
#works {
  background: #FFFBF2;
  height: 100%; }
  #works .works-list .works__contents-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 3; }
    #works .works-list .works__contents-wrapper .works-item {
      text-decoration: none;
      margin-bottom: 70px; }
      #works .works-list .works__contents-wrapper .works-item img {
        width: 340px; }
        @media screen and (max-width: 800px) {
          #works .works-list .works__contents-wrapper .works-item img {
            width: 100%; } }
      #works .works-list .works__contents-wrapper .works-item .item-deta {
        display: block; }
        #works .works-list .works__contents-wrapper .works-item .item-deta span {
          color: #333; }
        #works .works-list .works__contents-wrapper .works-item .item-deta p {
          font-size: 1.2rem;
          color: #8C8C8C; }
        @media screen and (max-width: 800px) {
          #works .works-list .works__contents-wrapper .works-item .item-deta {
            font-size: 1.4rem; }
            #works .works-list .works__contents-wrapper .works-item .item-deta p {
              font-size: 1.0rem;
              color: #8C8C8C; } }