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

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

.train-one-regular {
 
   color: transparent;               /* 塗りを消す */
  -webkit-text-stroke: 2px black;   /* 枠だけ黒に */
    
    
  
    
}


.page-wrap {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 100px 0 80px;
}

h1.article-body__subheadline{
    font-size: 3.5rem;
    text-align: center;
    padding: 50px 0 20px;
    
 
   color: transparent;               /* 塗りを消す */
  -webkit-text-stroke: 2px black;   /* 枠だけ黒に */
}

p.article-body__sub{
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    margin: 0 auto;
    line-height: 2.5rem;
}

p.article-body__text{
    width: 60%;
    font-size: 1.3rem;
    margin: 0 auto;
    padding: 50px 0 80px;
    line-height: 2.5rem;
}

.article-body{
    width: 100%;
}


@media (max-width: 768px) {
    


p.article-body__sub{
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    margin: 0 auto;
    line-height: 2.5rem;
}    
    
    
  p.article-body__text{
    width: 90%;
    font-size: 0.9rem;  
    line-height: 2rem;
}
}


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

container

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

.container {
  width: 100%;
  display: flex;
  align-items: stretch;
  margin: 20% auto 20%;    
     
}

.left-box {
  width: 50%;
  
}

.left-box__sticky {
  position: sticky;
  top: 80px;         /* ヘッダー込みなら top: 80px など調整 */
}


.right-box{
    width: 50%;
    
}


@media (max-width: 768px) {
 .container {  
  display: block;
 ;    
     
}
    
.left-box {
  width: 100%;
  
}

.left-box__sticky {
  position: static;
  top: 90px;  
}

 .left-box__sticky p{
        display: none;
    }

.right-box{
     width: 100%;
    
}    
    
}

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

contents1

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


.left-box.cont1 img{
    width: 80%;
    
}

p.sub{
    font-size:3rem;}

h2{
    font-size:4rem;
    text-align: center;
}

.code_cont1{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
}

.code_cont1_item1{  
  grid-column: 1 / 3; 
  grid-row: 1 / 3;  
}

.code_cont1_item2{  
  grid-column: 1 / 2; 
  grid-row: 3 / 4;  
}

.code_cont1_item3{  
  grid-column: 2 / 3; 
  grid-row: 3 / 4;  
}

.code_cont1_item4{  
  grid-column: 1 / 3; 
  grid-row: 4 / 5;  
}



.item_txt{
    margin: 5% 2%;
    font-size: 1.2rem;
}

.code_cont1_item5{  
  grid-column: 1 / 3; 
  grid-row: 5 / 6;  
}


.code_cont1_item6{  
  grid-column: 1 / 2; 
  grid-row: 5 / 6;  
}

.code_cont1_item7{  
  grid-column: 2 / 3; 
  grid-row: 5 / 6;  
}

.code_cont1_item8{  
  grid-column: 1 / 3; 
  grid-row: 6 / 7;  
}


.code_cont1_item9{  
  grid-column: 1 / 3; 
  grid-row: 7 / 8;  
}


.item_cont1 {
  margin: 5% auto;
  width: 90%;    
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2%;
}


.brand_name{
   font-size: .9rem;
   margin: 2% 2%; 
    
}

.brand_txt{
    font-size: .8rem;
    margin: 2% 2%; 
}


@media (max-width: 768px) {
  .left-box.cont1 img{
    width: 100%;}
      
  .item_txt{
    margin: 5% 2%;
    font-size: 1rem;
      
    
}
    
}


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

contents2

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



.left-box.cont2 img{
    width: 80%;
    
}


.code_cont2{
  width: 100%;
  
   
  
}



.code_cont2_item2 { 
  width: 100%;
     
    
}

.code_cont2_item2 img {
 
  width: 60%;    
  
}

.code_cont2_item3 { 
  width: 100%;    
   text-align: right; 
}
.code_cont2_item3 img {
 
  width: 60%    
  
}


.code_cont2_item4 {
    
  width: 100%;
}


.code_cont2_item5 {
  width: 100%;
}


.item_cont1 {
  margin: 5% auto;
  width: 90%;    
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2%;
}


.brand_name{
   font-size: .9rem;
   margin: 2% 2%; 
    
}

.brand_txt{
    font-size: .8rem;
    margin: 2% 2%; 
}


@media (max-width: 768px) {
  .left-box.cont2 img{
    width: 100%;
    
}
    
}


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

コーディネート

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

.coordinate-list__label {
  font-size: 0.85rem;
  margin-bottom: 7px;
    
}

.coordinate-list {
  width: 80%;
  margin: 0 auto;
}

.coordinate-list ul {
  width: 100%;    
  list-style: none;
  margin: 0 auto;      
      
}

.coordinate-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.coordinate-list__name {
  font-size: .9rem;
}

.coordinate-list__btn {
  display: inline-block;
  background: #222;
  color: #fff !important;
  font-size: 0.5rem;
  padding: 6px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.coordinate-list__btn:hover,
.coordinate-list__btn:visited,
.coordinate-list__btn:active {
  color: #fff;
}




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

zoom

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


.button {
  width: 100%;
  margin: 0% 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) {
  .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; } /* スマホ用を表示 */
}