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

/* mc-root: TOP 記事一覧 お問い合わせ メディア記事一覧 運営サービス ラン */
.mc-root { align-content: center; align-items: center; background: #f6f9f9ff; height: 100%; padding: 0px 0px 0px 0px; width: 100%; max-width: 100%; }

/* mc-blk1-pic1:  */
.mc-blk1-pic1 { 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: 5px; 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; }
.mc-blk1-pic1:before { background-size: contain; }

/* mc-blk2-box1: メディア記事一覧 運営サービス ランキング 生活リズムを整えるために */
.mc-blk2-box1 { align-content: flex-start; align-items: flex-start; background: rgba(0,0,0,0.0); flex: none; flex-direction: row; flex-wrap: nowrap; gap: 40px; height: auto; justify-content: center; margin: 120px 0px 80px 0px; width: 1100px; --gh-mc-blk2-box1: 40px; --gv-mc-blk2-box1: 0px; max-width: 100%; }
@media screen and (max-width: 840px) { .mc-blk2-box1 { flex: none; flex-direction: column; flex-wrap: nowrap; width: 86%; --gh-mc-blk2-box1: 0px; --gv-mc-blk2-box1: 40px; max-width: 86%; } }
@media screen and (max-width: 540px) { .mc-blk2-box1 { margin: 100px 0px 80px 0px; --gh-mc-blk2-box1: 40px; --gv-mc-blk2-box1: 0px; width: 86%; max-width: 86%; } }

/* mc-blk2-art1: メディア記事一覧 */
.mc-blk2-art1 { align-content: flex-start; align-items: flex-start; background: #FFFFFF; box-shadow: 0 2px 5px rgba(0,0,0,0.2); flex: none; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 24px 20px; width: calc(65% - (var(--gh-mc-blk2-box1) * 0.35000000000000003)); max-width: calc(65% - (var(--gh-mc-blk2-box1) * 0.35000000000000003)); }
@media screen and (max-width: 840px) { .mc-blk2-art1 { width: calc(100% - (var(--gh-mc-blk2-box1) * 0)); max-width: calc(100% - (var(--gh-mc-blk2-box1) * 0)); } }

/* mc-blk2-txt1: メディア記事一覧 */
.mc-blk2-txt1 { color: #333; flex: none; font-family: 'Noto Sans JP', sans-serif; font-size: 24px; font-weight: 600; height: auto; line-height: 1.5; margin: 20px 0px 20px 0px; text-align: left; width: 100%; max-width: 100%; justify-content: flex-start; }
@media screen and (max-width: 840px) { .mc-blk2-txt1 { font-size: 36px; } }
@media screen and (max-width: 540px) { .mc-blk2-txt1 { font-size: 20px; margin: 0px 0px 8px 0px; width: 100%; max-width: 100%; } }

/* mc-blk2-box2:  */
.mc-blk2-box2 { align-content: flex-start; align-items: flex-start; background: #FFFFFF; justify-content: flex-start; padding: 0px 0px; width: 960px; max-width: 100%; }
@media screen and (max-width: 840px) { .mc-blk2-box2 { flex: none; margin: 0px 0px 0px; width: 100%; max-width: 100%; } }