@charset "UTF-8";

/* =================================================================
   1. フォント・基本設定
   ================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&display=swap");

.ServiceHeader {
      position: relative;
      z-index: 5; /* 他の要素より手前に表示 */
    }
.reason2 * { box-sizing: border-box; }
.reason2 img { max-width: 100%; height: auto; display: block; }

/* 文字の上のオレンジ丸（圏点）と太字設定 */
.u-emphasis-dots {
  font-weight: bold;
  -webkit-text-emphasis: filled circle #FF7500;
  text-emphasis: filled circle #FF7500;
  -webkit-text-emphasis-position: over right;
  text-emphasis-position: over right;
  color: #282828;
}


/* =================================================================
   2. 表示切り替え設定 (PHPのクラス名に準拠)
   ================================================================= */

/* --- PC表示時の設定 (SP用要素を隠す) --- */
.ServiceHero_lt_sp,
.triangle_sp,
.ServiceHero_bottom3_sp {
  display: none !important;
}

.ServiceHero{
  margin-top: -60px;
}

@media screen and (max-width: 1080px) {
 .ServiceHero_inner2 {
  margin: -50px auto;
  padding-top: -0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: auto;
}
    
}

/* --- SP表示時の設定 (768px以下) --- */
@media screen and (max-width: 768px) {
  /* PC用要素を隠す */
  .ServiceHero_lt,
  .triangle,
  .ServiceHero_bottom3 {
    display: none !important;
  }

  /* SP用要素を表示する */
  .ServiceHero_lt_sp,
  .triangle_sp,
  .ServiceHero_bottom3_sp {
    display: block !important;
  }
  
  .u-emphasis-dots {
    font-size: 14px;  
  }
  
  .ServiceHero_inner2 {
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    min-height: auto;
  }
  
}


/* =================================================================
   3. ヒーローセクション (PCレイアウト)
   ================================================================= */
.ServiceHero_inner2 {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 20px auto;
  padding-top: -0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: auto;
}

.ServiceHero_l {
  width: 55%;
  min-width: 500px;
  padding-bottom: 70px;
  position: relative;
  z-index: 2;
}

.ServiceHero_lt {
  width: 100%;
  margin-bottom: 40px;
}

.ServiceHero_btns {
  width: 100%;
  display: flex;
  gap: 20px;
  justify-content: flex-start;
}

.ServiceHero_contact,
.ServiceHero_download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 60px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
  box-sizing: border-box;
  text-decoration: none;
}

.ServiceHero_contact { background-color: #333 !important; }
.ServiceHero_contact span { color: #fff; }

.ServiceHero_download {
  background-color: #fff;
  border: 2px solid #FF7500;
  color: #FF7500;
}
.ServiceHero_download span { color: #FF7500; }

.ServiceHero_thumbnail2 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 45%;
  max-width: 550px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.ServiceHero_thumbnail2 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.tekiou {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -10px;
  margin-bottom: 0;
  padding-bottom: 20px;
  pointer-events: auto;
}
.ServiceHero_line {
  text-decoration: underline;
  color: #656565;
  font-size: 12px;
  text-align: center;
}


/* =================================================================
   4. 水色枠エリア (ServiceHero_bottom)
   ================================================================= */
.ServiceHero_bottom {
  width: 100%;
  max-width: 1260px;
  margin: -60px auto; 
  padding: 0 0px 10px; 
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.ServiceHero_bottom2 {
  position: relative;
  background-color: #E8F0F6;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 20px;
}

.ServiceHero_bottom2 .area {
  color: #282828;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ★修正箇所：「ダイニーPOSレジ」リンクを太字に */
.ServiceHero_bottom2 .area a.area_other {
  color: #282828;
  text-decoration: underline;
  font-weight: bold; /* 追加 */
}

/* 三角形 (PC) */
.triangle {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  z-index: 6;
}


/* =================================================================
   5. 下部キャンペーンバナー (PC)
   ================================================================= */
.ServiceHero_bottom3 {
  max-width: 1260px;
  margin: 40px auto 0;
  background-color: #FDF2EA;
  border-radius: 4px;
  padding-bottom: 20px;
  height: auto;
  overflow: visible;
}

.resetFv_bottom {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

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

.coution {
  width: auto;
  position: absolute;
  top: 10px;
  right: 15%;
  z-index: 10;
  margin: 0;
}
.resetFv_btn_other {
  font-size: 12px;
  text-decoration: underline;
  color: #656565;
}

.resetFv_bottom_item {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.resetFv_bottom_item .ServiceHero_contact {
  background-color: #fff !important;
  border: 2px solid #FF7500;
  color: #FF7500;
}
.resetFv_bottom_item .ServiceHero_contact span { color: #FF7500; }


/* =================================================================
   レスポンシブ (PC/タブレット: max-width 1080px)
   ================================================================= */
@media screen and (max-width: 1080px) {
  
  .ServiceHero{
    margin-top: -60px;
  }
  
  .ServiceHero_inner2 {
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    min-height: auto;
  }

  .ServiceHero_l {
    display: contents;
  }

  .ServiceHero_lt {
    order: 1;
    width: 90%;
    min-width: auto;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .ServiceHero_lt picture {
    display: flex;
    justify-content: center;
  }

  .ServiceHero_thumbnail2 {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    top: auto;
    width: 70%;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 40px;
  }

  .ServiceHero_btns {
    order: 3;
    width: 100%;
    min-width: auto;
    justify-content: center;
    margin-top: 0;
  }

  .coution {
    right: 18%;
    top: 10px;
  }
  .coution a {
    font-size: 8px;
  }

  .ServiceHero_bottom {
    width: 100%;
    max-width: 1060px;
    margin: -80px auto;
    padding: 0 0px 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
  }
  
  .ServiceHero_bottom2 .area{
    text-align: left;
  }
  
  
}


/* =================================================================
   レスポンシブ (スマホ: max-width 768px)
   ================================================================= */
@media screen and (max-width: 768px) {
  .ServiceHero_thumbnail2 { display: contents; }
  
   .ServiceHero {
        padding: 60px 20px 40px
    }
  
  .ServiceHero_thumbnail2 picture {
    order: 2;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 10px;
    display: block;
    position: relative;
  }
  .ServiceHero_thumbnail2 img { margin: 0 auto; }
  
  .ServiceHero_btns {
    order: 3;
    width: 90%;
    gap: 15px;
    margin-bottom: 20px;
  }
  .ServiceHero_contact, .ServiceHero_download {
    width: 100%;
  }

  .tekiou {
    order: 4;
    font-size: 10px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .ServiceHero_line { font-size: 10px; }

  /* --- 水色枠 (SP) --- */
  .ServiceHero_bottom {
    margin-top: -100px;
    padding: 0px 10px 40px;
  }
  
  .ServiceHero_bottom2 .area {
    font-size: 10px;
    text-align: left;
  }

.ServiceHero_bottom2 .area span {
    font-size: 10px;
    text-align: left;
  }
  /* 三角形 (SP) */
  .triangle_sp {
    position: absolute;
    bottom: 0px; 
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 20px;
    z-index: 10;
  }
  .triangle_sp img { width: 100%; height: auto; display: block; }

  /* --- 下部バナー (SP) --- */
  .ServiceHero_bottom3_sp {
    background-color: #FDF2EA;
    padding: 20px 15px;
    margin: 20px 10px;
  }
  
  .resetFv_bottom_sp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .resetFv_bottom_item_sp {
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
  
  .resetFv_bottom_item_sp .ServiceHero_contact {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 15px;
    background-color: #fff !important;
    border: 2px solid #FF7500 !important;
    color: #FF7500 !important;
  }
  
  .resetFv_bottom_item_sp .ServiceHero_contact span {
    color: #FF7500 !important;
  }

  .coution {
    position: static;
    text-align: center;
    width: 100%;
    margin-top: 10px;
  }
  
  .resetFv_sp_bottom_txt {
    font-size: 10px;
    color: #666666;
    text-align: left;
    margin-top: 15px;
    line-height: 1.5;
  }
  
  .ServiceHero_bottom2 .area a.area_other {
  color: #282828;
  text-decoration: underline;
  font-weight: bold; /* 追加 */
  font-size: 10px;
}
  
  .tekiou_sp { display: none; }
}