<@charset "UTF-8";>


    a  {
      text-decoration: none
    }
    .name {
      position: relative;
      font-size: 28px;
      font-family: 'Yusei Magic', sans-serif;
    }
    .name1 {
      color: #eaafaf;
      position: absolute;
      top: -1rem;
      left: 5rem;
    }
    .name2 {
      color: #eaafaf;
      position: absolute;
      top: 2rem;
      left: 15rem;
    }
    .btn, a.btn, button.btn {
      display: inline-block;
      transition: all 0.3s;
    }
    a.btn-malformation {
      margin-left: 8rem;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 1.5rem 4rem;
      color: #645c84;
      border-radius: 100% 80px / 80px 100%;
      background-color: #645c84;
    }
    a.btn-malformation:hover {
      color: #645c84;
      border-radius: 60% 80% / 100% 80%;
    }
    @media screen and (max-width: 1120px) {
      .name {
        font-size: 20px;
        font-weight: bold;
      }
      .name1 {
        top: 0rem;
        left: 3rem;
      }
      .name2 {
        left: 10rem;
      }
      a.btn-malformation {
        margin-left: 5rem;
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 1.5rem 3rem;
      }
    }
    @media screen and (max-width: 960px) {
      .name {
        font-size: 16px;
        font-weight: bold;
      }
      .name1 {
        top: 0rem;
        left: 2.5rem;
      }
      .name2 {
        left: 8rem;
      }
      a.btn-malformation {
        margin-left: 4rem;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 1.3rem 2.5rem;
      }
    }
    @media screen and (max-width: 800px) {
      .name {
        font-size: 14px;
        font-weight: bold;
      }
      .name1 {
        top: -0.5rem;
        left: 2.5rem;
      }
      .name2 {
        top: 1rem;
        left: 7.5rem;
      }
      a.btn-malformation {
        margin-top: 1px;
        margin-bottom: 1px;
        padding: 1rem 2rem;
      }
    }
    @media screen and (max-width: 640px) {
      .name {
        font-size: 12px;
        font-weight: bold;
      }
      .name1 {
        top: -0.5rem;
        left: 1.7rem;
      }
      .name2 {
        top: 1rem;
        left: 6rem;
      }
      a.btn-malformation {
        margin-top: 0rem;
        margin-left: 3rem;
        margin-bottom: -0.5rem;
        padding: 0.9rem 1.7rem;
      }
    }
    @media screen and (max-width: 480px) {
      .name {
        font-size: 10px;
        font-weight: bold;
      }
      .name1 {
        top: -0.5rem;
        left: 1.2rem;
      }
      .name2 {
        top: 0.7rem;
        left: 5rem;
      }
      a.btn-malformation {
        margin-top: -0.2rem;
        margin-left: 2.3rem;
        margin-bottom: -0.5rem;
        padding: 0.8rem 1.5rem;
      }
    }
    main {
      font-family: sans-serif;
    }
    .center {
      text-align: center;
    }
    h1 {
      font-size: 36px;
      position:  relative;        /* 位置調整 */
      display:  inline-block;     /* インラインブロックにする */
      padding-top: 40px;          /* 余白指定 */
      padding-left: 40px;         /* 余白指定 */
      
    }
    h1:before {
      content:  '';               /* 空白の要素を作る */
      background-color: #F9F9F9;  /* 背景色指定 */
      display:  block;            /* ブロック要素にする */
      position:  absolute;        /* 位置調整 */
      left:  0;                   /* 位置調整 */
      height: 90px;               /* 高さ指定 */
      width: 90px;                /* 幅指定 */
      border-radius:  50%;        /* 丸くする */
      top: 0;                     /* 位置調整 */
      z-index:  -1;               /* 重なり調整 */
    }
    h2 {
      font-size: 3em;
    }
    @media screen and (max-width: 960px) {
      h1 {
        font-size: 30px;
      }
      h1:before {
        height: 75px;
        width: 75px;
        left: 1rem;
        top: 0rem;
      }
      h2 {
        font-size: 2.5em;
      }
    }
    @media screen and (max-width: 800px) {
      h1:before {
        top: 0rem;
      }
      h2 {
        font-size: 2em;
      }
    }
    @media screen and (max-width: 640px) {
      h1 {
        font-size: 24px;
      }
      h1:before {
        height: 60px;
        width: 60px;
        top: 0.5rem;
      }
      h2 {
        font-size: 1.5em;
      }
    }
    @media screen and (max-width: 480px) {
      h1 {
        font-size: 21px;
      }
      h2 {
        font-size: 2em;
      }
    }
    h3 {
      text-align: center;
    }
    h3 span {
      margin: 50px 0;
      font-size: 1.3rem;
      position: relative;
      display: inline-block;
      padding-bottom:0.5em;
      border-bottom: 1px solid #000;
    }
    h3 span::before,
    h3 span::after {
      position: absolute;
      top: 100%;
      left:50%;
      transform:translateX(-50%);
      content: '';
      border: 10px solid transparent;
    }
    h3 span::before {
      border-top: 10px solid #000;
    }
    h3 span::after {
      margin-top: -1px;
      border-top: 10px solid #427996;
    }
    .f9 span::after {
      border-top: 10px solid #F9F9F9;
    }
    .f92 span::after {
      border-top: 10px solid #F9F9F9;
    }
    @media screen and (max-width: 1050px) {
      h3 span::after {
        border-top: 10px solid #F9F9F9;
      }
    }
    @media screen and (max-width: 960px) {
      h3 span::after {
        border-top: 10px solid #427996;
      }
    }
    @media screen and (max-width: 920px) {
      h3 span::after {
        border-top: 10px solid #F9F9F9;
      }
    }
    @media screen and (max-width: 480px) {
      h3 span {
        font-size: 90%;
      }
    }
    .profile {
      margin-left: 10%;
      padding-top: 50px;
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    .displaytable {
      display: table-cell;
      vertical-align: middle;
    }
    .profile table {
      padding: 0 0 15px 10%;
      font-weight: bold;
    }
    .profile table th{
      position: relative;
      text-align: left;
      padding: 15px 60px 15px 0;
    }
    .profile table th:after{
      content: "";
      width: 40px;
      height: 2px;
      background-color: #bdbdbd;
      position: absolute;
      top:calc(50% - 1px);
      right:1px;
    }
    .profile table td{
      text-align: left;
      padding-left: 50px;
    }
    .profile table ,.photo {
      display: inline;
    }
    .wrap p img {
      width: 17rem;
    }
    .wrap ul {
      padding-left: 0;
      display:block;
      overflow:hidden;
      clear:both;
    }
    .wrap li {
      display:block;
      float:left;
    }
    .wrap li img {
      padding: 0;
      cursor:pointer;
      width: 5rem;
      height: auto;
    }
    @media screen and (max-width: 960px) {
      .displaytable {
        display: block;
        margin-top: 50px;
        margin-bottom: 100px;
        margin-left: 10%;
      }
      .wrap p img {
        margin-top: -50px;
        margin-left: 25%;
        width: 30%;
      }
      .wrap ul {
        margin-left: 27%;
      }
      .profile {
        display: flex;
        flex-direction: column-reverse;
      }
    }
    @media screen and (max-width: 800px) {
      .wrap p img {
        width: 35%;
        margin-left: 23%;
      }
      .wrap ul {
        margin-left: 25%;
      }
      .profile {
        margin-left: 10%;
      }
      .profile table {
        margin-left: -5%;
      }
    }
    @media screen and (max-width: 640px) {
      .wrap p img {
        width: 40%;
        margin-left: 18%;
      }
      .wrap ul {
        margin-left: 25%;
      }
      .profile {
        margin-left: 12%;
      }
      .profile table {
        margin-left: -10%;
        font-size: 90%;
      }
      .profile table th{
        padding: 10px 60px 10px 0;
      }
      .profile table td{
        padding-left: 35px;
      }
    }
    @media screen and (max-width: 480px) {
      .wrap p img {
        width: 45%;
        margin-left: 22%;
      }
      .wrap ul {
        margin-left: 25%;
      }
      .profile {
        margin-left: 6%;
      }
      .profile table {
        font-size: 80%;
      }
      .profile table th{
        padding: 10px 50px 10px 0;
      }
      .profile table td{
        padding-left: 25px;
      }
    }
    .voice {
      list-style-type: none;
      margin-left: 10%;
    }
    .voice li {
      float: left;
      width: 33%;
    }
    @media screen and (max-width: 1440px) {
      .voice li {
        width: 50%;
      }
      .voice {
        margin-left: 15%;
      }
    }
    @media screen and (max-width: 1120px) {
      .voice {
        margin-left: 12%;
      }
    }
    @media screen and (max-width: 1040px) {
      .voice {
        margin-left: 8%;
      }
    }
    @media screen and (max-width: 960px) {
      .voice {
        margin-left: 30%;
      }
      .voice li {
        width: 100%;
      }
    }
    @media screen and (max-width: 800px) {
      .voice {
        margin-left: 25%;
      }
    }
    @media screen and (max-width: 720px) {
      .voice {
        margin-left: 20%;
      }
    }
    @media screen and (max-width: 640px) {
      .voice {
        margin-left: 18%;
      }
    }
    @media screen and (max-width: 580px) {
      .voice {
        margin-left: 10%;
      }
    }
    @media screen and (max-width: 480px) {
      .voice {
        margin-left: 5%;
      }
    }
    .apear {
      clear: both;
      margin: 0 auto;
     
    }
    .apear table {
      width: 60%;
      text-align: left;
      margin: 0 auto;
    }
    @media screen and (max-width: 960px) {
      .apear table {
        width: 70%;
      }
    }
    @media screen and (max-width: 640px) {
      .apear p ,.apear table th ,.apear table td {
        display: block;
        text-align: center;
      }
    }
    @media screen and (max-width: 480px) {
      .apear table {
        font-size: 90%;
      }
    }
    .contact {
      display: none;
      text-align: right;
    }
    .last {
      padding-bottom: 200px;
    }
    /***追従するトップへ戻るボタン***/
    #page-top {
      position: fixed;
      right: 5px;
      bottom: 20px;
      height: 50px;
      text-decoration: none;
      font-weight: bold;
      transform: rotate(90deg);
      line-height:2rem;
      color: #eaafaf;
      padding: 0 0 0 35px;
      border-top: solid 2px;
    }
    #page-top::before {
      content: "";
      display: block;
      position: absolute;
      top: -1px;
      left: 0px;
      width: 15px;
      border-top: solid 2px;
      transform: rotate(35deg);
      transform-origin: left top;
    }
    /***トップへ戻るボタンここまで***/
    footer {
      font-size: 90%;
      width: 100%;
      height: 60px;  
      background: #645C84;
      text-align: center
    }
    footer ul {
      padding-left: 0;
      padding-top: 15px;
      margin-bottom: 0;
    }
    footer ul li {
      display: inline;
    }
    footer ul li a {
      color: #eaafaf;
      text-decoration: none;
    }
    footer p {
      margin-left: -1rem;
      margin-top: 0;
      color: #eaafaf;
    }
    @media screen and (max-width: 960px) {
      footer {
        height: 50px;
        font-size: 80%;
      }
      footer ul {
        padding-top: 10px;
      }
    }
    @media screen and (max-width: 640px) {
      footer {
        font-size: 70%;
      }
    }
    @media screen and (max-width: 480px) {
      footer {
        font-size: 60%;
      }
    }