@charset "UTF-8";
@keyframes logo-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes change-img-anim-first {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  36% {
    opacity: 1; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes change-img-anim {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  36% {
    opacity: 1; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
.scroll_wrap {
  display: flex;
  width: 100%;
  height: 270px;
  max-width: 1600px;
  overflow: hidden; }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    .scroll_wrap {
      height: 225px; } }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    .scroll_wrap {
      max-width: 480px;
      height: 106px; } }
  .scroll_wrap img:first-child {
    animation: loop 90s -45s linear infinite; }
  .scroll_wrap img:last-child {
    animation: loop2 90s linear infinite; }

a:hover {
  opacity: 0.8; }

.fwb {
  font-weight: 500; }

.fs8 {
  font-size: 0.8rem; }

.fs13 {
  font-size: 1.3rem; }

.fs18 {
  font-size: 1.8rem; }

.fs24 {
  font-size: 2.4rem; }

.fs30 {
  font-size: 3rem; }

.fs36 {
  font-size: 3.6rem; }

.fs48 {
  font-size: 4.8rem;
  font-weight: bold; }

.fs72 {
  font-size: 7.2rem;
  font-weight: bold; }

.fs96 {
  font-size: 9.6rem;
  font-weight: bold; }

.mg25 {
  margin: 25px 0; }

.mg50 {
  margin: 50px 0; }

.mg100 {
  margin: 100px 0; }

.tal {
  text-align: left; }

.tac {
  text-align: center; }

.tar {
  text-align: right; }

.pdboth {
  padding: 12% 10px 10px; }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    .pdboth {
      transform: rotate(90deg);
      padding: 0;
      margin-left: -10px; } }

@media only screen and (min-width: 1025px) {
  .sp {
    display: none; } }
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .tab {
    display: none; }

  .float {
    display: grid;
    grid-template-columns: 4fr 3fr; } }
@media print, screen and (min-width: 285px) and (max-width: 480px) {
  .float {
    display: block; }
    .float img {
      width: 70%; }
    .float img.photo {
      width: 100%; }

  .pc {
    display: none; } }
a {
  color: #333;
  padding: 0 4px; }
  a :hover {
    opacity: 0.8; }

h2 {
  font-size: 2rem;
  line-height: 1;
  margin: 50px 0 1rem; }

.border {
  border: 2px solid #009451;
  width: 80px;
  margin-bottom: 50px; }

h3 {
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 0;
  width: 450px;
  font-size: 1.6rem;
  line-height: 1.6; }

h4.pc {
  line-height: 1.3;
  margin: 10px 0 20px;
  font-size: 1.6rem; }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    h4.pc {
      font-size: calc(clamp(1.6rem, 0.1rem + 3.13vw, 2.1rem)); } }
  h4.pc::first-letter {
    font-family: "Playfair Display", serif;
    font-size: 5.4rem;
    font-weight: 100;
    margin: -35px 20px 0 0;
    float: left; }

h4.sp {
  line-height: 1.3;
  font-size: 1.4rem;
  font-weight: 100;
  margin: 20px 0; }

html {
  scroll-behavior: smooth; }

body {
  margin: 0 auto;
  font-family: "Sawarabi Mincho", serif;
  color: #444;
  max-width: 1600px;
  width: 100%;
  text-align: center;
  line-height: 2.2; }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    body {
      max-width: 1024px; } }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    body {
      max-width: 480px; } }
  body header {
    display: block;
    text-align: center;
    margin: 0 auto; }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body header {
        padding-top: 20px; } }
    body header .inner {
      display: block;
      text-align: left;
      width: 100%;
      height: 48.1vw;
      max-width: 1600px;
      max-height: 770px;
      position: relative; }
      body header .inner .logo {
        text-align: center;
        margin: 30px 0;
        animation: logo-opacity 1s forwards;
        animation-delay: 6s;
        opacity: 0; }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body header .inner {
          display: none; } }
      body header .inner .fadein {
        position: absolute;
        top: 70px; }
        body header .inner .fadein p {
          display: none;
          margin: 0; }
          body header .inner .fadein p img {
            height: 100%;
            width: 100%; }
      body header .inner .anime {
        position: absolute;
        width: 100%;
        top: 200px;
        left: 0;
        opacity: 0;
        animation: change-img-anim 20s infinite; }
        body header .inner .anime:nth-of-type(1) {
          animation: change-img-anim-first 20s infinite;
          animation-delay: 6s; }
        body header .inner .anime:nth-of-type(2) {
          animation-delay: 11s; }
        body header .inner .anime:nth-of-type(3) {
          animation-delay: 16s; }
        body header .inner .anime:nth-of-type(4) {
          animation-delay: 21s; }
    @media only screen and (min-width: 1025px) {
      body header .inner_sp {
        display: none; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body header .inner_sp {
        display: none; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body header .inner_sp {
        display: block;
        width: 100%;
        height: 8.1vw;
        max-width: 480px;
        max-height: 608px; }
        body header .inner_sp .logo img {
          width: 20%; }
        body header .inner_sp .anime_sp {
          position: absolute;
          width: 100%;
          left: 0;
          opacity: 0;
          animation: change-img-anim 15s infinite; }
          body header .inner_sp .anime_sp:nth-of-type(1) {
            animation: change-img-anim 15s infinite;
            animation-delay: 0s; }
          body header .inner_sp .anime_sp:nth-last-of-type(2) {
            animation-delay: 6s; } }
  body nav {
    position: absolute; }
    body nav .menu {
      background: rgba(255, 255, 255, 0.8);
      box-shadow: -2px 1px 2px #eee;
      border-radius: 10px 0 0 10px;
      width: 220px;
      height: 360px;
      padding-left: 30px;
      position: fixed;
      z-index: 100;
      top: 100px;
      right: -220px;
      transition: all 0.3s;
      -webkit-transition: all 0.3s; }
      body nav .menu:hover, body nav .menu:focus {
        transform: translate3d(-220px, 0, 0);
        animation-timing-function: 1s ease-in; }
      body nav .menu .title {
        top: 50%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 10px;
        font-weight: 800;
        font-size: 1.5rem; }
      body nav .menu ul.nav {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
        padding: 20px 0;
        list-style-type: none; }
        body nav .menu ul.nav li {
          padding: 0.5rem; }
          body nav .menu ul.nav li a {
            display: block;
            text-align: center;
            text-decoration: none;
            color: #333;
            transition: all 0.3s;
            -webkit-transition: all 0.3s; }
            body nav .menu ul.nav li a:hover {
              color: #fff;
              background: #009451;
              border-radius: 6px; }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body nav .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100; }
        body nav .nav .nav_inner {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem 1rem; }
          body nav .nav .nav_inner .drawer__button {
            position: relative;
            width: 3rem;
            height: 3rem;
            background-color: transparent;
            border: none;
            cursor: pointer;
            z-index: 200; }
            body nav .nav .nav_inner .drawer__button span {
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 2rem;
              height: 2px;
              background-color: black;
              transform: translateX(-50%); }
              body nav .nav .nav_inner .drawer__button span:first-child {
                transform: translate(-50%, calc(-50% - 0.5rem));
                transition: transform 0.3s ease; }
              body nav .nav .nav_inner .drawer__button span:nth-child(2) {
                transform: translate(-50%, -50%);
                transition: opacity 0.3s ease; }
              body nav .nav .nav_inner .drawer__button span:last-child {
                transform: translate(-50%, calc(-50% + 0.5rem));
                transition: transform 0.3s ease; }
          body nav .nav .nav_inner .active span:first-child {
            transform: translate(-50%, -50%) rotate(-45deg); }
          body nav .nav .nav_inner .active span:nth-child(2) {
            opacity: 0; }
          body nav .nav .nav_inner .active span:last-child {
            transform: translate(-50%, -50%) rotate(45deg); }
          body nav .nav .nav_inner .drawer__nav {
            position: fixed;
            top: 0;
            right: 0;
            width: 70%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.8);
            transition: opacity 0.3s ease;
            opacity: 0;
            visibility: hidden; }
          body nav .nav .nav_inner .drawer__nav.active {
            opacity: 1;
            visibility: visible; }
          body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner {
            transform: translateX(0);
            padding-top: 60px; }
            body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu {
              list-style: none;
              margin: 0;
              padding: 20px 0; }
              body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu .drawer__nav__item {
                padding: 0.5rem; }
                body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu .drawer__nav__item .drawer__nav__link {
                  display: block;
                  text-align: center;
                  text-decoration: none;
                  color: #333;
                  transition: all 0.3s;
                  -webkit-transition: all 0.3s; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body nav .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100; }
        body nav .nav .nav_inner {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem 1rem; }
          body nav .nav .nav_inner .drawer__button {
            position: relative;
            width: 3rem;
            height: 3rem;
            background-color: transparent;
            border: none;
            cursor: pointer;
            z-index: 200; }
            body nav .nav .nav_inner .drawer__button span {
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 2rem;
              height: 2px;
              background-color: black;
              transform: translateX(-50%); }
              body nav .nav .nav_inner .drawer__button span:first-child {
                transform: translate(-50%, calc(-50% - 0.5rem));
                transition: transform 0.3s ease; }
              body nav .nav .nav_inner .drawer__button span:nth-child(2) {
                transform: translate(-50%, -50%);
                transition: opacity 0.3s ease; }
              body nav .nav .nav_inner .drawer__button span:last-child {
                transform: translate(-50%, calc(-50% + 0.5rem));
                transition: transform 0.3s ease; }
          body nav .nav .nav_inner .active span:first-child {
            transform: translate(-50%, -50%) rotate(-45deg); }
          body nav .nav .nav_inner .active span:nth-child(2) {
            opacity: 0; }
          body nav .nav .nav_inner .active span:last-child {
            transform: translate(-50%, -50%) rotate(45deg); }
          body nav .nav .nav_inner .drawer__nav {
            position: fixed;
            top: 0;
            right: 0;
            width: 70%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.8);
            transition: opacity 0.3s ease;
            opacity: 0;
            visibility: hidden; }
          body nav .nav .nav_inner .drawer__nav.active {
            opacity: 1;
            visibility: visible; }
          body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner {
            transform: translateX(0);
            padding-top: 60px; }
            body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu {
              list-style: none;
              margin: 0;
              padding: 20px 0; }
              body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu .drawer__nav__item {
                padding: 0.5rem; }
                body nav .nav .nav_inner .drawer__nav.active .drawer__nav__inner .drawer__nav__menu .drawer__nav__item .drawer__nav__link {
                  display: block;
                  text-align: center;
                  text-decoration: none;
                  color: #333;
                  transition: all 0.3s;
                  -webkit-transition: all 0.3s; } }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    body main {
      position: relative;
      top: 400px; } }
  body main section {
    margin: 100px 0; }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    body #introduction {
      width: 90%;
      margin: 0 auto; } }
  body #step .step {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center; }
  body #step .no01 {
    background: url("../images/img_bg01.png"); }
  body #step .no02 {
    background: url("../images/img_bg02.png"); }
  body #step .no03 {
    background: url("../images/img_bg03.png");
    margin-top: 50px; }
  body #step .grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 2fr 3fr;
    text-align: left; }
    body #step .grid .order1 {
      order: 1; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #step .grid .order1 {
          order: 2; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .grid .order1 {
          order: 2; } }
    body #step .grid .order2 {
      order: 2; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #step .grid .order2 {
          order: 1; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .grid .order2 {
          order: 1; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .grid {
        grid-template-columns: 1fr; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #step .grid {
        grid-template-columns: 1fr; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .grid img {
        width: 100%; } }
    body #step .grid .source_sp {
      width: 480px; }
  body #step .even {
    width: 90%;
    max-width: 1600px; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .even {
        max-width: 1024px;
        margin: 50px auto 0; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #step .even {
        max-width: 480px;
        margin: 50px auto 0; } }
  body #step .odd {
    width: 90%;
    max-width: 1600px;
    margin-left: 10%; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .odd {
        max-width: 1024px;
        margin: 50px auto 0; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #step .odd {
        max-width: 480px;
        margin: 50px auto 0; } }
  body #step .product {
    background: #F0F0F0;
    display: flex; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .product {
        display: inline-block;
        width: 90%; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #step .product {
        display: inline-block;
        width: 90%; } }
    body #step .product .left {
      width: 30%;
      margin-left: 10%; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #step .product .left {
          width: 95%;
          margin-left: 5%; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .product .left {
          width: 95%;
          margin-left: 5%; } }
    body #step .product .right {
      width: 70%;
      margin-right: 10%;
      text-align: right; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #step .product .right {
          width: 100%;
          margin-right: 0; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .product .right {
          width: 100%;
          margin-right: 0;
          text-align: center; } }
      body #step .product .right img {
        padding: 0 20px; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          body #step .product .right img {
            width: 44%; } }
        @media print, screen and (min-width: 285px) and (max-width: 480px) {
          body #step .product .right img {
            display: inline;
            width: 80%; } }
  body #step .stage {
    width: 80%;
    max-width: 1600px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .stage {
        width: 90%; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #step .stage {
        flex-direction: column;
        max-width: 480px;
        width: 90%; } }
    body #step .stage .col {
      width: 30%; }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .stage .col {
          width: 100%;
          display: grid;
          grid-template-columns: 2fr 3fr; }
          body #step .stage .col p {
            margin: 0 0 0 10px;
            text-align: left; } }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #step .stage .col img {
          width: 100%; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #step .stage .col img {
          width: 100%; } }
  body #step .point {
    display: inline-block;
    background: #444;
    color: #fff;
    border-radius: 20px/50%;
    padding: 0 20px; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #step .point {
        margin-top: 20px; } }
  body #step .step12 {
    width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
    body #step .step12 .frame1 {
      grid-column: 1 / 3;
      grid-row: 1; }
    body #step .step12 .frame2 {
      grid-column: 1;
      grid-row: 2; }
    body #step .step12 .frame3 {
      grid-column: 2;
      grid-row: 2; }
  body #step .comment {
    background: #009451;
    color: #fff;
    padding: 40px 0; }
  body #greeting .greeting {
    background: url("../images/img-greeting.png");
    background-size: contain;
    max-width: 1600px;
    height: 50vw;
    max-height: 800px; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #greeting .greeting {
        background: none;
        height: auto; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #greeting .greeting {
        background: none;
        height: auto;
        max-height: none; } }
    body #greeting .greeting .message {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1rem;
      width: 600px;
      height: auto;
      text-align: left;
      padding: 50px 25px;
      margin-left: 10%; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #greeting .greeting .message {
          background: none;
          color: #444;
          width: 90%;
          margin: 0 auto;
          padding: 0; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #greeting .greeting .message {
          background: none;
          color: #444;
          width: 90%;
          margin: 0 auto;
          padding: 0; } }
  body #equipment .table {
    font-family: "Noto Sans JP";
    font-size: 1.1rem;
    width: 80%;
    max-width: 1600px;
    margin: 0 auto; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #equipment .table {
        width: 1080px; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #equipment .table {
        width: 1000px;
        font-size: 0.9rem; } }
    body #equipment .table .th {
      display: inline-block;
      width: 90%;
      border-bottom: 2px solid #989898;
      padding: 5px 0; }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #equipment .table .th {
          font-size: 1rem; } }
    body #equipment .table td {
      border-bottom: 1px solid #eee;
      padding: 5px 0; }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #equipment .table tr td:first-child {
        font-size: 0.75rem; } }
    body #equipment .table .line {
      border-bottom: 1px solid #aaa; }
  body #equipment .arrow {
    width: 90%;
    margin: 0 auto;
    height: 1rem;
    padding-left: 1rem;
    text-align: left; }
  @media only screen and (min-width: 481px) and (max-width: 1024px) {
    body #equipment .overflow {
      overflow-y: scroll;
      width: 90%;
      margin: 0 auto; } }
  @media print, screen and (min-width: 285px) and (max-width: 480px) {
    body #equipment .overflow {
      overflow-y: scroll;
      width: 90%;
      margin: 0 auto; } }
  body #history .history, body #history .company, body #company .history, body #company .company {
    display: flex;
    width: 80vw;
    max-width: 1600px;
    margin: 0 auto; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #history .history, body #history .company, body #company .history, body #company .company {
        width: 80%;
        max-width: 1024px; } }
    body #history .history .image, body #history .company .image, body #company .history .image, body #company .company .image {
      width: 50%;
      margin: 0 auto; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #history .history .image, body #history .company .image, body #company .history .image, body #company .company .image {
          width: auto; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #history .history .image, body #history .company .image, body #company .history .image, body #company .company .image {
          width: auto; } }
      body #history .history .image img.spw, body #history .company .image img.spw, body #company .history .image img.spw, body #company .company .image img.spw {
        width: 90%; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #history .history .image_sp, body #history .company .image_sp, body #company .history .image_sp, body #company .company .image_sp {
        display: grid;
        width: 90%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr; }
        body #history .history .image_sp .row, body #history .company .image_sp .row, body #company .history .image_sp .row, body #company .company .image_sp .row {
          grid-row: 1 / 3; }
        body #history .history .image_sp img, body #history .company .image_sp img, body #company .history .image_sp img, body #company .company .image_sp img {
          width: 95%; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #history .history .image_sp, body #history .company .image_sp, body #company .history .image_sp, body #company .company .image_sp {
        display: block;
        width: 90%; }
        body #history .history .image_sp .row, body #history .company .image_sp .row, body #company .history .image_sp .row, body #company .company .image_sp .row {
          width: auto; }
        body #history .history .image_sp img, body #history .company .image_sp img, body #company .history .image_sp img, body #company .company .image_sp img {
          width: 100%; } }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #history .history, body #history .company, body #company .history, body #company .company {
        flex-direction: column-reverse; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #history .history, body #history .company, body #company .history, body #company .company {
        flex-direction: column-reverse;
        width: 90%; } }
    body #history .history .detail, body #history .company .detail, body #company .history .detail, body #company .company .detail {
      width: calc(50% - 2rem);
      margin-left: 2rem;
      text-align: left; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #history .history .detail, body #history .company .detail, body #company .history .detail, body #company .company .detail {
          width: calc(90% - 2rem);
          margin: 0 auto; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #history .history .detail, body #history .company .detail, body #company .history .detail, body #company .company .detail {
          width: calc(90% + 1rem);
          margin-left: 1rem; } }
      body #history .history .detail .date, body #history .company .detail .date, body #company .history .detail .date, body #company .company .detail .date {
        line-height: 1.5;
        font-size: 1.1rem;
        border-left: 4px solid #D8D7D7;
        padding: 0 0 1rem 2.2rem; }
        body #history .history .detail .date::before, body #history .company .detail .date::before, body #company .history .detail .date::before, body #company .company .detail .date::before {
          display: inline-block;
          content: "●";
          color: #009451;
          font-size: 1.5rem;
          padding-right: 1.6rem;
          margin-left: -3.05rem;
          vertical-align: sub; }
        @media print, screen and (min-width: 285px) and (max-width: 480px) {
          body #history .history .detail .date, body #history .company .detail .date, body #company .history .detail .date, body #company .company .detail .date {
            font-size: 1rem; } }
    body #history .history .table, body #history .company .table, body #company .history .table, body #company .company .table {
      width: 50%;
      text-align: left;
      font-size: 1.1rem; }
      @media only screen and (min-width: 481px) and (max-width: 1024px) {
        body #history .history .table, body #history .company .table, body #company .history .table, body #company .company .table {
          width: 85%;
          margin: 0 auto; } }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #history .history .table, body #history .company .table, body #company .history .table, body #company .company .table {
          width: 100%;
          font-size: 1rem; } }
      body #history .history .table th, body #history .company .table th, body #company .history .table th, body #company .company .table th {
        padding: 0 0 0 10px;
        vertical-align: top;
        text-align-last: justify; }
        @media only screen and (min-width: 481px) and (max-width: 1024px) {
          body #history .history .table th, body #history .company .table th, body #company .history .table th, body #company .company .table th {
            width: 20%; } }
        @media print, screen and (min-width: 285px) and (max-width: 480px) {
          body #history .history .table th, body #history .company .table th, body #company .history .table th, body #company .company .table th {
            width: 25%; } }
      body #history .history .table td, body #history .company .table td, body #company .history .table td, body #company .company .table td {
        padding-left: 2rem; }
        @media print, screen and (min-width: 285px) and (max-width: 480px) {
          body #history .history .table td, body #history .company .table td, body #company .history .table td, body #company .company .table td {
            padding-left: 1.5rem; } }
        body #history .history .table td .officer, body #history .company .table td .officer, body #company .history .table td .officer, body #company .company .table td .officer {
          display: inline-block;
          width: 9rem;
          text-align-last: justify;
          padding-right: 2rem; }
          @media print, screen and (min-width: 285px) and (max-width: 480px) {
            body #history .history .table td .officer, body #history .company .table td .officer, body #company .history .table td .officer, body #company .company .table td .officer {
              width: 7rem;
              padding-right: 1rem; } }
        body #history .history .table td p:first-of-type, body #history .company .table td p:first-of-type, body #company .history .table td p:first-of-type, body #company .company .table td p:first-of-type {
          margin-top: 0; }
        body #history .history .table td p:last-of-type, body #history .company .table td p:last-of-type, body #company .history .table td p:last-of-type, body #company .company .table td p:last-of-type {
          margin-bottom: 0; }
  body #history .map, body #company .map {
    width: 39%;
    height: 300px;
    margin: 0 5px; }
    @media only screen and (min-width: 481px) and (max-width: 1024px) {
      body #history .map, body #company .map {
        width: 90%; } }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body #history .map, body #company .map {
        width: 90%; } }
  body #contact {
    font-family: "Noto Sans JP";
    background: #F4F4F4;
    margin-bottom: 0;
    padding-top: 50px; }
    body #contact .contact {
      width: 80%;
      max-width: 1600px;
      margin: 0 auto;
      padding-bottom: 50px; }
      @media print, screen and (min-width: 285px) and (max-width: 480px) {
        body #contact .contact {
          width: 90%; } }
      body #contact .contact .form {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
        line-height: 1.5; }
        @media print, screen and (min-width: 285px) and (max-width: 480px) {
          body #contact .contact .form {
            display: block; } }
        body #contact .contact .form .gridspan {
          grid-column: span 2; }
        body #contact .contact .form p {
          margin: 0;
          padding-left: 0.25rem;
          display: inline-flex;
          align-items: center; }
          body #contact .contact .form p span {
            background: #C55151;
            color: #fff;
            font-size: 0.6rem;
            padding: 1px 6px;
            margin-left: 10px;
            border-radius: 10px; }
        body #contact .contact .form input, body #contact .contact .form select, body #contact .contact .form textarea {
          width: 95%;
          padding: 8px 5px;
          margin-bottom: 20px;
          border: 1px solid #ddd;
          border-radius: 4px; }
        body #contact .contact .form select {
          width: 48.5%;
          display: block; }
          @media print, screen and (min-width: 285px) and (max-width: 480px) {
            body #contact .contact .form select {
              width: 98%; } }
        body #contact .contact .form textarea {
          width: 98%;
          height: 5rem; }
          @media print, screen and (min-width: 285px) and (max-width: 480px) {
            body #contact .contact .form textarea {
              width: 95%; } }
      body #contact .contact .submit {
        width: 200px;
        display: inline-block;
        background: #009451;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: bold;
        padding: 5px 0; }
    body #contact .tel {
      background: #fff;
      padding: 50px 0; }
      body #contact .tel p {
        line-height: 1.5;
        margin: 0; }
        body #contact .tel p .num::before {
          content: url("../images/icon-tel.svg");
          padding-right: 0.5rem; }
  body footer {
    width: 100%;
    background: #009451;
    text-align: center;
    color: #fff;
    padding: 40px 0; }
    @media print, screen and (min-width: 285px) and (max-width: 480px) {
      body footer {
        position: relative;
        top: 400px;
        bottom: 0;
        font-size: 0.9rem; }
        body footer img {
          width: 90%; } }