@charset "UTF-8";


/* ************************************************************************************************

   index.php

   ************************************************************************************************ */

.works__ttl, .skill__ttl, .profile__ttl, .contact__ttl, profile-photo__ttl{
  font-family: 'erasdust', YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-weight: normal;
}

.index__line{
  display: block;
  margin: 10rem auto;
}


/***** top *****/
.top{
  height: 100vh;
  position: relative;
}

.top__movie{
  filter: grayscale(.6);
  position: absolute;
  width: auto;
  height: 65vh;
  max-width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
  border: 9px double #444;
}

.top__ttl{
  font-family: 'erasdust', YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;  font-weight: normal;
  font-size: 4.5rem;
  position: absolute;
  line-height: 1.5;
  top: 25%;
  right: 5%;
  transform: rotate(8deg);
  text-shadow: 0 0 6px #fff;
}

.top__line{
  margin: 0 auto 10rem;
}


/***** works *****/
.works__heading{
  height: 126px;
  background: url(../img/index/img_works.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.works__ttl{
  position: absolute;
  left: 9%;
  top: 20%;
  transform: rotate(-8deg);
}

.works__wrap{
  margin-top: 7rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.works__wrap img{
  width: 100%;
  height: auto;
}

.works__btn{
  text-align: right;
  margin-top: 1rem;
}

/*サムネイルホバーエフェクト*/
.works__img {
  width: 350px;
  height: auto;
  margin: 0 auto 5rem;
  padding: 0;
  overflow: hidden;
  display: block;
}

.works__img img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.works__img:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: .6;
}


/***** skill *****/
.skill__heading{
  height: 120px;
  background: url(../img/index/img_skill.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.skill__ttl{
  position: absolute;
  left: 9%;
  top: 20%;
  transform: rotate(-6deg);
}

.skill__list{
  margin-top: 7rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.skill__item{
  width: 50%;
  margin-bottom: 6rem;
  align-items: center;
}

.skill__box{
  margin-left: 3rem;
}

.skill__h5{
  color: #457EAC;
  margin-bottom: 1.5rem;
}


/***** profile *****/
.profile {
  padding-bottom: 10rem;
}

.profile__line {
  margin: 4rem auto 14rem;
}

.profile__heading{
  height: 115px;
  background: url(../img/index/img_profile.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.profile__ttl{
  position: absolute;
  left: 7%;
  top: -48%;
  transform: rotate(-7deg);
}

.profile__box{
  margin: 7rem auto 6rem;
  justify-content: center;
  align-items: center;
}

.profile__img{
  transition: .7s;
  margin: 0 3rem;
  border-radius: 15px 200px 15px 185px / 240px 15px 100px 15px;
}

.profile__img:hover {
  filter: sepia(.6);
  transition: .5s;
}

.profile__item{
  background: url(../img/index/frame01.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 423px;
  height: 380px;
  margin: 0 3rem;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.profile__name{
  color: #457EAC;
}

.profile__txt{
  margin-top: 25px;
}

.profile__btn{
  text-align: right;
}

.profile__note{
  text-align: right;
  font-size: 1.2rem;
  margin-top: 1rem;
}

.fab{
  margin-right: 1rem;
}


/***** contact *****/
.contact__heading{
  height: 108px;
  background: url(../img/index/img_contact.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.contact__ttl{
  position: absolute;
  left: 13%;
  top: -8%;
  transform: rotate(-7deg);
}


/* ************************************************************************************************

   1180px

   ************************************************************************************************ */
@media screen and (max-width: 1180px){

/***** index.php @1180px *****/
.skill__box {margin-left: 2rem;}

.index__line {
  margin: 10rem auto;
  max-width: 100%;
  padding: 0 4rem;
}

}


/* ************************************************************************************************

   1024px

   ************************************************************************************************ */
@media only screen and (max-width: 1025px) {

/***** index.php @1024px *****/
.top__movie {
  width: 80vw;
  height: auto;
}
.top__ttl {top: 15%;}

.works__ttl {left: 11%;}
.works__img {width: 30%;}

.skill__ttl {left: 11%;}
.skill__img {width: 120px; height: auto;}

.contact__ttl {left: 15%;}

}


/* ************************************************************************************************

   960px / タブレット

   ************************************************************************************************ */
@media screen and (max-width: 959px){

/***** index.php @960px *****/
.top__movie {
  width: 90%;
  height: 70vh;
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.top__ttl {
  top: inherit;
  bottom: 4%;
  transform: rotate(6deg);
}

.index__line, .top__line {
  max-width: none;
  padding: 0;
  margin: 8rem auto;
}

.works__heading {height: 100px;}
.works__wrap {margin-top: 6rem; justify-content: space-around;}
.works__img {width: 45%;}
.works__btn {margin-top: 0;}

.skill__heading {height: 95px;}
.skill__list {margin-top: 6rem;}
.skill__item {
  width: 70%;
  margin-bottom: 5rem;
  margin-right: auto;
  margin-left: auto;
}

.profile__line {margin: 3rem auto 13rem;}
.profile__heading {height: 90px;}
.profile__box {
  margin: 6rem auto;
  display: block;
  text-align: center;
}
.profile__img {margin: 0 0 4rem;}
.profile__item {
  width: 100%;
  height: 380px;
  margin: 0;
  background-position: center;
}

.profile__ttl {top: -59px;}
.contact__heading {height: 83px;}
.contact__ttl {left: 17%;}

}


/* ************************************************************************************************

   560px / iPhone

   ************************************************************************************************ */
@media screen and (max-width: 559px){

/***** index.php @560px *****/
.index__line, .top__line {
  margin: 6rem auto;
}

.top__movie {
  width: 85%;
  height: 60vh;
  top: -1rem;
}

.top__ttl {
  font-size: 3rem;
  bottom: 5%;
  right: 8%;
  transform: rotate(4deg);
}

.works__heading {height: 80px;}
.works__ttl {left: 20%; top: 14%;}
.works__wrap {margin-top: 5rem; display: block; text-align: center;}
.works__img {width: 95%; margin: 0 auto 4rem;}

.skill__heading {height: 75px;}
.skill__ttl {left: 19%;}
.skill__list {margin-top: 5rem;}
.skill__item {
  display: block;
  width: 95%;
  margin-bottom: 4rem;
  text-align: center;
}
.skill__img {width: 100px;}
.skill__box {margin-left: 0;}
.skill__h5 {margin-bottom: 1rem; margin-top: 1rem;}
.skill__txt {text-align: left;}

.profile {padding-bottom: 7rem;}
.profile__line {margin: 2rem auto 11rem;}
.profile__heading {height: 70px;}
.profile__ttl {left: 12%; top: -50px;}
.profile__box {margin: 5rem auto 3rem;}
.profile__img {width: 90%; margin: 0 0 3rem;}
.profile__item {height: 300px;}
.profile__txt {margin-top: 15px;}

}


/* ************************************************************************************************

   320px / スマホ

   ************************************************************************************************ */
@media screen and (max-width: 320px){

/***** index.php @320px *****/
.top__movie {height: 55vh;}
.top__ttl {font-size: 2.8rem; bottom: 6%;}

.works__ttl {left: 23%;}

.skill__ttl {left: 23%;}

.profile__name {left: 36%;}


}