@charset "UTF-8";

/*****************************
common
*****************************/
.pagesec-screw{
  background: url(../../images/page/products/screw_bg.webp) no-repeat center / cover;
}
.pagesec-tool{
  background: url(../../images/page/products/tool_bg.webp) no-repeat center / cover;
}
.pagesec-welding{
  background: url(../../images/page/products/welding_bg.webp) no-repeat center / cover;
}
.pagesec-gas{
  background: url(../../images/page/products/gas_bg.webp) no-repeat center / cover;
}

.pagesec .txtwrap {
  background: #fff;
  border-radius: 20px;
  margin-top: 5rem;
  min-height: 480px;
  padding: 2rem 4rem 4rem;
}
.pagesec .en{
  color: #FF6347;
  font-family: "M PLUS 2", sans-serif;
  font-size: 15rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  top: -11rem;
  left: -3rem;
  -webkit-text-stroke: 17px #fff;
  paint-order: stroke;
  text-transform: capitalize;
}
.pagesec .ttlbox .ttl{
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 5px;
}
.pagesec .ttlbox .ttl::first-letter{
  color: #FF6347;
}
.pagesec-tool .en,
.pagesec-tool .ttlbox .ttl::first-letter{
  color: #4682B4;
}
.pagesec-welding .en,
.pagesec-welding .ttlbox .ttl::first-letter{
  color: #FF8C00;
}
.pagesec-gas .en,
.pagesec-gas .ttlbox .ttl::first-letter{
  color: #FFD700;
}

.pagesec .content::after {
  content: "";
  clear: both;
}
.pagesec .imgbox {
  float: right;
  margin: 0 0 2rem 2rem;
  width: 35%;
}
.pagesec .content .subttl {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.pagesec .content .list{
  margin-top: 5rem ;
}
.pagesec .content .list > dt{
  background: #FF6347;
  border-radius: 8px 8px 0 0;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  display: inline-block;
  letter-spacing: 2px;
  padding: .5rem 2rem;
  text-shadow: 2px 2px #333;
}
.pagesec .content .list > dd{
  border: 2px solid #FF6347;
  border-radius: 0 8px 8px 8px;
  padding: 2rem;
}
.pagesec .content .list > dd ul{
  gap: .5rem 1rem;
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .pagesec .en {
    font-size: 10rem;
    top: -6rem;
    left: -1rem;
  }
  .pagesec .txtwrap {
    margin-top: 2rem;
    padding: 2rem 3rem 4rem;
  }
  .pagesec .ttlbox .ttl {
    font-size: 4rem;
  }
  .pagesec .content .subttl {
    font-size: 2.4rem;
  }
  .pagesec .content .list {
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec .en {
    font-size: 20vw;
  }
  .pagesec .txtwrap {
    padding: 2rem 2rem 1rem;
  }
  .pagesec .content {
    display: flex;
    flex-direction: column;
  }
  .pagesec .ttlbox .ttl {
    font-size: 8vw;
  }
  .pagesec .content .subttl {
    font-size: 5vw;
  }
  .pagesec .imgbox{
    float: none;
    margin: 0;
    order: 5;
    width: 100%;
  }
  .pagesec .content .list > dd{
    padding: 1rem;
  }
}

/*****************************
pagesec-screw
*****************************/

/*****************************
pagesec-tool
*****************************/
.pagesec-tool .content .list > dt{
  background: #4682B4;
}
.pagesec-tool .content .list > dd{
  border-color: #4682B4;
}

/*****************************
pagesec-welding
*****************************/
.pagesec-welding .content .list > dt{
  background: #FF8C00;
}
.pagesec-welding .content .list > dd{
  border-color: #FF8C00;
}

/*****************************
pagesec-gas
*****************************/
.pagesec-gas .content .list > dt{
  background: #FFD700;
}
.pagesec-gas .content .list > dd{
  border-color: #FFD700;
}
.pagesec-gas .content .list > dd dl{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.pagesec-gas .content .list > dd dl > div{
  width: calc(50% - 2rem);
}
.pagesec-gas .content .list > dd dl > div > dt{
  font-weight: bold;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .pagesec-gas .content .list > dd dl > div {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
}