@charset "utf-8";

/*Smooth scroll*/
html {
  scroll-behavior: smooth;
}

/*変数*/
:root {
  --f1: 2.441em;
  --f2: 1.953em;
  --f3: 1.563em;
  --f4: 1.25em;
  --f5: 1em;
  --f6: 0.8em;

  --basecolor: #3e4759;
  --maincolor: #f2f2f2;
  --accentcolor: #65728c;
  --gradient: linear-gradient(78.1deg, rgba(38, 1, 1, 1) 10%, rgba(242, 27, 27, 1) 82.6%);

  --myfont: 'Comfortaa', cursive, 'myfontjp', sans-serif;
  --vanfont: 'myfontjp2', sans-serif;
  --nipponfont: 'Tinos', serif;

  --myw: 720px;
}

/*SubsetFont*/
@font-face {
  font-family: 'nakamotofont';
  src: url('../fonts/Noto Serif JP.woff') format('woff');
}

@font-face {
  font-family: 'myfontjp';
  src: url('../fonts/M_PLUS_Rounded_1c-Light.woff') format('woff');
}

@font-face {
  font-family: 'myfontjp2';
  src: url('../fonts/M_PLUS_Rounded_1c-Bold.woff') format('woff');
}

body {
  font-family: var(--myfont);
}

p {
  line-height: 1.8;
  font-size: var(--f5);
}

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);
}

h6 {
  font-size: var(--f6);
}


/*共通設定*/
body {
  box-sizing: border-box;
}

body *,
body *::before,
body *::after {
  box-sizing: inherit;
}

body * p,
body * h1,
body * h2,
body * h3,
body * h4,
body * h5,
body * h6 {
  color: var(--basecolor);
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/*ローディング画面の背景*/
.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999999;
}

/*アニメーション*/
.animation {
  position: absolute;
  width: 12.5%;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: loadinganimation 1500ms ease-out forwards infinite;
  animation: loadinganimation 1500ms ease-out forwards infinite;
}
@keyframes loadinganimation {
  from,to {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
}

/*画像レスポンシブ化*/
img,
video {
  max-width: 100%;
  height: auto;
}

/*ページ全体の背景色*/
body {
/*  background-color: var(--maincolor);*/
}

/*横幅*/
body {
  margin: 0;
}

.wrap,
.container {
  position: relative;
  width: 100%;
}

.container {
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
}

.content {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}

/*リンク*/
a {
  color: inherit;
  text-decoration: none;
}

.myhead a:hover,
.content-sidebar a:hover,
.navsp a:hover,
.contact a:hover,
.back a:hover,
a.website:hover {
  opacity: 0.7;
}

.content-sidebar nav ul li a::after {
  border-bottom: solid 1px var(--accentcolor);
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  width: 0;
}

.content-sidebar nav ul li a:hover::after {
  width: 100%;
}

/*ヘッダー*/
.myhead {
  padding-bottom: 10px;
}

.myhead div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.myhead div img {
  width: 200px;
}

.myhead .langage ul {
  display: flex;
}

.myhead .langage li {
  font-size: var(--f4);
  font-family: var(--myfont);
  color: var(--basecolor);
}

/*サイドバー*/
.content-sidebar {
  width: 18%;
  margin-right: 2%;
}

.content-sidebar ul li {
  font-size: var(--f6);
}

nav {
  float: left;
  max-width: 100%;
  width: 100%;
}

ul {
  margin: 0px;
  padding: 0px;
}

ul li {
  list-style-type: none;
  margin: 0 0 20px 0;
  padding-left: 0;
  overflow: hidden;
}

.contact {
  padding-top: 10px;
}

.contact img {
  width: 20px;
}

.contact a:not(:last-child) {
  margin-right: 20px;
}

.menu-title {
  font-weight: 700;
  padding-bottom: 20px;
}

.menu-title-2 {
  font-weight: 700;
  padding: 20px 0;
}

.menu-title-3 {
  font-weight: 700;
}

.menu-title {
  border-bottom: 1px solid var(--basecolor);
}

.menu-title-2 {
  border-bottom: 1px solid var(--basecolor);
  border-top: 1px solid var(--basecolor);
}

nav ul li.current a {
  color: var(--accentcolor);
}

nav ul li.current a:before {
  content: "❖";
  /*  border-left: 2px solid var(--accentcolor);*/
  margin-right: .5em;
}

/*作品一覧*/
main {
  width: 80%;
}

.content-sidebar,
main {
  float: left;
}

.covers {
  display: flex;
  flex-wrap: wrap;
}

.a-cover {
  display: block;
  position: relative;
  width: 49.5%;
  margin-right: 1%;
  margin-bottom: 1%;
}

.a-cover:nth-child(2n) {
  margin-right: 0px;
}

.a-cover:nth-child(2n-1) {
  clear: left;
  margin-left: 0px;
}

/*ホバー時タイトル表示*/
figure {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: table;
  /*  border-radius: 10px;*/
}

figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: table-caption;
  background: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  opacity: 0;
}

figure img {
  display: block;
}

figcaption h3 {
  font-size: var(--f2);
  color: var(--maincolor);
  text-align: center;
  margin-top: 25%;
}

figcaption p {
  font-size: var(--f6);
  color: var(--maincolor);
  text-align: center;
}

figure:hover figcaption {
  opacity: 1;
}

/*Back to Top*/
.back {
  clear: both;
  display: block;
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}

/*footer*/
footer p {
  padding: 30px 0px;
  text-align: center;
  color: #88898c;
}

/*下層ページ*/
.page .covers {
  display: block;
}

.page .a-cover {
  width: 100%;
  margin-bottom: 1.5%;
}

.overview {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.overview h2 {
  margin-top: 0;
}

.overview.profile img {
  max-width: 350px;
}

.about .overview p,
.about .overview h3,
.about .overview ul {
  text-align: left;
}

.about .overview h3 {
  font-size: var(--f4);
}

.about .overview ul li {
  color: var(--basecolor);
}

.about .overview ul time {
  margin-right: 1em;
}

.about .overview.job li:last-child {
  margin-left: 6em;
}

.skills {
  display: flex;
  flex-wrap: wrap;
}

.a-skill {
  display: block;
  position: relative;
  width: 8.7%;
  height: 8.7%;
  margin-right: 8.7%;
  margin-bottom: 2.9%;
}

.a-skill:nth-child(6n) {
  margin-right: 0px;
}

.a-skill:nth-child(6n+1) {
  clear: left;
  margin-left: 0px;
}

.overview-2 {
  max-width: 700px;
  margin: 1.953em auto;
  text-align: center;
}

.overview-3 {
  max-width: 700px;
  margin: 1.953em auto;
  text-align: left;
  line-height: 1.8;
  color: var(--basecolor);
  font-weight: 700;
  list-style: none;
}

.bar {
  display:block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px dashed var(--basecolor);
}

.firstview {
  margin-bottom: 1.953em;
  margin-top: 0;
}

.banner {
  margin-right: 1.953em;
  text-align: center;
}

.banner-2 {
  margin-left: 1.953em;
  text-align: center;
}

.graphic span {
  font-weight: 700;
}

.persona img {
  width: 38%;
  height: auto;
}

.persona {
  margin: 1.953em auto;
}

dl {
  line-height: 1.8;
  color: var(--basecolor);
}

.persona dt {
  font-size: var(--f4);
  font-weight: 700;
}

.persona dd,
.words dd {
  margin-left: 0;
}

.contents h3 {
  font-size: var(--f4);
  text-align: center;
  margin: 1.953em auto;
}

.words div {
  width: 30%;
}

.words dd {
  text-align: center;
}

/*nakamoto&van&nippon*/

.circle-1-nakamoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0d0d0d;
}

.circle-2-nakamoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #d8d9d7;
}

.circle-3-nakamoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
}

.circle-4-nakamoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #092143;
}

.circle-5-nakamoto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f7edd1;
}

.circle-1-van {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6C757D;
}

.circle-2-van {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #F4623A;
}

.circle-3-van {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #000;
}

.circle-4-van {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #212529;
}

.circle-5-van {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #F8F9FA;
  border: 1px solid #000;
}

.circle-1-nippon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #a6a6a6;
}

.circle-2-nippon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #595050;
}

.circle-3-nippon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f2f2f2;
  border: 1px solid #000;
}

.circle-4-nippon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #47594C;
}

.circle-5-nippon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
}

.circle-1-momo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8bdcf;
}

.circle-2-momo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
}

.circle-3-momo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #b8db9b;
}

.circle-1-ipcafe {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #d2662b;
}

.circle-2-ipcafe {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f2f2f0;
  border: 1px solid #000;
}

.circle-3-ipcafe {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #040000;
}

.color {
  width: 12.5%;
}

.color p {
  text-align: center;
  margin: 1em auto;
  font-size: var(--f6);
}

.font-nakamoto {
  font-family: 'nakamotofont', serif;
  font-size: var(--f3);
  font-weight: 700;
}

.font-van {
  font-family: var(--vanfont);
  font-size: var(--f3);
  font-weight: 700;
}

.font-nippon {
  font-family: 'nakamotofont', serif;
  font-size: var(--f3);
  font-weight: 700;
}

.font-nippon-2 {
  font-family: var(--nipponfont);
  font-size: var(--f2);
  font-weight: 700;
}

a.website::before {
  content: url(../img/websiteicon.svg);
  display: inline-block;
  width: 16px;
  height: auto
  background-size: contain;
  vertical-align: middle;
  margin-right: .5em;
}

a.website {
  color: var(--basecolor);
}

.nakamoto .ideas img {
  width: 12.5%;
}

.nakamoto .ideas-2 img {
  width: 25%;
}

.vanlifer .ideas img {
  width: 25%;
}

.nipponism .ideas img {
  width: 25%;
}

.graphic .ideas img {
  width: 30%;
}

.graphic .ideas-2 img {
  width: 45%;
}

.vanlifer .ideas img:first-child {
  border: 1px solid #0d0d0d;
}

.item3 {
  display: none;
}

.item2 {
  display: block;
}

/*関連記事*/
.page .related {
  display: flex;
  flex-wrap: wrap;
}

.b-cover {
  display: block;
  position: relative;
  width: 23.5%;
  margin-right: 2%;
}

.b-cover:last-child {
  margin-right: 0px;
}

.b-cover:first-child {
  clear: left;
  margin-left: 0px;
}

.b-cover figcaption h3 {
  font-size: var(--f3);
  margin-top: 23%;
  margin-bottom: 0;
  padding-left: 4%;
  padding-right: 4%;
}

/*  ------ハンバーガーメニュー------*/
button.ham {
  display: none;
}

.navsp {
  display: none;
}

/*ズーム*/
.zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.zoomimg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 200%;
  height: auto;
  border: none;
}

.zoomicon {
  width:50px;
  height:50px;
  position:absolute;
  top:0;
  right:0;
  background:url(../img/zoomicon.svg);
}

.zoom img {
  display: block;
  cursor: zoom-in;
}

/*  ------メディアクエリ------*/
@media (max-width: 768px) {

  main {
    width: 100%;
  }

  .content-sidebar {
    display: none;
  }

  .navsp {
    display: block;
    position: fixed;
    width: 100%;
    right: -100%;
    height: 100vh;
    background-color: rgba(242, 242, 242, .9);
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    z-index: 888;
    overflow: auto;
    text-align: center;
    padding: 60px 0;
  }

  .navsp .contact img {
    width: 20px;
  }

  .navsp .contact {
    justify-content: center;
  }

  .navsp.open {
    right: 0%;
  }

  button.ham {
    font-size: 42px;
    color: var(--basecolor);
    display: block;
    background-color: transparent;
    cursor: pointer;
    border: none;
    z-index: 999;
    outline: none;
    padding-right: 0;
  }

  .langage ul li {
    display: none;
  }

  html.is-fixed,
  html.is-fixed body {
    height: 100%;
    overflow: hidden;
  }

  .navsp ul li {
    font-size: var(--f5);
    line-height: 2.441em;
  }

  .navsp .contact {
    margin-bottom: 60px;
  }
  
  .zoom img {
    cursor: auto;
  }
  
  .zoomicon {
    display: none;
  }

}

@media (max-width: 540px) {

  p,
  li {
    font-size: var(--f6);
  }

  .covers {
    display: block;
  }

  .a-cover {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2%;
  }

  .a-skill {
    width: 20%;
    height: 20%;
    margin-right: 20%;
    margin-bottom: 6.7%;
  }

  .a-skill:nth-child(3n) {
    margin-right: 0px;
  }

  .a-skill:nth-child(3n+1) {
    clear: left;
    margin-left: 0px;
  }

  .profile img {
    width: 80%;
    height: auto;
  }

  figcaption p {
    padding-left: 4%;
    padding-right: 4%;
  }

  figcaption h3 {
    font-size: var(--f3);
    margin-top: 23%;
  }
  
  .words dd,
  .persona dd {
    font-size: var(--f6);
  }

  .flex.persona {
    display: block;
    text-align: center;
  }
  
  .persona img {
    width: 74%;
  }
  
  .bg {
    margin-bottom: 0;
  }
  
  .b-cover {
    display: block;
    position: relative;
    width: 49.5%;
    margin-right: 1%;
    margin-bottom: 1%;
  }

  .b-cover:nth-child(2n) {
    margin-right: 0px;
  }

  .b-cover:nth-child(2n-1) {
    clear: left;
    margin-left: 0px;
  }
  
  .banners {
    display: block;
  }
  
  .item2 {
    display: none;
  }
  
  .item3 {
    display: block;
  }
  
}