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

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

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

}

.word_inline{
display: inline-block;
font-weight: bold;
text-decoration: underline;
text-decoration-thickness: 9px;
text-decoration-color: #ff0000;
margin:0 auto 4px;
text-underline-offset: 0px;
-webkit-text-stroke: 5px #FFF;
paint-order: stroke;
border-radius: 30px;
}

.word_inline_2{
  position: relative;
  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: 3px auto 15px;
  padding: 12px;
  border: 2px solid #e60012;
  border-radius: 100vh;
  background-color: #e60012;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  width: 90%;
  text-align: center;
  max-width: 500px;
  font-weight: bolder;
}

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

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



/* TOPイメージ */
.main_img {
 background-image: url(/PC/ja/asset/img/nw/feature/bfg_cp/main_pc_2607.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: #000 solid 3px;
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: #000;
display: block;
margin: 0 auto 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;	
box-sizing: border-box;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}


.speech {
  padding: 6px;
  text-align: center;
  font-size: 25px;
}

.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:150px;
      height:170px;
      margin-left:-70px;
      background-image: url(/PC/ja/asset/img/nw/feature/bfg_cp/tire_img_03.webp);
	  background-size: cover;
      position: relative;
    }

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

    .big{
      width:170px;
      height:200px;
	  bottom: 12px;
    }

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


    /* --- Center badge (overlap on tire center) --- */
    .center-badge{
      position:absolute;
	  right: -70px;
      bottom: 14px;
      display:flex;
    }

    /* --- 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{
width: 80%;
margin: 0px auto;
border-top: 1px solid #1d3f8f;
 }

.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;


 }


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

 }


.icon_product{
width: 30%;
position: relative;
padding:5px;
margin: 0px;
font-size: 23px;
 }

.product_name{
font-size: 20px;
font-weight: 600;
paint-order: stroke;
position: relative;
left: 37%;
bottom: 43px;
 }

.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{
align-items: center;
line-height: 1.5;
 }

.note li{
margin-bottom: 6px;
 }

.note_icon{
  background-color: #e60012;
  margin: 0px 86px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
  padding: 13px;  
  box-sizing: border-box;
}



.note_txt{
 width: auto;   
 font-size: 13px;
 list-style-type: disc;
 padding: 19px 64px;
 margin: 15px 30px;
 }

.note_b{
  font-size: 16px;
  font-weight: 600;
 }




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

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


.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;
}
	
.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_2607.webp);
 aspect-ratio: 5 / 4;
  min-height: 260px;
	
}

  /* 全体余白 */
.main_inner {
    padding: 10px;
  }

.cp_info {
    border-width: 3px;
    border-radius: 10px;
  }

.cp_info h2 {
    font-size: 18px;
    padding: 10px;
    margin-bottom: 10px;
  }


  /* メインコピー */
.speech {
    padding: 10px 12px 0;
  }

.word_inline {
    display: inline;
    font-size: 25px;
    text-decoration-thickness: 9px;
    -webkit-text-stroke: 5px #fff;
    text-underline-offset: 1px;
  }

.word_inline_2 {
    width: 88%;
    max-width: 420px;
    margin: 12px auto 18px;
    padding: 10px 14px;
    font-size: 24px;
    line-height: 1.35;
    border-radius: 100vh;
  }

.word_inline_2::before {
    border-width: 10px 9px 0 9px;
  }

.word_inline_2::after {
    border-width: 7px 6px 0 6px;
  }

  /* タイヤビジュアル */
.lp-visual {
    margin: 0px auto 0px;
    gap: 0;
  }

.tire {
    width: 140px;
	margin-left: -83px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: -25px;
  }

.center-badge{
	right: -60px;
    bottom: 20px;	
	}
	
.big {
    width: 150px;
    height: 160px;
    bottom: 4px;
    margin-left: -50px; 
	}

.bonus {
    margin-left: -20px;
  }

.tire_img_text {
    width: 82px;
    height: 82px;
  }

  /* 対象条件エリア */
.cp_requirement_wrapper {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}
	
.cp_requirement {
    width:100%;
    margin: 10px auto -30px;
    border-top: 1px solid #1d3f8f;
  }

.cp_requirement_item {
    position: relative;
    display: block;
    min-height: auto;
    padding: 14px 0 16px;
    border-bottom: 1px solid #1d3f8f;
  }

.icons.icon_product {
  display: block;
  flex: 0 0 auto;

  width: auto;
  height: 44px;
  max-width: 190px;

  margin: 0;
  padding: 0;
  background: none;
}	
	
.icon_product_wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;
  margin: 0 auto;
  background: #193577;
}


	
.product_name {
    padding: 12px 0px 12px;
    position: static;
    display: block;
    font-size: 16px;
    white-space: nowrap;
    text-align: center; 
	}
	
.cp_requirement {
    /*width: 25%;*/
    margin: auto;
	margin-top: 10px;
    border-top: 0px solid #1d3f8f;
	}

  /* 注意事項 */
.note {
    margin-top: 22px;
    padding: 0 0 18px;
  }

.note_icon {
    margin: 0 auto 12px;
    width: 90%;
    padding: 10px 12px;
    font-size: 17px;
    line-height: 1.4;
  }

.note_txt {
    margin: 0 auto;
    padding:15px 49px;
    font-size: 12px;
    line-height: 1.6;
  }

.note_txt li {
    margin-bottom: 6px;
  }

.note_b {
    font-size: 13px;
    font-weight: 700;
  }
}

@media screen and (max-width: 600px) {
.tire.tire_s {
     margin: 0px -71px;
     margin-right: 5px;
     width: 118px;
     height: 123px;    
}
.big{
	width: 125px;
	right: -26px;
    height: 146px;
	}

.product_name {
    position: static;
    display: block;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
	}

.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;
}
	
.main_inner {
 padding: 10px;
}
	
.note {
    margin-top:20px;

}
}
@media screen and (max-width: 425px) {
	
.word_inline{
	font-size: 17px;
	}
	
.word_inline_2{
    font-size: 20px;
	}
	
.tire {
    right: -12px;
}
	
.tire.tire_s {
    margin: 0px -99px;
    margin-right: 37px;
    width: 106px;
     height: 115px;	
}
	
.big {
    width: 122px;
    height: 133px;
    position: absolute;
    right: -60px;
    bottom: -61px;	
	}

.product_name{
    position: static;
    display: block;
    padding: 3px 0px;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
	}
	
.center-badge{
    right: -77px;
    bottom: -63px;	
}
	
.tire_img_text{
     width: 85px;
     height: 110px;		
	}

.icon_product {
     width: 50%;
     margin: 12px 95px;
     padding: 0px 10px;
     font-size: 18px;
}
	
 /* 対象条件エリア */
  .cp_requirement {
    /*width: 90%;*/
    margin: auto;
    margin-top: 20px;
	border-top: 0px solid #1d3f8f
  }

  .cp_requirement_item {
    position: relative;
    display: block;
    min-height: auto;
    padding: 14px 0 16px;
  }

  .icon_product {
    width: 50%;
    margin: auto;
    padding: 0px 10px;
    font-size: 18px;
}

  .product_name {
    position: static;
    display: block;
    padding: 12px 8px 0;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}
}

@media screen and (max-width: 401px) {
.word_inline_2{
	font-size: 20px;
    width: 69%;	
		
	}	
}

@media screen and (max-width: 320px) {
.word_inline_2{
        font-size: 18px;
        width: 84%;	
	}	
	
.tire.tire_s {
        margin: 1px -104px;
        margin-right: 37px;
        width: 95px;
        height: 110px;
	}

    .big {
        width: 110px;
        height: 132px;
        position: absolute;
        right: -51px;
        bottom: -61px;
	}
	
    .tire_img_text {
        width: 68px;
        height: 104px;
	}
	
}


/* キャンペーン終了 */

.close_contet {
  position: relative;
}

.close {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #646464, transparent);
  z-index: 20;
}

.close .text {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 100%;
  transform: translate(-50%, 0);
  color: rgba(250, 250, 250, 1);
  font-size: 36px;
  text-align: center;
  font-weight: bold;
  text-shadow: 3px 4px 3px rgb(61 70 70);
  padding: 1em;
}

.close .text span {
  font-size: 18px;
}

@media screen and (max-width: 768px) {
	
  .close .text {
    font-size: 26px;
  }
}