.ts-servicestation {background-image: url(../img/index/tsbg-ss.webp);}
.ts-maintenance {background-image: url(../img/index/tsbg-maintenance.webp);}
.ts-energy {background-image: url(../img/index/tsbg-energy.webp);}
.ts-fitness {background-image: url(../img/index/tsbg-fitness.webp);}


/* Style for PCs */
@media screen and (min-width: 1025px) {

/* TopSection
----------------------------------------------------------------*/
.topsection {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  margin-top:180px;
}
.topsection ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.topsection ul li {
  width:50%;
  height: auto;
  display: block;
}
.topsection ul li:hover {
  background-size: auto 110%;
}
.topsection ul li div {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  transition: 1s all;
}
.topsection ul li div:hover {
  background-size: auto 110%;
}
.topsection ul li a {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: rgba(0,0,0,0.3);
  transition: .4s all;
}
.topsection ul li a:hover {
  background-color: rgba(0,0,0,0.1);
}
.topsection ul li a h2 {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  font-size:30px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color:var(--color-white);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  margin-bottom: 0.2em;
  padding:75px 0 0 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 70px;
}
.topsection ul li a h2 span {
  display: block;
  font-size:16px;
}
.topsection ul li a p.ts_com {
  width: 70%;
  height: auto;
  display: block;
  font-size:12px;
  color:var(--color-white);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  line-height:2em;
  margin:0 auto 1em;
}
.topsection ul li a p.ts_bn {
  width:fit-content;
  height: 30px;
  display: block;
  margin:0 auto;
  font-size: 12px;
  line-height: 28px;
  color:var(--color-white);
  background-color: var(--color-1st);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  padding:0 2em;
  border-radius: 9999px;
  transition: .4s all;
}
.topsection ul li a:hover p.ts_bn {
background-color: var(--color-3rd);
}

}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

/* TopSection
----------------------------------------------------------------*/
.topsection {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  margin-top:120px;
}
.topsection ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.topsection ul li {
  width:50%;
  height: auto;
  display: block;
}
.topsection ul li div {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  transition: 1s all;
}
.topsection ul li div:hover {
  background-size: auto 110%;
}
.topsection ul li a {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: rgba(0,0,0,0.7);
  transition: .4s all;
}
.topsection ul li a:hover {
  background-color: rgba(0,0,0,0.5);
}
.topsection ul li a h2 {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  font-size:24px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color:var(--color-white);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  margin-bottom: 0.2em;
  padding:55px 0 0 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 50px;
}
.topsection ul li a h2 span {
  display: block;
  font-size:12px;
}
.topsection ul li a p.ts_com {
  width: 70%;
  height: auto;
  display: block;
  font-size:12px;
  color:var(--color-white);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  line-height:2em;
  margin:0 auto 1em;
}
.topsection ul li a p.ts_bn {
  width:fit-content;
  height: 30px;
  display: block;
  margin:0 auto;
  font-size: 12px;
  line-height: 28px;
  color:var(--color-white);
  background-color: var(--color-1st);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  padding:0 2em;
  border-radius: 9999px;
  transition: .4s all;
}
.topsection ul li a:hover p.ts_bn {
background-color: var(--color-3rd);
}

}

/* Style for Smartphone */
@media screen and (max-width: 768px) {

/* TopSection
----------------------------------------------------------------*/
.topsection {
  width:100%;
  height: auto;
  display: block;
  overflow: hidden;
  margin-top:80px;
}
.topsection ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.topsection ul li {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 2;
}
.topsection ul li div {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:100% auto;
  transition: 1s all;
}
.topsection ul li div:hover {
  background-size: 110% auto;
}
.topsection ul li a {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: rgba(0,0,0,0.5);
  transition: .4s all;
}
.topsection ul li a:hover {
  background-color: rgba(0,0,0,0.3);
}
.topsection ul li a h2 {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  font-size:20px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color:var(--color-white);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  margin-bottom: 0.5em;
  padding:55px 0 0 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 50px;
}
.topsection ul li a h2 span {
  display: block;
  font-size:12px;
}
.topsection ul li a p.ts_com {
  display: none;
}
.topsection ul li a p.ts_bn {
  width:fit-content;
  height: 20px;
  display: block;
  margin:0 auto;
  font-size: 10px;
  line-height: 18px;
  color:var(--color-white);
  background-color: var(--color-1st);
  text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
  padding:0 2em;
  border-radius: 9999px;
  transition: .4s all;
}
.topsection ul li a:hover p.ts_bn {
background-color: var(--color-3rd);
}

}