@charset "utf-8";
/*----------------------------------------------------
	共通タイトル
----------------------------------------------------*/
/*タイトル*/
.title {
  min-height: min(280px, 23.33vw);
  display: flex;
  justify-content: center;
  align-items: center;
}
.title.-company { background: url("../../company/images/title_company.webp") no-repeat center; }
.title.-business { background: url("../../business/images/title_business.webp") no-repeat center; }
.title.-recruit { background: url("../../recruit/images/title_recruit.webp") no-repeat center; }
.title.-contact { background: url("../../contact/images/title_contact.webp") no-repeat center; }

.title__text {
  text-align: center;
  padding: 1.5em 0;
  color: #fff;
  line-height: 1.2;
}
.title__text .-main {
  font-size: clamp(30px, 0.6061vw + 27.7273px, 35px); /* Vary between 375px and 1200px */
  letter-spacing: .075em;
}
.title__text .-sub {
  font-size: 18px;
  letter-spacing: .11em;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.heading {
  color: var(--color-main);
  font-size: var(--30px);
  text-align: center;
  margin-bottom: .5em;
}

.button {
  display: inline-block;
  padding: 1em;
  background: var(--color-main);
  border: 2px solid transparent;
  color: #fff;
  transition: 0.3s;
  line-height: 1.5;
  border-radius: 100vh;
  min-width: 320px;
  font-weight: bold;
}
.button:is(:hover, :focus) {
  background: #fff;
  border-color: currentColor;
  color: var(--color-main);
}

/*----------------------------------------------------
	トップページ
----------------------------------------------------*/
/* メインビジュアル */
.mv {
  background: url("../../index/images/mv_back.webp") no-repeat center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10vw 2em 13vw;
}
.top__text {
  font-size: clamp(15px, 0.7273vw + 12.2727px, 21px); /* Vary between 375px and 1200px */
  font-weight: bold;
  text-align: center;
}
/* 3分割キャッチ */
.top__wrap {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 4em;
  margin-bottom: 4em;
}
.top__item {
  width: calc(100% / 3);
  padding: 0 2em;
  border-right: var(--color-main) 2px solid;
}
.top__item:first-of-type { border-left: var(--color-main) 2px solid; }

@media (max-width: 767px) { /* SP */
.top__wrap { flex-direction: column; }
.top__item {
  width: 100%;
  border-right: none;
  border-bottom: var(--color-main) 2px solid;
  padding-top: 2em;
  padding-bottom: 2em;
}
.top__item:first-of-type {
  border-left: none;
  border-top: var(--color-main) 2px solid;
}
}
/* 事業内容 */
.top__biz {
  background: url("../../index/images/top_biz_back.webp") no-repeat center / cover;
  padding: 4em 2em;
}
.top__biz__icon {
  max-width: 710px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1em;
  text-align: center;
  margin: 2em auto;
  font-size: clamp(18px, 0.8485vw + 14.8182px, 25px);
  font-weight: bold;
}
/* 地図 */
.top__map {
  width: min(100% - 2em, 900px);
  margin-inline: auto;
  margin-top: 2em;
}
/*----------------------------------------------------
	会社概要
----------------------------------------------------*/
.company__outline {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.5;
}
.company__outline th {
  display: table-cell;
  border-bottom: 1px solid var(--color-main);
  padding: 1em 2em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  color: var(--color-main);
}
.company__outline th:first-of-type {
  border-top: 1px solid var(--color-main);
}
.company__outline td {
  display: table-cell;
  border-bottom: 1px solid #d7d7d7;
  padding: 1em 2em;
}
.company__outline td:first-of-type {
  border-top: 1px solid #d7d7d7;
}
@media (max-width: 767px) {/* SP */
.company__outline { border-top: 1px solid #d7d7d7; }
.company__outline th,
.company__outline td {
  display: block;
  width: 100%;
  padding: 1em 0;
}
.company__outline th {
  border-bottom: 1px dotted #d7d7d7;
}
}
/*----------------------------------------------------
	事業案内
----------------------------------------------------*/
/* 一般産業機械設計・製作・組立 */
.business__wrap {
  display: grid;
  gap: 1.5em;
  text-align: center;
  margin-top: 1em;
  margin-inline: auto;
}
.business__wrap.-seisaku {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* 各種製缶・加工製品設計・製作 */
.business__wrap.-kakou {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: 3em;
}
.business__wrap__kakou {
  border: var(--color-main) 1px solid;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
}
/*対応素材*/
.business__sozai {
  background: #ebf6ff;
  margin-top: 2em;
  padding: 3em;
  text-align: center;
}
.business__wrap.-sozai {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.business__wrap__sozai {
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 2em;
  color: #fff;
  column-gap: 1em;
  line-height: 1
}
.business__wrap__sozai .heading {
  color: #fff;
  line-height: 1.2;
}
.business__wrap__sozai.-blue { background: #0090fb; grid-column: 1 / -1; /* 1行目の全カラムを使用 */ }
.business__wrap__sozai.-darkblue { background: #1f51d7; }
.business__wrap__sozai.-green { background: #00b2b4; flex-direction: column; }
.business__wrap__sozai.-pailgreen { background: #8fddc7; }
.business__wrap__sozai.-purple { background: #bbafc3; }
@media (max-width: 767px) { /* SP */
.business__wrap__sozai.-blue { flex-direction: column; }
}
/*----------------------------------------------------
	お問い合わせ
----------------------------------------------------*/
/* 電話番号 */
.contact__tel {
  background: #ebf6ff;
  margin-top: 3em;
  margin-bottom: 4em;
  padding: 3em 1em;
  text-align: center;
}
.contact__number__tel {
  font-size: clamp(50px, 3.6364vw + 36.3636px, 80px); /* Vary between 375px and 1200px */
  color: var(--color-main);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  display: flex;
  justify-content: center;
  line-height: 1;
}
.contact__number__tel::before {
  justify-self: start;
  font-family: "Material Symbols Outlined";
  content: "call";
  font-variation-settings: "wght" 700;
}