@charset "UTF-8";

/**
 * 
 * Like PBASE style
 * 
 * NOTE: 
 * 
 * PBASEに似せたセレクタ、スタイル群を記述します。
 * MBASEのプログラム内部、モジュールで使用されるhtmlの形式は一切変更しません。
 * 
 * またMBASEには存在しないラッパースタイルは新規で追加しています。
 * その場合の命名ルールは、PBASEにおける名称を基本的に使用しますが
 * PBASEでは「_」区切りであるのに対し、
 * MBASEでは「-」または「--」区切りに変換して使用します。
 * 
 * search1, search2, m_search1, m_search2 のスタイルが主体
 * 
**/


/**
 * banner
 * NOTE: 新規追加 from PBASE
**/

* + .banner {
  margin-top: 16px;
}
.banner img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.banner a {
  display: block;
}


/**
 * search-content
 * NOTE: 新規追加（PBASEのスタイルを模倣）
**/

.search-content {
  --site-input-height: 48px;
  --site-btn-height: 48px;
  border: none !important;
  padding: 0 0 24px;
}
.search-content .l-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 1200px) {
 .search-content {
    --site-input-height: 40px;
    --site-btn-height: 40px;
    padding: 0 0 24px;
  }
 .search-content .l-container {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
}
@media (max-width: 959px) {
 .search-content {
    --site-input-height: 40px;
    --site-btn-height: 40px;
    padding: 0 0 24px;
  }
 .search-content .l-container {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
}
/* on table */
@media screen and (min-width: 768px) and (max-width: 1200px) {
 .search-content .l-container {
    gap: 40px;
  }
}



/**
 * search main
 * NOTE: 新規追加 from PBASE
**/
.search-center-wrap {
  border: none !important;
  width: calc(100% - 300px - var(--site-container-padding-inline));
  padding: 0;
  order: 2;
}
@media (max-width: 1300px) {
  .search-center-wrap {
    width: calc(100% - 240px - var(--site-container-padding-inline));
  }
}
@media (max-width: 1200px) {
  .search-center-wrap {
    /*width: calc(100% - 240px - var(--site-container-padding-inline));*/
    width: 100%;
  }
}
@media (max-width: 959px) {
  .search-center-wrap {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .search-center-wrap {
    width: 100%;
  }
}


/**
 * search left side
 * NOTE: 新規追加 from PBASE
**/
.search-left-wrap {
  --search-left-item-padding-inline: 12px;
  border-radius: var(--site-radius);
  border: solid 2px var(--site-c-main);
  max-width: none;
  width: 300px;
  padding: 8px;
  margin: 0;
  position: relative;
  order: 1;
  overflow: hidden;
}
@media (max-width: 1300px) {
  .search-left-wrap {
    width: 240px;
  }
}
@media (max-width: 1200px) {
  .search-left-wrap {
    /*width: 240px;*/
    width: 100%;
  }
}
@media (max-width: 959px) {
  .search-left-wrap {
    width: 100%;
  }
  /* htmlから data-search-items を外すと通常バージョン */
  .search-left-wrap[data-search-items] {
    border-radius: 0;
    border: none;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3000;
    width: auto;
    height: auto;
    padding: 16px 16px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.8s ease;
    opacity: 0;
    pointer-events: none;
  }
  .search-left-wrap.active[data-search-items] {
    opacity: 1;
    pointer-events: auto;
  }
  /* 元のsubmitを消す */
  .search-left-wrap[data-search-items] .search-item-submit {
    display: none;
  }
  .search-left-wrap[data-search-items] .word-search .search-field {
    width: 100%;
  }
  .search-left-wrap[data-search-items] .word-search .search-submit {
    display: none;
  }
}

.search-left-banner {
  display: none;
  padding: 32px 0 0;
}
@media (max-width: 1200px) {
  .search-left-banner {
    padding: 32px 0 0;
  }
}
@media (max-width: 959px) {
  .search-left-banner {
    padding: 32px 0 0;
  }
}
@media (max-width: 767px) {
  .search-left-banner {
    padding: 32px 0 0;
  }
}

.search-left-wrap .c-head {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  padding: 12px 0 0;
}
.search-left-wrap .c-head__ttl {
  font-size: inherit;
  font-weight: inherit;
}
.search-left-wrap .c-head__txt {
  font-size: 14px;
  font-weight: inherit;
}
@media (max-width: 767px) {
  .search-left-wrap .c-head {
    font-size: 20px;
  }
  .search-left-wrap .c-head__txt {
    font-size: 12px;
  }
}



/**
 * search__item
 * NOTE: スタイルを近づける処置
**/


/**
 * 検索条件
 * NOTE: 
**/

.search-content .search__ttl {
  border-radius: var(--site-radius-btn);
  background: var(--site-c-main);
  color: #fff;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  padding: 8px var(--search-left-item-padding-inline);
  margin: 0;
}
.search-content .search__word .search__ttl,
.search-content .search__sort .search__ttl,
.search-content .search__filter .search__ttl {
  width: calc( 100% + var(--search-left-item-padding-inline)*2 );
  margin-inline: calc(var(--search-left-item-padding-inline)*-1);
}

.search-content .search__item {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 959px) {
  .search-content .search__ttl {}
  .search-content .search__item {}
}
@media screen and (max-width: 767px) {
  .search-content .search__ttl {}
  .search-content .search__item {}
}


/* search__body */
/* NOTE: タブレットサイズで、 .search__areaのラッパーをflexにするために使用しています。 */
.search-content .search__body {}
/* on table */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .search-content .search__body {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    gap: 8px 20px;
  }
  .search-content .search__body>* {
    width: 100%;
  }
  .search-content .search__body *+.search__area,
  .search-content .search__body *+.search__area--second {
    margin: 0;
  }
}


/* search__area */
.search-content .search__area {
  border: none;
  margin: 0;
  padding: 0;
}
/* on table */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .search-content .search__area.search__area--half-on-tablet {
    width: calc( (100% - 20px * 1) / 2 );
  }
}

.search-content .search__area--second {
  margin: 0;
}
.search-content *+.search__area,
.search-content *+.search__area--second {
  margin-top: 20px;
}
.search-content .search__word,
.search-content .search__sort,
.search-content .search__filter {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  box-shadow: none;
  border-radius: 0;
  border: none;
  background: #fff;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 var(--search-left-item-padding-inline);
  gap: 8px;
  overflow: visible;
  position: relative;
}
.search-content *+.search__word,
.search-content *+.search__sort,
.search-content *+.search__filter {
  margin-top: 20px;
}



/**
 * .search__sort
 * NOTE: ソート
**/
/* on table */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .search-content .search__sort {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 8px;
  }
  .search-content .search__sort .search__item {
    flex: 1 1;
  }
}


/**
 * .search__sort button
 * NOTE: ソートのボタン
**/

/* button */
.search-content .search__sort [href="#"][onclick],
.search-content .search__sort [href*="sort="] {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 2em;
  border: solid 1px var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
  text-align: center;
  width: 100%;
  height: 36px;
  padding-inline: 1em;
  position: relative;
  transition:
    box-shadow 0.2s ease,
    border 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
  cursor: pointer;
}
.search-content .search__sort [href="#"][onclick]:hover,
.search-content .search__sort [href*="sort="]:hover {
  border: solid 1px var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
  opacity: 0.7;
}
.search-content .search__sort [href="#"][onclick]::after,
.search-content .search__sort [href*="sort="]::after {
  content: '\f00c';
  display: var(--fa-display, inline-block);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--site-c-main);
  color: #fff;
  font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  font-style: normal;
  font-variant: normal;
  font-size: 13px;
  /* NOTE: アイコンの大きさはここで調整 */
  width: 1.5em;
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 1em;
  right: auto;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
  transform-origin: center center;
  opacity: 0;
  transition:
    opacity 0.8s ease;
}
/* checked */
.search-content .search__sort [href="#"][onclick].is--current-page,
.search-content .search__sort [href*="sort="].is--current-page {
  border: solid 1px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
}
.search-content .search__sort [href="#"][onclick].is--current-page::after,
.search-content .search__sort [href*="sort="].is--current-page::after {
  background: #fff;
  color: var(--site-c-main);
  opacity: 1;
}



/**
 * 検索条件（アコーディオンの場合）
 * NOTE: 新規追加 from PBASE
**/
.search-content [data-search-filter-acc] {
  /*--data-search-filter-acc-btn-height: 48px;*//* No466 大きいアイコン */
  --data-search-filter-acc-btn-height: 20px;/* No466 小さいアイコン */
  margin-bottom: calc( var(--data-search-filter-acc-btn-height) + 20px );
}
.search-content [data-search-filter-acc] .search__ttl {
  cursor: pointer;
}
/* No466 2025.06.19 大きいアイコン */
/*
.search-content [data-search-filter-acc] .search__ttl::after {
  content: '\f078';
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: solid 2px var(--site-c-main);
  background: #fff;
  color: var(--site-c-main);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
  width: var(--data-search-filter-acc-btn-height);
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 5;
  transform: translate(-50%,100%);
  transition: all 0.2s ease;
  cursor: pointer;
}
.search-content [data-search-filter-acc] .search__ttl:hover::after {
  border: solid 2px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
}
.search-content [data-search-filter-acc] .search__ttl.is--active:hover::after,
.search-content [data-search-filter-acc] .search__ttl.is--active::after {
  border: solid 2px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
  transform: translate(-50%,100%) rotate(180deg);
}
.search-content [data-search-filter-acc] .search__ttl:hover::after {
  border: solid 2px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
}
.search-content [data-search-filter-acc] .search__ttl.is--active:hover::after,
.search-content [data-search-filter-acc] .search__ttl.is--active::after {
  border: solid 2px var(--site-c-main);
  background: var(--site-c-main);
  color: #fff;
  transform: translate(-50%,100%) rotate(180deg);
}
*/
/* No466 2025.06.19 小さいアイコン */
.search-content [data-search-filter-acc] .search__ttl::after {
  content: '\f078';
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: solid 2px #fff;
  background: var(--site-c-main);
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-variant: normal;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
  width: var(--data-search-filter-acc-btn-height);
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 16px;
  right: 0.5em;
  bottom: auto;
  left: auto;
  z-index: 5;
  transform: translate(0,-50%);
  transition: all 0.2s ease;
  cursor: pointer;
}
.search-content [data-search-filter-acc] .search__ttl:hover::after {
  border: solid 2px #fff;
  background: var(--site-c-main);
  color: #fff;
}
.search-content [data-search-filter-acc] .search__ttl.is--active:hover::after,
.search-content [data-search-filter-acc] .search__ttl.is--active::after {
  border: solid 2px #fff;
  background: var(--site-c-main);
  color: #fff;
  transform: translate(0,-50%) rotate(180deg);
}


/* not used */
.search-content [data-search-filter-acc="not-used"] {
  margin-bottom: 20px;
}
.search-content [data-search-filter-acc="not-used"] .search__ttl::after {
  display: none;
}

/* on table */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .search-content [data-search-filter-acc] .search__item {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 8px;
  }
  .search-content [data-search-filter-acc] .search__item > label+label {
    margin: 0;
  }
}


/**
 * 入力部品
 * NOTE: 新規追加 from PBASE
**/

/* mbase selectを拡張 */
.search-content .select {
  display: block;
  width: 100%;
}
.search-content .select select {
  width: 100%;
}

/* mbase モーダル起動ボタンを拡張 */
.search-content [id="modal-drawer"] {
  width: auto;
}
.search-content .modal__btn {
  max-width: none;
  margin: 0;
}

/* ラジオボタン・チェックボックス 新規追加 */
.search-content .search__item > label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1ex;
}
.search-content .search__item > label+label {
  margin: 8px 0 0;
}
.search-content .search__item > label > [type="checkbox"],
.search-content .search__item > label > [type="radio"] {
  width: 1em;
  height: 1em;
  margin: 0.75ex 0 0;
}
.search-content .search__item > label:not(.btn):not(.btn--small):not(.btn--large) > span {
  display: block;
}

/* 1行入力 新規追加 */
.search-content .search__item > [type="date"],
.search-content .search__item > [type="search"],
.search-content .search__item > [type="number"],
.search-content .search__item > [type="text"] {
  border-radius: var(--site-radius-btn);
  border: 1px solid var(--site-c-gray);
  background: #fff;
  font-size: 16px;
  max-width: none;
  width: 100%;
  height: var(--site-input-height);
  padding: 0 15px;
}
@media screen and (max-width: 767px) {
  .search-content .search__item > [type="date"],
  .search-content .search__item > [type="search"],
  .search-content .search__item > [type="number"],
  .search-content .search__item > [type="text"] {
    font-size: inherit;
    padding-inline: 1em;
  }
}
/* NOTE: inputを横100% */
.search-content .search__item > input.item--full {
  width: calc(100% + var(--search-left-item-padding-inline) * 2);
  margin-inline: calc(var(--search-left-item-padding-inline) * -1);
}
.search-content .search__item > .btn.item--full {
  width: calc(100% + var(--search-left-item-padding-inline) * 2);
  margin-inline: calc(var(--search-left-item-padding-inline) * -1);
}

/* 送信ボタン 新規追加 */
.search-content .search__submit {}
.search-content *+.search__submit {
  margin-top: 20px;
}
.search-content .search__submit >.btn {
  margin: 0 auto;
}
.search-content .search__submit >*+.btn {
  margin-top: 12px;
}
.search-content .search__submit .btn>a,
.search-content .search__submit .btn>input,
.search-content .search__submit .btn>button,
.search-content .search__submit .btn>span {
  border-radius: var(--site-input-height);
  border-width: 2px;
  font-weight: 500;
  transition:
    box-shadow 0.2s ease,
    border 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

/**
 * フローティングメニュー
 * NOTE: 新規追加 from PBASE
**/
[id="search-f-menu"] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  box-shadow: 0 -2px 8px 0 rgba(0,0,0,0.2);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  padding: 14px 14px;
  background: #fff;
  color: var(--sit-c-black);
  transition: background-color 0.4s ease, color 0.2s ease;
}

[id="search-f-menu"].active {
  background: var(--site-c-main);
  color: #fff;
}

@media (min-width: 960px) {
  [id="search-f-menu"] {
    display: none;
  }
}
[id="search-f-menu"] .text-parts {
  color: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.1ex;
  text-align: left;
  width: calc(100% - 88px);
  padding: 0 28px 0 0;
  margin: 0;
  transition: width 0.4s ease;
}

[id="search-f-menu"].active .text-parts {
  width: calc(100% - 146px);
}

[id="search-f-menu"] .box-btn {
  width: 88px;
  padding: 0;
  margin: 0;
  position: relative;
  transition: width 0.4s ease;
}

[id="search-f-menu"].active .box-btn {
  width: 146px;
}

[id="search-f-menu"] .btn-change {
  display: block;
  border-radius: 6px;
  border: solid 1px var(--site-c-main);
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1ex;
  position: relative;
  width: 88px;
  height: 44px;
  margin: 0 0 0 auto;
  transition: opacity 0.4s ease;
}
[id="search-f-menu"].active .btn-change {
  border: solid 1px;
  background: transparent;
  color: inherit;
}

/* style */
[id="search-f-menu"] .btn-change[data-search-results-cancel],
[id="search-f-menu"] .btn-change[data-search-results-submit] {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

[id="search-f-menu"] .btn-change[data-search-results-cancel] {
  width: 44px;
  right: 92px;
  font-size: 16px;
}

[id="search-f-menu"] .btn-change[data-search-results-submit] {
  right: 0;
}

/* transition */
[id="search-f-menu"] .btn-change[data-search-results-change] {
  opacity: 1;
}

[id="search-f-menu"] .btn-change[data-search-results-cancel] {
  opacity: 0;
  pointer-events: none;
}

[id="search-f-menu"] .btn-change[data-search-results-submit] {
  opacity: 0;
  pointer-events: none;
}

[id="search-f-menu"].active .btn-change[data-search-results-change] {
  opacity: 0;
  pointer-events: none;
}

[id="search-f-menu"].active .btn-change[data-search-results-cancel] {
  opacity: 1;
  pointer-events: auto;
}

[id="search-f-menu"].active .btn-change[data-search-results-submit] {
  opacity: 1;
  pointer-events: auto;
}