@charset "UTF-8";
/*
ユーティリティ系おまとめファイル
*/
/*
██████   █████  ███████ ███████
██   ██ ██   ██ ██      ██
██████  ███████ ███████ █████
██   ██ ██   ██      ██ ██
██████  ██   ██ ███████ ███████
*/
/*
██████  ██████  ███████  █████  ██   ██ ██████   ██████  ██ ███    ██ ████████
██   ██ ██   ██ ██      ██   ██ ██  ██  ██   ██ ██    ██ ██ ████   ██    ██
██████  ██████  █████   ███████ █████   ██████  ██    ██ ██ ██ ██  ██    ██
██   ██ ██   ██ ██      ██   ██ ██  ██  ██      ██    ██ ██ ██  ██ ██    ██
██████  ██   ██ ███████ ██   ██ ██   ██ ██       ██████  ██ ██   ████    ██
*/
/*
 ██████  ██████  ██       ██████  ██████
██      ██    ██ ██      ██    ██ ██   ██
██      ██    ██ ██      ██    ██ ██████
██      ██    ██ ██      ██    ██ ██   ██
 ██████  ██████  ███████  ██████  ██   ██
*/
/*
████████ ███████ ██   ██ ████████
   ██    ██       ██ ██     ██
   ██    █████     ███      ██
   ██    ██       ██ ██     ██
   ██    ███████ ██   ██    ██
*/
.lowerCaption_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.topicspath {
  max-width: 1130px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 5px;
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); }
  @media screen and (max-width: 568px) {
    .topicspath {
      display: none; } }
  .topicspath li {
    display: inline-block;
    font-size: 16px;
    color: #FFFFFF; }
    @media screen and (max-width: 768px) {
      .topicspath li {
        font-size: 0.7em; } }
    .topicspath li:after {
      content: "\f105";
      font-family: "Font Awesome 5 Free";
      font-weight: 600;
      display: inline-block;
      margin-left: 8px; }
    .topicspath li:last-child:after {
      content: none; }
    .topicspath li a {
      color: #FFFFFF; }

.lowerCaption {
  position: relative;
  width: 100%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  @media screen and (max-width: 568px) {
    .lowerCaption {
      height: 300px; } }
  .lowerCaption span {
    display: inline-block;
    position: relative;
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 600;
    font-size: 70px;
    margin-bottom: 10px; }
    @media screen and (max-width: 568px) {
      .lowerCaption span {
        font-size: 49px; } }
    .lowerCaption span:after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 4px;
      background-color: #FFFFFF;
      bottom: 0; }
  .lowerCaption_title {
    color: #fff;
    max-width: 1130px;
    font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-weight: 600;
    font-size: 22px;
    text-align: center;
    padding: 0 10px;
    width: 100%;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.32); }
    @media screen and (max-width: 768px) {
      .lowerCaption_title {
        width: 100%;
        padding: 0 20px; } }

.lower p {
  font-size: 16px; }

.lower > .section:first-child {
  padding: 0; }

.lower .section {
  padding: 60px 0 50px; }
  @media screen and (max-width: 1280px) {
    .lower .section {
      padding: 60px 10px 50px; } }

.lower section.section + section.section {
  padding: 0 0 50px; }
  @media screen and (max-width: 768px) {
    .lower section.section + section.section {
      padding: 0 10px 50px; } }

@media screen and (max-width: 568px) {
  .lower .col, .lower [class*="col-"] {
    padding: 0 0 20px; } }

.title_brackets {
  position: relative;
  color: #0D59A1;
  font-size: 36px;
  margin-bottom: 25px;
  padding: 10px 20px;
  font-weight: 600; }
  @media screen and (max-width: 568px) {
    .title_brackets {
      font-size: 22px;
      padding: 10px 18px;
      text-align: left; } }
  .title_brackets:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 40px;
    border-left: 3px solid #0D59A1;
    border-top: 3px solid #0D59A1; }
  .title_brackets:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 40px;
    border-right: 3px solid #0D59A1;
    border-bottom: 3px solid #0D59A1; }

#about #contents {
  padding: 100px 0 60px; }
  @media screen and (max-width: 1280px) {
    #about #contents {
      padding: 100px 10px 0; } }
  @media screen and (max-width: 768px) {
    #about #contents {
      padding: 60px 10px; } }

#about.greeting .lowerCaption {
  background-image: url(/shot-service/inc/image/about/bg_greeting.jpg); }

#about.greeting h2 {
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: left;
  line-height: 1; }

#about.greeting h3 {
  display: block;
  margin: 0 auto;
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding-top: 10px;
  padding-left: 0; }
  #about.greeting h3:after {
    content: none; }
  #about.greeting h3 span {
    display: block;
    font-size: 14px; }

#about.greeting p {
  line-height: 1.6; }

#about.vision .lowerCaption {
  background-image: url(/shot-service/inc/image/about/bg_vision.jpg); }

#about.vision .lower [class*="grid-"] {
  margin-bottom: 40px; }
  @media screen and (max-width: 568px) {
    #about.vision .lower [class*="grid-"] {
      margin-bottom: 20px; } }

#about.vision .box.box-blue {
  position: relative;
  border: none; }
  #about.vision .box.box-blue:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 100%;
    border-left: 1px solid #0D59A1;
    border-top: 1px solid #0D59A1;
    border-bottom: 1px solid #0D59A1; }
  #about.vision .box.box-blue:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 100%;
    border-right: 1px solid #0D59A1;
    border-top: 1px solid #0D59A1;
    border-bottom: 1px solid #0D59A1; }
  #about.vision .box.box-blue p {
    font-size: 23px;
    line-height: 1.6;
    text-align: center;
    font-weight: 600; }
    @media screen and (max-width: 768px) {
      #about.vision .box.box-blue p {
        font-size: 16px; } }
    @media screen and (max-width: 568px) {
      #about.vision .box.box-blue p {
        font-size: 14px; } }

#about.vision .count li {
  font-size: 18px;
  margin-bottom: 10px; }
  @media screen and (max-width: 568px) {
    #about.vision .count li {
      font-size: 14px; } }

#about.vision .grid-center + .grid-center {
  margin-bottom: 10px; }
  #about.vision .grid-center + .grid-center .box {
    padding: 30px; }
    @media screen and (max-width: 568px) {
      #about.vision .grid-center + .grid-center .box {
        padding: 30px 15px; } }
  #about.vision .grid-center + .grid-center + .grid-center .box {
    padding: 30px; }
    #about.vision .grid-center + .grid-center + .grid-center .box p {
      font-size: 22px;
      line-height: 1.6;
      text-align: center; }
      @media screen and (max-width: 1024px) {
        #about.vision .grid-center + .grid-center + .grid-center .box p {
          font-size: 18px;
          text-align: left; } }
      @media screen and (max-width: 768px) {
        #about.vision .grid-center + .grid-center + .grid-center .box p {
          font-size: 16px; } }
      @media screen and (max-width: 568px) {
        #about.vision .grid-center + .grid-center + .grid-center .box p {
          font-size: 14px; } }

#about.company .lowerCaption {
  background-image: url(/shot-service/inc/image/about/bg_company.jpg); }

#about.company .lower [data-js="tel"] {
  margin-right: 8px; }

#about.company .lower .label {
  margin: 5px 5px 5px 0; }

#about.company .p-presidentname {
  font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding-top: 10px;
  padding-left: 0; }
  #about.company .p-presidentname span {
    margin-right: 0.8em;
    font-size: 14px; }

#about.company .tbl {
  margin-bottom: 100px; }
  @media screen and (max-width: 568px) {
    #about.company .tbl {
      margin-bottom: 60px; } }
  @media screen and (max-width: 768px) {
    #about.company .tbl p {
      margin-top: 10px; } }

#about.facility .lowerCaption {
  background-image: url(/shot-service/inc/image/about/bg_facility.jpg); }

#about.facility #contents {
  padding: 100px 0 0; }
  @media screen and (max-width: 1280px) {
    #about.facility #contents {
      padding: 100px 10px 0; } }
  @media screen and (max-width: 768px) {
    #about.facility #contents {
      padding: 60px 10px 0; } }

#about.facility .lower .grid {
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    #about.facility .lower .grid {
      margin-bottom: 0; } }
  #about.facility .lower .grid:last-child {
    margin-bottom: 0; }

#about.facility #detail h3 {
  padding-left: 0;
  margin-bottom: 12px;
  font-size: 22px; }
  @media screen and (max-width: 568px) {
    #about.facility #detail h3 {
      font-size: 20px; } }
  @media screen and (max-width: 320px) {
    #about.facility #detail h3 {
      font-size: 18px; } }
  #about.facility #detail h3:after {
    content: none; }

#about.facility .info {
  margin-bottom: 16px; }
  #about.facility .info [data-js] {
    margin-right: 18px; }

#about.facility h4 {
  font-size: 16px;
  color: #0D59A1;
  margin-bottom: 4px; }

#about.facility iframe {
  height: 637px; }
  @media screen and (max-width: 1024px) {
    #about.facility iframe {
      height: 440px; } }
  @media screen and (max-width: 768px) {
    #about.facility iframe {
      height: 300px; } }

#about.facility table {
  margin-bottom: 50px; }

#about #factory-link {
  padding: 50px 0; }
  @media screen and (max-width: 768px) {
    #about #factory-link {
      margin: 0 -10px; } }
  #about #factory-link [class*="col"] {
    padding: 0 10px 10px; }
    @media screen and (max-width: 768px) {
      #about #factory-link [class*="col"] {
        padding: 0 10px 20px; } }
  #about #factory-link a {
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    width: 100%; }
    #about #factory-link a:after {
      content: none; }
    #about #factory-link a > span {
      position: absolute;
      display: block;
      right: 0;
      bottom: 0;
      background-color: #0D59A1;
      width: 45px;
      height: 45px;
      background-image: url(/shot-service/inc/image/common/img_arrow_right_white.svg);
      background-position: 50% 50%;
      transition: 0.3s background-position; }
      @media screen and (max-width: 320px) {
        #about #factory-link a > span {
          width: 30px;
          height: 30px;
          background-size: 75%; } }
    #about #factory-link a img {
      transform: scale(1);
      transition: 0.3s transform; }
      @media screen and (max-width: 768px) {
        #about #factory-link a img[src$=".jpg"] {
          display: none; } }
      #about #factory-link a img[src$="_sp.jpg"] {
        display: none; }
        @media screen and (max-width: 768px) {
          #about #factory-link a img[src$="_sp.jpg"] {
            display: block; } }
    #about #factory-link a:hover > span {
      background-position: 75% 50%; }
    #about #factory-link a:hover img {
      transform: scale(1.1); }
  #about #factory-link img {
    width: 100%; }
  #about #factory-link h3 {
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    font-size: 22px;
    padding-left: 0;
    margin-bottom: 0;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    line-height: 1; }
    @media screen and (max-width: 568px) {
      #about #factory-link h3 {
        font-size: 16px; } }
    #about #factory-link h3:after {
      content: none; }
    #about #factory-link h3 span {
      font-size: 70%; }

#about .pic_facility {
  margin-bottom: 30px; }

/*# sourceMappingURL=../_map/page/about.css.map */