@charset "UTF-8";
@import url("../css/base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*メイン*/
#m_top {
  margin: 3em auto 0; }
  #m_top h1 {
    font-size: 225%;
    color: #1f57aa;
    text-align: center;
    width: 100%;
    border-top: 3px solid #1f57aa;
    border-bottom: 3px solid #1f57aa; }
    #m_top h1 i {
      display: block;
      font-size: 55%;
      font-style: normal; }
  #m_top p {
    width: 100%;
    text-align: center;
    color: #1c91cc;
    margin: 2em 0 0;
    font-size: 150%;
    font-weight: bold; }
    #m_top p i {
      display: block;
      font-size: 75%; }
  #m_top ul {
    width: 60%;
    margin: 2em auto 4em;
    display: flex;
    justify-content: space-between; }
    #m_top ul li {
      width: 48%; }
      #m_top ul li a {
        background-color: #1c91cc;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 1em 2%;
        display: block;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
        #m_top ul li a:hover, #m_top ul li a:active {
          background-color: #2BA4E1;
          text-decoration: none; }
  #m_top #about01 {
    width: 90%;
    margin: 1em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #m_top #about01 figure {
      width: 36%; }
    #m_top #about01 dl {
      width: 60%; }
      #m_top #about01 dl dt {
        font-size: 150%;
        color: #1c91cc;
        font-weight: bold;
        margin: 0 0 0.25em; }
  #m_top #about02 {
    width: 90%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between; }
    #m_top #about02 figure {
      width: 36%; }
    #m_top #about02 dl {
      width: 60%; }
      #m_top #about02 dl dt {
        font-size: 150%;
        color: #1c91cc;
        font-weight: bold;
        margin: 0 0 0.25em; }
  #m_top h3 {
    font-size: 150%;
    color: #1c91cc;
    font-weight: bold;
    text-align: center;
    margin: 3em 0 0; }
  #m_top table {
    width: 90%;
    margin: 1em auto 0;
    border: 1px solid #000; }
    #m_top table th {
      width: 18%;
      padding: 1em 1%;
      vertical-align: middle; }
    #m_top table th + th {
      border-left: 1px solid #000; }
    #m_top table td {
      width: 18%;
      padding: 1em 1%;
      text-align: center;
      vertical-align: middle; }
      #m_top table td a {
        color: #1f57aa;
        text-decoration: none;
        display: block; }
        #m_top table td a:hover, #m_top table td a:active {
          color: #1f57aa;
          text-decoration: underline; }
    #m_top table td + td {
      border-left: 1px solid #000; }
    #m_top table .b_gray {
      background-color: #eeeeee; }

#question {
  margin: 3em auto 0; }
  #question h2 {
    font-size: 225%;
    color: #1f57aa;
    text-align: center;
    width: 100%;
    border-top: 3px solid #1f57aa;
    border-bottom: 3px solid #1f57aa; }
    #question h2 i {
      display: block;
      font-size: 55%;
      font-style: normal; }
  #question #q_top {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2em auto 0; }
    #question #q_top li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #question #q_top li:nth-child(1) {
        width: 58%; }
        #question #q_top li:nth-child(1) figure {
          width: 38%; }
        #question #q_top li:nth-child(1) dl {
          width: 58%; }
          #question #q_top li:nth-child(1) dl dt {
            font-weight: bold; }
          #question #q_top li:nth-child(1) dl dd {
            margin: 0 0 0.5em; }
      #question #q_top li:nth-child(2) {
        width: 38%; }
        #question #q_top li:nth-child(2) figure {
          width: 26%; }
        #question #q_top li:nth-child(2) dl {
          width: 70%; }
          #question #q_top li:nth-child(2) dl dt {
            font-weight: bold; }
          #question #q_top li:nth-child(2) dl dd {
            margin: 0 0 0.5em; }
  #question .acd-check {
    display: none; }
  #question .acd-label {
    width: 84%;
    background: #0068b7;
    color: #1f57aa;
    display: block;
    margin: 3em auto 0;
    position: relative;
    background-image: url(../img/skills/question.png);
    background-size: 40px auto;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-color: #eeeeee;
    padding: 1em 0 1em 6%;
    font-weight: bold;
    border: 1px solid #a0a0a0; }
    #question .acd-label span {
      font-size: 87.5%;
      display: block;
      font-weight: normal; }
  #question .acd-label:after {
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    height: 52px;
    padding: 1.5em 20px;
    position: absolute;
    right: 0;
    top: 0px; }
  #question .acd-content {
    width: 86%;
    margin: 0 auto;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 2%;
    transition: .5s;
    visibility: hidden; }
    #question .acd-content a {
      color: #1f57aa;
      text-decoration: none; }
      #question .acd-content a:hover, #question .acd-content a:active {
        color: #1f57aa;
        text-decoration: underline; }
  #question .acd-check:checked + .acd-label:after {
    content: '\f068'; }
  #question .acd-check:checked + .acd-label + .acd-content {
    height: 6em;
    opacity: 1;
    padding: 1em 2%;
    visibility: visible; }

#for_skills {
  margin: 4em auto 0; }
  #for_skills h2 {
    font-size: 225%;
    color: #1f57aa;
    text-align: center;
    width: 100%;
    border-top: 3px solid #1f57aa;
    border-bottom: 3px solid #1f57aa; }
    #for_skills h2 i {
      display: block;
      font-size: 55%;
      font-style: normal; }
  #for_skills ul {
    width: 100%;
    margin: 3em 0 0; }
    #for_skills ul li {
      width: 70%;
      border: 1px solid #f0f0f0;
      box-shadow: 0px 0px 5px 3px #f0f0f0;
      border-radius: 15px;
      padding: 1.5em 2%;
      margin: 5.5em auto 0;
      box-sizing: border-box;
      font-size: 112%;
      font-weight: bold;
      position: relative; }
      #for_skills ul li:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -4em;
        left: 0;
        width: 0px;
        height: 0px;
        margin: auto;
        border-style: solid;
        border-color: #1c91cc transparent transparent transparent;
        border-width: 40px 30px 0 30px; }
      #for_skills ul li:first-child {
        margin: 0 auto; }
      #for_skills ul li:last-child:after {
        display: none; }
      #for_skills ul li dl {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: top; }
        #for_skills ul li dl dt {
          width: 28%; }
        #for_skills ul li dl dd {
          width: 68%; }
          #for_skills ul li dl dd span {
            background-color: #418fde;
            color: #fff;
            font-size: 80%;
            display: block;
            width: 70px;
            padding: 0.1em 0;
            margin: 0 0 0.25em;
            text-align: center; }
          #for_skills ul li dl dd i {
            display: block;
            font-size: 75%;
            font-weight: normal;
            font-style: normal; }
          #for_skills ul li dl dd img {
            width: 350px;
            margin: 1em 0 0; }
  #for_skills #entry_end {
    width: 60%;
    margin: 3em auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 112%;
    font-weight: bold; }
    #for_skills #entry_end p:nth-child(1) {
      width: 58%; }
      #for_skills #entry_end p:nth-child(1) i {
        display: block;
        font-size: 55%;
        font-style: normal; }
      #for_skills #entry_end p:nth-child(1) a {
        display: block;
        font-size: 125%;
        margin: 1.5em auto 0;
        padding: 0.25em 0;
        border-radius: 8px;
        background-color: #ea962e;
        color: #fff;
        text-align: center;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
        #for_skills #entry_end p:nth-child(1) a:hover, #for_skills #entry_end p:nth-child(1) a:active {
          background-color: #EDA852;
          text-decoration: none;
          color: #fff; }
    #for_skills #entry_end p:nth-child(2) {
      width: 38%; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*メイン*/
  #m_top, #question, #for_skills {
    width: 1280px; } }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1299px) {
  /*メイン*/
  #m_top, #question, #for_skills {
    width: 96%; } }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*メイン*/
  #question #q_top li:nth-child(1) {
    width: 48%; }
    #question #q_top li:nth-child(1) figure {
      width: 38%; }
    #question #q_top li:nth-child(1) dl {
      width: 58%; }
  #question #q_top li:nth-child(2) {
    width: 48%; }
    #question #q_top li:nth-child(2) figure {
      width: 20%; }
    #question #q_top li:nth-child(2) dl {
      width: 76%; }
  #question .acd-check {
    display: none; }
  #question .acd-label {
    width: 82%;
    padding: 1em 0 1em 8%; }
  #question .acd-label:after {
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    height: 52px;
    padding: 1.5em 20px;
    position: absolute;
    right: 0;
    top: 0px; } }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*メイン*/
  #m_top {
    margin: 2em auto 0; }
    #m_top ul {
      flex-direction: column; }
      #m_top ul li {
        width: 80%;
        margin: 0 auto;
        position: static; }
        #m_top ul li:nth-child(n+2) {
          margin: 1em auto 0; }
    #m_top #about01 {
      flex-direction: column; }
      #m_top #about01 figure {
        width: 100%;
        margin: 0 0 1em; }
      #m_top #about01 dl {
        width: 100%; }
    #m_top #about02 {
      margin: 3em auto 0;
      width: 90%;
      flex-direction: column; }
      #m_top #about02 figure {
        width: 100%;
        margin: 0 0 1em; }
      #m_top #about02 dl {
        width: 100%; }
    #m_top table {
      border-top: none;
      border-bottom: none; }
    #m_top .tbl-r05 {
      width: 100%; }
    #m_top .tbl-r05 .thead {
      display: none; }
    #m_top .tbl-r05 tr {
      width: 98%; }
    #m_top .tbl-r05 td {
      display: block;
      text-align: right;
      width: 98%; }
    #m_top .tbl-r05 td:first-child {
      background: #eee;
      font-weight: bold;
      text-align: center; }
    #m_top .tbl-r05 td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      margin-right: 10px; }
    #m_top .tbl-r05 td + td {
      border-left: none; }
    #m_top .b_gray {
      background-color: #fff !important; }

  #question #q_top {
    flex-direction: column; }
    #question #q_top li {
      flex-direction: column; }
      #question #q_top li:nth-child(1) {
        width: 100%; }
        #question #q_top li:nth-child(1) figure {
          width: 50%;
          margin: 0 auto 1em; }
        #question #q_top li:nth-child(1) dl {
          width: 100%;
          text-align: center; }
      #question #q_top li:nth-child(2) {
        width: 100%;
        margin: 2em 0 0; }
        #question #q_top li:nth-child(2) figure {
          width: 30%;
          margin: 0 auto 1em; }
        #question #q_top li:nth-child(2) dl {
          width: 100%;
          text-align: center; }
  #question .acd-check {
    display: none; }
  #question .acd-label {
    width: 68%;
    padding: 1em 10% 1em 12%; }
  #question .acd-label:after {
    height: 52px;
    padding: 1.5em 20px;
    position: absolute;
    right: 0;
    top: 0.5em; }
  #question .acd-check:checked + .acd-label + .acd-content {
    height: 14em; }

  #for_skills {
    margin: 3em auto 0; }
    #for_skills ul {
      width: 100%;
      margin: 2em 0 0; }
      #for_skills ul li {
        width: 80%;
        margin: 3.5em auto 0; }
        #for_skills ul li:after {
          content: "";
          position: absolute;
          right: 0;
          bottom: -3em;
          left: 0;
          width: 0px;
          height: 0px;
          margin: auto;
          border-style: solid;
          border-color: #1c91cc transparent transparent transparent;
          border-width: 25px 20px 0 20px; }
        #for_skills ul li dl dd span {
          width: 60px;
          margin: 1em 0 0.25em; }
    #for_skills #entry_end {
      width: 80%;
      margin: 2em auto 0; } }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*メイン*/
  #m_top h1 {
    width: 100%;
    font-size: 180%;
    padding: 0; }
    #m_top h1 rt, #m_top h1 rp {
      font-size: 50%; }
  #m_top ul {
    flex-direction: column; }
    #m_top ul li {
      width: 100%;
      margin: 0; }

  #question h2 {
    font-size: 180%; }
  #question .acd-check {
    display: none; }
  #question .acd-label {
    width: 60%;
    background: #0068b7;
    color: #1f57aa;
    display: block;
    margin: 3em auto 0;
    position: relative;
    background-image: url(../img/skills/question.png);
    background-size: 34px auto;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-color: #eeeeee;
    padding: 1em 14% 1em 16%;
    font-weight: bold;
    border: 1px solid #a0a0a0; }
  #question .acd-label:after {
    height: 42px;
    padding: 1.5em 20px;
    position: absolute;
    right: 0;
    top: 44%;
    transform: translateY(-44%);
    -webkit-transform: translateY(-44%);
    -ms-transform: translateY(-44%); }
  #question .acd-check:checked + .acd-label + .acd-content {
    height: 14em; }

  #for_skills {
    margin: 3em auto 0; }
    #for_skills h2 {
      width: 100%;
      font-size: 180%;
      padding: 0; }
      #for_skills h2 rt, #for_skills h2 rp {
        font-size: 50%; }
    #for_skills ul {
      width: 100%;
      margin: 2em 0 0; }
      #for_skills ul li {
        width: 100%; }
        #for_skills ul li dl {
          flex-direction: column; }
          #for_skills ul li dl dt {
            width: 100%; }
          #for_skills ul li dl dd {
            width: 100%; }
    #for_skills #entry_end {
      width: 100%;
      margin: 2em 0 0;
      flex-direction: column-reverse; }
      #for_skills #entry_end p:nth-child(1) {
        width: 80%;
        margin: 0 auto; }
        #for_skills #entry_end p:nth-child(1) img {
          width: 100%;
          margin: 1em 0 0; }
      #for_skills #entry_end p:nth-child(2) {
        width: 100%;
        margin: 0 0 1em; } }