@charset "UTF-8";

/* =========================================
   共通
========================================= */
#service-items,
#history {
  margin-top: 5rem;
}

/* =========================================
   あいさつ
========================================= */
#message h2 {
  color: var(--color-blue-dark);
  text-align: left;
}

#message .grid-two {
  margin-top: 1rem;
  display: grid;
  grid-template-columns:  1fr 300px;
  gap: 3rem;
}

@media screen and (max-width: 768px) {
#message .grid-two {display: inline;}
#message .grid-two img.pc_no{
    display: block;
    width: 75%;
    margin: 0 auto 30px;
  }

}
.text p {text-indent: 1em;}

.text-r {
  text-align: right;
  padding-top: 1rem;
  font: var(--font-basic);
  font-size: var(--s18);
}

.text-r span {
  margin-right: 0.8rem;
  font-size: var(--s14);
}

/* =========================================
   経営理念・品質方針
========================================= */
#philosophy {
  padding: 4rem 0;
  text-align: center;
  background: url("/test_site/nisshin/company/img/bg_philosophy.jpg") no-repeat center / cover;
  background-color: rgba(255, 255, 255, 0.9);
  background-blend-mode: lighten;
}
.philosophy p{}

.philosophy01 p,
.philosophy02 p {
  font-family: var(--font-ja);
  color: var(--color-blue-dark);
  font-size: var(--s20);
  line-height: 2rem;
  text-align: center;
}
.text-c{text-align: center;}

.philosophy02 {
  margin-top: 3rem;
}

.iso p {
  margin-bottom: 0.5rem;
  font-size: var(--s13);
  font-weight: 500;
  line-height: 1.3rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .philosophy01 p{text-align: left;}
}

/* =========================================
   営業品目
========================================= */
#service-items h3 {
  margin-top: 1rem;
  text-align: center;
  color: var(--color-blue-dark);
}

/* 一覧 */
#service-items .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 3rem;
}

#service-items .flex > * {
  width: 18%;
  min-width: 180px;
}

#service-items a .icon img{
  transition: transform 0.3s ease;
  transform: scale(1);
  display: block;
}
#service-items a:hover .icon img{transform: scale(1.1);}

@media screen and (max-width: 768px) {
  #service-items .flex > * {
  width: 45%;
  min-width: 120px;
  }
  #service-items h3 {
    font-size: var(--s16);
    font-weight: 500;
  }
}
/* =========================================
   沿革・会社概要（共通）
========================================= */
.history-item,
.overview-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid var(--color-blue-hi-light);
}

.history-item {align-items: center;}

.history-item:last-child,
.overview-item:last-child {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-blue-hi-light);
}

/* dt */
.history-item dt,
.overview-item dt {
  width: 23%;
  line-height: 1.3rem;
  padding: 1rem 1rem 1rem 0.5rem;
}

.history-item dt {
  padding-top: 0;
  padding-bottom: 0;
}

.history-item dt span {
  display: block;
  text-align: right;
}

/* dd */
.history-item dd,
.overview-item dd {
  position: relative;
  width: 75%;
  padding: 1rem 0.5rem 1rem 1rem;
  border-left: 1px solid var(--color-blue-hi-light);
}

/* 装飾 */
.history-item dd span {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  font-size: var(--s30);
  font-weight: 600;
  color: var(--color-gray);
  opacity: 0.3;
}

.overview-item dd ul li {line-height: 1.6rem;}

.overview-item dd ul li span {margin-right: 1rem;}
@media screen and (max-width: 768px) {
  .history-item, .overview-item{
    font-size: var(--s15);
  }
  .history-item dt{
    width: 6.8em;
    line-height: 1.3rem;
    text-align: center;
  }
  .history-item dt{padding: 0 0.5rem 0 0;}
  .overview-item dt{padding: 1rem 0.5rem}
  .history-item dd,
  .overview-item dd {
    position: relative;
    width: 70%;
    padding: 1rem 0.5rem;
    border-left: 1px solid var(--color-blue-hi-light);
    text-align: justify;
  }
  .history-item dd span {
  position: absolute;
  right: 0.5rem;
  bottom: 0.2rem;
  }
  .history-item dt span {
    display: inline;
    text-align: center;
  }
  #history .flex,
  #others .flex {gap: 0.5rem;}
}
/* =========================================
   画像（沿革・その他）
========================================= */
#history .flex,
#others .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#history .flex > * {
  width: 28%;
  min-width: 170px;
}

#others .flex {
  align-items: flex-end;
  gap: 2rem;
}

#others .flex > * {
  min-width: 210px;
}

/* 沿革画像 */
#history figure {
  position: relative;
}

#history figcaption {
  position: absolute;
  left: 0.5rem;
  bottom: 0.3rem;
  font-size: var(--s30);
  font-weight: 600;
  color: var(--color-white);
  opacity: 0.6;
}

/* その他画像 */
#others p {
  text-align: center;
}

#others figure {
  margin-top: 2rem;
  text-align: center;
}

#others figcaption {
  margin-top: 0.8rem;
  text-align: center;
  font-size: var(--s12);
}
@media screen and (max-width: 768px) {
  #others p {text-align: left;}
  #others .flex {gap: 1rem;}
  #others .flex > * {
    width: 45%;
    min-width: 100px;
  }

}