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

/*------------------------------------------------
 index.css
------------------------------------------------*/
/* デフォルトタグ */
section{
  margin-bottom: 110px;
}




/* 見出し */
h2, h2 *{
  display: block;
  text-align: left;
  font-weight: 700;
  line-height: 1.2;
}
h2{
  font-family: var(--mplus);
  font-size: 0.64rem;
  letter-spacing: 5px;
  margin-bottom: 45px;
}
h2 small{
  font-size: 0.26rem;
  letter-spacing: 2px;
}
h2.hor {
  display: flex;
  align-items: center;
  font-size: 0.5rem;
  gap: 15px;
  border-bottom: 1px solid var(--font_color);
  padding-bottom: 15px;
  margin-bottom: 45px;
}
h3{
  display: block;
  text-align: left;
  font-family: var(--mplus);
  color: var(--site_color_dep);
  line-height: 1.3;
  font-weight: 500;
  font-size: 0.45rem;
  margin: 50px 0 25px;
}
/* ポイント見出し */
.heading_point{
  display: flex;
  text-align: left;
  align-items: center;
  font-family: var(--mplus);
  letter-spacing: 2px;
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1.3;
  gap: 25px;
  margin: 110px 0 25px;
}
.heading_point img{
  display: block;
}
/* 水平ライン */
.horizontal_line{
  display: none;
  margin: 60px 0;
}

/*------------------------------------------------
 index01
------------------------------------------------*/
.index01{
  position: relative;
  overflow: hidden;
}
.index01_main_visual{
  height: auto;
  max-height: none;
  overflow: visible;
}

.hero-img{
  position: static;
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
}

.hero-link{
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.hero-link:hover{
  opacity: 1; /* 白くならない */
}
@media (max-width: 767px){
  .hero-link{
    pointer-events: none;
  }
}

.hero-btn-link{
  pointer-events: auto;
}
@media (max-width: 767px){
  .hero-btn-link{
    pointer-events: auto;
  }
}

.hero-wrapper{
  position: absolute;
  left: 10%;
  top: 5%;
}

.hero-wrapper2{
  position: absolute;
  right: 40%;
  top: 50%;
}

.hero-panel{
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  height: 550px;
  background: rgba(255,255,255,0.6);
  z-index: 1;
}

.hero-panel2{
  position: absolute;
  top: 0;
  left: 0;         /* 親基準で配置 */
  width: 520px;
  height: 450px;
  background: rgba(255,255,255,0.6);
  z-index: 1;
}
@media (max-width: 767px){
  .hero-panel,
  .hero-panel2{
    display: none;
  }
}

.hero-content{
  position: absolute;
  top: 0;
  left: 0;         /* 親基準で配置 */
  width: 520px;
  padding: 40px;
  z-index: 2;
  text-align: left;
}

.hero-title,
.hero-title2{
  font-size: 0.34rem;
  margin-bottom: 40px;
  font-family: serif !important;
  letter-spacing: -0.01em;
}

.hero-text{
  font-size: 0.18rem;
  line-height: 1.6;
  margin-bottom: 25px;
  font-family: serif !important;
}

.hero-logo{
  display: block;
  max-width: 40%;
  height: auto;
  padding: 20px 0;
  margin: 0 auto;
}

.hero-logo2{
  display: block;
  max-width: 60%;
  height: auto;
  padding: 20px 0;
  margin: 0 auto;
}
.hero-image2{
  display: block;
  max-width: 70%;
  height: auto;
  padding: 20px;
}

.hero-btn{
  display: block;
  width: max-content;
  margin: 20px auto 0;
  border: 1px solid #333;
  padding: 12px 80px;
  font-size: 0.18rem;

  font-family: serif !important;
}
.index01_scroll{
  display: block;
  max-width: max-content;
  margin: 0 auto;
  padding: 30px;
}

/*------------------------------------------------
 index02
------------------------------------------------*/
.index02{
  background-color: #FFFF;
  padding-top: 150px;

}
.index02_item{
  display: grid;
  grid-template-columns: 1fr; /* ← 1カラム */
  gap: 30px;
  align-items: start;
}
.index02_img img{
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
}
.index02_text{
  order: 1;
}
.index02_img{
  order: 2;
  display: flex;
  justify-content: center;
}

.index02_list{
  list-style: none;
  margin-bottom: 70px;
}
.index02_list *{
  color: #000000;
}
.index02_list li{
  margin-bottom: 70px;
}
.index02_list li:last-of-type{
  margin-bottom: 0;
}
.index02_list b {
  display: block;
  position: relative;
  font-family: var(--mplus);
  font-size: 0.34rem;
  line-height: 1.2;
  border-bottom: 1px solid;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.index02_list b span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border: 10px solid;
  font-size: 0.38rem;
  font-weight: 500;
  width: 80px;
  left: -80px;
  bottom: -40px;
}
.index02_list p{
  transform: rotateZ(0.05deg);
  font-family: var(--mplus);
}
@media screen and (min-width: 768px){
  .index02_item{
    grid-template-columns: 1fr clamp(500px, 40vw, 600px);
    gap: 50px;
  }

  /* 偶数行だけ左右反転 */
  .index02_item:nth-child(even) .index02_text{
    order: 2;
  }
  .index02_item:nth-child(even) .index02_img{
    order: 1;
  }
}

/*------------------------------------------------
 index03
------------------------------------------------*/
.index03{
  background-color: #F0F0F0;
  padding-top: 70px;
  padding-bottom: 70px;
  margin: 0;
}

.index03_products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
  margin-top: 50px;   /* index03_grid とトーンを揃える */
  padding: 0;
  list-style: none;
}
.index03_products > * {
  min-width: 0;
}

/* 共通の枠スタイル */
.index03_products li {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  padding: 24px 20px;
  box-sizing: border-box;
}
.index03_products li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index03_products .btn03 {
  max-width: 100%;
  box-sizing: border-box;
}
/* 聴六 */
.index03_products .product-choroku {
  border-color: #67BE00;
}

/* kikimo */
.index03_products .product-kikimo {
  border-color: #85C6CE;
}

.index03_products img {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto 20px;
}

.index03_products p {
  font-size: 0.22rem;
  text-align: center;
  line-height: 1.6;
  padding: 30px;
}




/*------------------------------------------------
 index04
------------------------------------------------*/
.index04{
padding-bottom: 50px;
margin-bottom: 20px;
}


/* ケーステキスト */
.index04_case_txt{
  text-align: left;
  font-family: var(--mplus);
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.33rem;
}
.index04_case_txt span{
  display: inline;
  color: var(--site_color);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}





:root {
  --th-width: 170px;
}

@media screen and (max-width: 768px) {
  :root {
    --th-width: 80px;
  }
}

.compare-images {
  display: grid;
  grid-template-columns: 1fr var(--th-width) 1fr;
  align-items: end;
  margin-bottom: -8px; /* 表との隙間調整 */
}

.compare-images img {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
}

.compare-images .img {
  text-align: center;
}
@media (max-width: 767px) {
  .compare-images img {
    width: 60%;
  }
}






.Table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.Table th,
.Table td {
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
  line-height: 2;
  overflow-wrap: anywhere;
}
.Table td .text-left-box {
  display: inline-block;
  text-align: left;
}
.Table td p {
  line-height: inherit;
  text-align: inherit;
  overflow-wrap: inherit;
  font-size: inherit;
}
.Table th {
  width: var(--th-width);
  white-space: normal;
}

.Table th small {
  font-size: 0.14rem;
  line-height: 1.2;
  text-align: center;
  display: block;       /* 改行＋行間調整用 */
}

.Table tbody tr:nth-child(odd) th,
.Table tbody tr:nth-child(odd) td {
  background: #eee;
}

.Table td small {
  font-size: 0.14rem;
  line-height: 1.2;
  text-align: center;
  display: block;       /* 改行＋行間調整用 */
}
.index04_table_wrap {
  margin-top: 40px;
}
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}
.index04_table_wrap table td span {
  display: inline-block;
  aspect-ratio: 1/1;
  background-color: var(--site_color_deco03);
  border-radius: 1000px;
  width: 8px;
  margin: 0 8px 3px 0px;
}

@media screen and (max-width: 767px) {
  .Table th,
  .Table td {
    font-size: 0.14rem;
    padding: 10px;
    line-height: 1.5;
  }
  .Table td .text-left-box {
    font-size: 0.14rem;
    line-height: 1.5;
  }
  .Table th {
  width: 80px;
}
.Table th small,
.Table td small {
  font-size: 0.10rem;
  line-height: 1.2;
  text-align: center;
  display: block;       /* 改行＋行間調整用 */
}
.Table .mark {
  font-size: 0.17rem;   /* ← td基準で少し大きく */
  }

.index04_table_wrap {
  margin-top: 20px;
}
.pc-only {
    display: none;
  }
.sp-only {
    display: block;
  }

.index04_table_wrap table td span {
  margin: 2px 5px 2px 0px;
}




}

/*------------------------------------------------
 index05
------------------------------------------------*/
.index05{
  background-color: #FFFF;
  padding-top: 100px;
  padding-bottom: 75px;
  margin: 0;
}
.index05_label {
  text-align: left;
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.33rem;
  margin-bottom: 12px;
}
.index05_case_txt {
  font-family: var(--mplus);
  color: #333;
}

.index05_muryo_txt {
  font-family: var(--mplus);
  text-align: center;
  color: #21884E; /* 無料：グリーン */
}

.index05_yuryo_txt {
  font-family: var(--mplus);
  text-align: center;
  color: #003057; /* 有料：ブルー */
}


.index05_products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 130px;
  margin-top: 60px;   /* index03_grid とトーンを揃える */
  padding: 0;
  list-style: none;
}
.index05_products > li {
  display: grid;
  grid-template-rows: auto 1fr;
}

.index05_box {
  height: 100%;
}
/* 共通の枠スタイル（中身用） */
.index05_box {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  padding: 30px 20px 30px;
  box-sizing: border-box;
}

/* 無料 */
.index05_box.product-muryo {
  border-color: #21884E;
}

/* 有料 */
.index05_box.product-yuryo {
  border-color: #003057;
}

.index05_products img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto 20px;
}
.index05_products img.rentio-logo {
  width: 70%;
}

.index05_products .index05_box .index05_title {
  font-size: 0.18rem;
  font-weight: 500;
  text-align: center;
  padding: 10px 40px;
}

.index05_products .index05_box p {
  font-size: 0.14rem;
  text-align: left;
  line-height: 1.6;
  padding: 10px 40px;
}

.index05_banner_list {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 20px;              /* バナー同士の間隔 */
}

.index05_banner img {
  width: 100%;
  height: auto;
  display: block;
}
.index05_table_wrap {
  margin-top: 40px;
}


/*------------------------------------------------
 index06
------------------------------------------------*/
.index06{
  background-color: #FFFF;
  padding-bottom: 75px;
  margin: 0;
}
.index06_heading_point{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: var(--mplus);
  letter-spacing: 2px;
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1.3;
  gap: 25px;
  margin: 50px 0 25px;
  color: #21884E;
}
.index06_label {
  text-align: left;
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.33rem;
  margin-bottom: 12px;
}
.index06_case_txt {
  font-family: var(--mplus);
  color: #333;
}

.index06_flow_txt {
  font-family: var(--mplus);
  text-align: center;
  color: #21884E;
}


.index06_products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 30px;   /* index03_grid とトーンを揃える */
  padding: 0;
  list-style: none;
}
.index06_products > li {
  display: grid;
  grid-template-rows: auto 1fr;
}

.index06_box {
  height: 100%;
}
/* 共通の枠スタイル（中身用） */
.index06_box {
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.kc01, .kc02{
  position: relative;
  display: block;
  text-align: center;
  background-image: url(../../img/common/parts/arrow_simple.svg);
  background-position: 93% 50%;
  background-repeat: no-repeat;
  background-size: 15px;
  border-radius: 1000px;
  width: 100%;
  box-sizing: border-box;
  color: #fff !important;
  font-size: 0.14rem;
  font-weight: 500;
  padding: 8px 8px;
  margin: 10px 0;
  line-height: 1.3
}
.kc01{
  background-color: var(--site_color_deco04);
}
.kc02{
  background-color: var(--site_color_deco01);
}
@media screen and (max-width: 767px) {
  .kc01, .kc02{
  font-size: 0.13rem;
}
}





@media screen and (max-width: 767px) {
  .index06_box {
    padding: 10px 10px;
  }
}

.index06_box.product-flow {
  border-color: #21884E;
}

.index06_products img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto 20px;
}

.index06_products .index06_box p {
  font-size: 0.16rem;
  text-align: center;
  line-height: 1.6;

}

.index06_case_txt_banner_list {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 20px;              /* バナー同士の間隔 */
}

.index06_banner img {
  width: 100%;
  height: auto;
  display: block;
}


/*------------------------------------------------
 index07
------------------------------------------------*/
.index07{
  margin-bottom: 70px;
}
.index07_heading_point{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: var(--mplus);
  letter-spacing: 2px;
  font-size: 0.54rem;
  font-weight: 500;
  line-height: 1.3;
  gap: 25px;
  margin: 50px 0 25px;
}
.index07_label {
  text-align: left;
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.2rem;
  margin-bottom: 20px;
}
.index07_case_txt {
  font-family: var(--mplus);
  width: 80%;          /* 表と同じ幅 */
  margin: 0 auto 20px; /* 中央寄せ＋下余白 */
  box-sizing: border-box;
  text-align: left;
  color: #333;
}
.index07 a {
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

table.formTable{
  width: 80%;
  margin: 0 auto;
 border-collapse:collapse;
}
table.formTable td,
table.formTable th {
  border: 1px solid #9b9b9b;
  padding: 15px;
  text-align: left;
  font-size: 0.18rem;
}

table.formTable th{
 width:30%;
 background-color:#d3f7e3;
 }
 th .th-sub {
  color: #F51919;
  font-size: 0.14rem;
  margin-left: 6px;
}

th,td,article,a {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.kind_01 {
  font-size: 0.18rem;
  text-align: left;
}
option {
  font-size: 0.18rem;
}
input ,textarea ,select ,button{
    font-weight: 500;
    font-size: 0.18rem;
    padding: 2px 5px;
    border: 1px solid #9b9b9b;
    border-radius: 3px;
  }
  label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.form-checkbox{
  display: inline-flex;        /* ← 重要 */
  align-items: center;
  gap: 10px;
  font-size: 0.18rem;
  white-space: nowrap;
  max-width: 100%;             /* ← 枠外防止 */
}
input[type="checkbox"]{
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}


.chuushaku{
  font-size: 0.12rem;
}

.formBtn {
  text-align: center;
}

.btnConfirm {
  -webkit-appearance: none;
  appearance: none;
  background-color: #eee;
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 40px;
  padding: 3px;
  font-size: 0.15rem;
  border: 1px solid #999;
  border-radius: 3px;
  box-shadow: 3px 3px 4px #c0c0c0;
  cursor: pointer;
  text-align: center;
}

.btnConfirm:hover {
  background-color: silver;
  box-shadow: none;
}
 .formTable tr:last-child td {
   border-bottom: none;
   border-left: none;
  border-right: none;
 }
 .sp100{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}




/*------------------------------------------------
 index08
------------------------------------------------*/
/* スペックボックス */
.index08{
  padding-top: 30px;
}

.index08_label {
  text-align: left;
  line-height: 1.5;
  font-weight: 500;
  font-size: 0.33rem;
  margin-bottom: 12px;
}
.index08_case_txt {
  font-family: var(--mplus);
  color: #333;
}


.index08 p {
  font-size: 0.18rem;
  font-weight: 500;
  color: #333;
}

.index08 b {
  font-size: 0.2rem;
  font-weight: 600;
  display: block; /* ← 改行したい場合 */
}
.icon-phone {
  width: 0.6em;
  height: auto;
  vertical-align: middle;
  margin-right: 0.25em;
}

.index08 .tel-link {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

@media (hover: none) {
  .index08 .tel-link {
    text-decoration-thickness: 2px;
  }
  .index08 b {
    font-size: 0.18rem;
  }
}

/*------------------------------------------------
 index09
------------------------------------------------*/
/* スペックボックス */
.index09{
  background-color: #F0F0F0;
  padding-top: 70px;
  padding-bottom: 75px;
  margin-bottom: 70px;
}


.index09 h2.hor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  gap: 15px;
  border-bottom: none;
  padding-bottom: 15px;
  margin-bottom: 0px;
}

/*------------------------------------------------
 mail-index01
------------------------------------------------*/

.mail-index01{
  padding-top: 45px;
}
.mail-index01 h2 {
  font-size: 0.5rem;
  text-align: center;
}

.mail-index01 .complete-title {
  font-size: 0.28rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: left;
}

.mail-index01 .complete-text {
  font-size: 0.2rem;
  line-height: 1.8;
}
.mail-index01 li {
  list-style: none;
  margin: 50px 0;
}


.mail-index01 #formWrap2 p {
  margin: 20px 10px;
  text-align: center;
}
.mail-index01 #formWrap2 h4 {
  text-align: left;
  padding: 0 15%;
}

@media screen and (max-width: 767px) {
  .mail-index01 h2 {
    font-size: 0.28rem;
  }
  .mail-index01 .complete-title {
    font-size: 0.2rem;
    margin-bottom: 10px;
  }
  .mail-index01 .complete-text {
    font-size: 0.16rem;
  }
  .mail-index01 #formWrap2 h4 {
    padding: 0 ;
    font-size: 0.16rem;
  }
}


input[type="button"].btnConfirm,
input[type="submit"].btnConfirm {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hov .btnConfirm {
  font-size: 0.15rem;
  background-color: #eee;
  border: 1px solid #999;
  border-radius: 3px;
  box-shadow: 3px 3px 4px #c0c0c0;
  margin: 0;
}
p.hov {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 20px;
}

a.btnConfirm {
  text-decoration: none;     /* 下線消す */
  color: inherit;            /* 文字色を他と揃える */
  display: block;            /* input/button と同じ */
  width: 250px;
  height: 40px;
  padding: 3px;
  border: 1px solid #999;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;    /* 枠はみ出し防止 */
}
@media screen and (max-width: 767px) {
  p.hov {
      gap: 0.4rem;
    }
}


/*------------------------------------------------
 レスポンシブ　　　max-width:1199px
------------------------------------------------*/
@media screen and (max-width:1199px) {

  .hero-logo{
    display: block;
    max-width: 30%;
    height: auto;
    padding: 20px 0;
    margin: 0 auto;
  }

  .hero-logo2{
    display: block;
    max-width: 50%;
    height: auto;
    padding: 20px 0;
    margin: 0 auto;
  }

  .hero-title,
  .hero-title2{
    font-size: 0.3rem;
    margin-bottom: 40px;
    font-family: serif !important;
    letter-spacing: -0.01em;
  }

  .hero-text{
    font-size: 0.16rem;
    line-height: 1.6;
    margin-bottom: 25px;
    font-family: serif !important;
  }


  .index02_list b {
    font-size: 0.32rem;
  }
  .index02_list b span {
    width: 70px;
    left: -70px;
    bottom: -35px;
  }
  .index02_img img{
      max-width: 600px;
    }

  .kind_01 {
    font-size: 0.16rem;
  }

  .index08_spec_box {
    grid-template-columns: 295px 1fr;
    gap: 45px;
    margin-bottom: 65px;
  }
  .index08_logo_box {
    grid-template-columns: 1fr 45%;
  }
}

/*------------------------------------------------
 レスポンシブ　　　max-width:991px
------------------------------------------------*/
@media screen and (max-width:991px) {
  h2, h2.hor {
    font-size: 0.48rem;
    margin-bottom: 35px;
  }
  h2 small, h2.hor small {
    font-size: 0.24rem;
  }
  h2.hor{
    justify-content: center;
  }
  h3 {
    font-size: 0.4rem;
  }
  .heading_point {
    font-size: 0.43rem;
  }
  .heading_point img {
    width: 95px;
  }

  .index01_loop_box {
    width: 170%;
    margin-bottom: 25px;
  }
  .index02_content {
    padding-top: 60px;
  }
  .index02_grid{
    display: block;
  }

  .index06_trial_button_list {
    gap: 10%;
    margin-bottom: 25px;
  }
  .index06_trial_note{
    text-align: center;
    font-size: 0.16rem;
  }
  .index06_trial_grid {
    grid-template-columns: 1fr 40%;
  }
  .index06_trial_grid b {
    font-size: 0.27rem;
    margin-bottom: 20px;
  }

  /* 申し込みフォーム */

  table.formTable{
    width: auto;
    min-width: 140px;
  }
  table.formTable td,
  table.formTable th{
    font-size: 0.17rem;
    padding: 12px;
  }

  .index08{
    padding-top: 0px;
  }
  .index08_spec_box {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 65px;
  }
  .index08_spec_box img{
    display: block;
    max-width: max-content;
    width: 80%;
    margin: 0 auto;
  }
  .index08_logo_box {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .index08_logo_box article b {
    font-size: 0.36rem;
    padding: 5px 15px 13px;
    margin-bottom: 25px;
  }
  .index08_logo_box article p {
    font-size: 0.26rem;
  }
  .index08_logo_box img{
    display: block;
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
  }
}







/*------------------------------------------------
 レスポンシブ　　　max-width:767px
------------------------------------------------*/
@media screen and (max-width:767px) {

  h2, h2.hor {
    font-size: 0.3rem;
    margin-bottom: 25px;
    letter-spacing: 2px;
  }
  h2 small, h2.hor small {
    font-size: 0.2rem;
    letter-spacing: 1px;
  }
  h3 {
    font-size: 0.32rem;
    margin-bottom: 15px;
  }
  .heading_point {
    font-size: 0.3rem;
    margin: 50px 0 25px;
  }
  .heading_point img {
    width: 85px;
  }
  .horizontal_line{
    display: block;
  }

  .hero-wrapper{
    left: 5%;
    top: 5%;;
  }
  .hero-wrapper2{
    right: 50%;
    top: 55%;
  }

  .hero-content{
    width: 220px;
    padding: 0;
  }

  .hero-title{
    font-size: 0.2rem;
    width: 260px;
    margin-bottom: 0px;
  }
  .hero-title2{
    font-size: 0.2rem;
    width: 260px;
    margin-bottom: 0px;
    position: relative;
    left: 30px;
  }


  .hero-text{
    font-size: 0.14rem;
    width: 70%;
    margin-bottom: 0;
  }

  .hero-logo{
    padding: 20px 0;
    width: 35%
  }
  .hero-logo2{
    padding: 20px 0;
    width: 50%
  }
  .hero-image2{
    max-width: 50%;
    padding: 10px 0 0;
  }
  .hero-btn{
    font-size: 0.14rem;
    padding: 2px 30px;
    margin-top: 0;
    background: rgba(255,255,255,0.4);
  }

  .index02_list li {
    margin-bottom: 50px;
  }
  .index02_list b {
    font-size: 0.22rem;
  }
  .index02_img_list b {
    font-size: 0.28rem;
  }


  .index03_products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 40px;
    box-sizing: border-box;
  }

  .index03_products li {
    padding: 10px;
    box-sizing: border-box;
    min-width: 0;   /* ← はみ出し防止の要 */
  }
  .index03_products li .btn03 {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-size: 0.15rem;
    padding:5px 5px 5px;
    background-size: 10px;
  }

  .index03_products img {
    width: 70%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .index03_products p {
    font-size: 0.15rem;
    padding: 6px;
    line-height: 1.4;
    word-break: break-word; /* 念のため */
  }



  .index04_case_txt {
    font-size: 0.19rem;
  }

  .index04_expart_label {
    font-size: 0.27rem;
  }
  .index04_expart_label span::before {
    width: 40px;
  }


  /* セクション全体 */
    .index05 {
      padding-top: 50px;
      padding-bottom: 40px;
    }
    .index05_box {
      border: 1px solid;
    }

    /* 2カラム維持・はみ出し防止 */
    .index05_products {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 20px;
      box-sizing: border-box;
    }

    /* li（カラム） */
    .index05_products > li {
      min-width: 0;
    }

    /* ラベル */
    .index05_label {
      font-size: 0.16rem;
      margin-bottom: 8px;
    }

    /* 枠 */
    .index05_box {
      padding: 16px 12px;
    }

    /* 画像 */
    .index05_products img {
      width: 100%;
      margin-bottom: 12px;
    }

    .index05_products img.rentio-logo {
      width: 80%;
    }
    /* 説明文 */
    .index05_products .index05_box p {
      font-size: 0.12rem;
      padding: 5px;
      line-height: 1.5;
    }
    .index05_products .index05_box .index05_title {
      font-size: 0.14rem;
      padding: 5px;
      line-height: 1.5;
    }

    /* バナー縦並びの間隔を詰める */
    .index05_banner_list {
      gap: 12px;
    }

    .index06_heading_point{
      font-size: 0.28rem;
      margin: 20px 0;
    }
    .index06_flow_txt{
      margin-bottom: 0;
    }
    .index06_products{
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
        margin-top: 20px;
      }

.index07_heading_point{
  font-size: 0.34rem;
}
.index08_label{
  font-size: 0.16rem;
  width: 100%;
  margin: 0 0 15px;
}

/* 申し込みフォーム */
  table.formTable,
    table.formTable tbody,
    table.formTable tr,
    table.formTable th,
    table.formTable td{
      display: block;
      width: 100%;
    }

    table.formTable tr{
      margin-bottom: 20px;
      border: 1px solid #9b9b9b;
    }

    table.formTable th,
    table.formTable td{
      font-size: 0.16rem;
    }
    table.formTable th{
      border-bottom: none;
    }
    table.formTable td{
      border-top: none;
    }

    .formTable tr:last-child,
    .formTable tr:last-child td,
    .formTable tr:last-child th{
      border: none;
    }

    input,
    textarea,
    select{
      width: 100%;
      box-sizing: border-box;
    }


    option {
      font-size: 0.16rem;
    }


.index08_label{
  font-size: 0.16rem;
}


  .index08_spec_box table th, .index08_spec_box table td {
    font-size: 0.14rem;
    padding: 8px 10px;
  }
  .index08_logo_box {
    padding: 30px 25px;
  }
  .index08_logo_box article b {
    font-size: 0.3rem;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  .index08_logo_box article b br{
    display: none;
  }
  .index08_logo_box article p {
    font-size: 0.23rem;
  }
  .index09 h2.hor {
    font-size: 0.28rem;
    margin-bottom: 10px;
  }
}


/*------------------------------------------------
 レスポンシブ　　　max-width:480px
------------------------------------------------*/
@media screen and (max-width:480px) {
  h2.hor {
    font-size: 0.30rem;
    gap: 10px;
  }
  h3 {
    font-size: 0.24rem;
  }
  .heading_point {
    font-size: 0.23rem;
    gap: 15px;
  }
  .heading_point img {
    width: 55px;
  }




  .index02 {
    padding-top: 30px;
    margin-bottom: 10px;
  }
  .index02_list li {
    padding-left: 0;
    gap:10px;
  }
  .index02_list b {
    font-size: 0.22rem;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .index02_list b span {
    border-width: 5px;
    font-size: 0.23rem;
    line-height: 1;
    width: 40px;
    left: -40px;
    bottom: -20px;
  }
  .index02_list p{
    padding-bottom: 10px;
    font-size: 0.16rem;
    line-height: 1.4;
  }

  .index04_case_txt {
    font-size: 0.16rem;
    margin-bottom: 20px;
  }


.index07_heading_point{
  font-size: 0.3rem;
  margin: 20px 0;
}
.index07_case_txt {
  font-size: 0.16rem;
  text-align: left;
  width: 95%;
  }

  table.formTable{
      width: 95%;
    }

    table.formTable th{
      font-size: 0.16rem;
      padding: 10px;
    }

    table.formTable td{
      font-size: 0.15rem;
      padding: 10px;
    }



    option {
      font-size: 0.16rem;
    }

    .btnConfirm{
      width: 100%;
      height: 44px;
      font-size: 0.16rem;
    }

    .chuushaku{
      font-size: 0.11rem;
    }

  .index06{
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .index06_trial_button_list{
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 250px;
    margin: 0 auto 15px;
  }
  .index06_trial_grid{
    margin-bottom: 10px;
  }
  .index06_trial_grid b {
    font-size: 0.21rem;
  }

  .index08_label {
    font-size: 0.16rem;
  }
}