@charset "utf-8";
/* CSS Document */

/* 共通 */
.main_wrapper  {
  box-sizing: border-box; /*追加*/
  margin: 0 auto;
 background-color: #a99272;
}

.main_inner {
width: 100%;
max-width: 960px;
box-sizing: border-box; 
padding: 20px;
margin: 0 auto;

}

.word_inline{
display: inline-block;

}

/* TOPイメージ */
.main_img {
 background-image: url(/PC/ja/asset/img/nw/feature/bfg_cp/main_pc.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1920 / 520;
    width: 100%;
    max-height: 520px;
    min-height: 400px;

}



.cp_info{
width: 100%;
max-width: 900px;
background-color: #FFFFFF;
border-radius: 12px;
border: #003F7F solid 5px;
box-sizing: border-box;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
padding: 0;
margin: 0 auto;
}



.cp_info h2{
width: 100%;
padding: 10px;
background-color: #e6001b;
display: block;
margin: 0 auto 20px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;	
box-sizing: border-box;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}


.speech {
  position: relative;
  display: -webkit-box;
  display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
  margin: 0 auto 24px;
  padding: 16px;
  border: 2px solid #003F7F;
  border-radius: 100vh;
  background-color: #003F7F;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
    width: 90%;
    text-align: center;
    max-width: 700px;
}

.speech::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 12px 10px 0 10px;
  border-color: #003F7F transparent transparent;
  translate: -50% 100%;
}

.speech::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 8.9px 7.4px 0 7.4px;
  border-color: #003F7F transparent transparent;
  translate: -50% 100%;
}

.logo_img{
display: block;
width: 50%;
margin: 0 auto 10px;;
}





    .lp-title{
      font-size: clamp(18px, 4vw, 28px);
      margin: 0 0 18px;
      line-height: 1.25;
      letter-spacing: .02em;
    }
    .lp-title strong{ color:#111; font-weight: 900; }

    .lp-visual{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin: 8px auto 8px;
    }

    .four{ display:flex; align-items:center; }
    .plus{ font-size: 28px; font-weight: 900; line-height: 1; }

    /* --- Tire (CSS only) --- */
    .tire{
      width:100px;
      height:101px;
      margin-left:10px;
     background-image: url(/PC/ja/asset/img/nw/feature/bfg_cp/tire_img.webp);
	 background-size: cover;
      position: relative;
    }



    .four .tire:first-child{ margin-left:0; }

    .bonus{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .big{
      width:120px;
      height:121px;
    }

.tire_img_text{
      width:120px;
      height:121px;
    }


    /* --- Center badge (overlap on tire center) --- */
    .center-badge{
      position:absolute;
      inset: 0;
      margin:auto;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      border:1px solid rgba(255,255,255,.20);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      pointer-events:none;
    }

    /* --- Copy --- */
    .lp-desc{
      margin: 14px auto 0;
      max-width: 820px;
      font-size: 14px;
      line-height: 1.65;
      color:#111;
    }
    .lp-desc b{ font-weight: 900; }
    .lp-desc__sub{
      display:block;
      margin-top: 4px;
      color:#444;
      font-size: 13px;
    }
    .lp-note{
      margin: 8px auto 0;
      max-width: 820px;
      color:#666;
      font-size: 12px;
      line-height: 1.6;
    }



    /* =========================
       Scroll-triggered animation
       (Heavy / rugged style)
       ========================= */

    /* initial (not visible yet) */
    .js-animate .bonus .tire.big,
    .js-animate .bonus .center-badge{
      opacity: 0;
      transform: translateY(26px) scale(.92);
    }

    /* when visible */
    .js-animate.is-visible .bonus .tire.big{
      animation: heavyRise 680ms cubic-bezier(.22,.61,.36,1) both;
      transform-origin: 50% 100%;
    }

    .js-animate.is-visible .bonus .center-badge{
      animation: badgePress 520ms cubic-bezier(.22,.61,.36,1) 260ms both;
    }

    @keyframes heavyRise{
      0%   { transform: translateY(26px) scale(.92); opacity:0; }
      75%  { transform: translateY(-2px) scale(1.01); opacity:1; }
      100% { transform: translateY(0) scale(1); opacity:1; }
    }

    @keyframes badgePress{
      0%   { transform: translateY(10px) scale(.90); opacity:0; }
      70%  { transform: translateY(0) scale(1.02); opacity:1; }
      100% { transform: translateY(2px) scale(1); opacity:1; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .js-animate .bonus .tire.big,
      .js-animate .bonus .center-badge{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
      }
    }
.cp_requirement{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
width: 90%;
margin: 20px auto;

 }

.icons{
display: -webkit-box;
display: flex;
padding: 5px 8px;
background-color:#003F7F;
text-align: center;
color: #FFFFFF!important;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;


 }


.cp_requirement_item{
width: calc(46% - 20px);
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
margin-right: 20px;

 }

.tire_img{
width: 100%;
max-width: 200px;
margin-left: auto;
 margin-top: auto; 

 }


.icon_product{
position: absolute;
top:0;
left: 0;

 }

.product_name{
position: absolute;
bottom:0;
left: 0;
font-size: 20px;
font-weight: 600;
 -webkit-text-stroke: 4px #FFFFFF;
  text-stroke: 4px #FFFFFF;
  paint-order: stroke;

 }



.cp_requirement_size{
width: 54%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
 justify-content: space-between; 
position: relative

 }

.cp_requirement_size::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;          /* 線の太さ */
  background:#003F7F;     /* 線の色 */
  transform: translateY(-50%);
}

.cp_requirement_size_content{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: start;
justify-content: flex-start;
 }

.cp_requirement_size_content > .icons{

margin-right: 20px;
 }

.cp_requirement_size_content > p{
display: block;
width: calc(70% - 20px);
font-size: 20px;
font-weight: 600;
 }

.note{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
 gap: 20px;  
margin-top: 40px;
padding: 20px 0;
border-top: #003F7F solid 2px;
line-height: 1.5;
 }
.note li{
margin-bottom: 6px;
 }

.note_icon{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#e6001b;
    flex: 0 0 160px;   /* 160px固定。縮まない/伸びない */
  width: 160px;
  aspect-ratio: 1 / 1;   /* ← これで正方形固定 */
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  padding: 0;  
  box-sizing: border-box;
}



.note_txt{
  flex: 1 1 0;         /* 残りを伸縮して使う */
  min-width: 240px;    /* ここは好みで調整。折返しの閾値 */
  width: auto;   
  font-size: 13px;
 list-style-type: disc;
 padding-left: 20px;
 }

.note_b{
  font-size: 16px;
  font-weight: 600;
list-style-type: none;
 }




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

.main_img {
min-height: 360px;
}
}	
	
@media screen and (max-width: 870px) {

.main_img {
min-height: 20px;
}

.cp_requirement_size_content {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
	
.icon_product {
position: relative;

}
	
	
.cp_requirement_size::after {
   display: none;

}
.cp_requirement_size_content > .icons {
    margin-right: 0;
}
.cp_requirement_size_content > p{
width:100%;
 }
	
.tire_img{
 margin-top: 20px; 

 }

}
@media screen and (max-width: 768px) {
.main_img{
 background-image: url(/PC/ja/asset/img/nw/feature/bfg_cp/main_sp.webp);
  aspect-ratio: 5 / 4;
height: auto;
 background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.lp-visual {
    display: flex;
    justify-content: center;
    align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px auto 8px;
}
.tire {
    margin-left: 0;
}
	.tire.tire_s {
    margin-left: 10px;
}
}

@media screen and (max-width: 600px) {
	.tire.tire_s {
    margin-left: -10px;
    }
	
.cp_info h2 {
    font-size: 18px;

}
.logo_img {
    display: block;
    width: 80%;
    margin: 0 auto 10px;
}
.cp_requirement_item {
    width: 100%;
    margin-bottom: 20px;
}
.cp_requirement_size {
  width: 100%;
 margin-bottom: 20px;
}
.cp_requirement_size_content{
 margin-bottom: 20px;
}
	
.product_name {

}
.main_inner {
 padding: 10px;
}
	
.note {
    margin-top:20px;

}
}
@media screen and (max-width: 468px) {
.tire {
    width: 80px;
    height: 81px;
}
	
	.big {
    width: 140px;
    height: 141px;
}
}