html {
  font-size: 62.5%; }

* {
  box-sizing: border-box; }

body {
  font-family: 'Noto Sans JP', sans-serif; }

body {
  overflow-x: hidden; }
  body a img {
    transition: all 0.5s; }
  body a:hover img {
    opacity: 0.5; }

.top {
  position: relative;
  background: url(../images/top/catchcopy_back.jpg) no-repeat center;
  background-size: cover; }
  @media (min-width: 768px) {
    .top {
      padding-top: 50%;
      margin-top: 80px; } }
  @media (max-width: 767px) {
    .top {
      height: 300px;
      margin-top: 46px; } }
  .top_title {
    position: absolute; }
    @media (min-width: 768px) {
      .top_title {
        bottom: 2em;
        left: 2em; } }
    @media (max-width: 767px) {
      .top_title {
        bottom: 1em;
        left: 1em;
        width: 90%; } }
    @media (min-width: 768px) {
      .top_title img {
        width: 55vw;
        max-width: 750px; } }
    @media (max-width: 767px) {
      .top_title img {
        width: 70%; } }
    .top_title h2 {
      color: #fff; }
      @media (min-width: 768px) {
        .top_title h2 {
          font-size: 45px;
          font-size: 4.5rem;
          line-height: 1.3333333333; } }
      @media (max-width: 767px) {
        .top_title h2 {
          font-size: 20px;
          font-size: 2rem;
          line-height: 1.5; } }

.news h4 {
  text-align: center;
  margin: 0 auto 1em;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.5; }
.news ul {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000; }
  .news ul li {
    padding: 1em 0; }
    .news ul li + li {
      border-top: 1px solid #000; }
    @media (min-width: 768px) {
      .news ul li a {
        display: flex; }
        .news ul li a:hover {
          opacity: 0.5; } }
    @media (min-width: 768px) {
      .news ul li a span {
        text-align: center;
        width: 150px; } }
    @media (min-width: 768px) {
      .news ul li a p {
        width: calc(100% - 150px); } }
    .news ul li.news_none {
      text-align: center;
      padding: 3em 0; }

.about {
  background: url(../images/top/about_back.jpg) no-repeat center;
  background-size: cover; }
  .about_wrapper {
    max-width: 1300px;
    margin: 4em auto;
    padding: 5em 1em; }
    @media (min-width: 768px) {
      .about_wrapper {
        display: flex;
        align-items: center; } }
  .about_mark {
    padding: 0 1em; }
    @media (min-width: 768px) {
      .about_mark {
        width: 50%; } }
    .about_mark img {
      width: 100%; }
  .about_text {
    padding: 1em;
    color: #fff; }
    @media (min-width: 768px) {
      .about_text {
        width: 50%; } }
    .about_text h3 {
      padding: 1em 0; }
      @media (min-width: 768px) {
        .about_text h3 {
          font-size: 35px;
          font-size: 3.5rem;
          line-height: 1.7142857143; } }
      @media (max-width: 767px) {
        .about_text h3 {
          font-size: 25px;
          font-size: 2.5rem;
          line-height: 1.6; } }

.project_wrapper {
  max-width: 1200px;
  margin: 2em auto;
  padding: 2em; }
  .project_wrapper li {
    position: relative;
    margin-bottom: 5em; }
    @media (min-width: 768px) {
      .project_wrapper li {
        display: flex;
        justify-content: center;
        align-items: flex-start; } }
    .project_wrapper li:nth-child(odd) {
      flex-direction: row-reverse; }
      @media (min-width: 768px) {
        .project_wrapper li:nth-child(odd) .project_text {
          padding-right: 15%; } }
    @media (min-width: 768px) {
      .project_wrapper li:nth-child(even) .project_text {
        padding-left: 18%; } }
@media (min-width: 768px) {
  .project_img {
    width: 45%; } }
.project .mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); }
  @media (min-width: 768px) {
    .project .mark {
      width: 20%;
      max-width: 200px;
      top: -30px; } }
  @media (max-width: 767px) {
    .project .mark {
      top: 50vw;
      width: 120px; } }
@media (min-width: 768px) {
  .project_text {
    width: 60%; } }
@media (max-width: 767px) {
  .project_text {
    margin-top: 3.5em; } }
.project_text h3 {
  padding-bottom: 0.5em; }
  @media (min-width: 768px) {
    .project_text h3 {
      font-size: 30px;
      font-size: 3rem;
      line-height: 1.6666666667; } }
  @media (max-width: 767px) {
    .project_text h3 {
      font-size: 22px;
      font-size: 2.2rem;
      line-height: 1.5909090909; } }

.company h3 {
  background: #4C94B5;
  color: #fff;
  text-align: center;
  padding: 1em;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2; }
.company_wrapper {
  margin: 2em auto;
  padding: 2em;
  max-width: 500px; }
.company dl {
  display: flex;
  flex-wrap: wrap; }
  .company dl dt {
    font-weight: 500;
    width: 110px; }
  .company dl dd {
    width: calc(100% - 110px); }
  .company dl dt,
  .company dl dd {
    padding: 1em 0; }

.access iframe {
  width: 100%; }
.access p {
  padding: 2em;
  text-align: center; }

.footer_img {
  width: 100%; }