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

SP

/////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 750px) {
  #contents h1 {
    background: #0095d6;
    color: #fff;
    padding: 0.5em 0;
    font-size: 1.4em;
    font-weight: normal;
  }
  #contents #intro {
    padding: 0 0 6em;
  }
  #contents #intro .catch {
    color: #0095d6;
    font-size: 1.6em;
    font-weight: bold;
    padding: 1.5em 0;
  }
  #contents #intro .lead {
    width: 86%;
    text-align: justify;
  }
  /* =========================================================
outline
========================================================= */
  #contents #outline {}
  #contents #outline h2 {}
  #contents #outline .list {
    padding-bottom: 2.0em;
  }
  #contents #outline .list dl {
    width: 86%;
    text-align: left;
    padding-bottom: 1.5em;
    display: flex;
  }
  #contents #outline .list dl dt {
    color: #0095d6;
    width: 25%;
  }
  #contents #outline .list dl dd {
    width: 75%;
  }
  #contents #outline .list dl dd .b {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 88%;
  }
  #contents #outline .list_f {
    padding-bottom: 2.0em;
  }
  #contents #outline .list_f dl {
    width: 86%;
    text-align: left;
    padding-bottom: 1.5em;
    display: flex;
  }
  #contents #outline .list_f dl dt {
    color: #0095d6;
    width: 25%;
  }
  #contents #outline .list_f dl dd {
    width: 75%;
  }
  #contents #outline .list_f dl dd .b {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 88%;
  }
  #contents #outline .list_f ul {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 95%;
  }
  #contents #outline .list_f li {}
  #contents .more a {
    padding: 8px 0;
    width: 70%;
    border-radius: 24px;
  }
  #contents .list2 ul li {
    text-align: left;
    padding-left: 2%;
    list-style-position: outside;
    list-style-type: decimal;
  }
  #contents .list2 {
    width: 85%;
    text-align: left;
    padding-left: 2%;
  }
  /* =========================================================
character
========================================================= */
  #contents #character {
    padding-bottom: 2.5em;
  }
  #contents #character h2 {}
  #contents #character .lead {
    text-align: justify;
    width: 86%;
    font-weight: bold;
    padding-bottom: 1.5em;
  }
  /* =========================================================
other
========================================================= */
  #contents #other {
    padding-bottom: 2.5em;
  }
  #contents #other h2 {}
  #contents #other .lead {
    padding: 0 0 3em;
    width: 86%;
    text-align: justify;
  }
  #contents #other .lead_flow {
    padding: 0 0 3em;
    width: 89%;
    text-align: justify;
  }
  #contents #other section {
    width: 90%;
  }
  #contents #other section .photo {
    width: 100%;
  }
  #contents #other section .photo img {
    width: 100%;
    height: auto;
  }
  #contents #other section .wrap {
    width: 100%
  }
  #contents #other section .txt {}
  #contents #other section .more {}
  #contents #other section .more a {
    width: 200px;
    border-radius: 25px;
    padding: 0.5em 0;
  }
  #contents #other .company {
    padding: 0 0 4em;
  }
  #contents #other .company .photo {}
  #contents #other .company .photo img {}
  #contents #other .company .wrap {}
  #contents #other .company .wrap .txt {
    text-align: justify;
    padding: 1em 0 1.5em;
  }
  #contents #other .company .wrap .more {}
  #contents #other .company .wrap .more a {}
  #contents #other .member {}
  #contents #other .member .photo {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
  }
  #contents #other .member .photo img {
    width: 20%;
    height: auto;
  }
  #contents #other .member .wrap {
    width: 100%;
    padding: 1em 0;
  }
  #contents #other .member .wrap .copy {
    color: #0095d6;
    font-size: 1.8em;
    line-height: 1.4;
    font-weight: bold;
  }
  #contents #other .member .wrap .txt {
    padding: 1em 0;
  }
  #contents #other .member .wrap .more {}
  #contents #other .member .wrap .more a {}
  #contents #other .member .lead {
    clear: both;
    padding: 2em 0 0;
    width: 86%;
  }
  /* =========================================================
contact
========================================================= */
  #contents #contact {
    padding: 3em 0 7em;
  }
  #contents #contact h2 {
    font-size: 1.6em;
    color: #0095d6;
    letter-spacing: 0em;
  }
  #contents #contact .lead {
    padding: 1em 0 2em;
  }
  #contents #contact ul {
    width: 74%;
  }
  #contents #contact ul li {
    margin-bottom: 1em;
    width: 100%;
  }
  #contents #contact ul li a {}
  #contents #contact ul li a:hover {
    opacity: 0.6;
    transition: opaicty 0.2s ease;
  }
  #contents #contact ul li a img {}
}
/* ///////////////////////////////////////////////////////////////////

PC

/////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 750px) {
  #contents h1 {
    background: #0095d6;
    color: #fff;
    padding: 0.5em 0;
    font-size: 1.4em;
    font-weight: normal;
  }
  #contents h1 {
    background: #0095d6;
    color: #fff;
    padding: 0.5em 0;
    font-size: 1.4em;
    font-weight: normal;
  }
  #contents #intro {
    padding: 0 0 8em;
  }
  #contents #intro .catch {
    color: #0095d6;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 2em 0;
  }
  #contents #intro .lead {
    width: 1000px;
    text-align: left;
  }
  /* =========================================================
intro
========================================================= */
  #contents #intro {
    padding: 0 0 3em;
  }
  #contents #intro .catch {
    color: #0095d6;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 2em 0;
  }
  #contents #intro .lead_flow {
    width: 90%;
  }
  /* =========================================================
outline
========================================================= */
  #contents #outline {}
  #contents #outline h2 {}
  #contents #outline .list {}
  #contents #outline .list_f {
    width: 880px;
  }
  #contents #outline .list dl {
    width: 700px;
    text-align: left;
    line-height: 2.5;
  }
  #contents #outline .list dl:after {
    content: "";
    display: block;
    clear: both;
  }
  #contents #outline .list dl dt {
    color: #0095d6;
    float: left;
  }
  #contents #outline .list dl dd {
    float: right;
    width: 600px;
  }
  #contents #outline .list dl dd .b {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 88%;
  }
  #contents #outline .list_f dl {
    width: 890px;
    text-align: left;
    line-height: 2.5;
    margin-top: 20px;
  }
  #contents #outline .list_f dl:after {
    content: "";
    display: block;
    clear: both;
  }
  #contents #outline .list_f dl dt {
    color: #0095d6;
    float: left;
    font-weight: bold;
  }
  #contents #outline .list_f dl dd {
    float: right;
    width: 780px;
  }
  #contents #outline .list_f dl dd .b {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 95%;
  }
  #contents #outline .list_f ul {
    padding: 0.5em 1em;
    margin: 1em 0;
    background-color: #0095d6;
    color: #ffffff;
    font-size: 95%;
  }
  #contents #outline .list_f li {}
  #contents .list2 ul li {
    text-align: left;
    padding-left: 2%;
    list-style-position: outside;
    list-style-type: decimal;
  }
  #contents .list2 {
    width: 85%;
    text-align: left;
    padding-left: 10%;
  }
  /* =========================================================
character
========================================================= */
  #contents #character {}
  #contents #character h2 {}
  #contents #character .lead {
    line-height: 2.5;
  }
  /* =========================================================
other
========================================================= */
  #contents #other {}
  #contents #other h2 {}
  #contents #other .lead {
    padding: 0 0 3em;
  }
  #contents #other .lead_flow {
    padding: 0 0 3em;
  }
  #contents #other section {
    width: 88%;
  }
  #contents #other section:after {
    content: "";
    display: block;
    clear: both;
  }
  #contents #other section .photo {
    float: left;
  }
  #contents #other section .wrap {
    float: right;
  }
  #contents #other section .wrap:after {
    conetnt: "";
    display: block;
    clear: both;
  }
  #contents #other section .txt {}
  #contents #other section .more {
    float: right;
  }
  #contents #other section .more a {
    width: 200px;
    border-radius: 25px;
    padding: 0.5em 0;
  }
  #contents #other .company {
    padding: 0 0 4em;
  }
  #contents #other .company .photo {
    width: 50%;
  }
  #contents #other .company .photo img {}
  #contents #other .company .wrap {
    width: 46%;
  }
  #contents #other .company .wrap .txt {
    text-align: justify;
    padding: 0.5em 0 1em;
  }
  #contents #other .company .wrap .more {}
  #contents #other .company .wrap .more a {}
  #contents #other .member {}
  #contents #other .member .photo {}
  #contents #other .member .photo:after {
    content: "";
    display: block;
    clear: both;
  }
  #contents #other .member .photo img {
    float: left;
    padding: 0 4px 0 0;
    width: 120px;
  }
  #contents #other .member .wrap {
    width: 30%;
  }
  #contents #other .member .wrap .copy {
    text-align: left;
    color: #0095d6;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    font-weight: bold;
  }
  #contents #other .member .wrap .txt {
    text-align: left;
    padding: 1em 0;
  }
  #contents #other .member .wrap .more {}
  #contents #other .member .wrap .more a {}
  #contents #other .member .lead {
    clear: both;
    padding: 3em 0 0;
    width: 94%;
  }
  #contents .more a {
    padding: 8px 0;
    width: 300px;
    border-radius: 24px;
  }

  article {
    width: 700px;
    overflow: hidden;
    margin-bottom: 0px;
    }
  article figure {
    float: left;
  }
  article .text_content {
    float: left;
    width: 30%;
  }
  article .text_content p {
    vertical-align: middle;  
    margin-top: 2px;  
    margin-left: 5px;
    
  }    
    
  /* =========================================================
contact
========================================================= */
  #contents #contact {
    padding: 3em 0 7em;
  }
  #contents #contact h2 {
    color: #0095d6;
    letter-spacing: 0.2em;
  }
  #contents #contact .lead {
    padding: 2em 0 3.5em;
  }
  #contents #contact ul {
    width: 880px;
  }
  #contents #contact ul:after {
    content: "";
    display: block;
    clear: both;
  }
  #contents #contact ul li {
    width: 33.3%;
    float: left;
    padding: 0 0.7%;
  }
  #contents #contact ul li a {}
  #contents #contact ul li a:hover {
    opacity: 0.6;
    transition: opaicty 0.2s ease;
  }
  #contents #contact ul li a img {}
}