/* =========================================================
   search.css  モーダル「search」専用。クラス名はすべて search- で始まる
   各ルールの上のコメントは、その部品に入っている文字（どの部品かの目印）。変えたい文字で検索すると見つかる。
   画面幅による切り替えは STUDIO と同じ 2 段階: 通常（PC）/ max-width: 840px（タブレット）/ 540px（スマホ）
   ========================================================= */

/* search-box1: search カテゴリー イチオシ記事 お得情報 インタビュー お知 */
.search-box1 { align-content: center; align-items: center; background: rgba(0, 0, 0, 0.38); height: 100%; justify-content: center; width: 100%; max-width: 100%; }

/* search-box2: search カテゴリー イチオシ記事 お得情報 インタビュー お知 */
.search-box2 { align-content: center; align-items: center; background: #f9f9f9f2; border-radius: 8px; box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.2); flex: none; flex-direction: column; flex-wrap: nowrap; height: auto; justify-content: flex-start; margin: 24px; padding: 50px; width: 580px; max-width: calc(100% - 48px); }
@media screen and (max-width: 540px) { .search-box2 { background: #f9f9f9ff; flex: none; height: auto; margin: 20px; padding: 50px 32px; width: calc(100% - 40px); max-width: calc(100% - 40px); } }

/* search-form1: search */
.search-form1 { align-content: flex-start; align-items: flex-start; flex: none; flex-direction: row; flex-wrap: nowrap; height: 50px; justify-content: center; margin: 0px 0px 40px 0px; width: 100%; max-width: 100%; }
@media screen and (max-width: 540px) { .search-form1 { align-content: center; align-items: center; justify-content: center; margin: 0px 0px 20px 0px; width: 100%; max-width: 100%; } }

/* search-input1:  */
.search-input1 { background: #FFFFFF; border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-right: 0px solid #eeeeee; border-top: 1px solid #eeeeee; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); color: #333; flex: none; font-family: Lato, sans-serif; font-size: 16px; height: 50px; justify-content: center; line-height: 1.4; margin: 0px 15px 0px 0px; padding: 10px 16px 10px 16px; text-align: left; width: calc(90% - 15px); max-width: calc(90% - 15px); }
.search-input1:focus { outline:none;border-bottom: 1px solid #33b920; border-left: 1px solid #33b920; border-right: 1px solid #33b920; border-top: 1px solid #33b920; }
.search-input1::-webkit-input-placeholder { color: #aeaeae; }
.search-input1:-moz-placeholder { color: #aeaeae; }
.search-input1::-moz-placeholder { color: #aeaeae; }
.search-input1:-ms-input-placeholder { color: #aeaeae; }

/* search-btn1: search */
.search-btn1 { background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); border-radius: 50%; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); color: #333; flex: none; font-family: Lato, sans-serif; font-size: 15px; gap: 1px; height: 50px; justify-content: center; line-height: 1.4; text-align: left; width: 50px; --gh-search-btn1: 0px; --gv-search-btn1: 1px; max-width: 100%; --g-color-0: #aceaa2; --g-position-0: 0%; --g-color-1: #5dbee3; --g-position-1: 100%; --g-color-2: #5dbee3; --g-position-2: 100%; --g-color-3: #5dbee3; --g-position-3: 100%; --g-color-4: #5dbee3; --g-position-4: 100%; --g-color-5: #5dbee3; --g-position-5: 100%; --g-color-6: #5dbee3; --g-position-6: 100%; --g-color-7: #5dbee3; --g-position-7: 100%; --g-color-8: #5dbee3; --g-position-8: 100%; --g-color-9: #5dbee3; --g-position-9: 100%; --g-color-10: #5dbee3; --g-position-10: 100%; --g-color-11: #5dbee3; --g-position-11: 100%; --g-angle: 270deg; }
@media screen and (max-width: 540px) { .search-btn1 { flex: none; height: 40px; width: 40px; --gh-search-btn1: 0px; --gv-search-btn1: 1px; max-width: 100%; } }

/* search-icon1: search */
.search-icon1 { color: #FFFFFF; font-size: 28px; }

/* search-box3: カテゴリー */
.search-box3 { align-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; margin: 0px 0px 20px 0px; padding: 0px; width: 100%; max-width: 100%; }

/* search-txt1: カテゴリー */
.search-txt1 { color: #333; flex: none; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 500; height: auto; line-height: 1.4; margin: 0px 0px 8px 0px; padding: 0px 0px 0px 0px; text-align: left; width: 100%; max-width: 100%; justify-content: flex-start; }

/* search-box4:  */
.search-box4 { background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1)); flex: none; height: 4px; width: 100%; max-width: 100%; --g-color-0: #aceaa2; --g-position-0: 0%; --g-color-1: #5dbee3; --g-position-1: 100%; --g-color-2: #5dbee3; --g-position-2: 100%; --g-color-3: #5dbee3; --g-position-3: 100%; --g-color-4: #5dbee3; --g-position-4: 100%; --g-color-5: #5dbee3; --g-position-5: 100%; --g-color-6: #5dbee3; --g-position-6: 100%; --g-color-7: #5dbee3; --g-position-7: 100%; --g-color-8: #5dbee3; --g-position-8: 100%; --g-color-9: #5dbee3; --g-position-9: 100%; --g-color-10: #5dbee3; --g-position-10: 100%; --g-color-11: #5dbee3; --g-position-11: 100%; --g-angle: 270deg; }

/* search-box5: イチオシ記事 お得情報 インタビュー お知らせ メディア */
.search-box5 { align-content: flex-start; align-items: flex-start; background: rgba(0,0,0,0.0); flex: none; flex-direction: row; flex-wrap: wrap; gap: 16px; height: auto; justify-content: flex-start; margin: 0px 0px 0px; overflow-x: hidden; overflow-y: auto; width: 1024px; --gh-search-box5: 16px; --gv-search-box5: 16px; max-width: 100%; }
@media screen and (max-width: 840px) { .search-box5 { margin: 100px 20px 100px; --gh-search-box5: 16px; --gv-search-box5: 16px; max-width: calc(100% - 40px); } }
@media screen and (max-width: 540px) { .search-box5 { gap: 16px 10px; margin: 0px 0px 20px; --gh-search-box5: 10px; --gv-search-box5: 16px; max-width: 100%; } }

/* search-link1: イチオシ記事 */
.search-link1 { align-content: center; align-items: center; background: rgba(0,0,0,0.0); border-bottom: 1px solid #889986ff; border-left: 1px solid #889986ff; border-radius: 32px; border-right: 1px solid #889986ff; border-top: 1px solid #889986ff; flex: none; flex-direction: row; flex-wrap: nowrap; height: auto; justify-content: flex-start; margin: 0px 0px 0px 0px; overflow-x: hidden; overflow-y: auto; padding: 4px 12px; width: auto; max-width: 100%; }
.search-link1:hover { opacity: 0.8; }
@media screen and (max-width: 840px) { .search-link1 { flex: none; flex-direction: column; flex-wrap: nowrap; margin: 0px 15px 30px; overflow-x: hidden; overflow-y: auto; width: calc(50% - 30px - (var(--gh-search-box5) * 0.5)); max-width: calc(50% - 30px - (var(--gh-search-box5) * 0.5)); } }
@media screen and (max-width: 540px) { .search-link1 { flex: none; flex-direction: column; flex-wrap: nowrap; margin: 0px 0px 0px; overflow-x: hidden; overflow-y: auto; padding: 6px 12px; width: auto; max-width: 100%; } }

/* search-box6: イチオシ記事 */
.search-box6 { align-content: flex-start; align-items: flex-start; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 0px; justify-content: center; margin: 0px 0px 0px 0px; width: auto; --gh-search-box6: 0px; --gv-search-box6: 0px; max-width: 100%; }
@media screen and (max-width: 840px) { .search-box6 { margin: 0px 0px 0px 0px; --gh-search-box6: 0px; --gv-search-box6: 0px; } }

/* search-txt2: イチオシ記事 */
.search-txt2 { color: #333; flex: none; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 500; height: auto; line-height: 1.2; margin: 0px 0px 0px 0px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 840px) { .search-txt2 { font-size: 20px; } }
@media screen and (max-width: 540px) { .search-txt2 { color: #575757ff; font-size: 16px; } }

/* search-txt3: 検索を閉じる */
.search-txt3 { border-bottom: 1px solid #000; border-left: 1px solid #000; border-radius: 32px; border-right: 1px solid #000; border-top: 1px solid #000; color: #333; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 500; height: auto; line-height: 1.4; margin: 80px 0px 0px 0px; padding: 12px 24px; text-align: left; width: auto; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 540px) { .search-txt3 { margin: 20px 0px 20px 0px; max-width: 100%; } }