@charset "utf-8";

/* ========================================
   トップページ固有CSS
   ======================================== */

body{
  background-color: var(--color-white);
}

/* ====== デスクトップ (min-width:1000px) ====== */
@media(min-width:1000px){
  /* ヘッダー背景画像 */
  header{
    background-image: url(../img/1_M_加工2.jpg);
  }
}

/* ====== タブレット以上 (min-width:768px) ====== */
@media(min-width:768px){
/* h2 共通スタイル（トップページのみ） */
h2{
  position: relative;
  display: inline-block;
  padding: 80px 0 80px 90px;
  font-size: 40px;
  color: var(--color-dark);
  font-weight: 500;
  font-family: '游明朝';
}
h2:before{
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  display: inline-block;
  width: 85px;
  height: 1.5px;
  background-color: var(--color-dark);
}
h2:before {
  left:0;
}

/* シミズ設備が大切にしていること */
.conceptOut{
  margin-top: 170px;
}
.concept{
  padding-top: 50px;
  max-width: 1000px;
  margin: 50px auto 0 auto;
}
.concept li{
  position: relative;
}
.concept li:not(:first-of-type){
  margin-top: 150px;
}
.concept li:nth-of-type(odd) .conceptText{
  right: 0;
}
.concept li:nth-of-type(even) .conceptText{
  align-items: flex-start;
}
.concept li:nth-of-type(even) img{
  margin-left: auto;
}
.conceptText{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 40px;
}
.conceptH3{
  font-size: 35px;
  width: 450px;
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
  background-color:var(--color-primary);
  padding: 20px 20px;
  line-height: 1.4;
  letter-spacing: .05em;
  box-shadow: -5px 5px 4px var(--color-shadow);
  font-family: '游明朝';
}
.concept P{
  line-height: 1.8;
  color: var(--color-black);
  background-color: var(--color-bg);
  font-size: 15px;
  font-weight: 500;
  width: 400px;
  padding: 30px;
  margin-top: 30px;
  box-shadow: -5px 5px 4px var(--color-shadow);
}
.concept img{
  width: 60%;
  height: auto;          /* HTML属性のheight固定値を上書きし比率を維持 */
  display: block;
  box-shadow: -5px 5px 4px var(--color-shadow);
}

/* シミズ設備の取り組み */
.pointOut h2{
  color: var(--color-black);
}
.pointOut{
  margin-top: 250px;
  background-color: var(--color-light);
  padding-bottom: 90px;
}
.point{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.pointItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  height: 300px;
  background-color: var(--color-white);
  color: var(--color-dark);
  margin: 50px 2%;
}
.pointH3{
  font-weight: 500;
  font-size: 20px;
  margin-top: 70px;
  font-family: '游明朝';
}
.pointItem p{
  width: 80%;
  margin-top: 50px;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 500;
}

/* 事業内容 */
.businessOut{
  margin-top: 150px;
}
.business{
  margin: 50px auto 0 auto;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item{
  width: 45%;
  height: 300px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item:nth-of-type(odd){
 margin: 30px 1%;
}
.item:nth-of-type(even){
 margin: 60px 1%;
}
.item h3{
  color: var(--color-white);
  font-size: 35px;
  font-weight: 500;
  padding: 10px;
  margin-top: 30px;
  font-family: '游明朝';
}
.text{
  width: 90%;
  text-align: center;
  margin-top: 0;
  line-height: 1.3;
  font-size: 15px;
  font-weight: 500;
  margin-top: 45px;
}
.more{
  margin-top: auto;
  margin-bottom: 30px;
  font-size: 20px;
}
.item:nth-of-type(1) {
  background-image: url(../img/5_S.jpg);
  box-shadow: -30px 30px 0 var(--color-bg);
}
.item:nth-of-type(2) {
  background-image: url(../img/6_S.jpg);
  box-shadow: 30px -30px 0 var(--color-bg);
}
.item:nth-of-type(3) {
  background-image: url(../img/7_S.jpg);
  box-shadow: -30px 30px 0 var(--color-bg);
}
.item:nth-of-type(4) {
  background-image: url(../img/8_S.jpg);
  box-shadow: 30px -30px 0 var(--color-bg);
}
.item:nth-of-type(5) {
  background-image: url(../img/9_S.jpg);
  box-shadow: -30px 30px 0 var(--color-bg);
}
.item:nth-of-type(6) {
  background-image: url(../img/10_S.jpg);
  box-shadow: 30px -30px 0 var(--color-bg);
}

/* 会社概要 */
.profileOut h2{
  color: var(--color-black);
}
.profileOut{
  margin-top: 200px;
  background-color:var(--color-light);
  color: var(--color-black);
  padding-bottom: 60px;
}
.profile{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0 auto;
  padding-bottom: 50px;
  max-width: 1000px;
  font-size: 15px;
}
dl{
  display: block;
  font-weight: 600;
}
.ci{
  padding: 25px 0;
  border-bottom: solid var(--color-dark) 1px;
  font-weight: 400;
  max-width: 700px;
  line-height: 1.3;
}
dt{
  float: left;
  clear: left;
  width: 100px;
}
dd{
  overflow: hidden;
  padding-left: 50px;
  border-collapse: collapse;
}

/* お問い合わせ */
.contactOut{
  margin-top: 150px;
  padding-bottom: 150px;
}
}