@charset "utf-8";

/*common上書き*/
.cht_bottomchase{display: none;}
.cht_labelblock label .cht_icon_checkbox{gap: 10px;}


/*件数・路線の文字を小さくする共通設定*/
.cht_count{
  font-size: clamp(0.6875rem, 0.4808rem + 0.7692vw, 0.8125rem);/* 11-13 430-690 */
  vertical-align: baseline;
}
.cht_via{
  font-size: clamp(0.75rem, 0.6466rem + 0.3846vw, 0.8125rem);/* 12-13 430-690 */
  vertical-align: baseline;
}


.cht_pagettl{
  font-size: clamp(1rem, -0.378rem + 5.13vw, 2.25rem);/* 16-36 430-820 */
}
.cht_pagettl h1{
  align-items: center;
  gap: clamp(0.5rem, -0.603rem + 4.1vw, 1.5rem);/* 8-24 430-820 */
}
.cht_pagettl h1 span{
  vertical-align: baseline;
  font-size: clamp(1.25rem, 0.147rem + 4.1vw, 2.25rem);/* 20-36 430-820 */
  color: var(--color-blue);
}
.cht_section{margin-bottom: 120px;}



.cht_freewordbox input{
  width: 100%;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--border-radius4);
  background-color: #FFFFFF;
  border: 1px solid var(--border-gray03);
}
.cht_freewordbox input::placeholder{
  font-weight: 500;
  font-size: 1rem;
  color: #B4C0CC;
}
.cht_freewordbox .cht_filter-btn{margin-top: 16px;}



.cht_linel-bl span{
  vertical-align: baseline;
  font-size: 0.6875rem;
  font-weight: normal;
}
.cht_section h3{
  height: 64px;
  line-height: 1.2;
  padding: 16px 0 0 24px;
  font-weight: bold;
  font-size: 1.125rem;
  background-color: var(--color-gray04);
  border: 1px solid var(--border-gray04);
  border-bottom: none;
}
.cht_section h3:first-of-type{border-radius: 4px 4px 0px 0px;}

/*リスト共通スタイル*/
.cht_selectlist li{border-top: 1px solid var(--border-gray04);}
.cht_selectlist li:first-of-type{border-top: none;}

/*区のリスト（大分類）*/
.cht_selectlist{
  border-left: 1px solid var(--border-gray04);
  border-right: 1px solid var(--border-gray04);
}
.cht_selectlist > li > .cht_labelblock{
  position: relative;
  height: 64px;
  gap: 0;
}
.cht_selectlist > li > .cht_labelblock .cht_acdnwrap{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 56px;
  font-size: clamp(0.875rem, 0.806rem + 0.26vw, 0.938rem);/*14-15 430-820*/
  transition: all 0.2s linear;
  cursor: pointer;
}
.cht_selectlist > li > .cht_labelblock .cht_acdnwrap .cht_svg{
  position: absolute;
  right: 32px;
  top: calc(50% - 7px);
  transition: all 0.2s linear;
  z-index: 100;
}
.cht_selectlist > li > .cht_labelblock .cht_acdnwrap.active svg{transform: rotate(180deg);}
.cht_selectlist > li > .cht_labelblock > label{
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}



/*五十音リスト（中分類）*/
.cht_middlelist{display: none;}
.cht_middlelist > li > .cht_middleacdn{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 10px 24px;
  font-size: clamp(0.875rem, 0.806rem + 0.26vw, 0.938rem);/*14-15 430-820*/
  font-weight: bold;
  background-color: var(--color-gray05);
  cursor: pointer;
}
.cht_middlelist > li > .cht_middleacdn::before{
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  background-color: var(--txt-color01);
}
.cht_middlelist > li > .cht_middleacdn::after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 12px;
  left: 29px;
  top: calc(50% - 6px);
  background-color: var(--txt-color01);
}
.cht_middlelist > li > .cht_middleacdn.active::after{content: none;}

/*町名・駅名リスト（小分類）*/
.cht_minorlist{display: none;}
.cht_minorlist ul{
  display: flex;
  flex-wrap: wrap;
}
.cht_minorlist li{
  width: 25%;
  height: 64px;
  border-left: 1px solid var(--border-gray04);
}
.cht_minorlist li:nth-of-type(4n+1){border-left: none;}
.cht_minorlist li:first-of-type{border-top: 1px solid var(--border-gray04);}

.cht_minorlist li:last-of-type:nth-of-type(4n+3),
.cht_minorlist li:last-of-type:nth-of-type(4n+2),
.cht_minorlist li:last-of-type:nth-of-type(4n+1){box-shadow: 1px 0 0 0 var(--border-gray04);}

.cht_minorlist li:nth-of-type(4n+2):nth-last-of-type(4),/*前から2番目が最後から4番目だった時*/
.cht_minorlist li:nth-of-type(4n+3):nth-last-of-type(4),/*前から3番目が最後から4番目だった時*/
.cht_minorlist li:nth-of-type(4n+3):nth-last-of-type(3),/*前から3番目が最後から3番目だった時*/
.cht_minorlist li:nth-of-type(4n):nth-last-of-type(4),/*前から4番目が最後から4番目だった時*/
.cht_minorlist li:nth-of-type(4n):nth-last-of-type(3),/*前から4番目が最後から3番目だった時*/
.cht_minorlist li:nth-of-type(4n):nth-last-of-type(2)/*前から4番目が最後から2番目だった時*/
{box-shadow: 0 1px 0 0 var(--border-gray04);}/*borderだと1px凹むのでbox-shadowで代用*/
.cht_minorlist .cht_labelblock label{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 24px;
  font-size: clamp(0.875rem, 0.806rem + 0.26vw, 0.938rem);/*14-15 430-820*/
  transition: all 0.2s linear;
}



.cht_submitbtnbox{
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 20px;
  height: 90px;
  bottom: 0;
  left: 0;
  margin-bottom: 40px;
  padding: 8px 12px;
  border-radius: 0px 0px 4px 4px;
  background-color: #EDF0F3;
  border: 1px solid var(--border-gray04);
  z-index: 101;
}
.cht_submitbtnbox >*{width: 360px;}
.cht_submitbtnbox .cht_gradlinkbtn{
  height: 64px;
}
.cht_submitbtnbox .cht_gradlinkbtn.off{
  filter: grayscale(1);
  opacity: 0.5;
  pointer-events: none;
}
.cht_submitbtnbox .cht_filter-btn{margin: 0;}




@media screen and (min-width:821px){
  .cht_freewordbox input:hover{border-color: #333333;}

  .cht_selectlist > li > .cht_labelblock > div:hover{background-color: var(--color-paleblue02);}

  .cht_middlelist > li > .cht_middleacdn:hover{background-color: #B4C0CC;}

  .cht_minorlist .cht_labelblock label:hover{background-color: var(--color-paleblue02);}
}










@media screen and (max-width:960px){
  .cht_minorlist li{width: calc(100% / 3);}
  .cht_minorlist li:nth-of-type(4n+1){border-left: 1px solid var(--border-gray04);}

  .cht_minorlist li:last-of-type:nth-of-type(3n+2),
  .cht_minorlist li:last-of-type:nth-of-type(3n+1){box-shadow: 1px 0 0 0 var(--border-gray04);}

  .cht_minorlist li:nth-of-type(4n+2):nth-last-of-type(4),/*前から2番目が最後から4番目だった時*/
  .cht_minorlist li:nth-of-type(4n+3):nth-last-of-type(4),/*前から3番目が最後から4番目だった時*/
  .cht_minorlist li:nth-of-type(4n+3):nth-last-of-type(3),/*前から3番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(4n):nth-last-of-type(4),/*前から4番目が最後から4番目だった時*/
  .cht_minorlist li:nth-of-type(4n):nth-last-of-type(3),/*前から4番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(4n):nth-last-of-type(2)/*前から4番目が最後から2番目だった時*/
  {box-shadow: none;}

  .cht_minorlist li:nth-of-type(3n+1){border-left: none;}
  .cht_minorlist li:nth-of-type(3n+2):nth-last-of-type(3),/*前から2番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(3n+3):nth-last-of-type(3),/*前から3番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(3n+3):nth-last-of-type(2)/*前から3番目が最後から2番目だった時*/
  {box-shadow: 0 1px 0 0 var(--border-gray04);}
}
@media screen and (max-width:820px){
  .cht_pagettl h1 span{
    font-size: max(1.25rem, clamp(1rem, -0.378rem + 5.13vw, 2.25rem));
  }

  .cht_minorlist ul li{
    width: 50%;
    height: max(40px, 7.8vw);
  }


  .cht_section{
    margin-bottom: max(80px, 14.63vw);
  }
  .cht_section h3{
    height: clamp(1.5rem, -1.256rem + 10.26vw, 4rem);/*24-64 430-820*/
    padding-top: clamp(0.188rem, -0.708rem + 3.33vw, 1rem);/*3-16 430-820*/
    padding-left: max(14px, 2.92vw);
    font-size: clamp(0.813rem, 0.468rem + 1.28vw, 1.125rem);/*13-18 430-820*/
  }

  .cht_selectlist > li > .cht_labelblock{height: max(48px, 7.8vw);}
  .cht_selectlist > li > .cht_labelblock > div{width: max(40px, 7.8vw);}
  .cht_selectlist > li > .cht_labelblock > label{
    left: max(14px, 2.92vw);
  }
  .cht_selectlist > li > .cht_labelblock .cht_acdnwrap{
    padding-left: max(44px, 6.83vw);
  }
  .cht_selectlist > li > .cht_labelblock .cht_acdnwrap .cht_svg{
    right: max(14px, 3.9vw);
  }

  .cht_minorlist .cht_labelblock label{padding-left: max(22px, 2.92vw);}

  .cht_minorlist li:nth-of-type(3n+1){border-left: 1px solid var(--border-gray04);}
  .cht_minorlist li:nth-of-type(odd){border-left: none;}

  .cht_minorlist li:last-of-type:nth-of-type(3n+2),
  .cht_minorlist li:last-of-type:nth-of-type(3n+1),
  .cht_minorlist li:nth-of-type(3n+2):nth-last-of-type(3),/*前から2番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(3n+3):nth-last-of-type(3),/*前から3番目が最後から3番目だった時*/
  .cht_minorlist li:nth-of-type(3n+3):nth-last-of-type(2)/*前から3番目が最後から2番目だった時*/
  {box-shadow: none;}

  .cht_minorlist li:nth-of-type(even):nth-last-of-type(2)/*前から2番目が最後から2番目だった時*/
  {box-shadow: 0 1px 0 0 var(--border-gray04);}

  .cht_minorlist li:nth-of-type(odd):last-of-type/*前から1番目が最後だった時*/
  {box-shadow: 1px 0 0 0 var(--border-gray04);}

  .cht_minorlist ul li .cht_icon_check{
    width: max(20px, 2.92vw);
    height: max(20px, 2.92vw);
  }


  .cht_submitbtnbox .cht_gradlinkbtn{
    height: max(45px, 7.8vw);
  }

  .cht_submitbtnbox{height: max(72px, 10.97vw);}

}
@media screen and (max-width:430px){
  .cht_minorlist ul li{
    width: 100%;
    border-left: none;
  }
  .cht_minorlist li:nth-of-type(3n+1){border-left: none;}
  .cht_minorlist li:nth-of-type(even):nth-last-of-type(2),
  .cht_minorlist li:nth-of-type(odd):last-of-type{box-shadow: none;}
}