@charset "utf-8";

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -----------------------
　キーワードで探す
----------------------- */
#SearchForm .searchCategory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
}
#SearchForm .searchCategory label{
  margin-right: 1em;
  color: var(--color-type);
  vertical-align: middle;
  border-radius:0;
  box-shadow:none;
  font-weight:var(--font-bold);
  line-height:var(--line-height-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
#SearchForm .searchCategory input {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  height: 20px;
  width: 20px;
  z-index: 0;
  cursor: pointer;
}

#SA_SearchRank li {
  display: inline-block;
  margin: 0 8px 8px 0;
}
#SA_SearchRank li a {
  align-items: center;
  appearance: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-type);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  justify-content: space-between;
  line-height: var(--line-height-sm);
  overflow: hidden;
  padding: 18px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background .3s, color .3s, border .3s;
}
#SA_SearchRank li a span{
  flex: 1;
  z-index: 1;
}
@media screen and (min-width:769px) {
  #SA_SearchRank li a {
    font-size: var(--text-2xs);
    padding: 18px 20px;
  }
}


/* -----------------------
　カテゴリで探す
----------------------- */
#categoryArea .categoryList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#categoryArea .categoryList>li {
  width: calc( 50% - 20px );
}
#categoryArea .categoryList>li .categoryTit {
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 40px;
  padding: 10px 0 10px 54px;
}
#categoryArea .categoryList>li.catTicket .categoryTit {
  background-image: url(../img/icon_cat_ticket.png);
}
#categoryArea .categoryList>li.catBoarding .categoryTit {
  background-image: url(../img/icon_cat_boarding.png);
}
#categoryArea .categoryList>li.catHelp .categoryTit {
  background-image: url(../img/icon_cat_help.png);
}
#categoryArea .categoryList>li.catStatus .categoryTit {
  background-image: url(../img/icon_cat_status.png);
}
#categoryArea .categoryList>li.catService .categoryTit {
  background-image: url(../img/icon_cat_service.png);
}
#categoryArea .categoryList>li.catDp .categoryTit {
  background-image: url(../img/icon_cat_dp.png);
}
#categoryArea .categoryList>li.catSmileclub .categoryTit {
  background-image: url(../img/icon_cat_smileclub.png);
}
#categoryArea .categoryList>li.catEtc .categoryTit {
  background-image: url(../img/icon_cat_etc.png);
}
#categoryArea .categoryList>li .categorySubList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width:768px) {
  #categoryArea .categoryList>li {
    width: 100%;
  }
}




/* -----------------------
　QA詳細
----------------------- */
#detailArea .blockIcon {
  position: relative;
  padding: 22px 50px 22px 60px;
  line-height: 1.5;
}
#detailArea .blockIcon:before {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  background-size: 38px;
  background-position: top left;
  background-repeat: no-repeat;
  left: 8px;
}
#detailArea .detailQ {
  font-weight: bold;
}
#detailArea .detailQ:before {
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../img/icon_question_green.png);
}
#detailArea .detailA:before {
  top: 16px;
  background-image: url(../img/icon_answer_green.png);
}
#detailArea .txtUpdate {
  text-align: right;
  margin-bottom: 30px;
}
#detailArea .evaluationW .evaluationTit {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
@media screen and (max-width:768px) {
  #detailArea .blockIcon {
    padding: 8px 5px 8px 35px;
  }
  #detailArea .blockIcon:before {
    width: 22px;
    height: 22px;
    background-size: 22px;
    left: 6px;
  }
  #detailArea .detailA:before {
    top: 8px;
  }
}


/* -----------------------
　feedback
----------------------- */
#feedback ul {
  gap: 10px 20px;
}
#feedback ul li{
  align-items:center;
  appearance:none;
  background-color:var(--color-brand-l-800);
  border:none;
  border-radius:var(--radius-xl);
  color:var(--color-white);
  cursor:pointer;
  display:inline-flex;
  font-size:var(--text-sm);
  font-weight:var(--font-bold);
  justify-content:space-between;
  line-height:var(--line-height-sm);
  overflow:hidden;
  padding:16px 20px;
  position:relative;
  text-align:center;
  text-decoration:none;
  transition:background .3s
}
#feedback ul li:focus-visible{
  color:var(--color-white);
  text-decoration:none
}
#feedback ul li:focus-visible:before{
  left:50%;
  top:50%;
  width:110%
}
@media (any-hover:hover){
  #feedback ul li:hover{
    color:var(--color-white);
    text-decoration:none
    }
  #feedback ul li:hover:before{
    left:50%;
    top:50%;
    width:110%
  }
}
#feedback ul li>*+*{
  margin-left:var(--space-2)
}
#feedback ul li:before{
  aspect-ratio:100/98;
  background-color:var(--color-brand-l-1000);
  content:"";
  display:inline-block;
  height:auto;
  left:0;
  mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 100"><path d="M2.54 70.36C-6 45.18 7.72 15.55 33.26 4.34c25.54-11.2 53.13 0 61.56 25.3 8.56 25.18-5.18 54.81-30.72 66.02-25.54 11.2-53.13 0-61.68-25.3z"/></svg>');
  mask-position:center;
  mask-repeat:no-repeat;
  position:absolute;
  top:0;
  transform:translate(-50%,-50%);
  transition:top .3s,left .3s,width .3s,height .3s;
  vertical-align:middle;
  width:100px
}
@media only screen and (width >= 768px){
  #feedback ul li{
    width: calc( 50% - 20px );
    padding:16px 24px
  }
}
#feedback ul li a {
  width: 100%;
  flex: 1;
  z-index: 1;
}



/* -----------------------
　faqList
----------------------- */
.faqList {
  margin-bottom: 50px;
}
.faqList a.p-panel-card {
	display: block;
	position: relative;
	padding: 22px 20px 22px 70px;
	line-height: 1.5;
	color: #343434;
	text-decoration: none;
	margin-bottom: 7px;
}
.faqList a.p-panel-card:before {
	background-image: url(https://www.solaseedair.jp/faq/img/icon_question_green.png);
	content: '';
	position: absolute;
	width: 38px;
	height: 38px;
	background-size: 38px;
	background-position: top left;
	background-repeat: no-repeat;
	top: 50%;
  transform: translateY(-50%);
	left: 20px;
}
#importantQArea a.p-panel-card:before {
  background-image: url(https://www.solaseedair.jp/faq/img/icon_question_orange.png);
}
@media screen and (max-width:768px) {
	.faqList a.p-panel-card {
		padding: 8px 20px 8px 45px!important;
		font-size: 14px!important;
	}
	.faqList a.p-panel-card:before {
		width: 26px!important;
		height: 26px!important;
		background-size: 26px!important;
		left: 12px!important;
	}
}


/* -----------------------
　おすすめ情報
----------------------- */
.adlink .p-panel-card {
  background-color: var(--color-brand-p-10) !important;
}


/* === Paging === */
.page_list {
  padding: 0 0 50px 0;
	text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  list-style: none;
}
.page_list li {
  margin: 0 8px;
}
.page_list li > a,
.page_list li > span {
  text-decoration: none;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-brand-l-800);
  display: flex;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  justify-content: center;
  line-height: 1;
  text-align: center;
  transition: background .3s, color .3s, border .3s;
  white-space: nowrap;
  height: 60px;
  width: 60px;
}
.page_list li.active > span {
  background: var(--color-brand-l-800);
  border: 1px solid var(--color-brand-l-800);
  color: var(--color-white);
  padding: 0 29px;
}
.page_list .previous {
  margin-right: 32px;
}
.page_list .next {
  margin-left: 32px;
}

@media screen and (max-width:600px) {
  .page_list > span,
  .page_list > b {
    margin: 0 4px;
  }
  .page_list a,
  .page_list .SS_selectPage {
    height: 44px;
    width: 44px;
  }
  .page_list .SS_selectPage {
    padding: 0 21px;
  }
  .page_list .previous,
  .page_list .next {
    margin-right: 0;
    margin-left: 0;
  }
  .page_list .previous a,
  .page_list .next a {
    margin: auto;
  }
}