*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: #fff;
  color: #222;
    overflow-x: hidden;
}


.article-body{
    width: 100%;
    background: #f7f7f7;
    padding: 6% 0 3%;
}

.article-body img {
 
  display: block;
  margin: 0 auto;    
}
.article-body img.pc-only { display: block; }
.article-body img.sp-only { display: none; }

.article-wrap {
  width: 50%;
  margin: 0 auto;
  padding: 3% 5%;
}
.brand-label {
  font-size: 1rem;
  color: #888;
  margin-bottom: 1%;
  border-bottom: 1px solid #888;
  display: inline-block;
  padding-bottom: 1%;
}
.article-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #222;
  line-height: 2;
}
.article-date {
  font-size: 0.8rem;
  color: #aaa;
  margin-bottom: 1.5rem;
}
.article-body__text {
  font-size: 1.1rem;
  line-height: 1.95;
  letter-spacing: 0.1;
  color: #444;
}




@media (max-width: 768px) {
    
.article-wrap {
  width: 100%;
}    

.article-title {
  font-size: 2rem;


}    
    
}


/******************************************

container

******************************************/


.contents{
    width: 100%;
    margin: 10% 0;
}
.feature-block {
  width: 60%;
    margin: 0 auto 15%;
}

.feature-block__images {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.feature-block__img-left {
  width: 48%;
  position: relative;
}

.feature-block__center {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5% 0;
}

.feature-block__img-right {
  width: 42%;
  margin-top: 8%    
}

.feature-block__img-left img,
.feature-block__img-right img {
  width: 100%;
  display: block;
}
.feature-block__vertical-text {
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  position: absolute;
  top: 5%;
  left: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.white{
    color:#fff
}

.feature-block__vertical-text.white {
  color: #fff;
}

.feature-block__vertical-text.is-show {
  opacity: 1;
  transform: translateY(0);
}






.feature-block__item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 5% auto;
  gap: 2%;
}



.feature-block__item-body {
  width: 60%;
}

.feature-block__item-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feature-block__item-text {
  width: 95%;    
  font-size: 1rem;
  line-height: 1.95;
  color: #444;
}

.feature-block__item-shop {
  width: 40%;
}

.feature-block__item-name {
 margin: 0 5%; 
   font-size:1rem;
  margin-bottom: 0.25rem;
}

.feature-block__item-price {
  margin: 0 5%;     
  font-size: 1rem;

  margin-bottom: 0.75rem;
}

.feature-block__item-btn {
    margin: 0 5%; 
  display: inline-block;
  background: #222;
  color: #fff!important;
  font-size: 0.75rem;
  padding: 2% 6%;
  border-radius: 2rem;
  text-decoration: none;
  letter-spacing: 0.08em;
}





@media (max-width: 780px) {
    
    .feature-block {
  width: 95%;
    margin: 0 auto 5%;
}
    
    
  .feature-block__images { flex-direction: column; }
  .feature-block__img-left,
  .feature-block__img-right { width: 100%; }
  .feature-block__img-right { margin-top: 0; }
  .feature-block__vertical-text { left: 0;font-size: 1.2rem; }
  .feature-block__alphabet { font-size: 1.5rem; }
  .feature-block__item { flex-direction: column; width: 90%; }
  .feature-block__item-thumb,
  .feature-block__item-body,
  .feature-block__item-shop { margin-top: 8%; width: 100%; }
    
    .feature-block__item-name,
    .feature-block__item-price,
    .feature-block__item-btn{
 margin: 2% 0 0 0; 
   
}


}


/******************************************

item

******************************************/

.item-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;    
  width: 100%;
}

.item-grid__item {
  width: 30%;
    margin: 0 auto;
}

.item-grid__img img {
  width: 100%;
  display: block;
}




.item-grid__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2% 2%;
  border-top: none;
  gap: 4%;
}


.item-grid__meta {
  flex: 1;
  
  padding-bottom: 0.2rem;
}

.item-grid__name {
  border-bottom: 1px dotted #ddd;
  padding-bottom: 0.3rem;
  margin-bottom: 0.2rem;
}

.item-grid__brand {
  font-size: 0.75rem;
  color: #888;
  margin-top: 0.2rem;
}

.item-grid__btn {
  display: inline-block;
  background: #222;
  color: #fff!important;
  font-size: 0.75rem;
  padding: 1% 4%;
  text-decoration: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.item-grid__btn--ask {
  background: #fff;
  color: #222!important;
  border: 1px solid #222;
}

.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 780px) {
  .item-grid { flex-wrap: wrap; }
  .item-grid__item { width: 45%; }
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/******************************************

zoom

******************************************/


.button {
  width: 100%;
  margin: 0% auto 5%;    
     
}

.button_BIRKENSTOCK {
  
  margin: -10% auto 5%;    
     
}

.banner-button {
  /* レイアウトの設定 */
  display: block;          
  width: 100%;            
  max-width: 600px;        
  margin: 20px auto;       
  padding: 15px 0;        
  
  /* 色とテキストの設定 */
  background-color: #000000;
  color: #ffffff !important; /* 確実に白にするための指定 */         
  text-align: center;      
  text-decoration: none;    
  font-size: 1.5rem;         
  font-weight: 500;       
  letter-spacing: 0.1em;   
  
  /* アニメーション */
  transition: opacity 0.3s ease; /* ホバー時の変化を滑らかに */
}

/* マウスを乗せた時の動き */
.banner-button:hover {
  opacity: 0.7;            /* 少し透明にする */
}


@media (max-width: 768px) {
    
 .button_BIRKENSTOCK {
  
  margin: 10% auto 5%;    
     
}   
    
  .banner-button {
           
  width: 90%;            
  margin: 20px auto;       
  padding: 15px 0;        
     
  font-size: 1.2rem;         
  font-weight: 500;       
 
    
}
    
}

/******************************************

zoom

******************************************/

.fade-zoom {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}



/* ===== 追従セールバー ===== */
.sale-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  background-color: #c8151b;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,.08) 8px,
    rgba(255,255,255,.08) 16px
  );
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  font-family: 'Outfit', 'Zen Kaku Gothic New', sans-serif;
}

.sale-bar__badge {
  background: #fff;
  color: #c8151b;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sale-bar__badge strong {
  font-size: 18px;
  letter-spacing: 0;
}

.sale-bar__text {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.sale-bar__period {
  color: rgba(255,255,255,.85);
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.5);
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sale-bar__arrow {
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

@media (max-width: 640px) {
  .sale-bar { gap: 8px; padding: 8px 10px; }
  .sale-bar__text { font-size: 11px; }
  .sale-bar__period { font-size: 10px; padding: 2px 7px; }
  .sale-bar__badge strong { font-size: 15px; }
}



/******************************************

color-dots

******************************************/
.color-dots {
  margin: 2% 2%;    
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.color-dot--white { background: #e8e8e8; border: 1px solid #bfbfbf; }
.color-dot--gray1 { background: #b8b5ae; }
.color-dot--gray2 { background: #a8a49e; }
.color-dot--gray3 { background: #8a8880; }
.color-dot--pink { background: #c98070; }
.color-dot--gray4 { background: #7a7a7a; }
.color-dot--dark { background: #3a3a38; }
.color-dot--black { background: #1a1a1a; }
.color-dot--lightblue { background: #c8d8e8; }
.color-dot--brown { background: #3a2218; }
.color-dot--beige { background: #d8d0c4; }
.color-dot--bluegray { background: #6f8fa6; }
.color-dot--olive { background: #4a4f3f; }
.color-dot--bluegray2 { background: #b7bfcc; }
.color-dot--pinkbeige { background: #e3c7bd; }
.color-dot--beige2 { background: #d8cdae; }
.color-dot--mint { background: #cfe5b8; }
.color-dot--bluegray3 { background: #a9c3d6; }
.color-dot--blue { background: #3c43ae; }
.color-dot--light-blue { background-color: #bcd0d0; }
.color-dot--yellow { background-color: #f7b52c; }
.color-dot--red { background-color: #d13d3d; }
.color-dot--green { background-color: #2e6b54; }
.color-dot--navy { background-color: #2b3a67; }
.color-dot--light-green { background-color: #d1deb2; }
.color-dot--charcoal-melange { background-color: #4a4a4a; }
.color-dot--dark-green { background-color: #2e3d36; }
.color-dot--stripe-bw { background: repeating-linear-gradient(180deg, #1a1a1a 0px, #1a1a1a 2px, #e8e8e8 2px, #e8e8e8 4px); }
.color-dot--stripe-pk { background: repeating-linear-gradient(180deg, #c98070 0px, #c98070 2px, #e8e8e8 2px, #e8e8e8 4px); }
.color-dot--beige-stripe { background: linear-gradient(#d9d4be 0% 35%, #f0652f 35% 45%, #d9d4be 45% 55%, #f0652f 55% 65%, #d9d4be 65% 100%); }
.color-dot--navy-stripe { background: linear-gradient(#1a1a1a 0% 35%, #ffffff 35% 45%, #1a1a1a 45% 55%, #ffffff 55% 65%, #1a1a1a 65% 100%); }
.color-dot--multi1 { background: linear-gradient(180deg, #3a2218 0% 20%, #ffffff 20% 40%, #1a1a1a 40% 60%, #3a2218 60% 80%, #d8d0c4 80% 100%); }
.color-dot--multi2 { background: linear-gradient(180deg, #c8d8e8 0% 25%, #c98070 25% 50%, #c8d8e8 50% 75%, #c98070 75% 100%); }
.color-dot--multi3 { background: linear-gradient(180deg, #d8d0c4 0% 30%, #1a1a1a 30% 45%, #e3c7bd 45% 70%, #1a1a1a 70% 85%, #e3c7bd 85% 100%); }
.color-dot--multi4 { background: linear-gradient(180deg, #2e6b54 0% 30%, #3a2218 30% 45%, #2e6b54 45% 70%, #3a2218 70% 85%, #2e6b54 85% 100%); }
.color-dot--multi5 { background: linear-gradient(180deg, #3a2218 0% 40%, #1a1a1a 40% 55%, #3a2218 55% 75%, #f7b52c 75% 100%); }
.color-dot--stripe-gray { background: repeating-linear-gradient(180deg, #b8b5ae 0px, #b8b5ae 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-be { background: repeating-linear-gradient(180deg, #d8d0c4 0px, #d8d0c4 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-rd { background: repeating-linear-gradient(180deg, #d13d3d 0px, #d13d3d 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-nv { background: repeating-linear-gradient(180deg, #2b3a67 0px, #2b3a67 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-gr { background: repeating-linear-gradient(180deg, #2e6b54 0px, #2e6b54 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--multi6 { background: linear-gradient(180deg, #ffffff 0% 30%, #1a1a1a 30% 40%, #f7b52c 40% 70%, #1a1a1a 70% 80%, #ffffff 80% 100%); }
.color-dot--multi7 { background: linear-gradient(180deg, #a9c3d6 0% 30%, #3a2218 30% 45%, #d8cdae 45% 70%, #3a2218 70% 85%, #a9c3d6 85% 100%); }
.color-dot--multi8 { background: linear-gradient(180deg, #2e6b54 0% 30%, #3a2218 30% 45%, #a9c3d6 45% 70%, #3a2218 70% 85%, #2e6b54 85% 100%); }
.color-dot--multi9 { background: linear-gradient(180deg, #3c43ae 0% 25%, #f0652f 25% 50%, #b7bfcc 50% 75%, #3c43ae 75% 100%); }
.color-dot--multi10 { background: linear-gradient(180deg, #ffffff 0% 15%, #3a2218 15% 20%, #ffffff 20% 35%, #3a2218 35% 40%, #ffffff 40% 55%, #3a2218 55% 60%, #ffffff 60% 75%, #3a2218 75% 80%, #ffffff 80% 100%); }
.color-dot--multi11 { background: linear-gradient(180deg, #f7b52c 0% 15%, #c98070 15% 20%, #f7b52c 20% 35%, #c98070 35% 40%, #f7b52c 40% 55%, #c98070 55% 60%, #f7b52c 60% 75%, #c98070 75% 80%, #f7b52c 80% 100%); }
.color-dot--multi12 { background: linear-gradient(180deg, #1a1a1a 0% 20%, #ffffff 20% 25%, #1a1a1a 25% 40%, #ffffff 40% 45%, #1a1a1a 45% 60%, #ffffff 60% 65%, #1a1a1a 65% 80%, #ffffff 80% 85%, #1a1a1a 85% 100%); }
.color-dot--stripe-bl-w { background: repeating-linear-gradient(180deg, #3c43ae 0px, #3c43ae 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-gr-w { background: repeating-linear-gradient(180deg, #2e6b54 0px, #2e6b54 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-nv-w { background: repeating-linear-gradient(180deg, #2b3a67 0px, #2b3a67 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--multi13 { background: linear-gradient(180deg, #d8d0c4 0% 15%, #ffffff 15% 20%, #d8d0c4 20% 35%, #ffffff 35% 40%, #d8d0c4 40% 55%, #ffffff 55% 60%, #d8d0c4 60% 75%, #ffffff 75% 80%, #d8d0c4 80% 100%); }
.color-dot--multi14 { background: linear-gradient(180deg, #3a2218 0% 15%, #ffffff 15% 20%, #3a2218 20% 35%, #ffffff 35% 40%, #3a2218 40% 55%, #ffffff 55% 60%, #3a2218 60% 75%, #ffffff 75% 80%, #3a2218 80% 100%); }
.color-dot--multi15 { background: linear-gradient(180deg, #3a3a38 0% 40%, #ffffff 40% 45%, #1a1a1a 45% 55%, #ffffff 55% 60%, #3a3a38 60% 100%); }
.color-dot--multi16 {  background: linear-gradient(180deg, #f7b52c 0% 35%, #ffffff 35% 45%, #f7b52c 45% 55%, #ffffff 55% 65%, #f7b52c 65% 100%);}
.color-dot--multi17 {  background: linear-gradient(180deg, #3c43ae 0% 35%, #ffffff 35% 45%, #3c43ae 45% 55%, #ffffff 55% 65%, #3c43ae 65% 100%);}
.color-dot--stripe-sax { background: repeating-linear-gradient(180deg, #a9c3d6 0px, #a9c3d6 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-gray-w { background: repeating-linear-gradient(180deg, #8e8e8e 0px, #8e8e8e 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-sax2 { background: repeating-linear-gradient(180deg, #6f8fa6 0px, #6f8fa6 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-blue { background: repeating-linear-gradient(180deg, #3c43ae 0px, #3c43ae 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-brown { background: repeating-linear-gradient(180deg, #3a2218 0px, #3a2218 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-red { background: repeating-linear-gradient(180deg, #d13d3d 0px, #d13d3d 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-black { background: repeating-linear-gradient(180deg, #1a1a1a 0px, #1a1a1a 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-beige2 { background: repeating-linear-gradient(180deg, #d8d0c4 0px, #d8d0c4 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-navy2 { background: repeating-linear-gradient(180deg, #2b3a67 0px, #2b3a67 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-yellow { background: repeating-linear-gradient(180deg, #f7b52c 0px, #f7b52c 2px, #1a1a1a 2px, #1a1a1a 4px); }
.color-dot--stripe-yellow-w { background: repeating-linear-gradient(180deg, #f7b52c 0px, #f7b52c 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-charcoal-w { background: repeating-linear-gradient(180deg, #4a4a4a 0px, #4a4a4a 2px, #ffffff 2px, #ffffff 4px); }
.color-dot--stripe-pk-w { background: repeating-linear-gradient(180deg, #e3c7bd 0px, #e3c7bd 2px, #ffffff 2px, #ffffff 4px); }




/* PC用：デフォルト */
.sp-only { display: none; } /* スマホ用は隠す */
.pc-only { display: block; } /* PC用を表示 */


/* スマホ用（画面幅が768px以下の場合） */
@media screen and (max-width: 768px) {
  .pc-only { display: none; } /* PC用を隠す */
  .sp-only { display: block; } /* スマホ用を表示 */
}