@charset "utf-8";body {
   width: 100%;
   background-color:  #ffffff;
}

.top {
     width: 50%;
     margin: 0 auto;f
     text-align: center;
     background-color:  #8b4513;
     padding: 0.3% 0.3% 0;
}


.headline {
    width: 50%;
     margin: 0 auto;
     padding: 1% 0;
     font-size: 3.2em;
     line-height: 2.0em;
     color: #ffffff;
     background-color:  #8b4513;
     text-align: center;
}


.intro {
     width: 50%;
      margin: 0 auto;
      padding: 4em;
      font-size: 2.0em;
      line-height: 2.0em;
      color: #ffffff;
      background-color:  #8b4513;
}

.contents {
     width: 50%;
     margin: 0 auto  3%;
     background-color: #8b4513;
     padding: 0 0 3% 0;
 }
 .contents img {
      width: 100%;
 }
 .contents .text {
       font-size: 2.0em;
       line-height: 2.0em;
       color: #ffffff;
       margin: 0 15% 0;
       width: 90%;
 }


.contents .flexbox {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0 auto;
      padding: 0 0.5%;
      background-color:  #8b4513;
 }


.contents .flexbox .box {
      width: 33%;
      margin-bottom: 0.5%;
      position: relative;
      display: inline-block;
      overflow: hidden;
 }

.contents .box img {
  display: block;
  transition: .4s ease;
}

.contents .box .hover-text {
  position: absolute;
  top: 55%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 2em;
  width: 100%;
  min-width: 200px;       /* 最低幅を確保 */
  max-width: 100%;         /* 画像サイズに応じて最大幅を指定 */
  text-align: center;     /* 中央揃え */
  white-space: normal
  padding: 0.5em 1em;    /* 余白で見た目を広げる */
  transform: translate(-50%, -50%) scale(0.95);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 2.0px
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease-out;
  text-align: center;
  z-index: 1000;
}



.contents .box .hover-text .price {
  display: block;
  font-size: 1.2rem;
}

.contents .box:hover img,
.contents .box:active img {
  filter: brightness(50%) blur(1px); /* 白く明るく & ぼかし */
}

.contents .box:hover .hover-text,
.contents .box:active .hover-text {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.4s ease-out, opacity 0.2s ease-in;
}

.contents .itemname  {
      color: #ffffff;
      font-size: 1.8em;
      text-align: center;
      margin-top: 5%;
}

.contents .itemprice  {
      color: #ffffff;
      font-size: 1.5em;
      text-align: center;
      margin-top: 0;
}

.outro {
      font-size: 2.2em;
      line-height: 2.2em;
      color: #000000;
      margin: 0 auto;
      padding: 2em;
      font-style: italic;
      background-color:  #8b4513;
}

   .scroll-fade {
        opacity: 0;
    }

.itemlink {
  width: 35%;
  margin: 7% auto 1%;
  background-color: #8b4513;
  font-size: 2.2em; 
  font-weight: bold !important;
    }

.itemlink a{
  display: block;
  text-align: center;
  flex-wrap: wrap;
  background: #ffffff;
  color: #8b4513;
  text-align: center;
  align-items: flex-start;
  border: double 10px #8b4513;
  padding: 3%;
}




 @media screen and (max-width: 767px) {

 .top {
     width: 100%;
     background-color:  #8b4513;
     padding: 1.5% 1% 1% 1% ;
     text-align: center;
 }


.headline {
     width: 100%;
     padding: 2% 0;
     font-size: 2.0em;
     line-height: 1.8em;
     color: #ffffff;
     background-color:  #8b4513;
     text-align: center;
}

 .intro {
     width: 100%;
     font-size: 1.5em;
     line-height: 1.7em;
     color: #ffffff;
     margin: 0;
     padding: 3em 3em 1em;
     background-color: #8b4513;
 }

 .contents {
     width: 100%;
     margin: 0 auto;
     padding: 0 0 10% 0;
     background-color: #8b4513;
 }

 .contents .text {
     font-size: 1.4em;
      line-height: 1.7em;
      color: #ffffff;
       margin: 0 auto 5%;
       width: 80%;
 }

 .contents .text0 {
      width: 100%;
      font-size: 1.3em;
      line-height: 1.7em;
      color: #696969;
      margin: 7% auto;
 }

.contents .flexbox {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0 auto ;
      padding: 1%;
      background-color:  #8b4513;
 }

.contents .flexbox .box {
      width: 49.5%;
      margin-bottom: 1%;
      position: relative;
      display: inline-block;
      overflow: hidden;
 }

.contents .box img {
  display: block;
  transition: .4s ease;
}

.contents .box .hover-text {
  position: absolute;
  top: 55%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 2em;
  width: 100%;
  min-width: 200px;       /* 最低幅を確保 */
  max-width: 100%;         /* 画像サイズに応じて最大幅を指定 */
  white-space: normal;
  padding: 0.5em 1em;    /* 余白で見た目を広げる */
  transform: translate(-50%, -50%) scale(0.95);
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.8px
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease-out;
  text-align: center;
  z-index: 1000;
}

.contents .box .hover-text .price {
  font-size: 1.2rem;
}

.contents .box:hover img,
.contents .box:active img {
  filter: brightness(50%) blur(1px); /* 白く明るく & ぼかし */
}

.contents .box:hover .hover-text,
.contents .box:active .hover-text {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.4s ease-out, opacity 0.2s ease-in;
}


.contents .itemname  {
      font-size: 1.2em;
      text-align: center;
      margin-top: 8%;
}

.contents .itemprice  {
      font-size: 1.0em;
      text-align: center;
      margin-top: 2%;
}

.itemlink {
  width: 42%;
  margin: 7% auto 0;
  background-color: #8b4513;
  font-size: 1.6em; 
  font-weight: bold !important;
    }

.itemlink a{
  display: block;
  text-align: center;
  flex-wrap: wrap;
  background: #ffffff;
  color: #8b4513;
  text-align: center;
  align-items: flex-start;
  border: double 10px #8b4513;
  padding: 2% 5%;
}

.outro {
     width: 85%;
     font-size: 1.6em;
     line-height: 1.7em;
      color: #696969;
      margin: 0 auto;
      padding: 0 3em 0;
      font-style: italic;
}
}