@charset "utf-8";

/* 
Theme Name: service
*/

.section_head {
    text-align: center;
   margin-bottom:45px;
  }
  
  .page_section_title {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin-bottom: 24px;
    line-height: 1.4;
  }
  
  .feature_section,.seminar_section {
    width: 100%;
    
    padding: 50px 40px;
  }
/* 測量機器の販売/レンタル */

/* product_category_section は前回のままでOK */
.product_category_section {
  background: #E5E5E5;
  text-align: center;
  padding: 70px 0; /* 上下の余白を追加 */
}
.product_category_section_inner {
  max-width:1166px;
  margin:0 auto;
}
.product_category_title {
  font-size:18px;
  margin-bottom: 32px;
  letter-spacing: 0.1em;
}
.product_tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.product_tabs .swiper-wrapper{
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* product_tab, product_tab_img, product_tab_label, product_tab_arrow は前回のままでOK */
.product_tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
  position: relative;
}

.product_tab_img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.product_tab_img img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}
.product_tab_label {
  background: #F9B129;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 16px 0 16px 0;
  display: flex;
  justify-content: center;
  position: relative;
  letter-spacing: -0.09rem;
  color:#000;
}
.product_tab_arrow {
  position: absolute;
  right: 10px;
  top:50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  /* border-radius: 50%; */
  /* background: #fff; */
  /* border: 1px solid #402E76; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/service/service_tab_arrow.png);
  background-size: contain;
}
/* .product_tab_arrow::before {
  content: '▼';
  display: block;
  width: 5px;
  height: 4px;
  font-size:5px;
    color:#402E76;
    position: absolute;
    top: 25%;
    left: 44%;
    transform: translate(-50%);
} */



.product_content_wrapper {
  background-color: #402E76; 
  width: 100%;
  /* padding-bottom: 70px; */
}

.product_content_inner {
  display: flex; /* 左カラムと右カラムを横並びに */
  gap: 40px; /* 左カラムと右カラムの間の隙間 */
  max-width: 1166px;
  margin: 0 auto;
  padding: 0; /* 既存のpaddingをリセット */
  position: relative;
  z-index: 1;
}

/* 左カラム (aside) のスタイル */
aside {
  width: 240px; /* 左カラムの固定幅 */
  flex-shrink: 0; /* 縮小しない */
  margin-top: 70px; /* product_content_wrapper の上部の余白と合わせる */
  z-index: 10;
}

/* 左カラム追従のためのスタイル (JavaScriptで制御されますが、基本スタイルも定義) */
.side_category_inner {
  background: #fff;
  border-radius: 10px;
  width: 100%; /* aside の幅に合わせる */
  align-self: flex-start; /* flexコンテナ内で上端に揃える */
}

.side_category_placeholder {
  height: 0; /* JavaScriptで動的に高さが設定されます */
}

.category_title {
  background-color: #F9B129;
  padding: 11px 30px;
  border-radius: 10px 10px 0 0;
  font-size: 18px;
  font-weight: bold;
  color: #402E76; /* テキスト色を追加 */
}

.side_category_inner ul {
  padding: 27px 25px;
  list-style: none; /* デフォルトのリストスタイルを削除 */
}

.side_category_inner ul li {
  line-height: 2;
}

.side_category_inner ul li a {
  color: #402E76; /* リンクの色 */
  text-decoration: none; /* 下線なし */
  display: block; /* クリックエリアを広げる */
  transition:all 0.3s;
}

.side_category_inner ul li a:hover {
color:#402E76;
opacity:0.7;
}

.product_content_main {
  flex-grow: 1; /* 残りのスペースをすべて占める */
}


.content_section {
    padding-top: 70px; /* セクション上部の余白 */
    padding-bottom: 50px; /* セクション下部の余白 */
    position: relative;
    z-index: 1;
    /* product_content_wrapper にあった背景色指定を各セクションに移動 */
    /* background-color は bg_white / bg_purple クラスで設定 */
}

.bg_purple {
  position: relative;
  z-index: 1;
}
.bg_purple::before {
    background-color: #7362A6; /* 紫系の背景 */
    content: '';
    position: absolute;
    top: 0;
    left: -50vw;
    width: 125vw;
    height: 100%;
    z-index: -1;
}

/* product_title_box, product_title_inner, product_title_en, product_title_ja は前回のままでOK */
.product_title_box {
  background: #402E76;
  border-radius: 20px;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.product_title_inner {
  background: #fff;
  border: 3px solid #402E76;
  border-radius: 10px;
  padding: 40px 0 32px 0;
  text-align: center;
  position: relative;
  margin-bottom:20px;
}
.product_title_inner::after {
  position: absolute;
  border-radius: 10px;
  border: 1px solid #402E76;
  content: "";
  top: 8px;
  bottom: 8px;
  left: 8px;
  right: 8px;
}
.product_title_en {
  font-size: 18px;
  color: #222;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.product_title_ja {
  font-size: 38px;
  color: #402E76;
  font-weight: bold;
  letter-spacing: 0.08em;
}

/* 個別コンテンツブロックのスタイル */
.product_content_section_inner {
  background-color: #fff; /* デフォルト白い背景 */
  padding: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* product_content_flex (画像とテキストの横並び) */
.product_content_flex {
  display: flex;
  gap: 40px;
  align-items: flex-start; /* 画像とテキストの上端を揃える */
}

.product_content_text_block {
    flex-grow: 1; /* 残りのスペースを埋める */
}

.product_content_image_block {
    flex-shrink: 0; /* 縮小しない */
    display: flex; /* 画像を複数並べる場合 */
    flex-direction: column; /* 画像を縦に並べる */
    gap: 20px; /* 画像間の隙間 */
     align-items: center; /* 画像を中央寄せ（必要に応じて） */
}

.product_subtitle {
    font-size: 22px; /* サブタイトルのフォントサイズ */
    font-weight: bold;
    margin-bottom: 10px;
    color: #402E76; /* デフォルトのテキスト色 */
}

.subtitle_underline {
    width: 60px;
    height: 4px;
    background-color: #402E76; /* デフォルトの下線色 */
    margin-bottom: 20px;
}


.product_content_img {
  display: block;
  width: 100%; /* 親要素（product_content_image_block）の幅に合わせる */
  height: auto;
  object-fit: contain; /* 画像のアスペクト比を維持 */
}

.totalstation_img ,
.solution3d_img {
  max-width:280px;
  height:auto;
}
.gnss_img {
  max-width:300px;
}
.product_content_flex p {
  font-size: 18px;
  line-height: 1.8;
   color: #222; /* デフォルトのテキスト色 */
}

.product_mamufacturer_head {
  width: 200px;
  display: block;
  background-color: #402E76;
  color: #fff;
  padding: 12px;
  text-align: center;
  border-radius: 30px;
  margin: 20px auto 0 auto; /* 上部に余白を追加 */
  transition: opacity 0.3s ease;
  margin-bottom:30px;
  font-weight: bold;
}
.product_mamufacturer_head_2 {
  margin-top:25px;
  margin-bottom:16px;
  text-align: center;
  font-weight:bold;
}
.product_mamufacturer_wrapper {
  display:flex;
  gap:20px;
  margin-bottom: 70px;
  width:100%;
  flex-wrap: wrap;
}
.product_mamufacturer_box {

 width: calc((100% - 60px) / 4);
}
.product_mamufacturer_box a {
  font-size:16px;
  text-decoration: underline;
  color:#402E76;
}
.product_mamufacturer_note {
  margin-bottom:30px;
}
.product_mamufacturer_text {
  font-size:14px;
  margin-top:40px;
  color:#402E76;

}
.product_mamufacturer_text_2 {
  /* color:#FF0000; */
  color:#402E76;

  font-size:16px;
}
.product_mamufacturer_text_3 {
  color:#402E76;
  font-size: 20px;
  font-weight: bold;
  margin-bottom:20px;
}
.product_content_flex_others {

  gap: 33px;
    align-items: flex-start;
}
.product_mamufacturer_others_text {
  width:33%;
}
.product_mamufacturer_others_text li {
  color:#402E76;
  font-size:16px;
  line-height: 40px;
}
.product_makertitile_flex {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  gap:20px;
}
.product_makertitile_flex img {
  display: block;
  height:97px;
  object-fit: contain;
  width: fit-content;
}
.product_makertitile_flex.img3 img {
 height:80px;
}
.rental_list_wrapper {
  margin-top:30px;
  
}
.product_rental_list {
 
  font-size:18px;
  color:#402E76;

}
.product_rental_list li {
  line-height: 2.5;
}
.next_section .ICT_center_bg {
  margin-top:0;
}
.product_content_image_flex {
  display:flex;
  gap:9px;
  width:100%;
  margin-bottom:36px;
}
.product_content_image_flex img {
  display:block;
  width:50%;
}
.product_content_maximg {
  width:100%;
  margin-bottom:36px;
}
.product_content_image_wra {
  width:70%;
  margin: 36px auto;
}
.product_content_image_flex.flex_3 img {
  display:block;
  width:calc((100% - 27px) / 3);
}
.product_content_image_flex.flex_4 img {
  display:block;
  width:calc((100% - 27px) / 3);
}
.product_rental_text {
  margin-bottom:20px;
}
.product_rental_wrapper {
  display: flex  ;
      gap: 20px;
      width: 100%;
      flex-wrap: wrap;
}
.workflow_flow {
  position: relative;
  width: 100%;
  margin: 125px 0 0 0;
  max-width: 770px;
}
.workflow_step_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.workflow_box {
  width: 120px;
  height: 94px;
  border: 2px solid #402E76;
  border-radius: 20px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #402E76;
  text-align: center;
  font-weight: 500;
  position: relative;
}
.workflow_arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #402E76;
}
.workflow_labels {
  position: absolute;
  top: -95px;
  width: 100%;
  left: 0;

}
.workflow_label {
  position: absolute;
  min-width: 120px;
  background: #402E76;
  color: #fff;
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  z-index: 8;
  transform: translateX(-50%);
}
.workflow_label a {
  color:#fff;
}
.workflow_label::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 34px solid #402E76;
}
.workflow_label:nth-child(1) { left: 39%; }
.workflow_label:nth-child(2) { left: 60%; }
.workflow_label:nth-child(3) { left: 81%; }
/* サポート */

.workflow_inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 40px auto;
}



.workflow_steps {
  position: relative; /* 縦線の基準 */
}

/* 各ステップ */
.workflow_step {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #402E76;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 番号部分 */
.step_number {
  background: #402E76;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.15em;
    padding: 28px 27px;
    width: 87px;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 番号の右側の三角形 */
.step_number::after {
  content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #402E76;
}


/* コンテンツ部分 */
.step_content {
  flex: 1;
  text-align: center;
  font-size: 18px;
  color: #402E76;
  padding: 26px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.step_driver {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width:730px;
  margin-left:auto;
}
.step_driver::before {
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  background: #402E76;
  margin: 0 auto;
}
.step_content p {
  margin: 0; /* デフォルトのマージンをリセット */
}
.product_ict_support_flex {
  display:flex;
  max-width:730px;
  margin:0 auto;
  margin-bottom:36px;
  /* gap:45px; */
  justify-content: space-between;
}
.product_ict_support {
  display:flex;
  flex-direction: column;
  gap:32px;
}
.product_ict_support img {
  display:block;
  height:100px;
  object-fit: contain;
}
.product_ict_support p {
  font-size:16px;
  flex:1;
  color:#402E76;
  font-weight: bold;
  text-align: center;
}
/* メンテナンスページ */
.jsima {
    width:244px;
    object-fit: contain;
    margin:0 auto;
    display:block;
}

.feature_section_inner {
  background-color: #fff;
  border-radius: 10px;
  padding:50px 0;
}
.feature_cards {

  width:100%;
}
  .feature_cards .swiper-wrapper{
    display: flex;
    justify-content: center;
    gap: 16px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 32px 24px 60px 24px;
  }

  .feature_card {
    background: #fff;
    border: 2px solid #4B3396;
    border-radius: 18px;
    max-width: 320px;
    min-height: 487px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(75,51,150,0.04);
    position: relative;
    transition: box-shadow 0.2s;
    height:auto;
  }
  
  .feature_card_top {
    width: 100%;
    background: #F6B40C;
    border-radius: 16px 16px 0 0;
    padding: 16px 0 8px 0;
    text-align: center;
    border-bottom: 2px solid #4B3396;
  }
  
  .feature_card_num {
    font-size: 26px;
    font-weight: bold;
    color: #4B3396;
    
  }
  
  .feature_card_img {
    width: 80px;
    height: 80px;
    margin: 24px auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .feature_card_img img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
  }
  
  .feature_card_body {
    padding: 0 20px 24px 20px;
    text-align: left;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .feature_card_head {
    color: #4B3396;
    font-size: 18px;
    /* font-size: 14px; */
    font-weight: bold;
    margin-bottom: 13px;
    margin-top: 15px;
  }
  
  .feature_card_text {
    /* color: #000; */
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
  }
  /* ICT研修センター */

  .head_text_ICT_list {
    width:fit-content;
    margin: 0 auto;
  }
  .seminar_content_note {
    background-color: #402E76;
    margin-top:20px;
    color:#fff;
    font-size:18px;
    padding:24px 60px;
    border-radius: 10px;
  }
  .seminar_timetable {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 40px auto;
  }
  .seminar_timeblock {
    display: flex;
    align-items: center;
    border: 1.5px solid #402E76;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .seminar_time {
    background: #402E76;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.15em;
    padding: 28px 27px;
    width: 230px;
    text-align: center;
    position: relative;
  }
  .seminar_time::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #402E76;
  }
  .seminar_content {
    flex: 1;
    text-align: center;
    font-size: 20px;
    color: #402E76;
    padding: 26px;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  .seminar_divider {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width:730px;
    margin-left:auto;
  }
  .seminar_divider::before {
    content: '';
    display: block;
    width: 2px;
    height: 24px;
    background: #402E76;
    margin: 0 auto;
  }
  .seminar_day {
    font-size:18px;
    color:#402E76;
    background-color: #fff ;
    border: 1px solid #402E76;
    border-radius:10px ;
    padding:12px 50px;
    width:fit-content;
    margin-top:70px;
    margin-bottom:20px;
  }
  .qa_accordion {
    max-width: 1085px;
    margin: 40px auto;
  }
  
  .qa_item {
    border: 2px solid #402E76;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 32px;
    padding: 0;
    transition: box-shadow 0.2s;
    overflow: hidden;
  }
  
  .qa_item[open] {
    box-shadow: 0 2px 12px rgba(64,46,118,0.08);
  }
  
  .qa_item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #402E76;
    font-weight: 500;
    padding: 27px 43px;
    cursor: pointer;
    list-style: none;
    position: relative;
  }
  
  .qa_item summary::-webkit-details-marker {
    display: none;
  }
  .qa_item summary::after {
    content: "−";
    color: #402E76;
    font-size: 2rem;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
  }
  .qa_item:not([open]) summary::after {
    content: "+";
  }
  
  .qa_q {
    color: #402E76;
    font-size: 22px;
    font-weight: bold;
    margin-right: 8px;
    /* flex-shrink: 0; */
    width:fit-content;
  }
  
  .qa_question_text {
    color: #402E76;
    font-size: 18px;
    font-weight: bold;
  }
  
  .qa_answer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 43px 27px 43px;
    
    color: #000;
  }
  
  .qa_a {
    color: #F9B129;
    font-size: 22px;
    font-weight:500;
    margin-right: 8px;
    /* flex-shrink: 0; */
    width:fit-content;
    font-weight: bold;

  }
  
  .qa_answer_text {
    color: #000;
    font-size: 18px;
    font-weight: bold;
  }
  .record_list_wrapper {
    display:flex;
    width:960px;
    margin:0 auto;
    gap:36px;
    justify-content: space-around;
  }
  .record_list li{
    list-style-type:initial;
    white-space: nowrap;
  }
.text_center {
  text-align: center;
}
.access_map {
  color:#402E76;
  font-size:16px;
  text-decoration: underline;
}
/* レスポンシブ対応 */
@media (max-width: 1400px) {
  .feature_card {
    max-width: 320px;
    width: calc(25% - 16px); /* 4枚並べたい場合の例 */
  }
  .feature_cards .swiper-wrapper{ 
    max-width: none; 
    margin: 0 auto;
     padding: 0;
    }
}
@media (max-width: 1024px) { /* 画面幅が1024px以下の場合 */
  .product_content_inner {
    width: 100%;
    padding:0 20px;
  }
  .product_category_section_inner {
    width:100%;
  }
  .product_tabs .swiper-wrapper {
    justify-content: normal;
    gap:0;
  }
  .step_driver {
    width:100%;
  }

  .workflow_flow {
    max-width:620px;

  }
  .workflow_step_row { 
    gap:10px;
  }
  .workflow_labels {
    top:-70px;
  }
  .workflow_label {
    padding: 10px;
  }
  .record_list_wrapper {
    flex-direction: column;
  }


  .feature_cards .swiper-wrapper{ 
    justify-content: unset;
    align-items: stretch; /* 各スライドの高さを揃える */
    max-width: none; 
   padding: 32px 24px 60px 24px;
    }

  
  .feature_cards .swiper-slide {
    display: flex;
    height: auto !important; /* 高さの自動調整を強制 */
  }



}
@media (max-width: 768px) { /* 画面幅が768px以下の場合 */
   .page_section_inner {
      padding: 30px 20px; /* 内側の余白を調整 */
  }

  .page_catchcopy {
      font-size: 30px;
  }

  .page_section_title {
      font-size: 22px;
  }

  aside {
    display:none;
  }
  .bg_purple::before {
    left:-25vw;
  }

  .category_title {
    padding:11px 16px;
  }
  .side_category_inner {
    width: 200px!important;
  }
  .side_category_inner ul {
    padding:20px 16px;
  }
  .side_category_inner ul li a {
    font-size:15px;
  }
  .product_tab_img img {
    max-height:180px;
    object-fit: cover;

  }
  .product_tabs {
    padding:0 20px;
  }
  
  .product_content_img {
    width:20%;
  }
  .product_content_section_inner {
    padding: 30px 20px;
}
.product_title_en {
  font-size: 14px;
 
}

.product_title_ja {
  font-size: 26px;
}
  .product_content_inner {
    gap: 16px;

}
.product_content_flex_others {
  flex-direction: column;
  gap:0;
}
.product_mamufacturer_others_text {
  width:100%;
}
  .feature_section, .seminar_section {
    padding:25px 20px;
  }
  .seminar_divider {
    width:100%;
  }
    .seminar_timeblock {
      flex-direction: column;
      border-radius: 12px;
    }
    .seminar_time {
      min-width: unset;
      width: 100%;
      border-radius: 12px 12px 0 0;
      padding: 20px 0;
      font-size: 1.3rem;
    }
    .seminar_time::after {
      display: none;
    }
    .seminar_content {
      padding: 20px 0;
      font-size: 1.2rem;
    }
    .qa_item summary,
    .qa_answer {
      padding-left: 16px;
      padding-right: 16px;
    }
    .qa_item summary::after {
      right: 16px;
    }
    .record_list_wrapper {
      flex-direction: column;
      width:100%;
    }
    .rental_list_wrapper {
      flex-direction: column;
      margin-top:20px;
      gap:0;
    }
    .product_rental_list {
      width:100%;
      margin-top:0;
      
    }
    .ICT_center_banner {
      padding:0 20px;
    }
    .ICT_center_banner P {
        color:#333;
        margin-top:18px;
    }
    .workflow_inner {
      width: 100%;
        max-width: 100%;
    }
    .product_ict_support_flex {
      width:100%;
    }
    .product_content_image_flex.flex_3, 
      .product_content_image_flex.flex_4 {
      flex-wrap: wrap;
    }
    .step_number {
      width:60px;
      padding: 16px 20px;
    }
    .step_number::after 
    {
      right:-8%;
    }
    .step_content {
      padding:16px;
      font-size:16px;
    }
    .step_driver {
      width:100%;
    }
    .product_content_image_flex {
      display:flex;
      gap:9px;
      width:100%;
      margin-bottom:36px;
    }
    .product_content_image_flex.flex_3 img {
      display:block;
      width:calc((100% - 27px) / 2);
    }
    .product_content_image_flex.flex_4 img {
      display:block;
      width:calc((100% - 27px) / 2);
    }
    .qa_question_text {
      padding-right:32px;
    }
    .feature_card_top {
      padding:16px 0;
    }
    .feature_card_img ,.feature_card_img img{
      width:96px;
      height:96px;
    }
    .seminar_day {
      margin:70px auto 20px;
    }
    .seminar_content_note {
      padding: 24px 30px;
    }
    .record_list {
      padding:0 40px;
    }
    .record_list li {
      white-space:unset;
    }
  }
  @media (max-width: 480px) {

    aside{
      display:none;
  }


  .product_content_flex {
      flex-direction: column-reverse; /* 画像とテキストを縦並びに */
      gap: 20px;
      align-items: center;
  }
  .product_content_flex_others {
    flex-direction: column; 
    gap: 0;
    align-items: center;
  }
  .rental_list_wrapper {
    flex-direction: column;
  }
   .product_content_image_block {
       flex-direction: row; /* 画像を横並びに */
       flex-wrap: wrap; /* 画像が収まらない場合に折り返し */
       justify-content: center; /* 中央寄せ */
   }
   .product_content_image_wra {
    width:100%;
   }
   .product_content_img {
       max-width: 50%; /* 最大幅を100%に */
       width: fit-content; /* 幅を自動調整 */
      margin:0 auto;
      }
      .product_ict_support_flex {
        flex-wrap: wrap;
        gap:32px;
        justify-content: center;
      }
      .product_ict_support {
        flex: 1 1 calc(50% - 20px);
        gap: 16px;
        align-items: center;
      }
      .product_mamufacturer_box {
        width:100%;
        text-align: center;
      }
      .workflow_step {
        flex-direction: column;
      }
      .step_number {
        width:100%;
        padding: 20px 23px;
      }
      .step_number::after {
        display:none;
      }

      .qa_item summary {
        padding: 16px 32px 16px 16px;
      }
    .page_catchcopy {
      font-size:24px;
    }
    .feature_section_inner { 
      overflow: visible; /* はみ出し表示を許可 */
      position: relative; /* 子要素のabsoluteなどに備えておく */
    }
    .swiper.feature_cards {
      width: 100vw; /* 画面幅に広げる */
      margin-left: calc(-50vw + 50%); /* センター起点で左にはみ出させる */

      box-sizing: border-box;
    }
    .feature_cards .swiper-wrapper {
      gap: 16px;
      max-width: none; /* 制限を解除 */
      margin: 0;
      padding: 0;
    }
    /* .feature_card_body {
      flex:1 1 250px;
    } */
    
    .feature_cards {
      width:100%;
      flex-direction: column;
    }
    .feature_cards .swiper-wrapper{ 
      gap:0;

    }
    .feature_card {
      /* min-height: auto; */
      width:100%;
    }
    .workflow_flow {

      max-width: 100%;
    }
    
    .workflow_step_row {
      
      gap: 4vw;
      row-gap: 15vw;
      flex-wrap: wrap;
    }
    
    .workflow_box {
      width: clamp(80px, 12vw, 120px);
      height: clamp(70px, 10vw, 94px);
      border: 2px solid #402E76;    
      font-size: clamp(12px, 1.5vw, 16px);

    }
    
    .workflow_arrow {
      width: 0;
      height: 0;
      border-top: clamp(5px, 1vw, 10px) solid transparent;
      border-bottom: clamp(5px, 1vw, 10px) solid transparent;
      border-left: clamp(10px, 2vw, 16px) solid #402E76;
    }
    
    .workflow_labels {
      pointer-events: none;
    }
    
    .workflow_label {
      padding: clamp(10px, 2vw, 20px);
      font-size: clamp(12px, 1.5vw, 14px);
    }
    .workflow_label:nth-child(1) {
      left: 68%;
      top: 14px;
  }
  .workflow_label:nth-child(2) {
    left: 17%;
    top: 150px;
}
.workflow_label:nth-child(3) {
    left: 55%;
    top: 150px;
}
.workflow_label::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 28px solid #402E76;
}
.record_list {
  padding:0 20px;
}
  }
  @media (max-width: 375px) {
    .workflow_step_row {
      
      gap: 2vw;
      row-gap: 15vw;

    }
    
  }