@charset "utf-8";

/*.h2*/
[id*="category-h2"] {
  color: #674b1c;
  background: #fffae7;
  background-image: repeating-linear-gradient(135deg, #fffef9, #ffffff 5px, #f5f2e7 5px, #f5f2e7 8px);
  text-align: center;
  padding: 20px;
}
#label-writer [id*="category-h2"] .aem-Grid:has(>.image) {
  display: flex;
  justify-content: center;
}
#label-writer [id*="category-h2"] .image {
  width: 100px;
}
[id*="category-h2"] h2 {
  padding-bottom: 0;
}
[id*="category-h2"] h2 span {
  font-size: .8em;
}
/*.h3*/
.category-h3 {
  text-align: center;
  color: #674b1c;
  padding: 25px 10px;
  overflow: hidden;
}
.category-h3 .border {
  position: relative;
}
.category-h3 .border::before, .category-h3 .border::after {
  position: absolute;
  content: '';
  top: 50%;
  display: block;
  width: 2000px;
  height: 1px;
  transform: translateY(-50%);
  background: #b2b2b2;
}
.category-h3 .border::before {
  left: 110%;
}
.category-h3 .border::after {
  right: 110%;
}
.category-h3 .icon {
  position: relative;
}
.category-h3 .icon::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0px;
  display: block;
  width: 100%;
  height: 50px;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
.category-h3 .icon.model-pc-sp {
  padding-left: 7em;
}
.category-h3 .icon.model-pc-sp::before {
  background-image: url(/content/dam/casio/global/label-writer/img/icon-pc-sp.svg);
}
.category-h3 .icon.model-sp {
  padding-left: 3em;
}
.category-h3 .icon.model-sp::before {
  background-image: url(/content/dam/casio/global/label-writer/img/icon-sp.svg);
}

#how-to-contents{
    text-align: center;
}

#how-to-contents .text{
    background-color: #674b1c;
    padding: 20px;
}
#how-to-contents .text p{
    color: #ffffff;
    font-weight: 500;
    font-size: min(5vw, 20px);
}
#how-to-contents .image {
    background-color: #f5f2e4;
    width: 100%;
    aspect-ratio: 1.5;
    padding: 20px;
    overflow: hidden;
}
#how-to-contents .cmp-image {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#how-to-contents .image .cmp-image__link {
    height: 70%;
   max-width: 70%;
    transition: .3s ease-out;
    display: inline-block;
    transition: .2s ease-out;  
}
#how-to-contents .image .cmp-image__link:hover {
    transform: scale(1.1);
}
#how-to-contents img {
    height: 100% !important;  
}
@media (max-width: 767px) {
 
  .category-h3 {
    display: flex;
    text-align: left;
    justify-content: center;
    flex-wrap: wrap;
  }
  .category-h3 .border {
    display: flex;
    max-width: 70%;
  }
}