@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*メイン*/
h1 {
  background-color: #000;
  color: #fff;
  font-size: 156%;
  padding: 0.25em 2%;
  margin: 2em auto 0; }
  h1:nth-child(n+2) {
    margin: 5em auto 0; }

#activities, #about, #works {
  margin: 5em auto 0; }
  #activities h2, #about h2, #works h2 {
    font-size: 125%;
    background-color: yellow;
    padding: 0.25em 2%;
    text-align: center !important; }
    #activities h2:nth-child(n+2), #about h2:nth-child(n+2), #works h2:nth-child(n+2) {
      margin: 3em 0 0; }
  #activities .area, #about .area, #works .area {
    margin: 3em 0 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%; }
    #activities .area p, #about .area p, #works .area p {
      width: 50%; }
    #activities .area figure, #about .area figure, #works .area figure {
      width: 46%; }
  #activities .area02, #about .area02, #works .area02 {
    margin: 3em 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%; }
    #activities .area02 p, #about .area02 p, #works .area02 p {
      width: 50%; }
    #activities .area02 figure, #about .area02 figure, #works .area02 figure {
      width: 46%; }
  #activities .area03, #about .area03, #works .area03 {
    margin: 3em 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%; }
    #activities .area03 ::before, #about .area03 ::before, #works .area03 ::before {
      content: "";
      display: block;
      width: 23%;
      order: 1; }
    #activities .area03::after, #about .area03::after, #works .area03::after {
      content: "";
      display: block;
      width: 23%; }
    #activities .area03 figure, #about .area03 figure, #works .area03 figure {
      width: 23%; }
      #activities .area03 figure:nth-child(n+5), #about .area03 figure:nth-child(n+5), #works .area03 figure:nth-child(n+5) {
        margin: 1em 0 0; }
  #activities .company, #about .company, #works .company {
    width: 400px;
    margin: 3em auto 0; }
    #activities .company h3, #about .company h3, #works .company h3 {
      background-color: #000;
      padding: 0.25em 2%;
      color: #fff;
      margin: 0 0 1em; }
    #activities .company table tr, #about .company table tr, #works .company table tr {
      border-bottom: 2em solid #fff; }
    #activities .company table th, #about .company table th, #works .company table th {
      width: 23%;
      padding: 0em 2%;
      border-right: 2px solid #000;
      box-sizing: border-box;
      text-align-last: justify; }
    #activities .company table td, #about .company table td, #works .company table td {
      width: 69%;
      padding: 0em 2%; }
    #activities .company #history li span, #about .company #history li span, #works .company #history li span {
      display: block;
      color: #d71518;
      margin: 0 0 0 1em; }
    #activities .company #history li:nth-child(n+2), #about .company #history li:nth-child(n+2), #works .company #history li:nth-child(n+2) {
      margin: 2em 0 0; }
    #activities .company dl dt, #about .company dl dt, #works .company dl dt {
      font-weight: bold;
      margin: 0 0 0.5em; }
      #activities .company dl dt:nth-child(n+2), #about .company dl dt:nth-child(n+2), #works .company dl dt:nth-child(n+2) {
        margin: 2em 0 0.5em; }
    #activities .company #photos, #about .company #photos, #works .company #photos {
      width: 90%;
      margin: 1em auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #activities .company #photos li, #about .company #photos li, #works .company #photos li {
        width: 48%; }
    #activities .company .banners, #about .company .banners, #works .company .banners {
      margin: 1em 0 0;
      display: block; }
    #activities .company #movie, #about .company #movie, #works .company #movie {
      width: 100%;
      margin: 3em 0 0; }

.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 1em 0; }

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

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1100px) {
  /*ヘッダー*/
  /*メイン*/
  h1 {
    width: 1080px; }

  #activities, #about, #works {
    width: 830px; }

  #bottom_image {
    width: 1080px; }

  /*フッター*/ }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1099px) {
  /*ヘッダー*/
  /*メイン*/
  h1 {
    width: 90%; }

  #activities, #about, #works {
    width: 90%; }

  #bottom_image {
    width: 90%; }

  /*フッター*/ }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1099px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet1  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet2  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  h1 {
    font-size: 130%; }

  #activities, #about, #works {
    margin: 3em auto 0; }
    #activities h2, #about h2, #works h2 {
      font-size: 115%; }
    #activities .area, #activities .area02, #about .area, #about .area02, #works .area, #works .area02 {
      margin: 2em 0 0;
      flex-direction: column; }
      #activities .area p, #activities .area02 p, #about .area p, #about .area02 p, #works .area p, #works .area02 p {
        width: 100%;
        margin: 1em 0 0; }
      #activities .area figure, #activities .area02 figure, #about .area figure, #about .area02 figure, #works .area figure, #works .area02 figure {
        width: 100%; }
    #activities .area03, #about .area03, #works .area03 {
      margin: 2em 0 0; }
      #activities .area03 figure, #about .area03 figure, #works .area03 figure {
        width: 48%; }
        #activities .area03 figure:nth-child(n+3), #about .area03 figure:nth-child(n+3), #works .area03 figure:nth-child(n+3) {
          margin: 1em 0 0; }
    #activities .company, #about .company, #works .company {
      width: 80%; }
      #activities .company table tr, #about .company table tr, #works .company table tr {
        display: block;
        width: 100%;
        border-bottom: none; }
      #activities .company table th, #about .company table th, #works .company table th {
        display: block;
        width: 96%;
        border-right: none;
        border-bottom: 1px solid #000;
        text-align-last: inherit;
        text-align: left;
        padding: 0.5em 2% 0; }
      #activities .company table td, #about .company table td, #works .company table td {
        width: 96%;
        padding: 0.5em 2%; }
      #activities .company #photos, #about .company #photos, #works .company #photos {
        width: 90%;
        flex-direction: column; }
        #activities .company #photos li, #about .company #photos li, #works .company #photos li {
          width: 100%; }
          #activities .company #photos li:nth-child(n+2), #about .company #photos li:nth-child(n+2), #works .company #photos li:nth-child(n+2) {
            margin: 1em 0 0; }

  /*フッター*/ }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }