@charset "UTF-8";
/*CSS Document*/

html,
html * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;/*要素のwidthとheightの中に、paddingとborderが押し込まれるような形*/
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
  serif;
}

header {
  padding: 32px;
  /*background-color: rgba(245, 178, 177, 0.5);*/
}

/* header css */
.style-logo {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.style-portrait {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.style-nav > ul {
  list-style-type: none;
}

.style-nav >ul >li >a {
  text-decoration: none;
  color: #2F322A;
  text-align: center;
  display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/
  text-transform: uppercase;/*すべての文字を大文字*/
  padding: 8px;
}

/* Main top profile */
.user-img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.titlename {
  text-decoration: none;
  color: #2F322A;
  text-align: center;
  display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/
  font-size: 2rem;
  font-weight: bold;
  padding: 8px;
}

.titlebox {
  text-decoration: none;
  color: #2F322A;
  text-align: center;
  display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/
  font-size: 1rem;
  padding: 8px;
}

.pull-left {
  text-align: left;
  display: inline-flex;/*要素が横までいっぱいに広がり、縦に並んでいく*/
}

/* Main history */
.history .container {
  display: flex;
  flex-direction: column;
}

.history .container .item{
  margin-left: 5rem;
  padding-bottom: 1rem;
}

.history .container h3 {
  font-size: 1.5rem;
}

.history .container p {
  padding-left: 0.5rem;
}
/* space */
.history .smallspan {
  margin-left: 1rem;
}
/* the color of under line for titleitem */
.titleitem {
  position: relative;
  padding: 0.25em 0;
}
.titleitem:after {
  content: "";
  display: block;
  height: 4px;
  width: 30rem;
  background: -webkit-linear-gradient(to right, rgb(131, 100, 255), #b6d9f7);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}


/*Tablet View*/
@media (min-width: 768px){
  .style-nav >ul >li {
    display: inline-block;
  }

  .style-nav >ul {
    text-align: center;
  }


  /* Main top profile */
  .md-user-img{
    margin-left: auto;
    margin-right: 0;
  }

  .md-titlebox {
    padding-left: 0;
    padding-top: 5rem;
    padding-bottom: 5rem;

  }

  .col-md-half {
    width: 50%;
  }

  .col {
    float: left;
    gap: 1rem 2rem;
  }
  

  .history {
    clear:both;
  }

  .md-history {
    margin-left: auto;
    margin-right: auto;
  }

}

/*Desktop View*/
@media (min-width: 1024px){
  .style-logo {
    float: left;
  }

  .style-nav {
    float: right;
  }

  .lg-history {
    margin-left: 20rem;
    margin-right: auto;
  }
  
  .lg-titlebox {
    margin-right: auto;
  }

  .lg-topprofile{
    padding: 3rem;
  }

  .lg-user-img{
    margin-left: 20rem;
    margin-right: auto;
    display: block;
  }



}