@charset "utf-8";



section{}
section.secBox{
    padding: 0;
}
.sectionInner{
    max-width: 90%;
}

.modalBox_fair.clearfix{display:initial;}
.modalBox_fair.clearfix:after{content:none;}

#contentsArea{}
#contentsArea .contentsInner{}


.order1{order:1}
.order2{order:2}
.order3{order:3}


/* ボタンの基本設定 */
.btn-like {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 40px; /* サイズ調整 */
  height: 40px;
  /* タップ時の青い枠線を消す（アクセシビリティ的には残すべきですがデザイン重視の場合） */
  outline: none; 
  transition: transform 0.1s;
}

.btn-like:active {
  transform: scale(0.90); /* 押したときに少し凹むアニメーション */
}

/* SVGの基本設定 */
.fav-svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* ストロークが切れないように */
}

/* --- 【重要】OFFの状態（デフォルト） --- */
.btn-like .fav-svg {
  fill: transparent; /* 中身は透明 */
  stroke: #ff4040;   /* 枠線を赤色に */
  stroke-width: 2px; /* 枠線の太さ */
  transition: fill 0.2s ease; /* 色が変わるときにふわっとさせる */
}

/* --- 【重要】ONの状態（is-activeがついた時） --- */
.btn-like.is-active .fav-svg{
  fill: #ff4040;     /* 中身を赤色に塗りつぶし */
  stroke: none;      /* 枠線はなし（または同色） */
}



/* 共通検索窓 */
#searchSchoolBox .select{
    /* background-color: #efefef; */
    padding: 1rem 0;
}
#searchSchoolBox .select .text{
    text-align: center;
    margin: 0 0 1rem 0;
    font-size: 2rem;
    font-weight: bold;
}

#searchSchoolBox .searchList{
    gap: 1rem;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #dddddd;
    border-radius: 0.8rem;
}
#searchSchoolBox .searchList .listItem{
    /* border-right: 1px solid; */
    position:relative;
    padding: 1.6rem 0;
    text-align: center;
    width: 48%;
}

#searchSchoolBox .searchList .listItem.sorting:before,
#searchSchoolBox .searchList .listItem.category:before{content:"";display: inline-block;margin: 0 5px auto 0;width:16px;height:16px;}
#searchSchoolBox .searchList .listItem.sorting:before{background:url(../images/common/icon_sort.png);background-size: cover;background-repeat: repeat;}
#searchSchoolBox .searchList .listItem.category:before{background:url(../images/common/icon_filter.png);background-size: cover;background-repeat: repeat;}
    
#searchSchoolBox .searchList .listItem:first-child::after{
  content:"";
  position:absolute;
  /* border-right: 1px solid; */
  height:85%;
  width:2px;
  background: #dddddd;
  top:0;
  bottom:0;
  margin:auto;
  right: calc(-1rem + 1px);
}
#searchSchoolBox .description{}
#searchSchoolBox .description p{
    font-size: 1.4rem;
    text-align: center;
}
#searchSchoolBox .lity-hide {
            display: none;
        }
#searchSchoolBox .search {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #919191;
    padding: 2rem 0;
}
#searchSchoolBox .search .searchBox{
    width: 95%;
    margin: 1em auto;
}
#searchSchoolBox .search .searchList {
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
#searchSchoolBox .search .listItem {
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
#searchSchoolBox .search .listItem:hover {
    background-color: #1d4ed8;
}
body .lity{background: rgba(0, 0, 0, 0.6);}
body .lity-container{
    width: min(450px,90%);
}

.search{background-color: #fff;padding: 2rem 0;/* width: 100%; *//* width: max(300px,90%); */margin: 0 auto;margin-top: 5rem;}
.search .searchInner{width: 90%;margin: 0 auto;font-size: 10px;}
.search form .searchBox{margin-bottom:2em}
.search form .searchBox select{
    width:95%;
    margin: 0.5em 2.5% 0;
    padding: 0.15em;
}


.categoryList {
    background: #fff;
    border: 1px dashed #ccc;
    border-radius: 20px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    line-height: 1;
}
.categoryList label{padding: 6px 16px;display: inline-block;}
.categoryList:hover {
    border-color: #e65100;
    color: #e65100;
}
.categoryList.active {
    border-style: solid;
    border-color: #e65100;
    background-color: #fff5f0;
    color: #e65100;
}

.categoryList input{display:none;}
.search .heading {
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    color: #333;
}
.search .heading::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1.2em;
    background-color: #e65100;
    margin-right: 10px;
}

.search .categoryItem {
    display: flex;
    font-size: 1.4em;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
    max-height: 20vh;
    overflow-y: scroll;
    padding: 0.5em;
}
.search .categoryItem .placeholder-msg{list-style: none;color: #363636;font-size: 14px;width: 100%; /* 横幅いっぱい使って表示 */text-align: center;}
.search .categoryBtn {
    display: inline-block;
    padding: 6px 16px;
    border: 1px dashed #ccc;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    outline: none;
}
.search .categoryBtn:hover {
    border-color: #e65100;
    color: #e65100;
}
.search .categoryBtn.active {
    border-style: solid;
    border-color: #e65100;
    background-color: #fff5f0;
    color: #e65100;
}


.search .categoryItem.sortItem {
    overflow: auto;
}
.search .categoryItem.sortItem label{
    padding: 0.25em 1.4em;
    border-radius: 2em;
    background: #fff;
    color: #777;
    border: 1px dashed #909090;
}
.search .categoryItem.sortItem label:has(input:checked){border:1px solid #ea8046;background:#ea8046;color:#fff;}
.search .categoryItem.sortItem label input{
    display: none;
}

.search .btn {
    background-color: #e60012;
    color: white;
    width: 80%;
    padding: 1rem;
    font-weight: bold;
    border-radius: 4px;
    margin: 1rem auto;
    display: block;
}
.search  .close {
    display: block;
    margin: 15px auto 0;
    padding: 5px 20px;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.search .heading span{font-size: 85%;margin-left:0.5em}
.search .heading span:before{content:"※"}


.search #cityName .categoryList {
    /* display: none; */
    color: #000;
}