/* ベースリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h2 {
  margin: 0;
  line-height: 1.6;
}

p {
  margin: 0;
  line-height: 1.6;
}

body {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1.6;
  background: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}


/* -------------------共通css-------------- */

p.card_sub {
   font-weight: 400;
}
.card_wide p.card_sub{
  font-weight: 400;
}


/* -----------改行関係1----------- */
.sp_only {
  display: none;
}

@media screen and (max-width: 480px) {
  .sp_only {
    display: block;
  }
}

/* -----------改行関係2----------- */
.small_sp_only {
  display: block;
}

@media screen and (max-width: 375px) {
  .small_sp_only {
    display: none;
  }
}

/* ------PC----- */
.pc_only {
  display: block;
}

@media screen and (max-width: 480px) {
  .pc_only {
    display: none;
  }
}
/* -----------改行関係3----------- */
.flex {
  display: flex;
  align-items: center;
}
.max_contents {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.middle_contents {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
/* -----------PC・SP画像使い分け----------- */
.graph_img .sp {
  display: none;
}
@media screen and (max-width: 480px) {
  .graph_img .pc {
    display: none;
  }
  .graph_img .sp {
    display: inline;
  }
}
/* ------------------ */
.benefit_header_img .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .benefit_header_img .pc {
    display: none;
  }
  .benefit_header_img .sp {
    display: inline;
  }
}
/* ------------------ */
.graph_img .sp,
.detail_number_img .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .graph_img .pc,
  .detail_number_img .pc {
    display: none;
  }
  .graph_img .sp,
  .detail_number_img .sp {
    display: inline;
  }
}
/* ------------------ */


/* -------------------/共通css------------------- */



/* <!-- ------------header-------------- --> */
header {
  height: 60px;
}

.header_box {
  background: #fff;
  padding: 20px 0 20px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  position: fixed;
  z-index: 999;
  width: 100%;
  box-shadow: 0px 3px 6px #0000004D;
  background-color: rgba(255, 255, 255, 0.7);

}

/* ロゴ */
.header_logo {
  height: 60px;
}

.header_logo img {
  height: 60px;
}

/* ナビゲーション */
.header_nav {
  display: flex;
  align-items: center;
  gap: 60px;
}

.header_nav_box {
  list-style: none;
  padding-left: 0;
  margin: 0;
  gap: 60px;
}

.header_nav_box li {
  position: relative;
  padding-left: 18px;
  /* 余白を調整 */
}

.header_nav_box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #F2C8B6;
  /* 通常時の〇の色 */
  transition: background-color 0.2s;
}

.header_nav_box li a {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  /* 通常時の文字色 */
  transition: color 0.2s;
}

.header_nav_box li:hover::before {
  background-color: #EE7744;
  /* hover時の〇の色 */
  width: 16px;
  height: 16px;
  left: -5px;
  top: 50%;
}

.header_nav_box li:hover a {
  color: #EE7744;
  /* hover時の文字色 */
}




/* お申し込みボタン */
.header_btn {
  background-color: #EE7744;
  /* 通常時：濃いブルー背景 */
  color: #fff;
  /* 白文字 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 21px 18px;
  border-radius: 0px 0px 0px 10px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.header_btn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/20_warranty/20_Application_icon.svg') no-repeat center;
  background-size: contain;
  transition: background 0.3s ease;
}

/* hover時のデザイン */
.header_btn:hover {
  background-color: #FFE7DC;
  /* 薄いブルー背景 */
  color: #EE7744;
  /* 青文字 */
  border: 2px solid #EE7744;
  opacity: 1;
  /* 枠線を青に */
}

.header_btn:hover::before {
  background: url('../images/20_warranty/20_Application_icon_hover.svg') no-repeat center;
  background-size: contain;
}


/* スマホ対応 */
@media screen and (max-width: 480px) {
  .header_box {
    padding: initial;
  }

  .header_nav {
    flex-direction: column;
    gap: 10px;
  }

  .header_btn {
    padding: 15px 13px 10px;
    flex-direction: column;
    font-size: 12px;
  }

  .header_nav ul {
    display: none;
  }

  .header_nav p a {
    width: 100%;
    justify-content: center;
  }
}

/* <!-- ------------/header-------------- --> */




/* <!-- ------------MV-------------- --> */
.mv {
  position: relative;
  height: 426px;
  margin-top: -60px;
}

@media screen and (max-width: 768px) {
  .mv {
    margin-top: initial;
  }
}

.mv .back-img {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 768px) {
  .back-img {
    background-image: url('../images/20_warranty/20 _FV_sp.webp') !important;
  }
}

.mv .back-img .title {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 40px;
  font-weight: var(--fw-bold);
  width: 100%;
  padding: 0 10px;
}

@media screen and (max-width: 768px) {
  .mv .back-img .title {
    font-size: 32px;
    top: 50%;
  }
}

/* <!-- ------------/MV-------------- -->




*/
/* .support {
  padding-bottom: 80px;
} */

.support .wrap_s {
  width: 94%;
}

.support .wrap_s h2 {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #333;
  margin-top: 64px;
  line-height: 1.8;

}

.support .wrap_s img {
  display: block;
  width: 100%;
  max-width: 742px;
  margin-inline: auto;
}


/* ------------------------h2のtitle------------------------ */
.section_title {
  text-align: center;
  margin-top: 100px;
}

@media screen and (max-width: 480px) {
  .section_title {
    padding-top: 80px;
    margin-top: initial;
  }
}


.section_title h2 {
  letter-spacing: 1.28px;
  display: inline-block;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  position: relative;
  padding: 0 50px 20px;
}

@media screen and (max-width: 480px) {
  .section_title h2 {
    font-size: 24px;
  }
}


.section_title h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #3366AA;
  /* 青みのあるライン */
  position: absolute;
  bottom: 0;
  left: 0;
}

/* ---------------------h2のtitle---------------- */

/* -------ハンファ20年保証制度（有償）とは------- */
.graph_box {
  margin-top: 40px;
  background-image: url('../images/20_warranty/20_20year_bg.webp');
  /* CSSファイルからの相対パス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 140px;
}

@media screen and (max-width: 480px) {
  .graph_box {
    padding: 80px 15px;
  }
}

.graph_box .graph_img {
  width: 48.5%;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
  .graph_box .graph_img {
    width: 100%;
  }
}


.graph_box .attention_box {
  background: rgba(255, 255, 255, 0.92);
  padding: 60px 20px;
  border-radius: 20px;
  border: 1px solid #fff;
  margin-top: 32px;
  position: relative;
}

.figure_img {
  position: absolute;
  top: -2.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.attention_text_box {
  margin-bottom: 40px;
}

.graph_box .attention_box .attention_title {
  font-size: 24px;
  font-weight: bold;
  color: #EE7744;
  margin-bottom: 8px;
}

.graph_box .attention_box .attention_title span {
  font-size: 14px;
}

.graph_box .attention_box p {
  font-size: 16px;
  font-weight: normal;
}

@media screen and (max-width: 480px) {
  .graph_box .attention_box p {
    font-size: 14px;
  }
}

.graph_box .attention_box .graph_img {
  margin-bottom: 40px;
}

.graph_box .attention_box .fz_10 {
  font-size: 10px;
  font-weight: normal;
  text-align: left;
  line-height: 1.6;
}

/* ---------/ハンファ20年保証制度（有償）とは--------- */

/* --------------------加入条件-------------------- */
.warranty_section {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #F4F7FB;
  padding: 80px 20px 40px;
  color: #333;
  margin-top: 40px;
}

@media screen and (max-width: 480px) {
  .warranty_section {
    padding: 40px 15px 10px;
  }
}


/* カード共通 */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 94px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card.add_pa {
  padding: 73px 20px 60px;
}

.card.add_pa .card_text {
  margin-bottom: 20px;
}

.card h3 {
  font-size: 24px;
  color: #3366AA;
  margin-bottom: 16px;
}

@media screen and (max-width: 480px) {
  .card h3 {
    font-size: 20px;
  }
}

.card p {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

@media screen and (max-width: 480px) {
  .card p {
    font-size: 14px;
  }
}

.card p span.highlight {
  color: #EE7744;
  font-size: 14px;
  display: block;
  margin-bottom: 20px;
  font-weight: 400;
}

.card small {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: #777;
  font-weight: 400;
}

/* 横並び */
.card_row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 32px;
  gap: 32px;
}

@media screen and (max-width: 480px) {
  .card_row {
    flex-direction: column;
  }
}

/* 広いカード */
.card_wide {
  background: #fff;
  border-radius: 8px;
  padding: 53px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-bottom: 32px;
}

@media screen and (max-width: 480px) {
  .card_wide {
    padding: 53px 0;
  }
}


.card_wide h3 {
  color: #3366AA;
  font-size: 24px;
}

@media screen and (max-width: 480px) {
  .card_wide h3 {
    font-size: 20px;
  }
}

.card_wide p {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
}


@media screen and (max-width: 480px) {
  .card_wide p {
    font-size: 14px;
  }
}

/* 機器リスト */
.device_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  gap: 52px;
}

@media screen and (max-width: 480px) {
  .device_list {
    gap: 28px;

  }
}

.device_list li p {
  font-size: 12px;
}

.device_list li {
  text-align: center;
}

@media screen and (max-width: 480px) {
  .device_list li {
    width: 40%;

  }
}

.device_list img {
  max-width: 120px;
  margin-bottom: 10px;
}

@media screen and (max-width: 480px) {
  .device_list img {
    max-width: initial;
    width: 100%;
  }
}

/* 制度詳細 */
.detail_list {
  justify-content: center;
  gap: 32px;
  margin-bottom: 0;
}

@media screen and (max-width: 480px) {
  .detail_list {
    flex-direction: column;
  }
}

.detail_list li {
  width: 38%;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.2));
}

@media screen and (max-width: 480px) {
  .detail_list li {
    width: 100%;
  }
}



/* ボタン */
.card_btn {
  background-color: #EE7744;
  /* 通常時：濃いブルー背景 */
  color: #fff;
  /* 白文字 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 76px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.card_btn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/20_warranty/20_Application_icon.svg') no-repeat center;
  background-size: contain;
  transition: background 0.3s ease;
}

/* hover時のデザイン */
.card_btn:hover {
  background-color: #FFE7DC;
  /* 薄いブルー背景 */
  color: #EE7744;
  /* 青文字 */
  border: 2px solid #EE7744;
  /* 枠線を青に */
}

.card_btn:hover::before {
  background: url('../images/20_warranty/20_Application_icon_hover.svg') no-repeat center;
  background-size: contain;
}


.btn:hover {
  background: #e35b3c;
}

/* --------------------/加入条件-------------------- */



/* ---------加入者様限定特典--------- */

.benefit_bgi {
  background-image: url(../images/20_warranty/20year_bg_sky.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 140px;
}

@media screen and (max-width: 480px) {
  .benefit_bgi {
    padding: 40px 15px;
  }
}

.benefit_section {
  background: #f9fcff;
  border-radius: 12px;
  padding: 80px 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background: rgba(255, 255, 255, 0.76);
}

@media screen and (max-width: 480px) {
  .benefit_section {
    padding: 40px 0;
  }
}

.benefit_header {
  position: relative;
}

.benefit_header_img {
  position: absolute;
  right: 0px;
  width: 104%;
}

.benefit_attention {
  font-weight: 400;
  font-size: 10px;
  padding: 0 86px;
  color: #333333;
}

@media screen and (max-width: 480px) {
  .benefit_attention {
    font-size: 10px;
    padding: 0 15px;
  }
}


/* -------------- */



/* -------------- */

.benefit_band_under {
  margin-top: 150px;
  margin-bottom: 60px;
  text-align: center;
  font-weight: 400;
}

@media screen and (max-width: 480px) {
  .benefit_band_under {
    font-size: 14px;
    margin-top: 160px;
    margin-bottom: 40px;
  }
}


.benefit_content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  text-align: left;
  padding: 32px 86px 20px 86px;
}

@media screen and (max-width: 480px) {
  .benefit_content {
    padding: 32px 18px;
  }
}


.benefit_text {
  /* flex: 1; */
  min-width: 260px;
}

.benefit_band_tit {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  padding: 0 84px;
  gap: 24px;
}

@media screen and (max-width: 480px) {
  .benefit_band_tit {
    font-size: 20px;
    align-items: flex-start;
    padding: 0 37px;
    gap: 15px;
    justify-content: center;
  }
}

.benefit_band_tit_img {
  width: 56px;
}

.benefit_text p {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: 1px !important;
}

@media screen and (max-width: 480px) {
  .benefit_text p {
    font-size: 14px;
    text-align: center;
  }
}

.highlight {
  color: #EE7744;
  font-weight: bold;
}

.benefit_list {
  justify-content: center;
  gap: 32px;
  margin-bottom: 0;
}

.benefit_list li {
  width: 140px;
}

@media screen and (max-width: 480px) {
  .benefit_list li {
    width: 100%;
  }
}


.benefit_image {
  min-width: 260px;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .benefit_image {
    width: 100%;
  }
}


.benefit_image img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 480px) {
  .benefit_image img {
    width: 100%;
    height: initial;
  }
}


/* ---------加入者様限定特典--------- */

.form_section {
  background-color: #F4F7FB;
  padding: 80px 20px 50px;
  margin-top: 40px;
}

@media screen and (max-width: 480px) {
  .form_section {
    padding: 30px 15px 0;
  }
}


.form_box iframe {
  box-shadow: 0 0 8px gray;
  border-radius: 4px;
}



/* ----------footer---------- */
footer {
  padding: 80px 20px 20px;
  text-align: center;
}

@media screen and (max-width: 480px) {
  footer {
    padding: 40px 15px 20px;
    margin-bottom: 60px;
  }
}


.footer_btn {
  background-color: #3366AA;
  /* 通常時：濃いブルー背景 */
  color: #fff;
  /* 白文字 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 58px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.footer_btn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/20_warranty/20_contact_icon.svg') no-repeat center;
  background-size: contain;
  transition: background 0.3s ease;
}

/* hover時のデザイン */
.footer_btn:hover {
  background-color: #E6F0FA;
  /* 薄いブルー背景 */
  color: #3366AA;
  /* 青文字 */
  border: 2px solid #3366AA;
  /* 枠線を青に */
}

.footer_btn:hover::before {
  background: url('../images/20_warranty/20_contact_icon_hover.svg') no-repeat center;
  background-size: contain;
}




.footer_text_link {
  color: #3366AA;
  text-decoration: underline;
  font-size: 16px;
  margin: 40px 20px 80px;
}

.footer_text_link a:hover {
  color: #8AA7CC;
}


.footer_under_copy small {
  color: #666666;
  font-size: 12px;
  font-weight: normal;
}



/* サイドボタン */
._fixed_button {
  position: fixed;
  z-index: 99;
  right: 0;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media screen and (max-width: 480px) {
  ._fixed_button {
    bottom: 0;
  }
}

.btn-box {
  width: 60px;
  height: 165px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.4s ease;
  font-size: 14px;
}

@media screen and (max-width: 480px) {
  .btn-box {
    width: 100vw;
    height: 60px;
    writing-mode: initial;
  }
}


/*************** オレンジお申込みボタン ***************/

._fixed_button .btn1-box {
  background-color: #EE7744;
  box-shadow: 0px 5px 20px #0000004D;
  border-radius: 10px 0px 0px 10px;
  border: 2px solid #EE7744;
  /* transition: all 0.3s ease; */
}

@media screen and (max-width: 480px) {
  ._fixed_button .btn1-box {
    display: none;
  }
}

/* リンク本体 */
.btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 60px;
  height: 165px;
  padding: 16px 0;
  font-weight: bold;
  color: #fff;
  /* 白文字 */
  text-decoration: none;
  /* transition: all 0.3s ease; */
}



/* アイコン（通常：白） */
.btn1::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-left: 3px;
  background: url('../images/20_warranty/20_Application_icon.svg') no-repeat center;
  background-size: contain;
  /* transition: background 0.3s ease; */
}

/* hover時：背景を薄オレンジ＋枠線＋文字色変更 */
.btn1-box:hover {
  background-color: #FFE7DC;
  /* 薄いオレンジ */
  border: 2px solid #EE7744;

  /* 濃いオレンジ枠線 */
}

/* hover時：文字色とアイコン切り替え */
.btn1-box:hover .btn1 {
  color: #EE7744;
  /* 濃いオレンジ文字 */
  border: 2px solid transparent;
  border-radius: 10px 0px 0px 10px;
}

.btn1-box:hover .btn1::before {
  background: url('../images/20_warranty/20_Application_icon_hover.svg') no-repeat center;
  background-size: contain;
}

/*************** オレンジお申込みボタン ***************/






/*************** 青お問い合わせボタン ***************/

._fixed_button .btn2-box {
  background-color: #3366AA;
  box-shadow: 0px 5px 20px #0000004D;
  border-radius: 10px 0px 0px 10px;
  border: 2px solid #3366AA;
  /* transition: all 0.3s ease; */
}

@media screen and (max-width: 480px) {
  ._fixed_button .btn2-box {
    border-radius: 10px 10px 0px 0px;
  }
}

/* リンク本体 */
.btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 60px;
  height: 165px;
  padding: 16px 0;
  font-weight: bold;
  color: #fff;
  /* 白文字 */
  text-decoration: none;
  /* transition: all 0.3s ease; */
}

@media screen and (max-width: 480px) {
  .btn2 {
    width: 100vw;
    height: 60px;
  }
}



/* アイコン（通常：白） */
.btn2::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-left: 3px;
  background: url('../images/20_warranty/20_contact_icon.svg') no-repeat center;
  background-size: contain;
  /* transition: background 0.3s ease; */
}

/* hover時：背景を薄オレンジ＋枠線＋文字色変更 */
.btn2-box:hover {
  background-color: #E6F1FF;
  /* 薄いオレンジ */
  border: 2px solid #3366AA;

  /* 濃いオレンジ枠線 */
}

/* hover時：文字色とアイコン切り替え */
.btn2-box:hover .btn2 {
  color: #3366AA;
  /* 濃いオレンジ文字 */
  border: 2px solid transparent;
  border-radius: 10px 0px 0px 10px;
}

.btn2-box:hover .btn2::before {
  background: url('../images/20_warranty/20_contact_icon_hover.svg') no-repeat center;
  background-size: contain;
}

/*************** 青お問い合わせボタン ***************/




/* ----------/footer---------- */




/*====================== END OF APPLY ======================*/
/*# sourceMappingURL=after-follow.css.map */