/**
 * Waiwanko Free Search Styles
 */

/* === メインフォーム === */
.freeSearch {width: 100%;max-width: 1200px;margin: 60px auto 0;display: flex;justify-content: space-between;gap: 60px;--fs: 16px;--shadow: 0 2px 5px #ccc;--radius: 8px;}
.freeSearch ::placeholder {color: #aaa !important;opacity: 1 !important;}
.freeSearch, .freeSearch__modal {--icon-color: #009688;--button-color: #009688;}
.freeSearch__main {width: 100%;flex-shrink: 0;}
.freeSearch__articles {width: 100%;display: none;}
.freeSearch__heading {font-size: 28px;font-weight: bold;line-height: 1.3;}
.freeSearch__fields {display: flex;flex-wrap: wrap;--gap: 8px;gap: 15px var(--gap);}
.freeSearch__fillFields {width: 100%;}
.freeSearch__2fields {display: flex;flex-wrap: wrap;--num: 2;--gap: 8px;gap: 0 var(--gap);width: 100%;}
.freeSearch__2fields .freeSearch__field {width: calc( ( 100% - var(--gap) * ( var(--num) - 1 ) ) / var(--num) );}
.freeSearch__addOption {width: 100%;display: flex;flex-wrap: wrap;align-items: center;gap: 0.5em;cursor: pointer;}
.freeSearch__submitWrapper {width: 100%;}
.freeSearch__form {margin: 20px 0 0;}

/* === 入力ボックス === */
.freeSearch input[type="text"] {appearance: none;font-size: var(--fs);font-weight: normal;line-height: 1.5;padding: 1.2em 1em;outline: none;border: none;width: 100%;background: #fff;opacity: 1 !important;}
.freeSearch input[type="text"]:disabled {opacity: 1 !important;}
.freeSearch select {font-size: var(--fs);font-weight: normal;line-height: 1.5;padding: 1em;cursor: pointer;border: none;background: #fff;box-shadow: var(--shadow);border-radius: var(--radius);}
.freeSearch__inputBox {background: #fff;border: 1px solid var(--icon-color);border-radius: var(--radius);overflow: hidden;display: flex;}
.freeSearch__inputIcon {font-size: 32px !important;color: var(--icon-color);background: #f5fbf9;border-radius: 9999px;padding: 0.2em;}
.freeSearch__inputBox--clickable, .freeSearch__inputBox--clickable input {cursor: pointer;}
.freeSearch__inputBox--clickable input {pointer-events: none;}
.freeSearch__inputBoxHead {background: var(--icon-color);width: 5em;flex-shrink: 0;display: flex;justify-content: center;align-items: center;}
.freeSearch__inputBoxBody {width: 100%;}

/* === 送信ボタン === */
.freeSearch__submit {appearance: none;width: 100%;border: none;background: var(--button-color);padding: 15px;border-radius: var(--radius);color: #fff;font-size: 18px;font-weight: bold;line-height: 1.5;cursor: pointer;position: relative;transition: .3s;}
.freeSearch__submit:hover {opacity: .7;}
.freeSearch__submitIcon {position: absolute;left: 0.7em;font-weight: bold;font-size: 32px !important;}

/* === オプション表示 === */
.freeSearch__optionDisplay {width: 100%;display: flex;flex-wrap: wrap;padding-left: 2em;gap: 10px;font-size: 13px;font-weight: normal;line-height: 1.2;}
.freeSearch__optionDisplayItem {background: var(--icon-color);border-radius: 9999px;padding: 5px 18px;color: #fff;}
.freeSearch__addOptionIcon {font-size: 32px !important;color: var(--icon-color);}

/* === モーダル共通 === */
.freeSearch__modal {pointer-events: none;}
.freeSearch__prefModalOverlay,
.freeSearch__sisetuModalOverlay,
.freeSearch__optionModalOverlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: transparent;opacity: .8;transition: .6s;cursor: pointer;z-index: 999999;}
.freeSearch__modalInner {position: fixed;top: 0;left: 0;bottom: 0;--width: 480px;width: var(--width);transform: translateX(calc(var(--width) * -1));background: #fff;z-index: 1000000;transition: .6s;overflow-y: scroll;}
.freeSearch__modalInner {--sb-track-color: #ffffff;--sb-thumb-color: var(--icon-color);--sb-size: 6px;scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);}
.freeSearch__modalInner::-webkit-scrollbar {width: var(--sb-size)}
.freeSearch__modalInner::-webkit-scrollbar-track {background: var(--icon-color);border-radius: 6px;}
.freeSearch__modalInner::-webkit-scrollbar-thumb {background: var(--sb-thumb-color);border-radius: 6px;border: 2px solid #ffffff;}
.freeSearch__modalHeaderIcon {cursor: pointer;}
.freeSearch__modalHeader {font-size: 20px;font-weight: bold;line-height: 1.5;text-align: center;position: relative;padding: 1em 50px;}
.freeSearch__modalHeaderIcon {position: absolute;top: 50%;transform: translateY(-50%);right: 20px;}
.freeSearch__modalSection {border-top: 1px solid #ccc;padding: 1em 0;}
.freeSearch__modalSectionHead {font-size: 16px;font-weight: bold;line-height: 1.5;margin: 0;padding: 0 1em;}
.freeSearch__modalCheckList {font-size: 15px;font-weight: normal;line-height: 1.5;margin: 1em 0 0;display: flex;flex-direction: column;gap: 0;user-select: none;}
#modal_option .freeSearch__modalSection:not(.active) {display: none !important;}
.freeSearch__modalSubmit {position: sticky;bottom: 0;left: 0;right: 0;min-height: 60px;background: var(--button-color);color: #fff;font-size: 20px;font-weight: bold;line-height: 1.5;display: flex;justify-content: center;align-items: center;padding: 5px 20px;box-sizing: border-box;cursor: pointer;}

/* === モーダルリスト項目 === */
.freeSearch__modalListItem {position: relative;padding: 1.5em 3.5em;cursor: pointer;}
.freeSearch__modalListCheckbox {font-size: 30px !important;font-weight: normal !important;line-height: 1 !important;position: absolute;top: 50%;transform: translateY(-50%);left: 0.5em;}
.freeSearch__modalListAdd {position: absolute;top: 50%;transform: translateY(-50%);right: 0.7em;cursor: pointer;color: var(--icon-color);}
.freeSearch__modalListItem:hover, .formSearch__modalListItem--selected {background: #0096881c;}
.freeSearch__modalListItem--notfound {opacity: .3;pointer-events: none;}

/* === 選択済み状態 === */
.formSearch__modalListItem--selected .freeSearch__modalListCheckbox::before {content: "check_box";position: absolute;left: 0;top: 0;text-indent: 0;}
.formSearch__modalListItem--selected .freeSearch__modalListCheckbox {text-indent: -9999vw;color: var(--icon-color);}
.formSearch__modalListItem--selected .freeSearch__modalListAdd {text-indent: -9999vw;}
.formSearch__modalListItem--selected .freeSearch__modalListAdd::before {content: "remove";position: absolute;top: 0;right: 0;text-indent: 0;}

/* === モーダル開閉状態 === */
.freeSearch__modal--prefActive {overflow: hidden;}
.freeSearch__modal--prefActive #modal_pref {pointer-events: auto;}
.freeSearch__modal--prefActive #modal_pref .freeSearch__prefModalOverlay {background: #000;}
.freeSearch__modal--prefActive #modal_pref .freeSearch__modalInner {transform: translateX(0);}
.freeSearch__modal--sisetuActive {overflow: hidden;}
.freeSearch__modal--sisetuActive #modal_sisetu {pointer-events: auto;}
.freeSearch__modal--sisetuActive #modal_sisetu .freeSearch__sisetuModalOverlay {background: #000;}
.freeSearch__modal--sisetuActive #modal_sisetu .freeSearch__modalInner {transform: translateX(0);}
.freeSearch__modal--optionActive {overflow: hidden;}
.freeSearch__modal--optionActive #modal_option {pointer-events: auto;}
.freeSearch__modal--optionActive #modal_option .freeSearch__optionModalOverlay {background: #000;}
.freeSearch__modal--optionActive #modal_option .freeSearch__modalInner {transform: translateX(0);}

/* === ピックアップ記事 === */
.freeSearch__aticleList {display: flex;flex-wrap: wrap;--num: 2;--gap: 20px;gap: var(--gap);margin: 20px 0 0;}
.freeSearch__articleItem {width: calc( ( 100% - var(--gap) * ( var(--num) - 1 ) ) / var(--num) );height: auto;aspect-ratio: 4/3;box-shadow: 0 5px 10px hwb(0deg 0% 100% / 16%);border-radius: 10px;overflow: hidden;}
.freeSearch__anchor {display: flex;position: relative;height: 100%;transition: .3s;}
.freeSearch__anchor:hover {opacity: .7;}
.freeSearch__thumb {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.freeSearch__thumb img {width: 100%;height: 100%;object-fit: cover;}
.freeSearch__articleTitle {font-size: 16px;font-weight: normal;line-height: 1.5;height: 3em;overflow: hidden;}
.freeSearch__articleTitleWrapper {position: absolute;bottom: 0;padding: 10px;background: #00000094;color: #fff;margin: 0;width: 100%;box-sizing: border-box;}

/* === サイドバー用 === */
#side_col .freeSearch:first-child {--fs: 12px;--radius: 4px;margin-top: 0;}
#side_col .freeSearch__main {width: 100%;}
#side_col .freeSearch__heading {font-size: 18px;}
#side_col .freeSearch__inputIcon {font-size: 20px !important;}
#side_col .freeSearch__2fields {--num: 1;gap: 15px;}
#side_col .freeSearch__addOption {font-size: 12px;}
#side_col .freeSearch__submit {font-size: 14px;padding: 10px 8px;}
#side_col .freeSearch__articles {display: none;}
#side_col .freeSearch__inputBoxHead {width: 4em;}

/* === 検索結果ページ用 === */
@media screen and ( min-width: 1025px ) {
  .freeSearch__atResultContent {display: none !important;}
}

@media screen and ( max-width: 1024px ) {
  .freeSearch__atResultContent {margin: 0 0 60px;}
  .freeSearch__atResultContentHeading {font-size: 16px;font-weight: normal;line-height: 1.5;color: #5388a0;margin: 0;}
  .freeSearch__atResultContent .freeSearch {margin-top: 15px;}
  .freeSearch__atResultContent .freeSearch__heading {display: none;}
  .freeSearch__atResultContent .freeSearch__form {margin: 0;}
  .freeSearch__atResultContent .freeSearch__articles {display: none;}
  .freeSearch__atResultContent .freeSearch__main {width: 100%;}
}

/* === レスポンシブ === */
@media screen and ( max-width: 967px ) {
  .freeSearch {flex-wrap: wrap;}
  .freeSearch__main {width: 100%;}
}

@media screen and ( max-width: 480px ) {
  .freeSearch:first-child {--fs: 12px;--radius: 4px;margin-top: 0;}
  .freeSearch__main {width: 100%;}
  .freeSearch__heading {font-size: 18px;}
  .freeSearch__inputIcon {font-size: 20px !important;}
  .freeSearch__2fields {--num: 1;gap: 15px;}
  .freeSearch__addOption {font-size: 12px;}
  .material-symbols-rounded {font-size: 20px !important;}
  .freeSearch__submit {font-size: 14px;padding: 10px 8px;}
  .freeSearch__aticleList {--num: 1;}
  .freeSearch__modalInner {--width: 80vw;}
  .freeSearch__modalSubmit {font-size: 16px;min-height: 40px;}
}