@charset "utf-8";

article section#info {
  padding: 30px var(--padding) 0px;
  margin-top: min(40px, calc(4.43vw + 1.891px));
  display: grid;
  justify-content: center;
  background-color: #fff;
  /*margin-top: 0px !important;*/
  /* padding-top: 30px; */
  --title_width: 100px;
  --row_height: 28px;
}

article section#info h2 {
  color: var(--main_text_color);
  padding: 7px 0px !important;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
}

article section#info > p {
  font-size: 1.2rem;
  text-align: right;
  margin-bottom: 25px;
}

article section#info > div {
  background-color: inherit;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  justify-content: center;
  max-width: 900px;
}

article section#info > div > div {
  display: grid;
  width: 100%;
  justify-content: flex-start;
  margin: 15px 0px;
}

article section#info > div > div#gaiyou > div:first-of-type {
  grid-area: title;
}

article section#info > div > div#gaiyou > div:nth-of-type(2) {
  grid-area: syougou_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(3) {
  grid-area: syougou_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(5) {
  grid-area: syozaichi_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(6) {
  grid-area: syozaichi_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(8) {
  grid-area: setsuritsu_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(9) {
  grid-area: setsuritsu_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(11) {
  grid-area: daihyou_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(12) {
  grid-area: daihyou_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(14) {
  grid-area: shihonkin_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(15) {
  grid-area: shihonkin_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(17) {
  grid-area: gyoumu_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(18) {
  grid-area: gyoumu_d;
}

article section#info > div > div#gaiyou > div:nth-of-type(20) {
  grid-area: juugyouin_t;
}

article section#info > div > div#gaiyou > div:nth-of-type(21) {
  grid-area: juugyouin_d;
}

article section#info > div > div#yakuin > div:first-of-type {
  grid-area: title;
}

/* article section#info > div > div#yakuin > div:nth-of-type(2) {
  grid-area: left_1;
} */

article section#info > div > div#yakuin > div:nth-of-type(2) {
  grid-area: left_2;
}

article section#info > div > div#yakuin > div:nth-of-type(3) {
  grid-area: left_3;
}

article section#info > div > div#yakuin > div:nth-of-type(4) {
  grid-area: left_4;
}

/* article section#info > div > div#yakuin > div:nth-of-type(6) {
  grid-area: right_1;
} */

article section#info > div > div#yakuin > div:nth-of-type(5) {
  grid-area: right_2;
}

article section#info > div > div#yakuin > div:nth-of-type(6) {
  grid-area: right_3;
}

article
  section#info
  > div
  > div#yakuin
  > div:nth-of-type(6)
  > div:last-of-type {
  /*役職名2行対応*/
  height: calc(var(--row_height) * 2);
  display: grid;
  align-items: center;
}

article section#info > div > div#group > div:first-of-type {
  grid-area: title;
}

article section#info > div > div#group > div#maruzen {
  grid-area: maruzen;
}

article section#info > div > div#group > div#maruzen_honsya {
  grid-area: maruzen_honsya;
}

article section#info > div > div#group > div#maruzen_honsya_addr {
  grid-area: maruzen_honsya_addr;
}

article section#info > div > div#group > div#maruzen_honsya_tel {
  grid-area: maruzen_honsya_tel;
}

article section#info > div > div#group > div#maruzen_honsya_fax {
  grid-area: maruzen_honsya_fax;
}

article section#info > div > div#group > div#maruzen_sapporo {
  grid-area: maruzen_sapporo;
}

article section#info > div > div#group > div#maruzen_sapporo_addr {
  grid-area: maruzen_sapporo_addr;
}

article section#info > div > div#group > div#maruzen_sapporo_tel {
  grid-area: maruzen_sapporo_tel;
}

article section#info > div > div#group > div#maruzen_sapporo_fax {
  grid-area: maruzen_sapporo_fax;
}

article section#info > div > div#group > div#maruzen_chanai {
  grid-area: maruzen_chanai;
}

article section#info > div > div#group > div#maruzen_chanai_addr {
  grid-area: maruzen_chanai_addr;
}

article section#info > div > div#group > div#maruzen_chanai_tel {
  grid-area: maruzen_chanai_tel;
}

article section#info > div > div#group > div#maruzen_chanai_fax {
  grid-area: maruzen_chanai_fax;
}

article section#info > div > div#group > div#kouhin {
  grid-area: kouhin;
}

article section#info > div > div#group > div#kouhin_honsya {
  grid-area: kouhin_honsya;
}

article section#info > div > div#group > div#kouhin_honsya_addr {
  grid-area: kouhin_honsya_addr;
}

article section#info > div > div#group > div#kouhin_honsya_tel {
  grid-area: kouhin_honsya_tel;
}

article section#info > div > div#group > div#kouhin_honsya_fax {
  grid-area: kouhin_honsya_fax;
}

article section#info > div > div#group > div#kouhin_kushiro {
  grid-area: kouhin_kushiro;
}

article section#info > div > div#group > div#kouhin_kushiro_addr {
  grid-area: kouhin_kushiro_addr;
}

article section#info > div > div#group > div#kouhin_kushiro_tel {
  grid-area: kouhin_kushiro_tel;
}

article section#info > div > div#group > div#kouhin_kushiro_fax {
  grid-area: kouhin_kushiro_fax;
}

article section#info > div > div#group > div#kouhin_sapporo {
  grid-area: kouhin_sapporo;
}

article section#info > div > div#group > div#kouhin_sapporo_addr {
  grid-area: kouhin_sapporo_addr;
}

article section#info > div > div#group > div#kouhin_sapporo_tel {
  grid-area: kouhin_sapporo_tel;
}

article section#info > div > div#group > div#kouhin_sapporo_fax {
  grid-area: kouhin_sapporo_fax;
}

article section#info > div > div#group > div#akkeshi {
  grid-area: akkeshi;
}

article section#info > div > div#group > div#akkeshi_honsya {
  grid-area: akkeshi_honsya;
}

article section#info > div > div#group > div#akkeshi_honsya_addr {
  grid-area: akkeshi_honsya_addr;
}

article section#info > div > div#group > div#akkeshi_honsya_tel {
  grid-area: akkeshi_honsya_tel;
}

article section#info > div > div#group > div#akkeshi_honsya_fax {
  grid-area: akkeshi_honsya_fax;
}

article section#info > div > div#group > div#akkeshi_sapporo {
  grid-area: akkeshi_sapporo;
}

article section#info > div > div#group > div#akkeshi_sapporo_addr {
  grid-area: akkeshi_sapporo_addr;
}

article section#info > div > div#group > div#akkeshi_sapporo_tel {
  grid-area: akkeshi_sapporo_tel;
}

article section#info > div > div#group > div#akkeshi_sapporo_fax {
  grid-area: akkeshi_sapporo_fax;
}

article section#info > div > div#group > div#ichimura {
  grid-area: ichimura;
}

article section#info > div > div#group > div#ichimura_addr {
  grid-area: ichimura_addr;
}

article section#info > div > div#group > div#ichimura_tel {
  grid-area: ichimura_tel;
}

article section#info > div > div#group > div#hamachip {
  grid-area: hamachip;
}

article section#info > div > div#group > div#hamachip_addr {
  grid-area: hamachip_addr;
}

article section#info > div > div#group > div#hamachip_tel {
  grid-area: hamachip_tel;
}

article section#info > div > div#group > div#hamasei {
  grid-area: hamasei;
}

article section#info > div > div#group > div#hamasei_addr {
  grid-area: hamasei_addr;
}

article section#info > div > div#group > div#hamasei_tel {
  grid-area: hamasei_tel;
}

article section#info > div > div#group div[class^="syamei"] {
  font-size: 2.3rem;
  font-weight: bold;
}

article section#info > div > div#group div.syamei_margin {
  margin-top: 30px;
}

article section#info > div > div#group div.office {
  font-size: 2rem;
  margin-top: 8px;
}

article section#info > div > div#group div.office::before {
  content: "\025cb\0020";
}

article section#info > div > div#group div.tel::before {
  content: "\0260e\0020";
}

article section#info > div > div#group div.fax::before {
  content: "\0213b\0020";
}

article section#info > div > div > div:first-of-type {
  background-color: #edd96d;
  font-size: 2rem;
  display: grid;
  grid-template-columns: var(--title_width);
  grid-template-rows: var(--row_height);
  place-items: center;
  padding-top: 1px;
}

article section#info > div > div > div:not(:first-of-type) {
  font-size: 1.8rem;
}

@media screen and (min-width: 1080px) {
  article section#info > div > div#gaiyou {
    grid-template-columns: var(--title_width) 90px 1fr;
    grid-template-rows: repeat(7, auto);
    grid-column-gap: 30px;
    grid-row-gap: 3px;
    grid-template-areas: "title syougou_t syougou_d" "..... syozaichi_t syozaichi_d" "..... setsuritsu_t setsuritsu_d" "..... daihyou_t daihyou_d" "..... shihonkin_t shihonkin_d" "..... gyoumu_t gyoumu_d" "..... juugyouin_t juugyouin_d";
  }

  article section#info > div > div#gaiyou > div:nth-of-type(3n-1) {
    text-align-last: justify;
  }

  article section#info > div > div#yakuin {
    grid-template-columns: var(--title_width) auto 20px auto;
    grid-template-rows: repeat(3, var(--row_height));
    grid-column-gap: 30px;
    grid-template-areas: 
    /* "title left_1 . right_1"  */
      "title left_2 . right_2"
      "..... left_3 . right_3"
      "..... left_4 . right_3";
  }

  article section#info > div > div#yakuin > div:not(:first-of-type) {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: var(--row_height);
    margin-bottom: 5px;
  }

  article section#info > div > div#group {
    grid-template-columns: var(--title_width) 1fr auto 1fr;
    grid-column-gap: 30px;
    grid-template-areas: "title maruzen . ." "..... maruzen_honsya . ." "..... maruzen_honsya_addr maruzen_honsya_tel maruzen_honsya_fax" "..... maruzen_sapporo . ." "..... maruzen_sapporo_addr maruzen_sapporo_tel maruzen_sapporo_fax" "..... maruzen_chanai . ." "..... maruzen_chanai_addr maruzen_chanai_tel maruzen_chanai_fax" "..... kouhin . ." "..... kouhin_honsya . ." "..... kouhin_honsya_addr kouhin_honsya_tel kouhin_honsya_fax" "..... kouhin_kushiro . ." "..... kouhin_kushiro_addr kouhin_kushiro_tel kouhin_kushiro_fax" "..... kouhin_sapporo . ." "..... kouhin_sapporo_addr kouhin_sapporo_tel kouhin_sapporo_fax" "..... akkeshi . ." "..... akkeshi_honsya . ." "..... akkeshi_honsya_addr akkeshi_honsya_tel akkeshi_honsya_fax" "..... akkeshi_sapporo . ." "..... akkeshi_sapporo_addr akkeshi_sapporo_tel akkeshi_sapporo_fax" "..... ichimura . ." "..... ichimura_addr ichimura_tel ." "..... hamachip . ." "..... hamachip_addr hamachip_tel ." "..... hamasei . ." "..... hamasei_addr hamasei_tel .";
  }
}

@media screen and (min-width: 650px) and (max-width: 1079px) {
  article section#fb > div {
    padding: 0px 2%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1%;
  }

  article section#fb > div > div:first-of-type {
    /*左*/
    grid-template-columns: 48vw;
    grid-auto-rows: auto;
    grid-row-gap: 5px;
  }

  article section#fb > div > div:last-of-type {
    /*右*/
    /* grid-template-columns: 48vw;
    grid-template-rows: repeat(3, auto); */
  }

  article section#seihin > div {
    grid-template-columns: repeat(auto-fit, min(450px, 45vw));
  }

  article section#info > div > div#gaiyou {
    grid-template-columns: var(--title_width) 90px 1fr;
    grid-template-rows: repeat(7, auto);
    grid-column-gap: 30px;
    grid-row-gap: 3px;
    grid-template-areas: "title syougou_t syougou_d" "..... syozaichi_t syozaichi_d" "..... setsuritsu_t setsuritsu_d" "..... daihyou_t daihyou_d" "..... shihonkin_t shihonkin_d" "..... gyoumu_t gyoumu_d" "..... juugyouin_t juugyouin_d";
  }

  article section#info > div > div#gaiyou > div:nth-of-type(3n-1) {
    text-align-last: justify;
  }

  article section#info > div > div#yakuin {
    grid-template-columns: var(--title_width) auto;
    grid-template-rows: repeat(6, var(--row_height));
    grid-column-gap: 30px;
    grid-template-areas:
      /* "title left_1" */
      "title left_2"
      "..... left_3"
      "..... left_4"
      /* "..... right_1" */
      "..... right_2"
      "..... right_3"
      "..... right_3";
  }

  article section#info > div > div#yakuin > div:not(:first-of-type) {
    display: grid;
    grid-template-columns: max(180px, 30vw) 1fr;
    grid-template-rows: repeat(2, calc(var(--row_height) * 2));
    margin-bottom: 5px;
  }

  article section#info > div > div#group {
    grid-template-columns: var(--title_width) 1.3fr 1fr;
    grid-column-gap: 30px;
    grid-template-areas: "title maruzen ." "..... maruzen_honsya ." "..... maruzen_honsya_addr maruzen_honsya_tel" "..... ................... maruzen_honsya_fax" "..... maruzen_sapporo ." "..... maruzen_sapporo_addr maruzen_sapporo_tel" "..... .................... maruzen_sapporo_fax" "..... maruzen_chanai ." "..... maruzen_chanai_addr maruzen_chanai_tel" "..... ................... maruzen_chanai_fax" "..... kouhin ." "..... kouhin_honsya ." "..... kouhin_honsya_addr kouhin_honsya_tel" "..... .................. kouhin_honsya_fax" "..... kouhin_kushiro ." "..... kouhin_kushiro_addr kouhin_kushiro_tel" "..... ................... kouhin_kushiro_fax" "..... kouhin_sapporo ." "..... kouhin_sapporo_addr kouhin_sapporo_tel" "..... ................... kouhin_sapporo_fax" "..... akkeshi ." "..... akkeshi_honsya ." "..... akkeshi_honsya_addr akkeshi_honsya_tel" "...... .................. akkeshi_honsya_fax" "..... akkeshi_sapporo ." "..... akkeshi_sapporo_addr akkeshi_sapporo_tel" "..... .................... akkeshi_sapporo_fax" "..... ichimura ." "..... ichimura_addr ichimura_tel" "..... hamachip ." "..... hamachip_addr hamachip_tel" "..... hamasei ." "..... hamasei_addr hamasei_tel";
  }
}

@media screen and (max-width: 649px) {
  article section#fb > div {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    justify-content: center;
    align-content: center;
    grid-row-gap: 1%;
  }

  article section#fb > div > div:first-of-type {
    grid-auto-rows: auto;
    row-gap: 1vw;
  }

  article section#fb > div > div:last-of-type {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
    grid-row-gap: 3px;
  }

  article section#fb > div > div:last-of-type a {
    line-height: 1.5 !important;
  }

  article section#seihin > div {
    grid-template-columns: 95vw;
    grid-template-rows: auto auto;
  }

  article section#seihin h3 {
    margin: 15px auto;
  }

  article section#info > div > div#gaiyou {
    grid-template-columns: 90px 1fr;
    grid-template-rows: repeat(8, auto);
    grid-column-gap: 30px;
    grid-row-gap: 3px;
    grid-template-areas: "title title" "syougou_t syougou_d" "syozaichi_t syozaichi_d" "setsuritsu_t setsuritsu_d" "daihyou_t daihyou_d" "shihonkin_t shihonkin_d" "gyoumu_t gyoumu_d" "juugyouin_t juugyouin_d";
  }

  article section#info > div > div#gaiyou > div:nth-of-type(3n-1) {
    text-align-last: justify;
  }

  article section#info > div > div#yakuin {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, var(--row_height));
    grid-column-gap: 30px;
    grid-template-areas:
      "title"
      /* "left_1"  */
      "left_2"
      "left_3"
      "left_4"
      /* "right_1"  */
      "right_2"
      "right_3"
      "right_3";
  }

  article section#info > div > div#yakuin > div:not(:first-of-type) {
    display: grid;
    grid-template-columns: max(180px, 50vw) 1fr;
    grid-template-rows: repeat(2, var(--row_height));
    margin-bottom: 5px;
  }

  article section#info > div > div#group {
    grid-template-columns: 1fr;
    grid-column-gap: 30px;
    grid-template-areas: "title" "maruzen" "maruzen_honsya" "maruzen_honsya_addr" "maruzen_honsya_tel" "maruzen_honsya_fax" "maruzen_sapporo" "maruzen_sapporo_addr" "maruzen_sapporo_tel" "maruzen_sapporo_fax" "maruzen_chanai" "maruzen_chanai_addr" "maruzen_chanai_tel" "maruzen_chanai_fax" "kouhin" "kouhin_honsya" "kouhin_honsya_addr" "kouhin_honsya_tel" "kouhin_honsya_fax" "kouhin_kushiro" "kouhin_kushiro_addr" "kouhin_kushiro_tel" "kouhin_kushiro_fax" "kouhin_sapporo" "kouhin_sapporo_addr" "kouhin_sapporo_tel" "kouhin_sapporo_fax" "akkeshi" "akkeshi_honsya" "akkeshi_honsya_addr" "akkeshi_honsya_tel" "akkeshi_honsya_fax" "akkeshi_sapporo" "akkeshi_sapporo_addr" "akkeshi_sapporo_tel" "akkeshi_sapporo_fax" "ichimura" "ichimura_addr" "ichimura_tel" "hamachip" "hamachip_addr" "hamachip_tel" "hamasei" "hamasei_addr" "hamasei_tel";
  }
}

@media screen and (min-width: 490px) {
  article section#jigyou > div > div > ul > li span::before {
    content: "\A";
    white-space: pre;
  }
}

@media screen and (max-width: 429px) {
  article section#jigyou > div > div > ul > li span.part::before {
    content: "\A";
    white-space: pre;
  }

  article section#gijutsu div#details {
    grid-template-columns: repeat(auto-fit, 48vw);
  }
}

@media screen and (max-width: 489px) {
  article section#jigyou > div {
    grid-template-columns: repeat(auto-fill, 90vw) !important;
  }

  article section#gijutsu div#description > div:first-of-type span::before {
    content: "\A";
    white-space: pre;
  }

  article section#gijutsu h3 span::before {
    content: "\A";
    white-space: pre;
  }
}

@media screen and (min-width: 410px) {
  article section#jirei > div {
    grid-template-columns: repeat(auto-fit, 189.7px);
  }
}

@media screen and (max-width: 409px) {
  article section#jirei > div {
    grid-template-columns: repeat(auto-fit, 48vw);
  }

  article section#info > div > div#gaiyou {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(15, auto);
    grid-column-gap: 30px;
    grid-row-gap: 3px;
    grid-template-areas: "title" "syougou_t" "syougou_d" "syozaichi_t" "syozaichi_d" "setsuritsu_t" "setsuritsu_d" "daihyou_t" "daihyou_d" "shihonkin_t" "shihonkin_d" "gyoumu_t" "gyoumu_d" "juugyouin_t" "juugyouin_d";
  }

  article section#info > div > div#gaiyou > div:nth-of-type(3n-1) {
    text-align-last: left;
    background-color: #ccc;
  }
}