.h2_bold{
  font-size:3rem ;
  font-weight: bold;
}

.h2_bold {
  position: relative;
  display: inline-block;
}

.contents_title span:last-child::after,
.contents_title span::after {
  content: none;
}

.contents_title.dx_br_n::after {
  content: none;
}

.service_block__head.dx_block__head{
  background: #fff;
}

.check_merit_text {
  color: #000000;      /* 文字色を黒に */
  font-size: 18px;     /* 小さめ */
  line-height: 1.5;    /* 読みやすさ確保 */
  margin: 0 0 10px 0;  /* 下に少しスペース */
  padding: 0 30px;      /* 左右に余白を追加 */
}

.service_block__head.dx_block__head h2
{
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color:#2A4884;
}
@media screen and (max-width: 768px) {
  .service_block__head.dx_block__head{
    background: #F5F8FF;
  } 
  .h2_bold{
    font-size:2.5rem ;
    font-weight: bold;
  }
  
}
.main_container.dx_main_container{
  width: 100%;

}
@media screen and (min-width: 1024px) {
  .main_container.dx_main_container {
    width: 100%;
  }
}
.contents_title.dx_contents_title_bn::after{
  content: none;
}
.contents_title.dx_contents_title_b::after{
  background: #2A4884;
}
.dx_intro_image_box{
  display: flex;
  gap:2rem;
  width: 60%;
  justify-content: center;
  margin:0 auto;
}
img.dx_intro_image{
  width: 20%;
}

.dx_intro_u{
  position: relative;
  background-color: #ffffff;
  padding: 0;
}

.dx_intro_d{
padding: 100px 0 50px 0;
background: #F5F8FF;
}
.dx_intro_w{
  padding: 100px 0;
  background: #fff;
  }
.dots span {
  position: relative;
  margin-bottom: 100px;
}
.dots span::before {
  content: "・";       
  position: absolute;
  top: -1em;          
  left: 0;    
  color:#2A4884 ;       
}

@media screen and (max-width: 768px) {
  .dx_intro_d{
    padding: 50px 0;
  }
}
#service01 .service_block__photo.dx_function_image1{
  background: url(images/lp/check/check01.jpg) no-repeat center center / cover;
}
#service02 .service_block__photo.dx_function_image2{
  background: url(images/lp/check/check02.jpg) no-repeat center center / cover;
}
#service03 .service_block__photo.dx_function_image3{
  background: url(images/lp/check/check03.jpg) no-repeat center center / cover;
}
@media screen and (min-width: 768px) {
  .dx_function_image1,.dx_function_image2,.dx_function_image3{
      width: 50%;
      height: 220px;
  }
}
#service01 .service_block__photo.dx_function_image1,
#service02 .service_block__photo.dx_function_image2,
#service03 .service_block__photo.dx_function_image3{
  width: 100%;
  height: 150px;
}
@media screen and (min-width: 768px) {
  #service01 .service_block__photo.dx_function_image1,#service02 .service_block__photo.dx_function_image2,
  #service03 .service_block__photo.dx_function_image3 {
      width: 50%;
      height: 220px;
  }
}
.service_block__head.dx_block__head .title_box>span{
  color: #2A4884;
}
.service_block__head.dx_block__head .title_box>span::after{
  background: #2A4884;
}


.service_block__head.dx_block__head h2.dx_merit_title{
  font-size: 1.5rem;
  font-weight: bold;
}
.dx_merit_subtitle{
  font-size: 1.3rem;
  font-weight: bold;
  color: #2A4884;
}
.dx_merit_textbox{
  margin: 10px 0;
}

.btn_link.dx_btn_y {
  display: flex;             /* 横並び中央揃え */
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #3393D5;
  border: none;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 3px;
  width: 100%;               /* 最大幅いっぱいに */
  max-width: 500px;
  box-sizing: border-box;
  margin: 30px auto;         /* 上下30px、左右中央 */
}

.btn_link.dx_btn_y:hover {
  opacity: 0.9;
}

.dx_btn_y_arrow {
  margin-left: 8px;           /* テキストと矢印の間隔 */
  color: #fff;                /* 矢印色 */
}


@media screen and (min-width: 1024px) {
  .container_wrap.wrapper.dx_wrapper.container_wrap {
    display: block;
  }
}
@media screen and (min-width: 768px) {
.section.dx_block{
padding: 4rem 0 0 0;
}
}
@media screen and (min-width: 768px) {
  .contents_title.dx_contents_title_b{
  margin-top: 90px;
  margin-bottom: 0rem;
  }

}
@media screen and (max-width: 768px) {
  .pc_only{
    display: none;
  }
  .dx_intro_u{
    padding: 20px 0;
  }
  img.dx_intro_image{
    width: 40%;
    padding: 10px;
  }
  .contents_title.dx_contents_title_bn{
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .dots span{
    margin-bottom: 50px;
  }
  .btn_link.dx_btn_y{
    max-width: none;
  }

}
.kv-container img.pc_only {
  width: 100%;
  height: auto;
}
  
  @media screen and (min-width: 768px) {
    .sp_only{
      display: none;
    }
    
  }





/* ミツマドタブ */
.contents_title.dx_br_n{
  padding: 70px 0 50px 0 ;
}
.contents_title.dx_br_n.dx_recruit{
  padding: 50px 0 20px 0 ;
}
.tab_sub_content{
  width: 50%;
}
.pc_only.tab_sub_content{
  width: 75%;
}
.recruit_tab.dx_tab{
  display: flex;
  justify-content: center;
}
.recruit_tab.dx_tab .recruit_tablinks.dx_tablinks{
 color:  #2A4884;
 background-color:#fff;
 border: 1px solid #2A4884;
 margin-right: 0px;
 width: 350px;
}

.recruit_tab.dx_tab .recruit_tablinks.dx_tablinks.active{
  background-color: #2A4884;
  color: #fff;
}
.contents_title.dx_br_n p{
font-size: 18px;
font-weight:normal;
}
.dx_square_image{
  width: 1.4rem;
  transform: translateY(-8px);
}
.dx_tab_textbox{
  padding-top: 1rem;
}

.btn_link.dx_btn_g{
  background: #fff;
  border: 1px solid #2A4884;
  color: #2A4884;
  font-size: 18px;
}
.btn_link.dx_btn_g:hover{
  opacity: 0.9;
}




@media screen and (max-width: 768px) {
  .contents_title.dx_br_n{
    padding: 50px 0 0 0 ;
    margin-bottom: 50px;
  }
  .tab_sub_content {
    width: 100%;
}
.dx_square_image {
  width: 1.3rem;
  transform: translateY(-8px);
}

  #tab1.recruit_tabcontent{
    margin: 40px 0 0;
    }
  #tab2.recruit_tabcontent{
    margin: 30px 0 0;
    }
    .contents_title.dx_br_n p{
      font-size: 14px;
      margin: 10px 0;
    }
    .contents_title.dx_br_n.dx_recruit{
      margin-bottom: 0;
    }

}
.recruit_tabcontent.dx_tabcontent.active{
  margin: 50px 0 0;
}

@media screen and (min-width: 768px) {
  .contents_title.dx_br_n{
    margin-bottom: 0rem;
  }
  .section.dx_block:first-of-type {
    padding: 0;
  }
  
}

@media screen and (max-width: 768px) {
  .dx_intro_image_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
  }

  .dx_intro_image {
    flex: 0 0 50%; 
    box-sizing: border-box;

  }
  .dx_intro_image_box img:nth-child(3):only-child {
    flex: 0 0 100%;
  }
  .dx_intro_image_box{
     gap: 0;
  }
  .section.service_block.section.main_block.dx_block:first-child{
    padding: 0;
  }
  .section.service_block.section.main_block.dx_block:nth-child(2){
    padding:3rem 0 0 0;
  }
}


/*  */
.dx_merit_subtitle.cnt_title{
  text-align: center;
  padding: 10px 0;
}
.dx_bg_g{
  background: #F5F8FF;
  padding: 50px;
}
.recruit_info_text,.thought_img{
  padding: 30px 0 0 0;
}

.recruit_info_btn{
  display: flex;
  justify-content: center;
  gap:20px;
}
.recruit_info_btn > .btn_link.dx_btn_g{
  margin: 0;

}
.recruit_info_area{
  text-align: center;
}
.recruit_info_area >.dx_merit_subtitle{
  margin-bottom: 20px;
}
.dx_span_subtitle{
  font-size: 1.2rem;
}
.thought_info_text{
  text-align: left;
  padding: 30px 0 0 0;
}

@media screen and (max-width: 768px) {
  .recruit_info_btn{
    flex-direction: column;
  }
  .btn_link.dx_btn_g{
    max-width: 100%;
  }
  .recruit_info_text,.thought_img,.thought_info_text{
    padding: 0px ;

  }
  .dx_bg_g{
    background: #F5F8FF;
    padding: 50px 0px;
  }
}

.btn_link.dx_btn_g >.arrow_right.dx_btn_g_arrow::after{
  content: '';
  color: #2A4884;
  background: #2A4884;
}
.btn_link.dx_btn_g >.arrow_right.dx_btn_g_arrow{
  color: #2A4884;
  background: #2A4884;
}

/* 劣化診断ページスタイル（改訂版） */
/* 全体ラッパー */
.check-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 0 0 40px 0;
}

/* チェックボックス本体 */
.check-container {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 1000px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  height: 500px;
  box-sizing: border-box;
  padding: 20px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 上部ヘッダー */
.check-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

.check-label {
  font-size: 1rem;
  color: #2A4884;
}

.check-number {
  font-size: 2rem;
  font-weight: bold;
  color: #2A4884;
  margin-top: -10px;
}

.check-progress {
  font-size: 0.8rem;
  color: #999;
}

/* 質問部分 */
.check-question {
  display: none;
  height: 100%;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
}

.check-question.active {
  display: flex;
  justify-content: space-between;
}

/* 質問テキストのスタイル */
.check-text {
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #F5F8FF;
  padding: 20px 30px;
  margin-bottom: auto;
  width: 100%;
  max-width: 700px;
  text-align: center;
}

/* 画像のスタイル */
.check-question img {
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 20px auto;
  display: block;
}

/* 選択肢ボタンのラッパー */
.check-options {
  display: flex;
  justify-content: center;
  gap: 15px;
  position: absolute; /* 親ボックス内で固定 */
  top: auto;          /* 必要に応じて調整 */
  bottom: 20px;       /* ボックス下端からの距離 */
  left: 50%;          /* 横中央 */
  transform: translateX(-50%);
  width: auto;        /* 必要に応じて調整 */
  margin: 0;          /* marginは無効化 */
}

/* ボタン自体 */
.check-btn {
  min-width: 280px;
  padding: 8px 0;
  border: 1px solid #2A4884;
  background-color: #fff;
  color: #2A4884;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

/* ホバーとアクティブ（タップ時）のスタイルを統一 */
.check-btn:hover,
.check-btn:active {
  background-color: #2A4884;
  color: #fff;
  border-color: #2A4884;
}

/* 診断結果画面の基本スタイル */
.check-result {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* 診断結果タイトル（「診断結果」の文字） */
.result-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2A4884;
  margin-bottom: 20px;
}

/* 劣化危険度（色付きの囲い部分） */
.result-risk-wrapper {
  padding: 20px 30px;
  max-width: 800px;
  width: 100%;
}

/* 劣化危険度のテキスト（「劣化危険度 中」の部分） */
.result-risk-level {
  font-size: 1.5rem;
  font-weight: medium;
  color: #000;
  display: block;
  margin: 0;
}

/* 劣化危険度の値（小・中・大） */
.result-risk-val {
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
}

/* 結果メッセージのスタイル */
.result-message {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 20px;
  max-width: 800px;
  width: 100%;
  text-align: left;
}

/* 診断結果ごとの背景色 */
.result-risk-wrapper.result-low {
  background-color: #F5F8FF;
}

.result-risk-wrapper.result-medium {
  background-color: #FFF7DE;
}

.result-risk-wrapper.result-high {
  background-color: #FFEAEA;
}

.seminar-btn {
  background-color: #e60000; /* 赤色 */
  color: #fff;
  text-align: center;
  padding: 15px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease; /* なめらかな動き */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

.seminar-btn:hover {
  background-color: #ff1a1a; /* 少し明るい赤 */
  transform: translateY(-3px); /* 浮き上がる */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 影を強調 */
}




/* 問い合わせボタンのスタイル */
.contact-btn {
  display: inline-block;
  background-color: #3393D5;
  color: #fff;
  padding: 15px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  min-width: 300px;
  box-sizing: border-box;
  margin-top: 30px;
}

.contact-btn:hover {
  background-color: #3393D5;
}

/*------------------------------
  モバイル版
------------------------------*/
@media (max-width: 768px) {
  /* 全体コンテナのスタイル */
  .check-container {
    padding: 20px 15px;
    height: auto;
    min-height: 450px;
  }
  
  /* 質問部分 */
 .check-question.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 自然な縦並び */
    align-items: center;
    height: auto; /* 自動で高さを調整 */
  }

  /* 質問が表示されている時のみ有効 */
  .check-question.active {
    display: flex;
    /* デフォルトはコンテンツとボタンを上下に分離 */
    justify-content: space-between;
  }

  /* 質問1と2の余白調整 */
  .check-question:nth-child(1).active,
  .check-question:nth-child(2).active {
    /* 1, 2問目のみコンテンツとボタンを中央に配置 */
    justify-content: center;
  }
  
  .check-text {
    width: 100%;
   margin-top: 0;
    max-width: none;
    padding: 15px 10px;
    font-size: 1.2rem;
    margin: 0 auto 20px;
    box-sizing: border-box;
  }
  
  /* 画像のスタイル */
  .check-question img {
    max-width: 100%;
    height: auto;
    margin: 15px auto;
  }

  /* ボタンのラッパー */
   .check-options {
    position: static;  /* 元の流れに戻す */
    transform: none;
    bottom: auto;
    left: auto;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  /* ボタン自体 */
  .check-btn {
    min-width: unset;
    width: 90%;
    padding: 10px 15px;
    font-size: 14px;
  }
  
  /* 診断結果 */
  .check-result {
    padding: 20px;
    gap: 15px;
  }
  
  .result-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .result-risk-wrapper {
    padding: 15px 20px;
  }
  
  .result-risk-level, .result-risk-val {
    font-size: 1.5rem;
  }
  
  .result-message {
    text-align: left;
    font-size: 1rem;
  }
  
  .contact-btn {
    min-width: unset;
    width: 90%;
  }
}
/* checkここまで */


/* 施工事例リスト */
.dx_case_intro__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* カード間の余白 */
  justify-content: center;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 16px;
  align-items: stretch; /* すべての子要素の高さを揃える */
}

/* 各アイテム */
.dx_case_intro__item {
  flex: 1 1 calc(33.333% - 24px); /* PCで3列 */
  min-width: 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column; /* カード内部の要素を縦に並べる */
}

/* カード本体 */
.case_card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* タイトル固定 */
.case_card__title {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A4884;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  padding: 0 16px;
}

/* 画像固定 */
.case_card__image {
  height: 200px;
  overflow: hidden;
  padding: 0 16px; /* 左右に16pxの余白を追加 */
}

.case_card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をトリミングして親要素に合わせる */
  display: block;
}

/* キャプション伸縮対応 */
.case_card__caption {
  flex-grow: 1; /* 余ったスペースを埋めて高さを均等にする */
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .dx_case_intro__item {
    flex: 1 1 calc(50% - 24px); /* タブレットで2列 */
  }
}

@media (max-width: 640px) {
  .dx_case_intro__item {
    flex: 1 1 100%; /* スマホで1列 */
  }
}


.btn-style1 { display: inline-block; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; border: none; background-color: #3b82f6; color: white; transition: background-color 0.3s, transform 0.2s; }
.btn-style1:hover { background-color: color-mix(in srgb, #3b82f6 85%, black); transform: translateY(-2px); }
.btn-style1:active { transform: translateY(0); }

.size-small { font-size: 0.875rem; padding: 0.5em 1em; }
.size-medium { font-size: 1rem; padding: 0.75em 1.5em; }
.size-large { font-size: 1.125rem; padding: 1em 2em; }

.width-auto { display: inline-block; width: auto; }
.width-full { display: block; width: 100%; box-sizing: border-box; }

.radius-none { border-radius: 0; }
.radius-small { border-radius: 4px; }
.radius-medium { border-radius: 8px; }
.radius-large { border-radius: 50px; }



/* h3見出しのスタイル（左寄せ・背景色付き） */
h4 {
  font-size: 1.4rem;        /* フォントサイズ */
  font-weight: bold;         /* 太字 */
  color: #2A4884;            /* テーマカラー */
  margin: 32px 0 12px;       /* 上下のマージン */
  position: relative;         /* 擬似要素用にrelative */
  padding: 12px 20px 12px 20px; /* 上下左右の余白 */
  text-align: left;           /* 左寄せ */
  background-color: #F5F8FF;  /* 背景色 */
  border-radius: 4px;         /* 角丸（任意） */
}

/* 左側にアクセントライン */
h4::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;               /* 線の太さ */
  height: 100%;            /* 線の高さ */
  background-color: #2A4884;
  transform: translateY(-50%);
}




/* ウェビナー申込用赤ボタン */
.btn_link.webinar_btn_red {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #E61F18; /* 赤背景 */
    border: none;
    color: #fff; /* 文字色白 */
    font-size: 16px;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 3px;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    margin: 30px auto;
    transition: all 0.3s ease; /* スムーズに変化 */
}

.btn_link.webinar_btn_red:hover {
    background: #D92019; /* さらに濃い赤に */
    transform: translateY(-2px); /* 少し浮き上がる感じ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 軽く影を付ける */
}


/* モバイル版のボタン間隔を強制的に適用 */
@media (max-width: 768px) {
  .check-options {
    gap: 10px !important;
    justify-content: center !important;
  }
}

/* ボタン自体のマージンで隙間を調整（最終手段） */
.check-btn {
  margin: 0 10px !important;
}

/* モバイル版のボタンマージンを強制的に適用 */
@media (max-width: 768px) {
  .check-btn {
    margin: 0 5px !important;
  }
}

/* PC版の質問全体の幅と中央寄せを強制的に適用 */
.check-container {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* 質問テキストの幅と中央寄せを強制的に適用 */
.check-text {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* モバイル版の質問全体の幅と余白を強制的に適用 */
@media (max-width: 768px) {
  .check-container {
        margin: 0 20px !important;
        max-width: none !important; /* 幅の制限を解除 */
  }
  .check-text {
    max-width: 100% !important;
    padding: 15px 10px !important; /* 👈 この行を修正 */
    font-size: 1.3rem !important; /* 👈 必要に応じて追加 */
  }
}

@media screen and (min-width: 769px) {
  .contents_title.dx_contents_title_bn {
    margin-top: 80px !important; /* ← !important で上書き */
  }
}

.check-text .note {
  font-size: 1rem; /* ← この部分だけ小さめに */
  color: rgba(0,0,0,0.5);
}

.zoomable {
  cursor: zoom-in;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 15px auto;
}

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.zoom-hint {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  margin-top: 0px;
}