@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Felipa&display=swap');
/* 使用リセットCSS normalise.css */
/* font-family: 'Caveat', cursive; */
/*==========================================
ブラウザリセット
============================================*/
*,h1{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img{
  max-width: 100%;
  vertical-align: bottom;
  bottom:0;
}
ul,ol,dl{
  list-style: none;
}
a{
  text-decoration: none;
  color: inherit;
}
body{
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  background-color: #fafafa;
  color: #333;
  /* animation: fadeIn 5s ease 0s 1 normal; */
}
@keyframes fadeIn{
  0% {opacity: 0}
  100% {opacity: 1}
}
/*==========================================
ヘッダー
============================================*/
#sp_nav{
  display: none;
}
/* 画面８００以下の時はハンバーガーメニューで */
@media(max-width:800px){
  #pc_nav{
    display: none;
  }
  #sp_nav{
    display: block;
  }
}
.wrapper{
  width: 100%;
  max-width:1200px;
  margin:0 auto;
}
h1{
  font-size: 1.0em;
  line-height: 3.0;
  font-weight:lighter;
}
.pc_nav ul{
  font-family: 'Caveat', cursive;
  font-size: 1.75em;
  display: flex;
}
.pc_nav ul li{
  padding:0.25em 1.0em;
}
.pc_nav ul li+li{
  padding-left:1.25em;
}
.pc_nav ul li:last-child{
  background: #291313;
  color:#fff;
  position: relative;
}
.pc_nav ul li:last-child::before{
  content: url(../image/contact_icon.png);
  display: inline-block;
  transform: scale(0.2);
  position: absolute;
  left:-30px;
  top:-15px;
}
.h1_bg{
  background: #fff;
}
header{
  max-width:100%;
  display: flex;
  justify-content:space-between;
}
/*==========================================
main
============================================*/
.top_view p{
  text-align: center;
}
.web_creator{
  position: relative;
}
.see_works_btn{
  color: #fff;
  background: #29131370;
  display: inline-block;
  padding: 1.0em 1.75em;
  border-radius: 10px;
  position: absolute;
  bottom:42%;
  right: 48%;
}
.see_works_btn:active{
  box-shadow: 1px 1px 10px 1px #291313 inset;
}
/*----------------
プロフィールsection
-----------------*/
h2{
  font-size: 3.0em;
  font-family: 'Caveat', cursive;
  margin: 1.0em 0;
}
h2 span{
  font-size:1.25rem;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: lighter;
}
h2 span:before{
  content:" -";
}
h2 span:after{
  content:" - ";
}
.bg2_style{
  background: #99999970;
  color: #fafafa;
}
.profile,.skills,.works,.contact{
  padding:2.0em 0 6.0em 0;
  margin: 1.0em auto;
  text-align: center;
}
.profile_detail{
  background: #fafafa30;
  color:#29131370;
  box-shadow: 1px 1px 10px 1px #291313a1;
  display: inline-block;
  padding: 2.0em;
  text-align: left;
  font-size: 1.25em;
  transform: rotateZ(7deg);
  margin-top: 2.0em;
  width: 45%;
}
.profile_detail p{
  line-height: 1.25;
  margin-bottom: 1.0em;
}
.profile_detail p:last-of-type{
  margin-bottom:0.25em;
}
.profile_detail ul{
  list-style-type: disc;
  list-style-position: inside;
}
.profile_detail li{
  line-height: 2.0;
}
.profile{
width: 100%;
max-width: 1200px;
position: relative;
}
.profile p img{
  position: absolute;
  top:87%;
  right:0;
}
.mymsg{
  line-height: 2.0em;
  text-align: left;
  font-size: 1.25em;
  width:50%;
  z-index: 1;
}
.profile_box{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.decow1 span{
  display:block;
  margin:0.75em 0 0.75em 3.0em;
}
.decow1{
  font-size: 2.0em;
  font-family: 'ＭＳ 明朝', 'MS Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;;
  border-bottom: 5px solid #29131370;
}
.decow2{
  margin-top: 1.0em;
}
/*----------------
スキルsection
-----------------*/
.skills_item{
  width:100%;
  height:auto;
  display: flex;
  background: #fff;
  box-shadow: 1px 1px 10px 1px #291313a1;
  padding: 0.25em;
  margin:1.0em;
}
.skills_item img{
  margin:3.0em 1.0em;
  width:30%;
  aspect-ratio: 1/1;
}
.skills_item dl dt{
  font-size:1.25em;
  text-align: right;
  color: #291313;
  margin:1.0em 1.0em 1.0em 0;
}
.skills_item dl dd{
  text-align: left;
}
.skills_box{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.skills_box .skills_item{
  flex-basis:30%;
}
/*----------------
作品section website
-----------------*/
.website_box{
  width: 100%;
  max-width:1000px;
  margin: 1.0em auto;
  background:#fafafa70;
  padding:2.0em 1.0em 4.0em 1.0em;
  color: #291313;
}
.website_box p,.graphic_box p{
  line-height: 3.0em;
}
/* slickの矢印変更 */
.slick-prev{
  left:2%;
  z-index: 1;
}
.slick-prev:before{
  content:url(../image/l_slick_icon.png);
}
.slick-prev:hover:before{
  opacity: 0.7;
}
.slick-next{
  right:2%;
}
.slick-next:before{
  content:url(../image/r_slick_icon.png);
}
.slick-next:hover:before{
  opacity: 0.7;
}
/* 画像の拡大 */
.mask{
  display: block;
  line-height: 0;
  width: fit-content;
  overflow: hidden;
}
.zoomin img{
  transform: scale(1);
  transition: .2s ease-in-out;
}
.zoomin a:hover img{
  transform: scale(1.2);
  opacity: 0.7;
}
/* テキストのアニメーション設定 */
@keyframes show_ttl{
  from{
    filter: blur(10px);
    transform:scale(1.02);
    opacity: 0;
  }
  to{
    filter: blur(0);
    transform:scale(1);
    opacity: 1;
  }
}
.zoomin{
  position: relative;
}
.zoomin p{
  z-index: 1;
  position: absolute;
  font-size: 2.0em;
  width:92%;
  height:100%;
  top:0;
  left:0;
  opacity: 0;
}
.zoomin p:hover{
  animation-name:show_ttl;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.wait{
  background: #555;
}
/*----------------
作品section graphic
-----------------*/
.graphic_box{
  width: 100%;
  max-width:1000px;
  margin: 2.0em auto 1.0em auto;
  background:#fafafa70;
  padding:2.0em 1.0em 4.0em 1.0em;
  color: #291313;
}
.graphic_item img{
  width:50% ;
  height:50%;
  margin: 0 auto;
}
.slick-dots{
  bottom: -50px;
}
.slick-dots li button:before{
  content: '◆';
  font-size:16px;
  color:#291313;
}
.slick-dots li.slick-active button:before{
  color:#291313;
}
/*----------------
お問い合わせsection
-----------------*/
form{
  width: 100%;
  max-width:1000px;
  margin: 1.0em auto;
  padding:0 5.0em;
  font-size: 1.25em;
  color: #291313;
}

.form_ttl{
  font-family:'Times New Roman', Times, serif;
  font-size: 1.25em;
  text-align: center;
  margin-bottom:2.0em;
  padding-bottom:0.25em;
  border-bottom: 5px solid #29131370;

}
.label{
  line-height: 2.0;
  width:15%;
  display: inline-block;
  vertical-align:middle;
  text-align: left;
}

input[type="text"],input[type="email"],input[type="tel"]{
  font-size:1.0em;
  line-height: 2.0;
  padding: 0.25em;
  width:40%;
  border:1px solid #29131370;
  border-radius: 10px;
  margin-bottom: 0.75em;
}
.label_textarea{
  line-height: 2.0;
  width:57%;
  display: inline-block;
  vertical-align:middle;
  text-align: left;
  margin-top: 1.0em;
}
textarea{
  font-size:1.0em;
  line-height: 2.0;
  padding:0.25em 1.0em;
  width:57%;
  height:10em;
  border:1px solid #29131370;
  border-radius: 10px;
  margin: 0.75em 0;
}
input[type="submit"]{
  border:none;
  font-size: 1.25em;
  padding:0.25em 1.25em;
  border-radius: 10px;
  color: #fff;
  background: #29131370;
  border: 1px solid #29131370;
  margin-right: 1.0em;
  cursor: pointer;
}
input[type="submit"]:active{
  box-shadow: 1px 1px 2px 1px #291313a1 inset;
}
input[type="reset"]{
  border:none;
  font-size: 1.25em;
  padding:0.25em 1.0em;
  border-radius: 10px;
  color: #291313;
  background: #fff;
  border: 1px solid #29131370;
  cursor: pointer;
}
input[type="reset"]:active{
  box-shadow: 1px 1px 2px 1px #291313a1 inset;
  border-color:#fafafa;
}
.form_btn{
  text-align: center;
  margin-top: 2.0em;
}
/*----------------
メッセージ
-----------------*/
.message{
  font-family:serif;
  font-size: 1.25em;
  line-height: 2.0;
  padding: 3.0em 0 10.0em 0;
  margin-bottom: 3.0em;
}
/*----------------
page_top
-----------------*/
/*スクロールダウン全体の場所、動き*/
.page_top{
z-index:1;
position:fixed;
bottom:3%;
right:10%;
animation: arrowmove 1s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}
/*Scrollテキストの描写、動き*/
.page_top span{
z-index:1;
position: fixed;
right:7%;
color: #291313;
font-size:0.75em;
letter-spacing: 0.2em;
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  animation: arrowmove 1s ease-in-out infinite;
  position: relative;
}
.page_top:before {
  content: "";
  position: absolute;
  bottom:71px;
  right: -20px;
  width: 1px;
  height: 20px;
  background: #291313;
  transform: skewX(31deg);
}
.page_top:after{
content:"";
position: absolute;
bottom:0;
right:-15px;
width:2px;
height:90px;
background:#291313;
}

/*----------------
page_down
-----------------*/
/*スクロールダウン全体の場所、動き*/
.page_down{
  z-index:1;
  position:fixed;
  bottom:3%;
  right:10%;
  animation: arrowmove 1s ease-in-out infinite;
  }
  /*下からの距離が変化して全体が下→上→下に動く*/
  @keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
  }
  /*Scrollテキストの描写、動き*/
  .page_down span{
  z-index:1;
  position: fixed;
  right:7%;
  color: #291313;
  font-size:0.75em;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    animation: arrowmove 1s ease-in-out infinite;
    position: relative;
  }
  .page_down:before {
    content: "";
    position: absolute;
    bottom:0px;
    right: -20px;
    width: 1px;
    height: 20px;
    background: #291313;
    transform: skewX(-31deg);
  }
  .page_down:after{
  content:"";
  position: absolute;
  bottom:0;
  right:-15px;
  width:2px;
  height:85px;
  background:#291313;
  }
  /*----------------
ハンバーガーメニュー
-----------------*/
.drawer-nav{
  background: #999;
  padding-top:3.0em;
}
.drawer-brand{
  color: #fff;
  border-bottom: 2px solid #fff;
  font-weight:normal;
}
.drawer-brand:hover{
  color: #291313;
}
.drawer-menu-item{
  color:#fafafa;
  padding-left: 2.0em;
}
.drawer-menu-item:hover{
  color:#291313;
  text-underline-offset: 2px;
}
.drawer-overlay{
  background-image: url(../image/ttl.png);
  background-repeat: no-repeat;
  background-size:50%;
  background-position:center left;
}
/*==========================================
フッター
============================================*/
footer p{
  text-align: right;
  line-height: 2.0;
  font-weight:lighter;
  margin-top: 10.0em;
}
.for_deco_2{
  position: relative;
}
.for_deco_2 p img{
  position: absolute;
  top:-700%;
}