@charset "utf-8";

/* 全体のスタイル */
* {
  box-sizing: border-box;
}

/* フォント設定 */
:root {
  --f1: 2.68em;  /* 43px */
  --f2: 2.25em;  /* 36px */
  --f3: 1.5em;   /* 24px */
  --f4: 1em;     /* 16px */
  --f5: 0.875em; /* 14px */
}
h1 {
  font-size: var(--f1);
}
h2 {
  font-size: var(--f2);
}
h3 {
  font-size: var(--f3);
}
h4 {
  font-size: var(--f4);
}
h5 {
  font-size: var(--f5);
}

body {
  font-family: Helvetica, '游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  background-color: #FFFFFF;
  -webkit-text-size-adjust: 100%;
}

h2 {
  font-weight: 100;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  opacity: 0.7;
}

/* リンクのアンダーライン */
.ul {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.ul::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.ul:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
/* リンクのアンダーラインここまで */

/* img {
  max-width: 100vw;
  height: auto;
  vertical-align: bottom;
} */

ul {
  padding: 0;
  list-style: none;
}

section , article {
  max-width: 1920px;
  margin: 0 auto;
}

@media screen and (min-width:768px) {
   body {
    font-size: 16px;
     margin: 0 auto;
  }

   .inner-area , .about-area, .sv-area , #info {
     max-width: 960px;
     margin: 0 auto;
     background-color: #FFFFFF;
   }
  }

@media screen and (min-width:980px) {
  body {
    font-size: 16px;
     margin-right: auto;
     margin-left : auto;
  }
}

@media screen and (min-width:768px) and (max-width:1180px) {
  body {
    margin-right: auto;
    margin-left : auto;}
}

.top {
  max-width: 1920px;
  /* margin: auto; */
}

.sp-only {
    display: block;
  }
.pc-only {
    display: none;
  }

@media screen and (min-width:768)  {
  .sp-only {
     display: none;
    }
  .pc-only {
    display: block;
  }
}

/* ここまで全体のスタイル */

.inner {
  padding: 0 25px;
  margin:0 auto;
}

.header-logo {
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px

}

@media screen and (min-width:768px) {

  /* .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .header-logo-area {
    flex: 1;
  }
  .header-txt-area {
    flex: 1;
  } */

  .header-logo {
  width: 200px;
  margin: 0 auto 0 0;
  margin-top: 30px;
  }

  #nav {
  margin: 60px 0;
  background-color: #EEEEEE;
}
}

.nav-area {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gnav-menu {
  width: 400px;
  margin: 30px auto;
  text-align: center;
}
.gnav-menu {
  display:-ms-grid;
  display: grid;
  -ms-grid-columns: 100px 100px 100px 100px ;
  grid-template-columns: 100px 100px 100px 100px ;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px;
  grid-gap: 0px;
}

@media screen and (max-width: 400px) {
  .gnav-menu{
    width: 300px;
    -ms-grid-columns: 150px 150px ;
    grid-template-columns: 150px 150px;
    -ms-grid-rows: 50px 50px;
    grid-template-rows: 50px 50px;
    grid-gap: 10px;
  }
  .gnav-item {
  border:2px #333 solid;
  background-color: #EEEEEE;
}
}

@media screen and (min-width:768px) {
.gnav-menu {
    margin: 0 0 0 auto;
  }

 .worksicon1 {
   width: 700px;
   height: auto;
 }
}

.gnav-item {
    position: relative
  }
.gnav-item  a {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

 .worksicon1 img {
   width: 100%;
   height: auto;
   margin:0 auto;
 }

 .workstitle {
   margin: 40px 0;
   text-align: center;
 }

 .workslink {
   margin-top: 10px;
   font-weight: bold;
 }

 .works_items {
   margin-top: 10px;
 }
 .works_text {
   margin-top: 10px;
 }

 .next {
   text-align: right;
   margin: 30px 0;
 }

 .walk_next {
  margin: 40px 0;
  display: flex;
  justify-content: space-between;
}
.pre_text {}
.next_text {}

.link_icon img {
  width: 15px;
  height: auto;
  vertical-align: middle;
  margin-left: 10px;
}

 @media screen and (min-width:768px) {
   .workstitle h2 {
   text-align: left;
   margin-top: 30px;
   margin-bottom: 30px;
   margin-left: 20px;
 }
 .workslink {
   margin-top: 20px;
 }
 .works_items {
   margin-top: 30px;
 }
 .works_text {
   margin-top: 20px;
 }
 .git_icon {
   margin-top: 7px;
 }


 /* .poster_works_content {
   display: flex;
   flex-direction: row;
 }
 .works1 {
   flex-basis: 50%;
 }
 .works2 {
   flex-basis: 50%;
 } */




.next {
  margin: 50px 0;
}
.walk_next_text {
  margin: 0 auto 0 0 ;
}

.walk_next {
  margin: 60px 0;
}

#footer {
  margin-top: 50px;
}
}

 .footer-nav-area {
   margin-top: 60px;
 }
 .id {
   text-align: right;
   margin-top: 20px;
 }