@charset "UTF-8";

sup,
sub {
  font-size: 50%;
}

sup {
  top: -1em;
}

.pageText {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2;
}

.pageCaption {
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.mt1em {
  margin-top: 1em;
}

@media screen and (max-width: 768px) {
  .pageText {
    font-size: 12px;
    line-height: 1.8;
  }
}

/* tabs
---------------------------------------------- */
.tabs {
  padding-block: clamp(60px, 2.38rem + 5.83vw, 150px);
}

.equipTabList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px calc(10 / 1200 * 100%);
}

.equipTabList .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #6a5f43;
  color: #6a5f43;
  font-size: clamp(16px, 0.67rem + 0.7vw, 24px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding-block: 1.3em;
  transition: 0.3s;
  text-align: center;
}
.equipTabList .tab.active {
  background-color: #6a5f43;
  color: #fff;
}

.tabpanelSection {
  padding-block: 70px 100px;
  position: relative;
  z-index: 0;
}

.tabpanelSection__copy {
  font-size: clamp(22px, 0.96rem + 0.87vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
}

.tabpanelSection__title {
  position: absolute;
  top: 0;
  left: 0.8em;
  font-size: clamp(62px, -1.89rem + 11.99vw, 200px);
  letter-spacing: 0;
  line-height: 1;
  color: #f2f2f2;
  transform: rotate(90deg);
  transform-origin: top left;
  z-index: 0;
}

.tabContainer {
  margin-top: 60px;
}

.equipmentBox + .equipmentBox {
  margin-top: 100px;
}
.equipmentBox__title {
  font-size: clamp(30px, 0.62rem + 2.61vw, 60px);
  color: #a69f8e;
  line-height: 1;
}

.equipmentList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px calc(40 / 1200 * 100%);
}
* + .equipmentList {
  margin-top: 60px;
}

* + .equipmentList__body {
  margin-top: 15px;
}

.equipmentList__name {
  font-size: clamp(14px, 0.71rem + 0.35vw, 18px);
  letter-spacing: 0.05em;
  line-height: 1.34;
  color: #6a5f43;
}
* + .equipmentList__text {
  margin-top: 0.5em;
}
* + .equipmentList__note {
  margin-top: 0.5em;
}

.itemList {
  display: grid;
}
.itemList + .itemList {
  margin-top: 60px;
}

.itemName {
  color: #6a5f43;
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding-left: 1.1em;
  position: relative;
  z-index: 0;
}
.itemName::before {
  content: '■';
  position: absolute;
  top: 0;
  left: 0;
  font-size: inherit;
  color: inherit;
  z-index: 0;
}

.itemName--hasBorder {
  border-bottom: 1px solid #a69f8e;
  padding-bottom: 0.6em;
}

* + .itemBody {
  margin-top: 20px;
}

* + .itemBody__inner {
  margin-top: 20px;
}

.itemText--hasBorder {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding-block: 1em;
}

* + .itemCaption {
  margin-top: 1em;
}

* + .itemImg {
  margin-top: 20px;
}

.itemList[data-column='2'] .itemBody__inner.flex {
  column-gap: calc(30 / 570 * 100%);
}
.itemList[data-column='2'] .itemBody__inner.flex .itemBodyBox {
  flex: 1;
}
.itemList[data-column='2'] .itemBody__inner.flex .itemImg {
  width: calc(240 / 570 * 100%);
  margin-top: 0;
}

.callout {
  background-color: #eaeaea;
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 10px;
  text-align: center;
}
* + .callout {
  margin-top: 20px;
}
.callout--gold {
  background-color: #8f8149;
  color: #fff;
}

.itemName02 {
  color: #6a5f43;
  background-color: #eeeae0;
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 0.4em;
  text-align: center;
}

.itemBody02__inner {
  margin-top: 20px;
}
.itemList[data-column='3'] .itemBody02__inner.flex {
  column-gap: calc(15 / 360 * 100%);
}
.itemList[data-column='3'] .itemBody02__inner.flex .itemBox02 {
  flex: 1;
}
.itemText02 .small {
  font-size: 11px;
  letter-spacing: 0.05em;
}
.itemList[data-column='3'] .itemBody02__inner.flex .itemImg02 {
  width: calc(180 / 360 * 100%);
}

.item03Name {
  color: #fff;
  background-color: #8f8149;
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 0.4em;
  text-align: center;
}
.item03Body {
  margin-top: 15px;
}
* + .item03Img {
  margin-top: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .equipTabList .tab:hover {
    background-color: #6a5f43;
    color: #fff;
  }
}

@media screen and (min-width: 769px) {
  .tabContainer {
    width: 90%;
  }

  .equipmentList > li.large {
    grid-column: 3/5;
  }

  .itemList[data-column='2'] {
    grid-template-columns: 1fr 1fr;
    gap: 50px calc(60 / 1200 * 100%);
  }
  .itemList[data-column='3'] {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px calc(60 / 1200 * 100%);
  }
}

@media screen and (max-width: 768px) {
	.tabs {
		padding-bottom: 0;
	}
  .equipTabList {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px calc(5 / 315 * 100%);
  }
  .equipTabList .tab {
    padding-block: 0.75em;
  }

  .tabpanelSection {
    padding-block: 50px;
  }
  .tabpanelSection__copy {
    width: 90%;
  }
  .tabpanelSection__title {
    position: static;
    transform: rotate(0deg);
    margin-top: 0.4em;
  }
  .tabContainer {
    width: calc(340 / 375 * 100%);
  }

  * + .equipmentList {
    margin-top: 15px;
  }

  .equipmentBox + .equipmentBox {
    margin-top: 30px;
  }

  .equipmentList {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px calc(20 / 340 * 100%);
  }

  .equipmentList > li.large {
    grid-column: 1/3;
  }

  .itemList {
    row-gap: 30px;
  }

  * + .itemBody {
    margin-top: 10px;
  }

  .gridText > li {
    border-radius: 6px;
  }
  .itemList[data-column='2'] .itemBody__inner.flex .itemImg.sp-large {
    width: calc(180 / 340 * 100%);
  }
}

/* equipment
---------------------------------------------- */
.casbee {
  width: calc(100% - 90px);
  margin-inline: auto;
}

.gridText {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px calc(10 / 300 * 100%);
  height: 100%;
}
.gridText > li {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8f8149;
  border-radius: 10px;
  color: #fff;
  font-size: clamp(15px, 0.56rem + 0.78vw, 24px);
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-align: center;
}

.jcom {
  background-color: #f5f4f1;
  padding-block: 50px;
}
.jcom__title {
  font-size: clamp(18px, 0.87rem + 0.52vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: #8c7031;
  text-align: center;
}
.jcomContents {
  width: calc(100% - 80px);
  max-width: 1040px;
  margin-top: 30px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .jcom {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-block: 30px;
  }
  .jcomContents {
    width: calc(100% - 35px);
    max-width: 400px;
    margin-top: 20px;
  }
}

/* security
---------------------------------------------- */
.owl {
  gap: 15px calc(60 / 1200 * 100%);
}
.owl .item {
  flex: 1;
}
.owl .itemImg {
  width: calc(280 / 1200 * 100%);
}
.owlImg {
  margin-top: 30px;
}

.securityBox02 {
  gap: 15px calc(60 / 1200 * 100%);
  margin-top: 70px;
}
.securityBox02__itemWrap {
  flex: 1;
}
.securityBox02__itemWrap .item + .item {
  margin-top: 40px;
}
.securityBox02__itemWrap .item .itemCaption {
  margin-top: 0;
}
.securityBox02__img {
  width: calc(780 / 1200 * 100%);
}

.securityBox03 {
  gap: 15px calc(60 / 1200 * 100%);
  margin-top: 70px;
}
.securityBox03__itemWrap {
  flex: 1;
}
.securityBox03__img {
  width: calc(360 / 1200 * 100%);
}
.securityBox03__img .p-caption02 {
  right: 60%;
}

.warehouse {
  max-width: 780px;
  margin-top: 80px;
}
.warehouse .item03Body__inner {
  gap: 20px calc(40 / 780 * 100%);
}
.warehouse .item03Box {
  flex: 1;
}
.warehouse .item03Img {
  width: calc(360 / 780 * 100%);
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .owl .item {
    flex: revert;
    width: 100%;
  }
  .owl .itemImg {
    width: 100%;
    padding-inline: 50px;
  }
  .owlImg {
    margin-top: 30px;
  }

  .securityBox02 {
    margin-top: 30px;
  }
  .securityBox02__itemWrap {
    flex: revert;
    width: 100%;
  }
  .securityBox02__itemWrap .item + .item {
    margin-top: 20px;
  }
  .securityBox02__img {
    width: 100%;
  }

  .securityBox03 {
    margin-top: 30px;
  }
  .securityBox03__itemWrap {
    flex: revert;
    width: 100%;
  }
  .securityBox03__img {
    width: 100%;
  }

  .warehouse {
    max-width: 560px;
    margin-top: 60px;
  }
}

/* eco
---------------------------------------------- */
.ecoBox01Head {
  gap: 20px calc(60 / 1200 * 100%);
}
.ecoBox01Head .item {
  flex: 1;
}
.ecoBox01Head .itemImg {
  width: calc(480 / 1200 * 100%);
  margin-top: 0;
}

.ecoBox01Body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px calc(60 / 1200 * 100%);
  margin-top: 40px;
}

.ecoBox01Item__title {
  background-color: #fff;
  border: 1px solid #8f8149;
  color: #8f8149;
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 0.5em;
  text-align: center;
}

.ecoBox01Item__img {
  margin-top: 20px;
}

.ecoBox02 {
  margin-top: 60px;
}

@media screen and (min-width: 769px) {
  .ecoBox02 .itemList > li:nth-child(2) {
    grid-column: 2/4;
  }
  .ecoBox02 .itemList > li:nth-child(3) {
    grid-column: 1/3;
  }
}

@media screen and (max-width: 768px) {
  .ecoBox01Head .item {
    flex: revert;
    width: 100%;
  }
  .ecoBox01Head .itemImg {
    width: 100%;
  }

  .ecoBox01Body {
    grid-template-columns: 1fr;
  }

  .ecoBox02 {
    margin-top: 40px;
  }
}

/* structure
---------------------------------------------- */
.structure01__img {
  width: calc(580 / 1200 * 100%);
}
.structureBox01Body {
  width: calc(580 / 1200 * 100%);
}
.structureBox01Body .item {
  width: calc(270 / 580 * 100%);
}
.structureBox01Body .item:nth-child(3) {
  margin-top: 30px;
}
.structureBox01__name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #6a5f43;
}
.structureBox01__name .num {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 24px;
  background-color: #6a5f43;
  color: #fff;
  line-height: 1;
  text-align: center;
}

.structureBox01Box {
  margin-top: 10px;
}

.grade {
  max-width: 180px;
  margin-inline: auto;
}

.performance .itemImgBox {
  display: grid;
  grid-template-columns: calc(230 / 570 * 100%) calc(320 / 570 * 100%);
  gap: 20px calc(20 / 570 * 100%);
  margin-top: 20px;
}
.performance .itemImgBox .itemImg {
  margin-top: 0;
}

.itemList[data-column='2'] .sickHouse .itemBody__inner.flex .itemImg {
  width: calc(300 / 570 * 100%);
}

@media screen and (max-width: 768px) {
  .structure01__img {
    width: 100%;
  }
  .structureBox01Body {
    width: 100%;
  }
  .structureBox01Body .item {
    float: none;
    width: 100%;
  }
  .structureBox01Body .item + .item {
    margin-top: 30px;
  }
  .structureBox01__name .num {
    width: 24px;
  }

  .structureBox01Box {
    margin-top: 10px;
  }

  .performance .itemImgBox {
    grid-template-columns: 1fr;
  }
  .performance .itemImgBox .itemImg:nth-child(1) {
    max-width: 230px;
    margin-inline: auto;
  }

  .itemList[data-column='2'] .sickHouse .itemBody__inner.flex .itemImg {
    width: 100%;
    margin-top: 20px;
    padding-inline: 20px;
  }
}

/* support
---------------------------------------------- */
.pasHead {
	max-width: 170px;
}

.pasList {
	display: grid;
	grid-template-columns: calc(740 / 1200 * 100%) calc(400 / 1200 * 100%);
	gap: 60px calc(60 / 1200 * 100%);
	margin-top: 20px;
}
.pasListImg {
	margin-top: 20px;
}
.pasList__copy {
	font-size: clamp(16px, 0.92rem + 0.17vw, 18px);
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin-top: 20px;
	text-align: center;
}
.pasList__copy--em {
	font-size: clamp(18px, 0.87rem + 0.52vw, 24px);
	color: #a73a45;
}

@media screen and (max-width: 768px) {
	.pasHead {
	max-width: 100px;
	margin-inline: auto;
}

.pasList {
	grid-template-columns: 100%;
	row-gap: 40px;
}
.pasListImg {
	margin-top: 20px;
}
.pasList__copy {
	font-size: clamp(16px, 0.92rem + 0.17vw, 18px);
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin-top: 20px;
	text-align: center;
}
.pasList__copy--em {
	font-size: clamp(18px, 0.87rem + 0.52vw, 24px);
	color: #a73a45;
}
}