@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

/**
 * 自動お見積り ボタン
 */

#main-contents div.contact {
  text-align: center;
}

#main-contents div.contact p {
  font-size: 1.2em;
}

/** ***************************************************************************
 * ページヘッダー
 * ************************************************************************* */

@media screen and (min-width:737px) {

  #page-header div.message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

}

/**
 * 内容
 */

#page-header div.message ul.work {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

#page-header div.message ul.work li {
  margin-right: 1em;
}

#page-header div.message ul.work li a {
  display: block;
}

@media screen and (min-width:737px) {

  #page-header div.message div.content {
    min-width: 30em;
    width: calc(100% - 330px);
    padding-right: 2em;
    flex-grow: 1;
  }

}

/**
 * 自動お見積り
 */

#page-header div.message div.button {
  margin-top: 1.25em;
}

@media screen and (min-width:737px) {

  #page-header div.message div.button {
    width: 330px;
    margin: 0.75em 0;
    text-align: center;
    flex-shrink: 0;
  }

}

/** ***************************************************************************
 * サービス内容
 * ************************************************************************* */

#service div.service {
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#service div.service div.item {
  width: 50%;
  padding: 10px;
}

#service div.service div.item.dummy {
  width: 100%;
}

#service div.service div.item img {
  border-radius: 8px;
}

@media screen and (min-width:737px) {

  #service div.service {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -30px;
  }

  #service div.service div.item {
    width: calc(100% / 3);
    margin-bottom: 20px;
  }

  #service div.service div.item.dummy {
    width: calc(100% / 3);
  }

}

/**
 * キャプション
 */

#service div.service div.caption {
  margin-top: 5px;
  font-size: 0.75em;
}

@media screen and (min-width:737px) {

  #service div.service div.caption {
    font-size: 1em;
  }

}

/** ***************************************************************************
 * マルツのケース加工 ご利用のメリット
 * ************************************************************************* */

/**
 * メリット
 */

#merit div.merit {
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#merit div.merit section.item {
  width: 50%;
  padding: 10px;
  counter-increment: number;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

@media screen and (min-width:737px) {

  #merit div.merit {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -30px;
  }

  #merit div.merit section.item {
    width: calc(100% / 3);
    margin-bottom: 20px;
  }

}

/* 内容 */

#merit div.merit section.item div.content {
  font-size: 0.857em;
}

#merit div.merit section.item div.content .merit-title {
  margin-bottom: 0.125em;
  padding-left: 1.875em;
  color: rgba(var(--accentcolor-marutsu-1), 1.0);
  font-size: 1.167em;
  font-weight: 600;
  position: relative;
  z-index: 0;
}

#merit div.merit section.item div.content .merit-title::before {
  content: counter(number, decimal-leading-zero);
  color: var(--accentcolor-service-9);
  line-height: 1;
  font-family: 'DIN 1451';
  font-size: 1.429em;
  position: absolute;
  z-index: 1;
  top: 0.125em;
  left: 0;
}

@media screen and (min-width:737px) {

  #merit div.merit section.item div.content {
    font-size: 1em;
  }

  #merit div.merit section.item div.content .merit-title {
    margin-bottom: 0.125em;
    padding-left: 1.875em;
    font-size: 1.2em;
  }

}

/* 画像 */

#merit div.merit section.item div.image {
  margin-bottom: 5px;
  border-radius: 8px;
  overflow: hidden;
  order: -1;
}

/** ***************************************************************************
 * 加工承認図サービス
 * ************************************************************************* */

/**
 * 流れ
 */

#drawing div.flow {
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#drawing div.flow section.item {
  width: 50%;
  padding: 10px;
  counter-increment: number;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

@media screen and (min-width:737px) {

  #drawing div.flow {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -30px;
  }

  #drawing div.flow section.item {
    width: calc(100% / 3);
    margin-bottom: 20px;
  }

}

/* 内容 */

#drawing div.flow section.item div.content {
  font-size: 0.857em;
}

#drawing div.flow section.item div.content .merit-title {
  margin-bottom: 0.125em;
  padding-left: 1.875em;
  color: rgba(var(--accentcolor-marutsu-1), 1.0);
  font-size: 1.167em;
  font-weight: 600;
  position: relative;
  z-index: 0;
}

#drawing div.flow section.item div.content .merit-title::before {
  content: counter(number, decimal-leading-zero);
  color: var(--accentcolor-service-9);
  line-height: 1;
  font-family: 'DIN 1451';
  font-size: 1.429em;
  position: absolute;
  z-index: 1;
  top: 0.125em;
  left: 0;
}

@media screen and (min-width:737px) {

  #drawing div.flow section.item div.content {
    font-size: 1em;
  }

  #drawing div.flow section.item div.content .merit-title {
    margin-bottom: 0.125em;
    padding-left: 1.875em;
    font-size: 1.2em;
  }

}

/* 画像 */

#drawing div.flow section.item div.image {
  margin-bottom: 5px;
  border-radius: 8px;
  border: 1px solid #d6d6d6;
  overflow: hidden;
  order: -1;
}

/** ***************************************************************************
 * 同じケースを追加で作りたい！【リピート】割引いたします
 * ************************************************************************* */

/**
 * 内容
 */

#repeat div.content .catchcopy {
  padding: 0.625em 1em 0.75em;
  line-height: 1.4;
  font-size: 1.25em;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

#repeat div.content .catchcopy::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--accentcolor-service-9);
  opacity: 0.2;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

#repeat div.content .catchcopy [class*="title"] {
  font-size: inherit;
}

#repeat div.content .catchcopy em {
  color: rgba(var(--accentcolor-marutsu-1), 1.0);
  font-style: normal;
  font-weight: 600;
}

@media screen and (min-width:737px) {

  #repeat div.content .catchcopy {
    font-size: 1.6em;
  }

}

/** ***************************************************************************
 * 加工・印刷に利用するデータの様式について
 * ************************************************************************* */

/**
 * ボタン類
 */

#data div.button div.item {
  max-width: 330px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#data div.button div.item ~ div.item {
  margin-top: 20px;
}

#data div.button div.item a {
  width: 100%;
}

#data div.button div.caption {
  width: fit-content;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.857em;
  text-align: left;
}

@media screen and (min-width:737px) {

  #data div.button {
    margin-bottom: -30px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  #data div.button div.item {
    max-width: 100%;
    min-width: 340px;
    width: 49%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }

  #data div.button div.item ~ div.item {
    margin-top: 0;
  }

  #data div.button div.caption {
    font-size: 0.8em;
  }

}