@charset "UTF-8";
/* MoooVie! スマホ対応＋フッターのカテゴリ導線（2026-09-13 asura / Claude）

   ■ 下の @media ブロック（750px以下）はスマホ専用。PCの見た目は一切変わりません。
   ■ このすぐ下の「フッターのカテゴリリンク」だけは、PC・スマホ共通で効きます。
     理由：これまでトップページから作品ページへのリンクが1本も無く、
     Googleがサイトの中を辿れなかったため、全ページのフッターに
     作品カテゴリ10本への導線を新設しました（意図的な見た目の変更です）。
   ■ このファイルの読み込みを外せば、すべて元どおりになります。 */

/* ===== 全画面共通：フッターのカテゴリリンク ===== */
.l-footer__cat{
  max-width:760px;margin:0 auto 42px;padding:0 20px;box-sizing:border-box;text-align:center;
}
.l-footer__cat-title{
  font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.55);
  margin:0 0 12px;line-height:1.4;
}
.l-footer__cat-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px 20px;
}
.l-footer__cat-list li{margin:0;line-height:1.5}
@media screen and (max-width:750px){
  .l-footer__cat{margin-bottom:30px;padding:0 14px}
  .l-footer__cat-list{gap:8px 16px}
}

@media screen and (max-width: 750px) {


  /* ===== 0) content.css で 750px 超の固定幅が指定されている要素をすべて解除 =====
     （content.css から機械的に抽出した30セレクタ＋関連コンテナ） */
  .c-list-table,
  .l-content,
  .l-content-breadcrumb,
  .l-footer,
  .l-footer .l-footer__inner,
  .l-header,
  .l-header .l-header__inner,
  .l-header .l-header__sort.is-hover:after,
  .l-header__sort-section,
  .p-content,
  .p-content-favorite,
  .p-content-search,
  .p-content-detail,
  .p-content-application,
  .p-content-contact,
  .p-content-favorite .c-text--medium-narrow,
  .p-content-howto .p-content-howto__section .p-content-howto__outline,
  .p-content-howto .p-content-howto__section.is-open.p-content-howto__section:before,
  .p-content-howto .p-content-howto__section.is-open:before,
  .p-content-howto .p-content-howto__video,
  .p-content-privacy .p-content-privacy__section,
  .p-content-search .p-content-search__inner,
  .p-content-security .p-content-security__section,
  .p-content-terms .p-content-terms__section,
  .p-list-movie,
  .p-list-qa .p-list-qa__item .p-list-qa__inner,
  .p-media-bnr,
  .p-media-detail,
  .p-media-detailinfo,
  .p-media-terms,
  .p-media-terms .p-media-terms__box,
  .p-media-terms .p-media-terms__box .p-content-terms__section,
  .p-content-howto,
  .p-content-help,
  .p-content-terms,
  .p-content-security,
  .p-content-privacy,
  .p-content-information,
  .p-content-index,
  .p-media-detail__movie,
  .p-media-detail__material,
  .c-heading-qa,
  .p-list-qa,
  .p-list-qa__item {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ===== 1) 横スクロールの原因（固定幅と絶対配置）を解除 ===== */
  html, body { overflow-x: hidden !important; }
  img, video, iframe { max-width: 100% !important; height: auto; }

  .l-header, .l-content, .l-footer, .p-media-bnr {
    min-width: 0 !important;
    width: auto !important;
  }
  .l-header__inner, .l-footer__inner,
  .l-content-breadcrumb, .p-content-application,
  .p-content-complation--application, .p-media-terms, .p-media-terms__box,
  .l-footer__list, .l-footer__logo, .l-header__sort-listbox--category-list {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ===== 2) ヘッダー：絶対配置をやめて縦に積む ===== */
  .l-header {
    position: static !important;
    height: auto !important;
    padding: 12px !important;
    box-sizing: border-box;
  }
  .l-header__inner { display: block !important; padding: 0 !important; }

  .l-header__logo,
  .l-header__search,
  .l-header__sort,
  .l-header__nav {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
  }
  .l-header__logo { text-align: center; }
  .l-header__logo img { height: 26px; width: auto; }

  .l-header__search .c-form-input--search,
  .c-form-input--search {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;   /* iPhone の自動ズーム防止 */
    height: 42px !important;
  }
  .l-header__search-icon { right: 10px !important; }

  .l-header__sort .c-btn-downarrow {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
  }
  /* 詳細検索パネル：閉じているときは高さゼロ（開くまで場所を取らない） */
  .l-header__sort-section {
    position: static !important;
    top: auto !important; left: auto !important;
    width: auto !important;
    box-sizing: border-box;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    transition: max-height 0.3s ease, opacity 0.2s ease !important;
  }
  .l-header__sort-section:after { display: none !important; }
  .l-header__sort.is-hover .l-header__sort-section {
    max-height: 1600px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 12px 0 16px !important;
  }
  .l-header__sort.is-hover .l-header__sort-section .l-header__sort-box {
    visibility: visible !important;
  }
  /* 本文の上に空いていたPC用ヘッダー分の余白を詰める */
  .l-content .p-content,
  .l-content .p-content-contact,
  .l-content .p-content-search,
  .l-content .p-content-favorite,
  .l-content .p-content-detail,
  .l-content .p-content-application {
    padding-top: 16px !important;
  }
  .l-header__sort-box, .l-header__sort-listbox,
  .l-header__sort-listbox--category {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
  }
  .l-header__sort-list, .l-header__sort-listbox--category-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    width: auto !important;
  }
  .l-header__sort-item, .l-header__sort-listbox--category-item {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* ナビは折り返して中央に */
  .l-header__nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }
  .l-header__nav-item { float: none !important; margin: 0 !important; }

  /* ヘッダーを固定解除したので、本文の上余白も解除 */
  .l-content { padding-top: 16px !important; }

  /* ===== 3) 作品サムネイルを2列に ===== */
  .p-list-movie {
    margin: 20px 0 50px 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
  }
  .p-list-movie__item {
    float: none !important;
    position: relative !important;
    width: calc(50% - 4px) !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
  }
  .p-list-movie__item img { width: 100% !important; height: auto !important; display: block; }

  /* ===== 4) フォームを縦積みにして押しやすく ===== */
  .p-list-form__title, .p-list-form__form {
    display: block !important;
    width: auto !important;
    float: none !important;
    text-align: left !important;
    padding: 0 !important;
  }
  .p-list-form__title { margin: 14px 0 4px 0 !important; }
  .c-form-input, .c-form-textarea,
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  .c-form-input.is-small { width: 100% !important; }
  input[type="checkbox"], input[type="radio"] { width: 20px !important; height: 20px !important; vertical-align: middle; }
  .c-form-checkbox, .c-form-radio { display: inline-block; padding: 8px 0 8px 30px !important; text-align: left; }
  .c-btn-send, .c-btn-submit, button, input[type="submit"] { min-height: 44px; }

  /* ===== 5) 本文の余白と文字 ===== */
  .l-content,
  .p-content-index, .p-content-detail, .p-content-help, .p-content-contact,
  .p-content-information, .p-content-privacy, .p-content-terms,
  .p-content-security, .p-content-flow, .p-content-search, .p-content-favorite {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
    width: auto !important;
  }
  .c-text, .c-text--small, p, li, dd, dt, td, th { font-size: 14px !important; line-height: 1.8 !important; }
  .c-heading, .c-heading-title { font-size: 18px !important; }
  .c-heading-title__img { max-width: 70% !important; height: auto; }

  /* 会社概要などの定義リストを縦に */
  .c-list-table__title, .c-list-table__item {
    display: block !important;
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
  }
  .c-list-table__title { font-weight: bold; margin-top: 14px; }
  table { width: 100% !important; }

  /* ===== 6) フッターを縦に ===== */
  .l-footer { padding: 22px 14px !important; box-sizing: border-box; }
  .l-footer__inner { display: block !important; text-align: center; }
  .l-footer__logo { float: none !important; margin: 0 auto 12px auto !important; }
  .l-footer__list {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    margin: 0 0 14px 0 !important;
  }
  .l-footer__list-item { float: none !important; margin: 0 !important; }
  .l-footer__sns {
    float: none !important;
    display: flex !important;
    justify-content: center;
    gap: 16px;
    margin: 0 0 10px 0 !important;
    position: static !important;
  }
  .l-footer__sns-item { float: none !important; margin: 0 !important; }
  .l-footer__copyright { display: block; text-align: center; font-size: 11px !important; position: static !important; }
  .c-btn-pagetop { right: 10px !important; bottom: 10px !important; }

  /* PC専用の要素は隠す（元CSSの .is-pc と同じ扱い） */
  .is-pc { display: none !important; }

  /* ===== 7) 残っていた個別の固定幅・座標指定 ===== */
  /* ページ送り（724px固定＋絶対配置） */
  .p-nav-paging { position: static !important; width: auto !important; padding-top: 12px !important; }
  .p-nav-paging__list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; width: auto !important; }
  .p-nav-paging__item { float: none !important; position: static !important; margin: 0 !important; }
  .p-nav-paging__prev, .p-nav-paging__next {
    position: static !important; left: auto !important; right: auto !important;
    display: inline-block; margin: 8px 6px !important;
  }

  /* 作品詳細：本文が578pxで左寄せ＋回り込み */
  .p-media-detailinfo__cut, .p-media-detailinfo__spec {
    float: none !important; position: static !important;
    width: auto !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .p-media-detail__movie, .p-media-detail__movie iframe { width: 100% !important; max-width: 100% !important; }
  .p-media-detail__movie iframe { aspect-ratio: 16 / 9; height: auto !important; }
  .p-media-detailinfo .c-text--large, .p-media-detailinfo .c-text-narrow { width: auto !important; padding-left: 0 !important; }
  .p-content-favorite .c-text--large { width: auto !important; padding-left: 0 !important; text-align: center !important; }

  /* 使い方ページ：見出しの右方向の座標指定 */
  .p-content-howto__section-title, .p-content-howto__section-title-svg {
    position: static !important; right: auto !important; left: auto !important;
    width: auto !important; max-width: 100% !important;
  }
  .p-content-howto .p-content-howto__section:before,
  .p-content-howto .p-content-howto__section.is-open:before { display: none !important; }
  .p-content-howto__section-title-svg img, .p-content-howto__section-title img { max-width: 100% !important; height: auto !important; }

  /* 念のため：長い英数字やURLが折り返さずに伸びるのを防ぐ */
  .l-content, .l-content p, .l-content li, .l-content dd, .l-content td { overflow-wrap: anywhere; }


  /* ===== 8) 最後に残った2箇所 ===== */
  /* 作品詳細：差し替え可能カットの一覧（567px幅・4列float） → 3列に */
  .p-list-cut {
    width: auto !important;
    margin: 0 0 18px 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  .p-list-cut__item {
    float: none !important;
    position: relative !important;
    width: calc(33.333% - 3px) !important;
    margin: 0 !important;
    aspect-ratio: 138 / 78;
  }
  .p-list-cut__item img { position: absolute !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  .p-list-cut__item:hover img { width: 100% !important; }

  /* 使い方：オプション料金の表組み（780px・display:table） → 縦積みに */
  .p-content-howto__option-list {
    display: block !important;
    width: auto !important;
    margin: 28px 0 0 0 !important;
  }
  .p-content-howto__option-item { display: block !important; border-bottom: 1px solid #e5e5e5; padding: 10px 0; }
  .p-content-howto__option-title,
  .p-content-howto__option-text {
    display: block !important;
    width: auto !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  .p-content-howto__option-title { font-weight: bold; }


  /* 使い方：制作の流れの図解（flexで横並び）→ 縦積みに */
  .p-content-flow__flow {
    display: block !important;
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .p-content-flow__flow > * { max-width: 100% !important; }
  .p-content-flow__text { width: auto !important; padding-left: 0 !important; }
  .p-content-flow__text > span { display: block; }
  .p-content-flow__flow img, .p-content-flow img { max-width: 100% !important; height: auto !important; }
  .p-content-flow__section, .p-content-flow__info, .p-content-flow__lead {
    width: auto !important; max-width: 100% !important; box-sizing: border-box;
  }



  /* 使い方：補足テキストが position:absolute + left:281px で画面外に置かれていた */
  .p-content-flow__info {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .p-content-flow__info br { display: none !important; }


  /* ===== 9) 追加：380px超の固定幅が残っていた要素（実測で洗い出し） ===== */
  .p-content-privacy .p-content-privacy__box,
  .p-content-complation--contact,
  .p-content-complation--contact .p-content-complation__dl,
  .c-list-dl,
  .p-media-application .p-media-application__info,
  .p-media-application .p-media-application__detail {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .p-content-privacy .p-content-privacy__box {
    padding: 12px 14px 16px !important;
  }
  /* 装飾用の擬似要素（横線）が画面外へ伸びるのを止める */
  .p-content-howto .p-content-howto__section .p-content-howto__about:before,
  .p-content-howto .p-content-howto__section.p-content-howto__section-flow:after,
  .p-content-howto .p-content-howto__section.is-open.p-content-howto__section-flow:after {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
  }


  /* ===== 10) 一覧サムネイル：中身も画面幅に合わせる ===== */
  .c-btn-thumb {
    width: 100% !important;
    height: auto !important;
  }
  .c-btn-thumb .c-btn-thumb__hover {
    width: 100% !important;
    height: 100% !important;
  }
  /* PCのマウスオーバー用の吹き出しプレビューはスマホでは出さない */
  .p-list-movie .p-list-movie__item .p-list-movie__fukidashi {
    display: none !important;
  }

  /* ===== 11) お気に入りページの説明文 ===== */
  .p-content-favorite .c-text--small {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 40px 0 !important;
    padding-left: 0 !important;
  }


  /* ===== 12) 縦積みにしたとき、見出しラベルが右寄せのままで読みにくいのを直す ===== */
  .c-list-table__title,
  .c-list-dl dt {
    text-align: left !important;
    font-weight: 500 !important;
  }
  .c-list-table__item,
  .c-list-dl dd {
    text-align: left !important;
    margin: 4px 0 18px 0 !important;
  }


  /* ===== 13) 受付完了ページ（フォーム送信後に出る画面） ===== */
  .p-content-complation--contact,
  .p-content-complation--application,
  .p-content-complation--contact .c-text--large,
  .p-content-complation--application .c-text--large,
  .p-content-complation--contact .p-content-complation__dl,
  .p-content-complation--application .p-content-complation__dl {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }
  .p-content-complation--contact .p-content-complation__dl,
  .p-content-complation--application .p-content-complation__dl {
    margin-top: 32px !important;
  }




  /* ===== 14) 「項目名：内容」の2カラム表を縦積みに（受付完了ページなど） ===== */
  .c-list-dl {
    width: auto !important;
    max-width: 100% !important;
  }
  .c-list-dl .c-list-dl__title {
    position: static !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
  }
  .c-list-dl .c-list-dl__title span {
    position: static !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .c-list-dl .c-list-dl__item {
    float: none !important;
    width: auto !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 16px 0 !important;
  }

  /* ===== 15) 字間の広い本文が画面をはみ出すのを防ぐ ===== */
  .p-content-complation--contact .c-text--large,
  .p-content-complation--application .c-text--large {
    letter-spacing: 0.06em !important;
    line-height: 1.9 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .p-content-complation--contact .c-text--large br,
  .p-content-complation--application .c-text--large br { }

}