@charset "utf-8";

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #535353;
}

/*==============================================
common
==============================================*/
img {
  max-width: 100%;
}
.site_title {
  width: 90px;
}
.section_title {
  font-size: 3rem;
  font-family: "Bona Nova SC", serif;
  font-weight: 400;
  font-style: normal;
}
.container, .wrapper {
  margin: 0 auto;
  width: 100%;
  padding: 60px 4%;
}
.container {
  display: block;
  font-family: "Bona Nova SC", "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  z-index: 3333;
}
.container:nth-of-type(3) {
  padding-bottom: 60px
}
@keyframes container_slide {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0,0);
  }
}
.wrapper {
  display: flex;
  justify-content: space-between;
}
/* mainボックス */
#main {
  position: relative;
  width: 100vw;
  transform: translate3d(0,0,0);
}
/*==============================================
flipDown
==============================================*/
.fadeUpTrigger {
  opacity: 0;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*==============================================
main visual
==============================================*/
#main_visual {
  margin:0 auto;
  width: 100%;
  overflow: hidden;
  background-image: url(images/main_visual.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}
#main_visual .text_fadeUp {
  position: absolute;
  top: 60%;
  left: 60%;
  transform: translate(-50% -50%);
  font-size: 2rem;
  color: #ffffff;
  animation-name: fadeUptext;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUptext {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}
#main_visual .wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 91vh;	
}
/*SVGのサイズ*/
svg{
	max-width:800px;/*SVGタグの横幅*/
	width:100%;/* レスポンシブ対応にするため100%を指定*/
	height:auto;
}
/* マスクをするパスの設定*/
#mask .st0{
    fill:none;
    stroke:#ffffff;
    stroke-width:90;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1300; /* 線の間隔を指定する */
    stroke-dashoffset:1300; /* 線の位置を指定する */
}
/*==============================================
navi
==============================================*/
.navi_Box {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 20px 4%;
  z-index: 9999;
}
.navi_List {
  display: flex;
  justify-content: space-between;
  width: 350px;
}
.navi_List .button {
  width: 200px;
  text-align: center;
  font-size: 0.87rem;
  font-family: "Bona Nova SC", serif;
  font-weight: 400;
  font-style: normal;
  background-color: #ffffff;
  border: 1px solid #535353;
  border-radius: 2px;
  margin-left: 30px;
  box-shadow: 0px 2px 3px #c5c5c5;
  transition-duration: .3s;
}
.navi_List .button a {
  display: inline-block;
  width: 100%;
  padding: 8px 0;
  border-radius: 2px;
  transition: 0.6s;
}
.navi_List .button a:hover {
  color: #db5f00;
}
.navi_List .button:active {
  transform: translateY(5px);
  box-shadow: none;
}
.navi_List li:first-child {
  margin-left: 0;
}
/*==============================================
WORKS
==============================================*/
#works {
  margin-top: 10px;
}
#works .section_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url(images/works_bg.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
}
#works #modal_window {
  padding: 0 20px;
}
#works .banner,
#works .cording {
  font-size: 1.3rem;
  padding: 30px 0 10px 0;
}
.grid_area {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  padding-bottom: 60px;
}
.banner_grid_area li:nth-child(3) img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 15%;
}
.grid_area li {
  line-height: 0;
  overflow: hidden;
}
.grid_area li img {
  transform: scale(1);
  transition: 0.8s;
}
.grid_area li img:hover {
  transform: scale(1.1);
}
.grid_area li a {
  cursor: pointer;
}
/*==============================================
ABOUT
==============================================*/
#about {
  position: relative;
}
#about .section_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url(images/about_bg.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: -1;
}
#about #name {
  width: 100%;
  font-size: 2rem;
  padding: 40px 0 0 20px;
}
#about .wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.5);
}
#about .faceshot {
  width: 50%;
  height: auto;
  text-align: center;
}
#about .faceshot img {
  width: 80%;
  border-radius: 30px;
}
#about .text {
  width: 50%;

}
#about .text p {
  width: 100%;
  font-size: 1.1rem;
  line-height: 2.0rem;
  letter-spacing: 0.2rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

#about .skill_box {
  width: 100%;
  font-size: 1.6rem;
  padding: 40px;
  margin-top: 40px;
  border-radius: 10px;
  background-color: #fff;
}
#about .skill {
  padding-bottom: 40px;
}
#about .skill_box .list dd {
  font-weight: 400;
}
#about .skill_box .list dd {
  width: 120px;
  margin-bottom: 30px;
}
#about .skill_b0x .list img {
  width: 180px;
}

/*==============================================
CONTACT
==============================================*/
#contact {
  padding-bottom: 400px;
}
#contact .section_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url(images/contact_bg.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: -1;
}
.contact_List {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 760px;
}
.contact_List li {
  width: 290px;
  height: auto;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
  margin-top: 60px;
  overflow: hidden;
}
.contact_List li img {
  border-radius: 8px;
}
.contact_List li:first-child img {
  display: inline-block;
  border: 1px solid #c5c5c5;
  padding: 10px;
  background-color: #fff;
}
/*==============================================
footer
==============================================*/
.copyright {
  margin: 0 auto;
  text-align: center ;
  width: 100%;
  font-family: "Bona Nova SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.25rem;
  padding: 10px 0;
  background-color: #fff;
}
/*==============================================
SP
==============================================*/
@media (max-width:834px) {
  .site_title {
    width: 100px;
    margin-right: 10px;
  }
    /*==============================================
     main visual
    ==============================================*/
    #main_visual .text_fadeUp {
      font-size: 1.4rem;
    }
    /*==============================================
    navi
    ==============================================*/
      .navi_List {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
      .navi_List .button {
        width: 80px;
        margin-left: 5px;
      }
    /*==============================================
    WORKS
    ==============================================*/
      .grid_area {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        box-sizing: border-box;
        padding-bottom: 20px;
      }
      .banner_grid_area li:first-child img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: 15%;
      }
      .grid_area li {
        line-height: 0;
        overflow: hidden;
        border-radius: 0px;
      }
      .grid_area li img {
        transform: scale(1);
        transition: 0.8s;
        border-radius: 0px;
      }
      .grid_area li img:hover {
        transform: scale(1.1);
      }
      .grid_area li a {
        cursor: pointer;
      }
    /*==============================================
    ABOUT
    ==============================================*/
      #about .wrapper {
        width: 100%;
        display: block;
        margin: 0 auto;
      }
      #about .text {
        width: 100%;
      }
      #about .text p {
        font-size: 0.8rem;
        line-height: 1.4rem;
      }
      #about .faceshot {
        width: 100%;
        height: auto;
      }
      #about .faceshot img {
        width: 50%;
      }
      #about .skill_box {
        width: 100%;
        font-size: 1.6rem;
      }
      #about .skill {
        padding-bottom: 40px;
      }
      #about .skill_box .list dt {
        font-size: 1rem;
      }
      #about .skill_box .list dd {
        margin-bottom: 30px;
      }
      #about .skill_box .list img {
        width: 100px;
      }
    /*==============================================
    CONTACT
    ==============================================*/
      .contact_List {
        display: block;
        width: 100%;
      }
      .contact_List li {
        width: 50%;
        margin: 40px auto ;
      }
    /*==============================================
    footer
    ==============================================*/
    .copyright {
      font-size: 10px;
      letter-spacing: 0.1rem;
    }
}