table {
    display: table;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    text-indent: initial;
}

tr {
    display: table-row;
    border: 1px solid #ccc;
}

th {
    width: 20%;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: inherit;
    text-align: -internal-center;
    font-size: 0.9em;
    font-weight: 700;
    background: #FFFAF0;
    padding: 14px;
    letter-spacing: 0;
    line-height: 1.2rem;
}

td {
    width: 80%;
    border: 1px solid #ccc;
    vertical-align: top;
    text-align: left;
    padding: 14px;
    font-size: 0.9em;
    letter-spacing: 0;
    line-height: 1.2rem;
}

/* 2カラムコンテンツにする */

#container {
    margin: 32px 5%;
    display: flex;
    align-items: center;
}

#main {
    width: calc( 100% - 250px );
    height: 250px;
    display: inherit;
    align-items: center;
    text-align: left;
}

#side {
    width: 250px;
    height: 250px;
}

@media screen and (max-width: 840px) {
  #container {
    margin: 5% 10%;
  }

  #main {
    width: calc( 100% - 200px );
    height: auto;
  }

  .gradate-image-round {
    width: 200px;
    height: 200px;
  }

  #side {
    width: 200px;
    height: 200px;
  }
}


@media screen and (max-width: 700px) {
  #container {
    margin: 5% 10%;
  }

    #main {
    width: calc( 100% - 125px );
    height: auto;
  }

  .gradate-image-round {
    width: 125px;
    height: 125px;
  }

  #side {
    width: 125px;
    height: 125px;
  }
}

@media screen and (max-width: 500px) {
  #container {
    margin: 5%;
  }

  #main {
    width: calc( 100% - 100px );
    height: auto;
  }

  .gradate-image-round {
    width: 100px;
    height: 100px;
  }

  #side {
    width: 100px;
    height: 100px;
  }
}

@media screen and (max-width: 350px) {
  #container {
    margin: 5%;
  }

  #main {
    width: calc( 100% - 75px );
    height: auto;
  }

  .gradate-image-round {
    width: 75px;
    height: 75px;
  }

  #side {
    width: 75px;
    height: 75px;
  }
}


/* プロフィール画像 */

.gradate-image-round {
    background-size: cover;
    background-repeat: no-repeat;
}
.gradate-image-round .mask {
    background-image: radial-gradient(ellipse , transparent 60%, white 72% );
    width: 100%;
    height: 100%;
}

.intro {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 120%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
}

.intro strong {
    font-size: 3rem;
    font-weight: 700;
    line-height: 150%;
}

.intro i {
    display: inherit;
    text-align: right;
    font-size: 1.8rem;
    font-weight: lighter !important;
    font-family: Georgia, serif;
}

.intro_desc {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    white-space: pre-line;
}

@media screen and (max-width: 840px) {
  .intro {
    font-size: 1rem;
  }
  .intro strong {
    font-size: 2rem;
  }
  .intro i {
    font-size: 1.2rem;
  }
  .intro_desc {
    width: 90%;
  }
}

@media screen and (max-width: 400px) {
  .intro {
    font-size: 0.8rem;
  }
  .intro strong {
    font-size: 1.5rem;
  }
  .intro i {
    font-size: 1rem;
  }
}

@media screen and (max-width: 350px) {
  .intro {
    font-size: 0.75rem;
  }
  .intro strong {
    font-size: 1.25rem;
  }
  .intro i {
    font-size: 0.8rem;
  }
}