@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("../products/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;
  padding: 3% 0;
  margin: 0 0 15% 0;
  background: #fff; }
  @media screen and (max-width: 415px) {
    .content-inner {
      width: 100%; } }

.products-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  margin: 0 auto;
  justify-content: space-between; }
  @media screen and (max-width: 1366px) {
    .products-wrap {
      width: 70%; } }
  @media screen and (max-width: 1024px) {
    .products-wrap {
      width: 85%; } }
  @media screen and (max-width: 768px) {
    .products-wrap {
      width: 85%; } }
  @media screen and (max-width: 415px) {
    .products-wrap {
      width: 90%; } }
  .products-wrap div {
    width: 30%;
    padding: 5%;
    border: 1px solid #50C0B4;
    margin-top: 7%; }
    @media screen and (max-width: 900px) {
      .products-wrap div {
        padding: 5%;
        width: 200px; } }
    @media screen and (max-width: 768px) {
      .products-wrap div {
        padding: 5%;
        width: 30%; } }
    @media screen and (max-width: 415px) {
      .products-wrap div {
        padding: 5%;
        width: 160px; } }
    .products-wrap div h3 {
      text-align: center;
      font-size: 1.8em;
      font-weight: bold; }
    .products-wrap div ul {
      margin: 10% auto 0 auto;
      width: 80%; }
      .products-wrap div ul li {
        font-size: 1.4em;
        list-style: disc; }
  .products-wrap .box-big {
    width: 45%; }
    @media screen and (max-width: 550px) {
      .products-wrap .box-big {
        width: 100%; } }
    .products-wrap .box-big h3 {
      color: #50C0B4; }
      .products-wrap .box-big h3 span {
        font-size: .8em; }
    .products-wrap .box-big ul {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-content: center; }
      .products-wrap .box-big ul li {
        text-align: left; }
  .products-wrap .row2 div {
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between; }
    .products-wrap .row2 div ul {
      width: 40%;
      margin-top: 0; }
  .products-wrap .conents-center ul {
    align-items: center; }

@media screen and (max-width: 550px) {
  .product2 {
    flex-direction: column; } }

.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; }