@charset "UTF-8";

/* ------------------------------------------
　 ＊サイト全体設定
---------------------------------------------*/

body{
  color: #383e45;
  font-size: 16px;
  line-height: 1.3;/*文字本体の上下の高さ*/
  }

.wrappaer{
  max-width: 960px;/*サイト全体の横幅*/
  margin: 0 auto;/*サイト全体の右寄りを中央に*/
  padding: 0 10px;/*サイト全体の両端に余白をつける*/
  }


/*他には・・の文*/
.note{
  font-size: 14px;
}


/*リンク部の表示（aboutとworkの２箇所）*/
.note>a,
.works>.content_boxs>.content>p>a{
  color: #383e45;   
  font-size: 14px;
  }

/*３箇所のホバー*/
header>nav>ul>li>a:hover,
.note>a:hover,
.works>.content_boxs>.content>p>a:hover{
  opacity: 0.5;
  }


/* ------------------------------------------
　■ Header
---------------------------------------------*/

header{
  height: 50px;
  line-height: 50px;
  }

header>nav{float: right;}


header>nav>ul{
  display: flex;
  }

header>nav>ul>li{
  margin-right: 20px;
  }

header>nav>ul>li>a{
  color: #383e45;
  font-size: 15px;
  }


/* ------------------------------------------
　■ Main
---------------------------------------------*/

/*　===　共通　====　*/

.section-title{
  display: inline-block;/*これがないと、下線が伸びる。インライン要素だが、ブロック要素として扱う？*/
  font-size: 35px;
  font-weight: bold;
  border-bottom: 1px solid #383e45;/*下線*/
  margin: 3rem;

  /*h2の文字ずらし*/
  -webkit-text-stroke: 3px #555;
  text-shadow: 4px 4px 0 #e5c046;
  color: rgba(0 0 0 / 0);
  }

   /*h2の文字を中央に*/
  .section-title_box{
    text-align: center;
  }
  
.content-title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  }


/*　=========　Mainvisual　=========　*/

/*トップ画像*/
.mainvisual>img{
  max-width: 100%;

  filter: grayscale(100%);
  transition: .5s ease-in-out;/*色が移り変わる速さ*/
  }

/*自分の名前*/
.mainvisual-name{
  text-align: right;
  font-size: 45px;
  font-family: "Arial Black", "ms p明朝"
  }

/*hoverした時の変化*/
.mainvisual>img:hover{filter:grayscale(0);}


/*　=========　about-Section　=========　*/

/*自分の写真・ずらし背景*/
.about>.content>img{
  width: 100px;
  height: 150px;
  border-radius: 10px;/*写真を丸にする*/
  margin-right: 30px;/*写真の右に余白*/
  box-shadow: 10px 10px 0 #6495ed;
  }

/*自分の写真・プロフィール文章*/
.about>.content{
  display: flex;
  justify-content: space-around;
  align-items: center; 
  margin-bottom: 60px;
  }

.text>p{  width: 500px;}



/*　=========　Work-Section　=========　*/


/*架空の商品・店舗・WEB媒体を想定して、こちらの作品を制作しました の文字位置*/
h4{
  text-align: center;
  margin-bottom: 25px;
  }

.works{
  background-color: #60b0db;
  color: #1f2326;
  margin-top: 60px;
  }

/*ピンタレスト風　レイアウトの配置ーーーーーーーーーー*/
.works>.content_boxs {
  column-count: 3;
  padding: 20px;
  margin-left: 5%;
  }
.works>.content_boxs>.content {
  break-inside: avoid;
  margin-bottom: 60px;
  }

/*ーーーーーーーーーーーーー配置の記述 ここまでーー*/

/* 作品写真のサイズ・形の指定 */
.works>.content_boxs>.content>a>img{
  width: 80%;  /*　%にすると親要素に対してのサイズになる　*/
  border-radius: 30px;
  }

/* 作品の説明文の範囲指定 */
.works>.content_boxs>.content>p{
  width: 80%;
  }
.works>.content_boxs>.content>h3{
  width: 80%;
  }


/*　========= Contact-Section =========　*/


.contact{
width: 550px;
margin: 0 auto;
}

.contact>.content>img{
  width: 65px;
  height: 90px;
}

.contact>.content{
  display: flex;
  justify-content: space-around;
  margin-bottom: 200px;
  }




/* ------------------------------------------
　■ footer
---------------------------------------------*/
footer{
  text-align: center;
  margin: 50px 0 10px 0;
}

footer>p{font-size: 10px}


/* ------------------------------------------
　■ ウィンドウのスクロールに対応してTOPへを表示
---------------------------------------------*/

#toTheTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 80px;
  margin: 0;
  padding: 10px 5px;
  background-color: #ff8c00;
  color: white;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}


/* ------------------------------------------
　■　レスポンシブル（スマホのサイズ）　
---------------------------------------------*/

  /* ーーー　最大559pxまでの幅の場合に適応される（spのサイズ） ーーーーーーーーーーーーー*/
  @media screen and (max-width: 559px) {

    .mainvisual-name{
      text-align: center;
      font-size: 35px;
      }
  
    .about>.content{
      flex-direction: column;
      }
            
    .about>.content>img{
      margin: 0 auto 30px;
    }


  }