@charset "utf-8";
/****** root ******/
html {
  font-size: 15px;
}
:root {
  --maincolor: #ffffef;
  --subcolor: #7fbfff;
  --accentcolor: #f8f05c; /*logo color*/
}
/****** common body ******/
body {
  font-size: 1rem;
  line-height: 1.8;
  font-family: Yu Gothic Medium, 游ゴシック Medium, YuGothic, 游ゴシック体, ヒラギノ角ゴ Pro W3, メイリオ, sans-serif;
  color: #333;
  background: #fff;
  margin: 0 auto;
  animation: loadscroll .1s linear 1.5s both;
}
/* ****** common layout****** */
.container { /*内箱*/
  max-width: 1032px; /*8の倍数を意識した幅取り*/
  padding: 60px 16px; /*8の倍数を意識した幅取り*/
  margin: 0 auto;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* ****** common design ****** */
h1 {
  font-size: 1.2rem;
  letter-spacing: .2rem; /*文字同士の隙間づくり*/
  display: inline-block;
}
h2 {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .2rem;
  margin: 0 0 2.5em;
  position: relative;
  /*display: inline-block;*/
}
img {
  border-radius: 15px;
}
/* hover */
a:hover, .button:hover, i:hover {
  transition: .4s;
}
/* .load  loading */
.load {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 239, .97); /*--maincolor .97%*/
  top: 0;
  left: 0;
  z-index: 10000;
}
.load div {
  height: 100%; /*親に従ってめいっぱい広がる*/
  position: relative;
  text-align: center; /*中央に表示。paddingでも可だが、SP用に応用が利くのはこっち*/
}
.load div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*行き過ぎた分を戻す。x, y*/
}
@keyframes loadscroll {
  0% {
    overflow: hidden;
  }
  100% {
    overflow: auto;
  }
}
/* h2 underbar  section:hover */
h2 span:nth-child(2) {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: solid 2px var(--accentcolor);
  border-radius: 2px;
  animation: underbar 1s linear forwards;
}
@keyframes underbar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/*中心から伸ばす場合*/
/*h2 span:nth-child(2) {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1%;
  height: 4px;
  border-radius: 2px;
  background: var(--accentcolor);
  animation: border .4s forwards;
}
@keyframes border {
  100% {
    width: 100%;
    left: 0%;
  }
}*/
/* ****** header ****** */
header {
  background: var(--maincolor);
  padding: 0 30px;
}
header .flex {
  align-items: center;
}
/* main_visual .mvsli  slick */
.mvsli img {
  width: 100%;
}
.mvsli {
  width: 1100px;
  margin: 0 auto;
}
.mvsli > ul > li {
  /*width:25%;*/
}
.slick-prev::before, .slick-next::before {
  color: var(--subcolor);
}
.slick-slide { /*３枚表示したときに真ん中を大きくするCSS*/
  transform: scale(.85);
  transition: 0.3s ease-in-out;
}
.is--active {
  transform: scale(1);
  transition: 0.5s ease-in-out;
}
/*  SPver  header .menu span(button)  */
.menu {
  width: 35px;
  height: 30px;
  position: relative;
  display: none; /*非表示*/
  margin-left: 15px;
}
.menu span {
  background: var(--subcolor);
  display: block;
  width: 35px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
}
.menu span:first-child {
  top: 0;
}
.menu span:nth-child(2) {
  top: 43%;
}
.menu span:last-child {
  top: 26px;
}
/* ****** nav ****** */
nav {
  background: var(--maincolor);
  position: fixed;
  width: 100%;
  bottom: 0;
  box-shadow: 0 0 1px var(--subcolor);
  z-index: 999;
}
nav ul {
  max-width: 1032px;
  padding: 0 16px;
  margin: 0 auto;
}
nav a {
  display: block;
  padding: .8em 0;
}
nav a:hover {
  font-weight: bold;
  letter-spacing: .1rem;
}
/* ****** main ****** */
/* .create .slide (lightbox)*/
.create .slide a {
  display: inline-block;
  width: 180px;
}
.create .flex {
  justify-content: flex-start;
  gap: 24px;
}
/* .profile */
.profile .flex {
  align-items: center;
}
.profile figure p {
  line-height: 2.2;
}
.profile figure p:nth-of-type(2), .profile figure p:last-child {
  margin-top: 1em;
}
.profile figure p > a:hover {
  color: var(--subcolor);
  text-shadow: 0 0 5px #fff;
}
.profile figcaption {
  position: relative;
}
.profile figcaption .sns {
  position: absolute;
  padding: 0;
  margin-top: .25rem;
  gap: 10px;
  top: 0;
  right: 35%;
}
.profile figcaption .sns i {
  font-size: 1.5rem;
}
/* .skill */
.skill .flex {
  vertical-align: text-top;
  text-align: center;
  gap: 45px;
}
.skill li {
  width: 25%;
}
.skill figure p:last-child {
  margin-top: .8em;
}
.skill img {
  border-radius: 0;
}
/* .contact */
.contact form {
  background: #fff;
  border-radius: 10px;
  padding: 0 2rem;
}
.contact input, .contact textarea {
  display: block;
  padding: 5px;
  width: 35em;
  font-size: 1rem;
  margin: .4em 0 1.5em;
  border: 1px solid var(--subcolor);
  border-radius: 10px;
}
.contact .button {
  background: #eff7ff;
  color: #555;
  letter-spacing: .1rem;
}
.contact .button:hover {
  background: var(--subcolor);
  color: #fff;
}
.contact form p {
  margin-bottom: 1.5em;
}
.contact form span {
  font-size: .8rem;
  margin-left: .5em;
  background: #ff7f7f;
  color: #fff;
  border-radius: 5px;
  padding: .1em .4em;
  vertical-align: middle;
}
.contact select {
  width: 20em;
}
.contact textarea {
  height: 10em;
}
/*  .qanda  */
.qanda h2 span {
  font-size: 1.1rem;
  padding-left: .8em;
}
.qanda dt, .qanda dd {
  padding: .3rem 2rem;
}
.qanda dt {
  color: var(--subcolor);
}
.qanda dd {
  margin-bottom: 1rem;
}
/* ****** footer ****** */
footer {
  background: var(--maincolor);
  position: relative;
  margin-top: 40px;
}
.footer-logo {
  position: absolute;
  top: 0;
  left: 30px;
  transform: translateY(20%);
}
footer small {
  display: block;
  text-align: center;
}
/* sns */
.sns {
  justify-content: center;
  gap: 20px;
  padding-bottom: 20px;
}
.sns i {
  display: block;
  font-size: 3em;
  color: #333;
}
.sns .ig:hover {
  color: #CF2E92;
}
.sns .yt:hover {
  color: #DA1725;
}
.sns .wp:hover {
  color: #21759b;
}
/* ****** media query ****** */
@media(max-width: 768px) { /*768px以下*/
  /* ****** common ****** */
  html {
    font-size: 13px;
  }
  /* ****** common design ****** */
  h2 {
    margin: 0 0 1.5em;
  }
  /* ****** header ****** */
  header {
    padding: 0 20px;
  }
  /* SPver　header .menu span(button) */
  .menu {
    display: block; /*非表示(none)を表示(block等)へ*/
  }
  .cross span:first-of-type {
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /*translateY(-50%)　：行き過ぎた分戻す*/
  }
  .cross span:nth-child(2) {
    display: none;
  }
  .cross span:last-of-type {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  /* nav */
  nav {
    display: none;
    top: 100px;
    padding-top: 25px;
    background: rgba(255, 255, 239, 0.95);
  }
  nav li {
    flex: 100%; /*widthの場合は、「width: 100%;」*/
  }
  /* ****** main ****** */
  /* .create .slide (lightbox)*/
  .create .slide a {
    width: 150px;
  }
  .create .flex {
    gap: 16px;
  }
  /* .profile */
  .profile figcaption {
    margin-top: 1.5em;
  }
  .profile figcaption .sns {
    gap: 6px;
    right: 0;
  }
  /* .skill */
  .skill li {
    width: 40%;
  }
  /* .contact */
  .contact input, .contact textarea {
    width: 18em;
  }
  /* ****** footer ****** */
  .footer-logo {
    display: none;
  }
}