/*
Theme Name: Mineblog
Author: Mine
Description: 駆け出しエンジニアのためのポートフォリオ用テーマ
Version: 1.0
*/


/*Base
=====================================================*/
html {
  font-size: 62.5%; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FFF;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: .1rem;
  color: #222;
  margin: 0; }

.center {
  text-align: center; }

.leftcol {
  float: left; }

.rightcol {
  float: right; }

.clearfix::after {
  content: "";
  display: block;
  clear: both; }

a {
  text-decoration: none;
  outline: none;
  color: #222; }

a:hover {
  color: #FDD735;
  text-decoration: underline; }

.title, .single h2 {
  background: #FFEB3B;
  padding: 2% 3%;
  border-left: 20px solid #FDD735;
  margin-bottom: 5%; }

.title2, .single h3 {
  border-bottom: 2px solid #FFEB3B;
  margin: 2% 3%;
  padding: 2% 0; }
  
a img:hover{
  opacity: .8;
}

h1 {
  font-size: 31px;
  font-size: 3.1rem;
  margin: 20px; }
  
h2,h3,h4{
  letter-spacing: .1rem;
}

/*header
=====================================================*/
header {
  text-align: center;
  width: 100%;
  background: #FDD735; }
  header #header_logo {
    width: 100%; }
  header .container #logo img {
    width: 30%; }
  @media (max-width: 549px) {
    header .container .navi {
      width: 40px;
      float: right; }
    header .container .button-menu {
      font-size: 14px;
      font-size: 1.4rem;
      display: block;
      line-height: 0;
      width: 14px;
      height: 14px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #222;
      border-radius: 50%;
      position: absolute;
      top: -45px;
      right: 12%;
      color: #222;
      background: #fff;
      z-index: 99999; }
      header .container .button-menu:hover {
        background-color: #fff;
        color: #FDD735;
        border-color: #FDD735; }
      header .container .sp_navi_list li {
        list-style: none;
        margin: 0;
        padding: 0; }
        header .container .sp_navi_list li a {
          display: block;
          padding: 10px 8px;
          border-bottom: 1px solid #ccc;
          font-size: 14px;
          font-size: 1.4rem;
          text-decoration: none;
          color: #222; }
        header .container .sp_navi_list li a:hover{
          background: #FFEF59;
        }
    header .container .pc_navi {
      display: none; } }
  @media (min-width: 550px) {
    header .container .sp_navi {
      display: none; }
    header .container .pc_navi {
      background-color: #FDD735;
      height: 39px; }
    header .container .pc_navi_li {
      width: 70%;
      margin: 0 auto;
      padding: 0; }
      header .container .pc_navi_li li {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        width: 25%; }
        header .container .pc_navi_li li a {
          color: #222;
          font-weight: bold;
          font-size: 14px;
          font-size: 1.4rem;
          display: block;
          padding: 9px 0;
          width: 100%; }
          header .container .pc_navi_li li a:hover {
            background: #FFEF59; } }

/*contents
========================================================*/
#contents {
  background: #fafafa;
  padding-top: 30px;
}


/*main
========================================================*/
#main {
  margin-bottom: 10%; }
  #main .btn-box {
    text-align: center;
    margin-bottom: 10%; }
  #main .btn2 {
    display: inline-block;
    width: 50%;
    line-height: 3;
    background: #FDD735;
    color: #222;
    margin: 0 auto;
    border-radius: 3px;
    text-align: center; }
  #main .btn2:hover {
    background: #FFEB3B;
    color: #222; }
  #main .box {
    margin: 0 0 2% }
    
    @media(min-width: 550px){
      #main .box{
        margin: 0 4% 2%;
      }
    }
    #main .box h2 {
      font-size: 28px;
      font-size: 2.8rem; }
    #main .box p {
      padding: 0 3%; }
    #main .box h3 {
      font-size: 20px;
      font-size: 2rem; }
      
/*追加*/
  #main .box {
    position: relative;
    background: #fff; }
    #main .box a:hover {
      color: #555; }
    #main .box .box-category {
      position: absolute;
      top: 0px;
      left: 0px;
      background: #FDD735;
      font-size: 12px;
      font-size: 1.2rem;
      padding: 1px 5px; }
    #main .box .box-text {
      padding: 5px 5px 20px; }
    #main .box .box-title {
      font-size: 16px;
      font-size: 1.6rem; }
    #main .box .box-date {
      float: right;
      font-size: 10px;
      font-size: 1rem;
      color: #666;
      display: inline-block;
      padding-bottom: 10px; }
  @media (max-width: 550px) {
    #main .box {
      width: 100%; } }
  #main .cssgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 0.8em;
    padding: 0 0.8em 0.8em;
    margin: 0 0 2em; }
  #main .cssgrid > div {
    overflow: auto;
    min-width: 0;
    padding: 1em; }
  @media (max-width: 1075px) {
    #main .cssgrid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

  

/*side
========================================================*/
.profile {
  width: 100%;
  margin-bottom: 5%;
  background: #fff; }
  .profile h3 {
    text-align: center; }
  .profile p{
    padding: 5%;
  }
  .pro-img{
    width: 90%;
    margin: 5%;
  }

.btn {
  display: inline-block;
  width: 90%;
  line-height: 3;
  background: #FDD735;
  color: #222;
  border-radius: 3px;
  text-align: center;
  margin: 0 5% 10%;}

.btn:hover {
  background: #FFEB3B;
  color: #222; }

#search {
  width: 100%;
  background: #fff;
  margin-bottom: 10%; }

#search form {
  width: 90%;
  margin: 10px 5%;
  padding: 5px 0;
  display: inline-block;
  border: 1px solid #222; }
  #search form input {
    width: 70%;
    display: inline-block;
    padding: 1% 5%;
    border: none;
    margin: 0; }
  #search form button {
    width: 20%;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none; }

#archive {
  width: 100%;
  margin: 0 0 10%;
  padding-bottom: 5%;
  background: #fff; }
  #archive h3 {
    font-size: 15px;
    font-size: 1.5rem;
    padding: 10% 5% 5%;
    margin: 0 5% 5%;
    border-bottom: 1px solid #FDD735}
  #archive .archive-box {
    margin-bottom: 5%; }
    #archive .archive-box p {
      font-size: 14px;
      font-size: 1.4rem;
      padding: 0 5%;}

#archive2 {
  width: 100%;
  margin: 0 0 10%;
  background: #fff; }
  #archive2 h3 {
    font-size: 15px;
    font-size: 1.5rem;
    padding: 10% 5% 5%;
    margin: 0 5% 5%;
    border-bottom: 1px solid #FDD735}
  #archive2 ul {
    padding: 0;
    margin: 0; }
    #archive2 ul li {
      list-style: none;
      padding: 5%}
      

.thumbnail-img img{
  width: 100%;
  height: auto;
}

.thumbnail-img img:hover{
  opacity: .8; 
}

/*footer
========================================================*/
#pageTop {
  background: #fafafa;
  padding-bottom: 20px; }
  #pageTop i {
    margin-right: 10px; }

footer {
  padding: 5%;
  background: #FDD735; }
  footer .footer-nav {
    padding: 0;
    margin: 0; }
    footer .footer-nav ul {
      padding: 0;
      margin: 0 auto; }
      footer .footer-nav ul li {
        list-style: none;
        display: inline-block; }
        footer .footer-nav ul li a {
          padding: 10px;
          margin: 20px;}
          footer .footer-nav ul li a:hover {
            color: #fff; }
  footer #copyright img {
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-top: 5%; }

/*about html
========================================================*/
#about #main .profile-img {
  width: 50%; }
#about #main .align-left {
  text-align: left; }
#about #main .products .product-box {
  width: 30%;
  box-sizing: border-box;
  float: left;
  margin: 1%;
  border: 8px solid #fff; }
@media (max-width: 550px) {
  #about #main .products .product-box {
    float: none;
    width: 100%;
    padding: 0 3%; } }

/*contact html
========================================================*/
.contact {
  width: 70%;
  height: 600px;
  background: #fafafa;
  margin: 20px auto 50px; }

/*blogindex html
========================================================*/
.old-new-btn {
  padding: 3%;
  margin-bottom: 5%; }

.btn3 {
  background: #fcee83;
  width: 30%;
  font-size: 12px;
  line-height: 5rem;
  border-radius: 5px; }
  .btn3:hover {
    opacity: .8;
    color: #222; }

/*product html
========================================================*/
.product-info {
  padding: 3%; }

.product-img {
  width: 50%;
  text-align: center;
  float: left; }
  .product-img #main_img {
    width: 100%; }
  .product-img #sub_img li {
    width: 30%;
    display: inline-block;
    margin-top: 10px;
    margin-left: 3%; }
    .product-img #sub_img li:first-child {
      margin-left: 0; }
    .product-img #sub_img li img {
      cursor: pointer; }

.product-text {
  width: 50%;
  float: left; }


/*top page
========================================================*/

.btn4{
  border: 1px solid #222;
  padding: 10px;
  margin-top: 20px;
  display: inline-block;
}

.btn4:hover{
  border: 1px solid #FFEB3B;
}



/*# sourceMappingURL=style.css.map */



/*header navi
=====================================================*/

header {
  padding: 10px 0 10px;
}

#nav-drawer {
  position: relative;
}

#nav-drawer input[type="checkbox"]{
  display: none;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}



/*画像ホバーモーション*/
.thumbnail-img, .box, .blog-single-img, .profile{
  overflow: hidden;
}

#contents img{
  transition-duration: .5s;
}

#contents img:hover {
  transform: scale(1.05);
  transition-duration: .5s;
}

.main-page-boxs .box:hover{
  box-shadow: 3px 3px 3px rgba(220, 220, 220, .5);
  transform: translateY( -3px );
  transition-duration: .5s;
}


/*投稿ページ最新記事ループ*/
#main .single-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 1075px) {
#main .single-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}

/*single page*/
.blog-body{
  margin: 4%;
}

.news-loop{
  font-size: 20px;
  background: #FDD735;
  padding: 2%;
  margin: 4% .8em 5%;
  letter-spacing: .1rem;
}