@charset "UTF-8";

body {
    /* font-size: 2rem; */
    font-family: 'Lato', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    grid-template:
        "header header header" 80px
        "...... ...... ...... " 2em
        "...... center ...... " 1fr
        /* "...... ...... ...... " 2em */
        "footer footer footer " 80px
        / 15vw 1fr 15vw ;
        /* grid-gap: 10px; */
}
h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, img, form {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1.6;
    border: none;
    list-style-type: none;
}


header {
    grid-area: header;
    width:100%;
    /* float: left; */
    padding: 25px 0;
    position: inherit;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

#nav{
  padding-left: 1vw;
  padding-right: 1vw;
  display: grid;
  grid-template:
    "... ... ... ... ..." auto
    "menu ... logo ... social" 50px
    "... ... ... ... ..." auto
    / 450px auto 1fr auto 450px;
}

#nav ul{
  width: auto;
  overflow:hidden;
　list-style:none;
　margin: 0;
　z-index: 2;
  /* float: left; */

  display: block;

}
#nav a:hover{
  font-style: italic;
  /* font-weight: bold; */
}
#nav ul li{
  display: inline-block;
}

#nav ul a{
  font-size: 24px;
}
.menu{
  grid-area: menu;
  text-align: left;
}
.menu a{
  margin: 0;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  /* font-size: 100%; */
  line-height: 1.6;
}
.logo{
  grid-area: logo;
  text-align:center;
  align-items: center;
  padding-left: auto;
  padding-right: auto;
}
.logo a{
  margin: 0;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  /* font-size: 100%; */
  line-height: 1.6;
}

.social{
  grid-area: social;
  text-align: right;
  float:right;
}
.social ul{
  float: right;
  margin: 0 20px 0 20px;
}
.social ul li a{
  float: right;
  padding-left: 5px;
  padding-right: 5px;
}
.social ul li a img{
  width: 22px;
  height: auto;
}

/* header */

/* main--------------------------------------------- */
main {
  display: block;
    grid-area: center;
    width: 100%;
    /* max-width: 1600px; */
    margin-left: auto;
    margin-right: auto;
    /* border-bottom: 1px solid #202225; */
    /* padding-bottom: 2em; */
}

.wrapper_top{
  display: block;
}
.wrapper{
  display: block;
  position: relative;
  /* width: 70%; */
  margin: 1em 2.5em 3em 2.5em;
}

.container{
  display:block;
  /* height: 60em; */
  margin-bottom: 0px;
  margin-left: auto;
  margin-left: auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align:center;
  flex-wrap: nowrap;
  z-index: 1
  /* align-content: flex-start; */
}

.container h1{
  font-size: 40px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
  z-index: 2
}

.image img {
  /* margin: 1em 0 1em 0; */
  display: block;
  width: 100%;
  /* height: 600px; */
  align-items: center;
}

/* main */

/* gallary */
.img_wrap{
  /* border: 1px solid #ddd; */
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  filter: grayscale(0);
  transition-duration: 0.5s;
}
/* gallary */

h1{
  display: block;
  font-size: 36px;
  font-weight: bold;
  color: #202225;
  margin-block-start:  0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

h2{
  display: block;
  font-size: 28px;
  font-weight: bold;
  color: #202225;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

h3{
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #202225;
  margin-block-start: 1em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

p{
  display: block;
  font-size: 18px;
  font-weight: 300;
  color: gray;
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-left: 5px;
  padding-right: 5px;
}

strong{
  font-weight: 500;
  color: #736C73;
}
/* 作品ページ */
.caption{
  display: grid;
  /* height: 10em; */
  margin: 0;
  grid-template:
    "title ... day .... ....  " 55px
    "... ... ... ... ..."2px
    "ach ach ach ach ... " auto
    "Genre Genre Genre Genre ... " 20px
    "Tools Tools Tools Tools ... " 20px
    "... ... ... ... ..." 10px
    / auto 5px 1fr auto auto;
  /* grid-template:
    "title day .... ....  " 55px
    "Genre Genre Tools Tools " 20px
    "... ... ... ... " 10px
    / auto 1fr 50% auto; */
  /* grid-template:
    "... ... ... ... ... " 10px
    "title ... day ... ...  " 10px
    "title ... day Genre Genre  " 25px
    "title ... day Tools Tools " 25px
    "... ... ... ... ... " 10px
    / auto 10px 110px 1fr auto; */
    grid-gap: 5px;
}

.caption h1{
  display: block;
  grid-area: title;
  font-style: italic;
  font-size: 45px;
  font-weight: bold;
  color: #202225;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

.caption2 h1{
  display: block;
  grid-area: title;
  font-style: italic;
  font-size: 45px;
  font-weight: bold;
  color: #202225;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

.caption h2{
  display: block;
  grid-area: Genre;
  font-style: normal;
  font-size: 18px;
  font-weight: 300;
  color: gray;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}
.caption h3{
  display: block;
  grid-area: Tools;
  font-style: normal;
  font-size: 18px;
  font-weight: 300;
  color: gray;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}
.caption h4{
  display: block;
  grid-area: ach;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  color: #736C73;
  margin-block-start: 2px;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: none;
}

.caption p{
  grid-area: day;
  font-size: 16px;
  font-style: italic;
  font-weight:  normal;
  color: #202225;
  display: block;
  margin: 2.3em 0 0 0;
  /* margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
}

.photo{
  display:block;
  /* height: 60em; */
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align:center;
  flex-wrap: nowrap;
  z-index: 1
  /* align-content: flex-start; */
}
.spacer{
  /* width: 5%; */
  align-items: center;
  display: block;
  /* margin-top: 50px;
  margin-bottom: 50px; */
  margin-top: 3.5em;
  margin-bottom: 3.5em;
  /* border: 0.5px solid gray; */
}
.border{
  width: 20%;
  border: 0.5px solid gray;
  margin-left:  auto;
  margin-right: auto;
}

.outline{
  outline: gray dashed 2px;
}

.text{
  display: block;
  color: #202225;
  margin-top: 1.5em;
  margin-bottom: 1em;
  /* padding-left: 10px;
  padding-right: 10px; */
}
.text ul{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
}
.text ul li{
  list-style: disc;
  list-style-position: inside;
  color: gray;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.text ul li a{
  font-size: 18px;
  color: gray;
  text-decoration: underline;
}
.text p a{
  color: #736C73;
  font-weight: 500;
  font-style: italic;
  text-decoration: underline;
}

.career h3 a{
  text-decoration: underline;
}
.award ul li{
  font-size: 18px;
  color: #736C73;
  list-style: disc;
  list-style-position: inside;
  margin-top: 1em;
  margin-bottom: 1em;
}
.award ul li a{
  font-size: 18px;
  font-weight: bold;
  color: #736C73;
  text-decoration: underline;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

a{
  text-decoration: none;
}
a:link{
  color: #202225;
  text-decoration: none;
}
a:visited{
  color: #202225;
  text-decoration: none;
}

.skill{
  display: grid;
  grid-template:
    " ..... b0 ..... b1 ..... b2 ...." auto
    / 10px 1fr 30px 1fr 30px 1fr 10px ;
    /* grid-gap: 10px; */
}

.skill_bl_0{
  grid-area: b0;
  display: grid;
  grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 30px
    " icon ... bar_box ... " 30px
    " ... ... ... ... " 10px
    / 60px 10px 1fr auto ;
    /* grid-gap: 10px; */
}
.skill_bl_1{
  grid-area: b1;
  display: grid;
  grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 30px
    " icon ... bar_box ... " 30px
    " ... ... ... ... " 10px
    / 60px 10px 1fr auto ;
    /* grid-gap: 10px; */
}
.skill_bl_2{
  grid-area: b2;
  display: grid;
  grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 30px
    " icon ... bar_box ... " 30px
    " ... ... ... ... " 10px
    / 60px 10px 1fr auto ;
    /* grid-gap: 10px; */
}

.icon{
  grid-area: icon;
  /* background-color: gray; */
}
.tool{
  grid-area: tool;
  text-align: left;
  /* background-color: gray; */
}
.skill p{
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #202225;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  /* background-color: gray; */
}
.per{
  grid-area: tool;
  text-align: right;
}
.bar_box{
  grid-area: bar_box;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  /* outline-color: #595959; */
}
.bar{
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_10{
  width: 10%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_20{
  width: 20%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_30{
  width: 30%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_40{
  width: 40%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_50{
  width: 50%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_60{
  width: 60%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_70{
  width: 70%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_80{
  width: 80%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}
.bar_90{
  width: 90%;
  margin-top: auto;
  margin-bottom: auto;
  height: 12px;
  background-color: #595959;
}

nav {
    grid-area: left;
}

aside {
    grid-area: right;
}

footer {
    grid-area: footer;
    color: #202225;
    /* background-color: #202225; */
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); */
    display: grid;
    grid-template:
          /* " ... backtotop ... " auto */
          " ... ...... ... " auto
          " ... copyright ... " auto
          " ... ...... ... " auto
          / auto 1fr auto;
          /* grid-gap: 10px; */
    text-align: center;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.backtotop{
  grid-area: backtotop;
}
.copyright{
  grid-area: copyright;
  text-align: center;
}
.copyright p{
  padding-top: auto;
  padding-bottom: auto;
}

#image{
  display:block;
  position:relative;
  top:0vh; left:0vw;
}
/* img{
  width:480px;
  height:auto;
} */

#worktitle{
  display:block;
  position:relative;
  top:0vh; left:10px;
  width:300px;
}

#year{
  display:block;
  position:relative;
  top:0vh; left:300px;
}

#tag{
  display:block;
  position:relative;
  top:-45px; left:10px;
  width:300px;
}

#text{
  display:block;
  position:relative;
  top:-50px; left:10px;
  width:300px;
}

img{
  width: 100%;
}
/*pattern 2*/

#slide_1 {
   width:100%;
}
#slide_1 .bx-pager-item a {
   /* background: #ccc; */
}
#slide_1 a.active {
   /* background:#4b4b4b; */
}
#slide_2 {
   width:100%;
}
#slide_2 .bx-pager-item a {
   /* background: #ccc; */
}
#slide_2 a.active {
   /* background:#4b4b4b; */
}
#slide_3 {
   width:100%;
}
#slide_3 .bx-pager-item a {
   /* background: #ccc; */
}
#slide_3 a.active {
   /* background:#4b4b4b; */
}
#slide_4 {
   width:100%;
}
#slide_4 .bx-pager-item a {
   /* background: #ccc; */
}
#slide_4 a.active {
   /* background:#4b4b4b; */
}

#bx-pager {
   text-align:center;
}

/* ^共通^ */

@media screen and (max-width: 1200px) {
    body {
        grid-template:
            "header header header" 80px
            /* "...... ...... ......" 2em */
            "center center center" 1fr
            /* "...... ...... ......" 2em */
            "footer footer footer" 80px
            / 40vw 1fr 40vw;
    }
    header {
        grid-area: header;
        width:inherit;
        /* float: left; */
        padding: 25px 0;
        position: inherit;
        text-align: center;
        top: 0;
        left: 0;
        z-index: 100;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    #nav{
      padding-left: 1vw;
      padding-right: 1vw;
      display: grid;
      grid-template:
        "... ... ... ..." auto
        "logo ... menu social " 50px
        "... ... ... ... " auto
        / auto 1fr auto 0px ;
    }

    #nav ul{
      width: auto;
      overflow:hidden;
    　list-style:none;
    　margin: 0;
    　z-index: 2;
      /* float: left; */

      display: block;

    }


    #nav ul a{
      font-size: 24px;
    }
    .menu{
      grid-area: menu;
      text-align: left;
    }
    .menu a{
      margin: 0;
      padding-right: 20px;
      padding-left: 20px;
      font-size: 24px;
      font-weight: normal;
      font-style: normal;
      /* font-size: 100%; */
      line-height: 1.6;
    }
    .logo{
      grid-area: logo;
      text-align:center;
      align-items: center;
      padding-left: auto;
      padding-right: auto;
    }
    .logo a{
      margin: 0;
      padding-right: 20px;
      padding-left: 20px;
      font-size: 24px;
      font-weight: normal;
      font-style: normal;
      /* font-size: 100%; */
      line-height: 1.6;
    }

/* social非表示 */
    .social{
      grid-area: social;
      text-align: right;
      float:right;
    }
    .social ul{
      float: right;
      margin: 0 20px 0 20px;
    }
    .social ul li a{
      float: right;
      padding-left: 5px;
      padding-right: 5px;
    }
    .social ul li a img{
      width: 0px;
      height: 0px;
    }
/* social非表示 */
  .caption{
      grid-gap: 0px;
      grid-template:
        "title ... day .... .... " 55px
        "... ... ... ... ..."2px
        "ach ach ach ach ... " auto
        "Genre Genre Genre Genre ... " 16px
        "Tools Tools Tools Tools ... " 16px
        "... ... ... ... ..." 10px / auto 5px 1fr auto auto;
  }
  .caption h1{
    font-size: 40px;
  }
  .caption2 h1{
    font-size: 40px;
  }
  .caption h2{
    font-size: 11px;
  }
  .caption h3{
    font-size: 11px;
  }
  .caption h4{
    font-size: 11px;
  }
  .caption p{
    font-size: 11px;
    margin-left: 5px;
    margin-top: 3em;
  }

  h1{
    font-size: 30px;
  }

  h2{
    font-size: 24px;
  }

  h3{
    font-size: 14px;
    margin-block-start: 0.5em;
  }

  p{
    font-size: 12px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .text ul li a {
    font-size: 12px;
  }

  /* about----------------- */
  .skill_bl_0{
    grid-area: b0;
    display: grid;
    grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 20px
    " icon ... bar_box ... " 20px
    " ... ... ... ... " 10px
      / 40px 10px 1fr auto;
      /* grid-gap: 10px; */
  }
  .skill_bl_1{
    grid-area: b1;
    display: grid;
    grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 20px
    " icon ... bar_box ... " 20px
    " ... ... ... ... " 10px
      / 40px 10px 1fr auto;
      /* grid-gap: 10px; */
  }
  .skill_bl_2{
    grid-area: b2;
    display: grid;
    grid-template:
    " ... ... ... ... " 10px
    " icon ... tool per " 20px
    " icon ... bar_box ... " 20px
    " ... ... ... ... " 10px
      / 40px 10px 1fr auto;
      /* grid-gap: 10px; */
  }
  .skill p{
    font-size: 10px;
  }
  .per{
    grid-area: per;
    text-align: right;
  }
  .bar_box{
    grid-area: bar_box;
    margin-left: 0px;
    margin-right: 5px;
    /* outline-color: #595959; */
  }
  .bar{
    height: 8px;
  }
  .bar_10{
    height: 8px;
  }
  .bar_20{
    height: 8px;
  }
  .bar_30{
    height: 8px;
  }
  .bar_40{
    height: 8px;
  }
  .bar_50{
    height: 8px;
  }
  .bar_60{
    height: 8px;
  }
  .bar_70{
    height: 8px;
  }
  .bar_80{
    height: 8px;
  }
  .bar_90{
    height: 8px;
  }

}

/* ↓スマホ ----------------------------------------------------*/
@media screen and (max-width: 450px) {
    body {
        grid-template:
            " header " 160px
            " center " 1fr
            " footer " 80px
            /1fr ;
    }
    header {
        grid-area: header;
        width:inherit;
        /* float: left; */
        padding: 25px 0;
        position: inherit;
        text-align: center;
        top: 0;
        left: 0;
        z-index: 100;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    #nav {
      padding-left: 1vw;
      padding-right: 1vw;
      display: grid;
      grid-template:
      "... ... ..." auto
      "logo menu social " 50px
      "... ... ... " auto
      / auto auto 0px;
    }
    #nav ul li {
      display: block;
    }
    .menu a {
      padding-right: 10px;
      padding-left: 15px;
      font-size: 24px;
    }
    .logo a {
      padding-left: 15px;
      font-size: 24px;
      line-height: 4.7;
    }

    .wrapper {
      display: block;
      position: relative;
      /* width: 70%; */
      margin: 1em 1.5em 2em 1.5em;
    }
    .spacer {
      /* width: 5%; */
      align-items: center;
      display: block;
      margin-top: 2.5em;
      margin-bottom: 2.5em;
      /* border: 0.5px solid gray; */
    }
/* caption------------------------------------- */
    .caption{
        grid-gap: 0px;
        grid-template:
        "title ... .... .... .... " auto
        "title ... day .... ...." auto
        "... ... ... ... ..."2px
        "ach ach ach ach ... " auto
        "Genre Genre Genre Genre ... " auto
        "Tools Tools Tools Tools ... " auto
        "... ... ... ... ..." 10px
        / auto 5px 1fr auto auto;
    }
    .caption h1 {
      font-size: 20px;
      line-height: 1.3;
    }
    .caption2 h1{
      font-size: 20px;
    }
    .caption h2{
      font-size: 8px;
    }
    .caption h3{
      font-size: 8px;
    }
    .caption h4{
      font-size: 8px;
    }
    .caption p{
      font-size: 10px;
      margin-left: 5px;
      margin-top: 0.9em;
    }
/* cap---------------------------------------- */

/* honnbunn--------------------------------------- */
  h1{
    font-size: 16px;
  }

  h2{
    font-size: 14px;
  }

  h3{
    font-size: 12px;
    margin-block-start: 0.5em;
  }

  p{
    font-size: 12px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .text ul li a {
    font-size: 12px;
  }
  .skill{
    display: grid;
    grid-template:
      " ..... b0 ..... " auto
      " ..... b1 ..... " auto
      " ..... b2 ..... " auto
      / 10px 1fr 10px ;
      /* grid-gap: 10px; */
  }
}