@charset "UTF-8";
/* Scss Document */
html {
  scroll-behavior: smooth; }

#global-header {
  width: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  background: rgba(255, 255, 255, 0.93); }
  #global-header .inner {
    width: 1366px;
    height: auto;
    margin: 0 auto;
    display: flex;
    z-index: 1;
    justify-content: space-between; }
    @media screen and (max-width: 1250px) {
      #global-header .inner {
        height: 69px; } }
    @media screen and (max-width: 1100px) {
      #global-header .inner {
        font-size: 1.1em; } }
    @media screen and (max-width: 1024px) {
      #global-header .inner {
        height: 50px; } }
    #global-header .inner .logo {
      width: 35%;
      margin: 2% auto 1% 0;
      z-index: 1; }
      @media screen and (max-width: 1024px) {
        #global-header .inner .logo {
          margin: 1% auto 1% auto;
          width: 25%; } }
      @media screen and (max-width: 415px) {
        #global-header .inner .logo {
          margin: 1.5% auto 1.5% auto;
          width: 50%; } }
      #global-header .inner .logo a img {
        width: 70%;
        margin: 0 auto;
        display: block;
        height: auto;
        vertical-align: bottom; }
    #global-header .inner #global-navi {
      width: 50%;
      height: auto;
      margin: 0 0 0 auto; }
      @media screen and (max-width: 1366px) {
        #global-header .inner #global-navi {
          width: 60%;
          height: auto; } }
      #global-header .inner #global-navi ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        width: 100%; }
        #global-header .inner #global-navi ul li {
          position: relative;
          width: 100%;
          z-index: 1; }
          #global-header .inner #global-navi ul li:nth-child(5) a {
            color: #ffffff;
            height: 100%;
            background: #50C0B4;
            transition: all .5s ease;
            padding: 16px 0px; }
            #global-header .inner #global-navi ul li:nth-child(5) a:hover {
              opacity: .6;
              color: #ffffff;
              padding: 15.5px 0px; }
              @media screen and (max-width: 1250px) {
                #global-header .inner #global-navi ul li:nth-child(5) a:hover {
                  font-size: 1.2em;
                  margin-top: -2px; } }
              @media screen and (max-width: 1100px) {
                #global-header .inner #global-navi ul li:nth-child(5) a:hover {
                  font-size: 1.1em;
                  padding: 18px 0;
                  margin-top: -7px; } }
            @media screen and (max-width: 1250px) {
              #global-header .inner #global-navi ul li:nth-child(5) a {
                font-size: 1.2em;
                margin-top: -2px; } }
            @media screen and (max-width: 1100px) {
              #global-header .inner #global-navi ul li:nth-child(5) a {
                font-size: 1.1em;
                padding: 18px 0;
                margin-top: -7px; } }
          #global-header .inner #global-navi ul li:nth-child(6) a {
            background: #4B5052;
            color: #ffffff;
            padding: 13.5px 0px;
            transition: all .5s ease; }
            #global-header .inner #global-navi ul li:nth-child(6) a:hover {
              background: #4B5052;
              opacity: .6;
              color: #ffffff;
              padding: 13px 0px; }
              @media screen and (max-width: 1250px) {
                #global-header .inner #global-navi ul li:nth-child(6) a:hover {
                  font-size: 1.2em;
                  margin-top: -2px; } }
              @media screen and (max-width: 1100px) {
                #global-header .inner #global-navi ul li:nth-child(6) a:hover {
                  font-size: 1.1em;
                  padding: 15px 0;
                  margin-top: -7px; } }
            @media screen and (max-width: 1250px) {
              #global-header .inner #global-navi ul li:nth-child(6) a {
                font-size: 1.2em;
                margin-top: -2px; } }
            @media screen and (max-width: 1100px) {
              #global-header .inner #global-navi ul li:nth-child(6) a {
                font-size: 1.1em;
                padding: 15px 0;
                margin-top: -7px; } }
          #global-header .inner #global-navi ul li a {
            font-size: 1.4em;
            font-weight: bold;
            padding: 16px 0;
            width: 100%;
            display: inline-block;
            text-align: center;
            transition: all .5s ease;
            color: #50C0B4; }
            @media screen and (max-width: 1250px) {
              #global-header .inner #global-navi ul li a {
                padding: 12px 0px; } }
            @media screen and (max-width: 1100px) {
              #global-header .inner #global-navi ul li a {
                padding: 10px 0; } }
            #global-header .inner #global-navi ul li a span {
              font-size: .9em; }
            #global-header .inner #global-navi ul li a img {
              width: 20px; }
            #global-header .inner #global-navi ul li a:hover {
              background: #50C0B4;
              color: #ffffff;
              padding: 16px 0px; }
              @media screen and (max-width: 1250px) {
                #global-header .inner #global-navi ul li a:hover {
                  padding: 12px 0px; } }
              @media screen and (max-width: 1100px) {
                #global-header .inner #global-navi ul li a:hover {
                  padding: 10px 0; } }
    @media screen and (max-width: 1366px) {
      #global-header .inner {
        width: 100%;
        height: auto; } }
    @media screen and (max-width: 1024px) {
      #global-header .inner .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px; }
        #global-header .inner .logo a {
          display: inline-block; }
          #global-header .inner .logo a img {
            width: 100%;
            height: 70%;
            padding: 5% 0; }
      #global-header .inner #global-navi {
        display: none; } }
    @media screen and (max-width: 415px) {
      #global-header .inner .logo a img {
        width: 100%;
        height: auto; } }

main#container .logo h2:before {
  content: "";
  display: block;
  width: 36px;
  height: 45px;
  margin: 0 auto;
  background: url("../flow/images/logo.svg") no-repeat;
  background-size: 35px 35px; }
main#container .page-header.contact-content {
  margin-bottom: 40px; }

.page-header {
  text-align: center;
  margin: 50px auto 60px auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 60%; }
  @media screen and (max-width: 1360px) {
    .page-header {
      margin: 40px auto 20px auto;
      width: 80%;
      text-align: left; } }
  @media screen and (max-width: 415px) {
    .page-header {
      margin: 15% auto 3% auto;
      width: 90%;
      text-align: left; } }
  .page-header h2 {
    display: inline-block;
    text-align: center;
    font-size: 3.35em;
    letter-spacing: .15em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.3em;
    color: #50C0B4; }
    @media screen and (max-width: 415px) {
      .page-header h2 {
        line-height: 1.1em; } }
    .page-header h2 span {
      font-size: .5em;
      color: #333333;
      line-height: 2.5em; }
      @media screen and (max-width: 415px) {
        .page-header h2 span {
          padding: 2.5% 0; } }
  .page-header img {
    width: 50%;
    margin: 40px auto 10px auto;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2)); }
    @media screen and (max-width: 415px) {
      .page-header img {
        width: 340px; } }
  .page-header p {
    width: 50%;
    text-align: left;
    margin: 20px auto 0 auto;
    font-size: 1.4em;
    line-height: 2em; }
    @media screen and (max-width: 415px) {
      .page-header p {
        width: 80%; } }

.page-header-shiro h2 {
  color: #50C0B4;
  padding-top: 10%; }
  .page-header-shiro h2 span {
    color: #333333; }

.contact .contact_bg {
  width: 100%;
  background: url("../images/contact_bg.jpg") no-repeat;
  background-size: cover;
  margin: 80px auto 0 auto;
  padding: 80px 0; }
  @media screen and (max-width: 415px) {
    .contact .contact_bg {
      padding: 1px 0 40px 0; } }
  .contact .contact_bg .contact-bgin {
    background: url("../images/contact_bg_in.jpg") no-repeat center;
    background-size: 50% 100%; }
    @media screen and (max-width: 900px) {
      .contact .contact_bg .contact-bgin {
        background-size: 90% 100%; } }
    .contact .contact_bg .contact-bgin .contact-inner {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      margin-top: 50px; }
      .contact .contact_bg .contact-bgin .contact-inner .icon-list {
        display: flex;
        width: 300px;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between; }
        @media screen and (max-width: 415px) {
          .contact .contact_bg .contact-bgin .contact-inner .icon-list {
            width: 250px; } }
        .contact .contact_bg .contact-bgin .contact-inner .icon-list ul li {
          text-align: center;
          font-size: 1.3em;
          margin-top: 5%; }
      .contact .contact_bg .contact-bgin .contact-inner p {
        text-align: center;
        color: #333333;
        font-size: 2em;
        font-weight: bold;
        line-height: 2em; }

.btn_shiro {
  margin: 50px auto 100px auto;
  display: flex;
  justify-content: center;
  font-size: 1.8em; }
  @media screen and (max-width: 415px) {
    .btn_shiro {
      margin: 50px auto 50px auto; } }
  .btn_shiro a {
    padding: 15px 60px;
    transition: all .5s ease;
    background: #50C0B4;
    color: #ffffff;
    font-weight: bold; }
    @media screen and (max-width: 415px) {
      .btn_shiro a {
        padding: 15px 40px; } }
    .btn_shiro a:after {
      content: "\f054";
      font-family: FontAwesome;
      font-weight: 100;
      margin-left: 10px; }
    .btn_shiro a:hover {
      background: #ffffff;
      color: #50C0B4;
      border: 1px solid #50C0B4; }

.btn {
  margin: 50px auto;
  display: flex;
  justify-content: center; }
  .btn a {
    padding: 15px 60px;
    transition: all .5s ease;
    font-size: 1.4em;
    background: #50C0B4;
    color: #ffffff; }
    .btn a:after {
      content: "\f054";
      font-family: FontAwesome;
      font-weight: 100;
      margin-left: 10px; }
    .btn a:hover {
      border: 1px solid #50C0B4;
      color: #50C0B4; }

.anchor {
  padding-top: 70px;
  margin-top: -70px; }

/*---------------animation---------------*/
/*---スクロール時遅れて表示、順番に表示---*/
.fadein {
  opacity: 0;
  transition: all 1.3s; }

/*---TOP遅れて表示---*/
.post {
  opacity: 0; }

#key-visual {
  background: url("../company/images/top.jpg") center;
  background-size: cover;
  height: 100%;
  height: 400px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (max-width: 1024px) {
    #key-visual {
      height: 300px;
      position: relative; } }
  @media screen and (max-width: 415px) {
    #key-visual {
      height: 250px;
      position: relative; } }

.midashi {
  margin: 70px auto 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; }
  @media screen and (max-width: 1024px) {
    .midashi {
      width: 100%;
      height: 130px; } }
  @media screen and (max-width: 415px) {
    .midashi {
      margin: 40px auto 0px auto; } }
  .midashi h2 {
    color: #ffffff;
    font-size: 2.4em;
    letter-spacing: .3em;
    font-weight: bold; }
    .midashi h2 span {
      color: #50C0B4;
      font-size: .7em;
      font-weight: bold; }
    .midashi h2:before {
      content: "";
      display: flex;
      width: 25px;
      height: 25px;
      background: url("../images/co_left.svg") no-repeat;
      margin: 0 0 -20px -40px; }
    .midashi h2:after {
      content: "";
      display: flex;
      width: 25px;
      height: 25px;
      background: url("../images/co_right.svg") no-repeat;
      margin: 0 -40px 0 auto; }

.page-contents {
  width: 1366px;
  margin: 0 auto 80px; }
  @media screen and (max-width: 1366px) {
    .page-contents {
      width: 100%; } }

.content-inner {
  width: 50%;
  margin: 0 auto;
  margin: 0 0 15% 0;
  background: #fff; }
  @media screen and (max-width: 415px) {
    .content-inner {
      width: 100%; } }

div.page-desc {
  width: 770px;
  margin: 0 auto 80px; }
  div.page-desc p {
    font-size: 1.55em;
    letter-spacing: .2em;
    line-height: 2; }
  @media screen and (max-width: 1024px) {
    div.page-desc {
      width: 90%; } }

.content-inner {
  margin: 0 auto 20px; }
  @media screen and (max-width: 1024px) {
    .content-inner {
      width: 90%;
      margin: 0 auto 30px; } }

div.page-desc {
  width: 750px;
  margin: 0 auto 120px; }
  div.page-desc p {
    font-size: 1.55em;
    letter-spacing: .2em;
    line-height: 2; }
  @media screen and (max-width: 1024px) {
    div.page-desc {
      width: 90%; } }

.company_info {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: 0 auto; }
  .company_info .information {
    margin: 0 auto 80px auto;
    width: 100%; }
    @media screen and (max-width: 1366px) {
      .company_info .information {
        width: 100%; } }
    .company_info .information dl div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #D1D1D1; }
      .company_info .information dl div dt {
        width: 20%;
        font-size: 1.65em;
        font-weight: bold;
        margin-left: 3%; }
        @media screen and (max-width: 415px) {
          .company_info .information dl div dt {
            width: 100%; } }
      .company_info .information dl div dd {
        width: 70%;
        font-size: 1.65em;
        line-height: 2em;
        margin-left: 3%; }
        .company_info .information dl div dd .co_ta {
          border: none; }
          .company_info .information dl div dd .co_ta ul {
            width: 40%; }
            .company_info .information dl div dd .co_ta ul li {
              padding: 3%;
              border-bottom: 1px solid #D1D1D1; }
            @media screen and (max-width: 415px) {
              .company_info .information dl div dd .co_ta ul {
                width: 100%;
                text-align: center;
                margin: 0 auto; } }
          @media screen and (max-width: 415px) {
            .company_info .information dl div dd .co_ta {
              width: 100%;
              text-align: center;
              margin: 0 auto; } }
        @media screen and (max-width: 415px) {
          .company_info .information dl div dd {
            width: 100%; } }
      .company_info .information dl div:nth-child(7) {
        border-bottom: none; }
    @media screen and (max-width: 1024px) {
      .company_info .information {
        width: 90%; } }
    @media screen and (max-width: 415px) {
      .company_info .information dl div {
        display: block; }
        .company_info .information dl div dt {
          margin-bottom: 6px; } }
    @media screen and (max-width: 1024px) {
      .company_info .information {
        margin: 0 0 0px 0;
        width: 100%; } }
  @media screen and (max-width: 1024px) {
    .company_info {
      flex-direction: column;
      margin: 10% auto;
      width: 90%; } }

@media screen and (max-width: 415px) {
  .co_center {
    text-align: center;
    width: 100%; } }

.ggmap {
  width: 50%;
  display: block;
  margin: 0 auto 10% auto;
  position: relative;
  padding-bottom: 25%;
  height: 0;
  overflow: hidden; }
  @media screen and (max-width: 1024px) {
    .ggmap {
      width: 90%;
      padding-bottom: 65%;
      margin: 0 auto 20% auto; } }
  @media screen and (max-width: 415px) {
    .ggmap {
      width: 90%;
      padding-bottom: 65%; } }

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.service_wrap {
  margin: 40px auto 120px auto;
  width: 60%; }
  @media screen and (max-width: 1024px) {
    .service_wrap {
      width: 80%; } }
  @media screen and (max-width: 415px) {
    .service_wrap {
      width: 90%;
      margin: 40px auto 20px auto; } }
  .service_wrap .service_box {
    background: #fff3f3;
    padding: 5%;
    width: 100%;
    margin: 0 0 0 auto; }
    .service_wrap .service_box h3 {
      font-size: 2.4em;
      color: #910000;
      font-weight: bold; }
      @media screen and (max-width: 415px) {
        .service_wrap .service_box h3 {
          font-size: 2em; } }
    .service_wrap .service_box .service_list {
      width: 100%;
      margin: 5% 0 0 0; }
      .service_wrap .service_box .service_list tr {
        padding: 3% 0;
        line-height: 2em; }
        @media screen and (max-width: 415px) {
          .service_wrap .service_box .service_list tr {
            display: flex;
            flex-direction: column; } }
        .service_wrap .service_box .service_list tr td {
          line-height: 2em;
          font-size: 1.5em; }
        .service_wrap .service_box .service_list tr .ta_right {
          padding: 2% 2% 2% 10%; }
    @media screen and (max-width: 715px) {
      .service_wrap .service_box {
        margin: 0 auto;
        width: 90%; } }
  .service_wrap .service_left {
    padding: 5%;
    width: 100%;
    margin: 0 auto 0 0; }
    .service_wrap .service_left h3 {
      font-size: 2.4em;
      color: #910000;
      font-weight: bold; }
    .service_wrap .service_left .service_list {
      width: 100%;
      margin: 5% 0 0 0; }
      .service_wrap .service_left .service_list tr {
        padding: 3% 0;
        line-height: 2em; }
        @media screen and (max-width: 415px) {
          .service_wrap .service_left .service_list tr {
            display: flex;
            flex-direction: column;
            margin-bottom: 16px; } }
        .service_wrap .service_left .service_list tr td {
          line-height: 2em; }
          @media screen and (max-width: 415px) {
            .service_wrap .service_left .service_list tr td {
              font-size: 1.6em; } }
        .service_wrap .service_left .service_list tr .ta_right {
          padding: 2% 2% 2% 10%; }
    @media screen and (max-width: 715px) {
      .service_wrap .service_left {
        margin: 0 auto;
        width: 90%; } }

td.title {
  font-weight: bold; }
  @media screen and (max-width: 415px) {
    td.title {
      font-size: 2em; } }

.message_wrap {
  display: flex;
  flex-direction: row;
  width: 60%;
  margin: 0 auto; }
  .message_wrap .message_box {
    width: 45%; }
    .message_wrap .message_box p {
      font-size: 1.5em;
      line-height: 2em;
      margin: 7%; }
      @media screen and (max-width: 415px) {
        .message_wrap .message_box p {
          font-size: 1.6em; } }
    .message_wrap .message_box img {
      width: 80%;
      display: block;
      margin: 0 0 0 auto; }
      @media screen and (max-width: 1024px) {
        .message_wrap .message_box img {
          margin: 0 auto 5% auto;
          width: 50%; } }
    @media screen and (max-width: 1024px) {
      .message_wrap .message_box {
        flex-direction: column;
        width: 100%; } }
  @media screen and (max-width: 1024px) {
    .message_wrap {
      flex-direction: column-reverse;
      width: 90%; } }

.profile_box {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center; }

.profile_namae {
  width: 80%;
  margin: 2% 0 5% 0%;
  width: 90%; }
  .profile_namae p {
    font-size: 1.4em; }
  .profile_namae h3 {
    font-size: 2.4em;
    font-weight: bold; }
    .profile_namae h3 span {
      font-size: .6em;
      font-weight: bold;
      margin-left: 2%;
      color: #910000;
      letter-spacing: 0.2em; }
  @media screen and (max-width: 1024px) {
    .profile_namae {
      width: 50%;
      margin: 2% auto 5% auto; } }
  @media screen and (max-width: 415px) {
    .profile_namae {
      width: 90%;
      margin: 2% auto 5% auto; } }

.profile_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
  margin: 40px auto 120px auto; }
  @media screen and (max-width: 415px) {
    .profile_wrap {
      margin: 40px auto 40px auto; } }
  .profile_wrap img {
    width: 70%; }
    @media screen and (max-width: 1024px) {
      .profile_wrap img {
        width: 50%;
        margin: 0 auto; } }
  @media screen and (max-width: 1366px) {
    .profile_wrap {
      width: 80%; } }
  .profile_wrap .pro_list {
    width: 50%; }
    @media screen and (max-width: 1024px) {
      .profile_wrap .pro_list {
        width: 70%;
        margin: 0 auto; } }
    @media screen and (max-width: 415px) {
      .profile_wrap .pro_list {
        width: 90%; } }
    .profile_wrap .pro_list tr {
      padding: 3% 0;
      font-size: 1.5em; }
      @media screen and (max-width: 415px) {
        .profile_wrap .pro_list tr {
          display: flex;
          flex-direction: column;
          padding: 1% 0;
          font-size: 1.6em; } }
      .profile_wrap .pro_list tr td {
        color: #838282;
        width: 30%; }
        @media screen and (max-width: 415px) {
          .profile_wrap .pro_list tr td {
            width: 100%; } }
      .profile_wrap .pro_list tr .ta_right {
        padding: 1% 2%;
        width: 100%; }
        @media screen and (max-width: 1024px) {
          .profile_wrap .pro_list tr .ta_right {
            padding: 1% 7%; } }
        @media screen and (max-width: 1024px) {
          .profile_wrap .pro_list tr .ta_right {
            padding: 1% 0%; } }
  @media screen and (max-width: 1024px) {
    .profile_wrap {
      flex-direction: column;
      width: 90%; } }

.per_wrap {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: row; }
  @media screen and (max-width: 1024px) {
    .per_wrap {
      width: 80%; } }
  .per_wrap .per_box {
    width: 50%; }
    .per_wrap .per_box img {
      width: 40%; }
    .per_wrap .per_box h3 {
      font-size: 2em;
      font-weight: bold; }
    .per_wrap .per_box .works_list {
      display: flex;
      flex-direction: row;
      width: 100%; }
      .per_wrap .per_box .works_list ul {
        margin: 4%;
        border-left: 1px solid #eee;
        width: 30%; }
        @media screen and (max-width: 1024px) {
          .per_wrap .per_box .works_list ul {
            width: 50%; } }
        .per_wrap .per_box .works_list ul li {
          font-size: 1.5em;
          line-height: 2em;
          margin-left: 25px;
          color: #838282;
          list-style: disc; }
          @media screen and (max-width: 415px) {
            .per_wrap .per_box .works_list ul li {
              font-size: 1.6em; } }
        .per_wrap .per_box .works_list ul .last-list {
          list-style: none; }
    @media screen and (max-width: 1024px) {
      .per_wrap .per_box {
        width: 90%;
        margin: 0 auto 40px auto; } }
  @media screen and (max-width: 1024px) {
    .per_wrap {
      flex-direction: column; } }

.seminer_list {
  width: 100%;
  margin: 5% 0 20% 0; }
  .seminer_list tr {
    padding: 3% 0;
    font-size: 1.5em; }
    @media screen and (max-width: 1024px) {
      .seminer_list tr {
        display: flex;
        flex-direction: column; } }
    @media screen and (max-width: 415px) {
      .seminer_list tr {
        font-size: 1.6em;
        line-height: 2em; } }
    .seminer_list tr td {
      color: #838282; }
    .seminer_list tr .ta_right {
      padding: 1% 2%; }
      @media screen and (max-width: 1024px) {
        .seminer_list tr .ta_right {
          padding: 1% 7%; } }
      @media screen and (max-width: 1024px) {
        .seminer_list tr .ta_right {
          padding: 1% 0%; } }

.contact-box {
  width: 880px;
  margin: 0 auto 120px; }
  .contact-box p.attention {
    font-size: 1.4em;
    line-height: 1.8;
    margin-bottom: 32px; }
  .contact-box p.btn {
    text-align: center; }
    .contact-box p.btn a {
      display: inline-block;
      text-align: center;
      font-size: 1.4em;
      padding: 12px 40px;
      background: #f3f3f3;
      transition: all .6s ease; }
      .contact-box p.btn a:hover {
        background: #1a1a1a;
        color: #ffffff; }
  @media screen and (max-width: 768px) {
    .contact-box {
      width: 90%; } }
  @media screen and (max-width: 415px) {
    .contact-box p.attention br {
      display: none; } }

#global-footer {
  background: #50C0B4; }
  #global-footer .copy small {
    display: block;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 1.2em; }

.copy_small {
  width: 100%;
  text-align: center;
  color: #fff; }