@charset "utf-8";
/**
 * MOVIE WALKER 共通パーツ（ヘッダー・フッター）の見た目を通常状態に戻すための上書き
 *
 * 対象：/special/odyssey-film/ticket/（リピーター半券キャンペーンLP）
 *
 * 背景：
 *   このLPは pc.css / sp.css が body に background:#000 / color:#fff /
 *   font-weight:500 / font-size:13px / line-height:1.8em を指定し、
 *   common.css が `*` と全要素リストに独自リセットをかけている。
 *   headerApi.js / footerApi.js が後から挿入する共通パーツは
 *   「ページ背景が白・文字は初期値」という main.css の前提で作られているため、
 *   このLPのグローバル指定がそのまま流れ込んで崩れる。
 *
 *   LP側のCSS（common.css / pc.css / sp.css）は触らず、
 *   共通パーツに効いてしまう分だけをこのファイルで打ち消す。
 *
 * 読み込み順：
 *   main.css → common.css / pc.css / sp.css → このファイル
 *   （必ず最後に読むこと）
 *
 * 構成：
 *   1. 共通パーツ全体：継承で流れ込む文字指定を戻す
 *   2. 共通フッター：LPの footer 要素向け指定を打ち消す
 *   3. スクロールコンテナの衝突を回避
 *   4. 共通ヘッダー：レイアウト調整
 *   5. box-sizing の巻き戻し
 *   6. LP側のオーバーレイを共通ヘッダーより前面に出す
 *   7. フッターのSNSシェアボタン ← 打ち消しではなくLP固有の追加スタイル
 *
 *   7節だけは共通パーツと無関係。依頼によりここに置いている。
 *   pc.css / sp.css を触らずに済ませたいものはここへ足す運用。
 *
 * TOP（/special/odyssey-film/）および comment/ の mw-override.css とは
 * 別物。あちらは odyssey.common.css 前提なので同期させないこと。
 */


/*==============================================================
 * 1. 共通パーツ全体：継承で流れ込む文字指定を main.css の前提に戻す
 *============================================================*/

/**
 * body の color:#fff / font-weight:500 / font-size:13px / line-height:1.8em が
 * 共通パーツへ継承されるのを、MOVIE WALKER本体と同じ初期値
 * （黒 / 400 / 16px / 1.6）に戻す。
 *
 * line-height は LP が `1.8em` と単位付きで指定しているため、
 * 算出値 23.4px が「長さ」として全子孫に継承される。
 * フォントサイズの小さい共通パーツでは行間が破綻するので必ず戻す。
 *
 * ★ヘッダー側を .header-container で括れない理由
 *   headerApi.js は取得HTMLを .header-container に流し込んだ直後に
 *     $('.ly_headerPC').unwrap();
 *   を実行する。unwrap() は親要素そのものを取り除くので、
 *   .header-container はDOMから消え、中身は .ly_body の直下に出る。
 *   つまり .header-container を起点にした指定は一切効かない。
 *   ヘッダー側は挿入される要素（.ly_headerPC / .ly_headerSP /
 *   ドロワー .un_menu / 検索パネル .un_search）を直接指定すること。
 *   フッター側は footerApi.js が unwrap しないので .footer-container が残る。
 *
 * main.css がクラスで明示している箇所（.un_menuSearchShowing の白文字、
 * .sb_snsLead の太字など）は詳細度で勝つのでこの上書きの影響を受けない。
 */
.ly_headerPC,
.ly_headerSP,
.un_menu,
.un_search,
.footer-container {
	color: #000;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

/* 共通フッター：通常どおり白背景に戻す */
.footer-container {
	background-color: #fff;
}

/**
 * リンク色：TOP / comment と同じ #222 に揃える
 *
 * common.css の a:link / a:visited{color:#E20003} / a:active{color:#FF4700}
 * が共通パーツのリンクまで赤くしてしまう。
 * 疑似クラス込みで詳細度 (0,1,1) あるため、
 * ヘッダー各要素／.footer-container を足した (0,2,1) で打ち消す。
 *
 * ★ color:inherit ではダメな理由
 *   inherit だと未訪問（:link）のリンクは親の色を拾って黒くなるが、
 *   訪問済み（:visited）のリンクでは値が解決されず、
 *   LP側の a:visited{color:#E20003} が残って赤いままになる。
 *   （プライバシー保護のため :visited に適用できるプロパティと
 *     値の解決方法がブラウザ側で制限されているため）
 *   実際、まっさらなプロファイルでは黒く見えるのに、
 *   MOVIE WALKERを普段見ているブラウザでは赤くなる、という差が出る。
 *   必ず具体的な色で指定すること。
 *
 * ★なぜ #222 なのか
 *   TOP / comment 側は odyssey.common.css の `a { color: #222 }`
 *   （要素セレクタ・疑似クラスなし）が共通パーツのリンクにも当たっており、
 *   結果として全リンクが #222 で表示されている。
 *   3ページで見た目を揃えるため、同じ #222 を指定する。
 *
 * main.css が色を持つリンクは
 *   .un_menu .un_menuSearch_box .un_menuSearchShowing ul li a  (0,3,3)
 *   .un_menu .un_menuSearch_box .un_menuSearchTheater a        (0,3,1)
 * のいずれも詳細度が上なので、白文字のまま維持される。
 *
 * ※ナビのアイコンが赤いのは main.css の .el_icon__red による正しい表示。
 *   打ち消さないこと。
 */
.ly_headerPC a:link,
.ly_headerPC a:visited,
.ly_headerPC a:active,
.ly_headerSP a:link,
.ly_headerSP a:visited,
.ly_headerSP a:active,
.un_menu a:link,
.un_menu a:visited,
.un_menu a:active,
.un_search a:link,
.un_search a:visited,
.un_search a:active,
.footer-container a:link,
.footer-container a:visited,
.footer-container a:active {
	color: #222;
}

/**
 * 画像の縦位置
 *
 * common.css の全要素リセットが img を vertical-align:baseline に戻すため、
 * main.css（destyle）の img{vertical-align:bottom} が打ち消され、
 * 共通パーツのロゴ・アイコン下に行間分の隙間が出る。
 */
.ly_headerPC img,
.ly_headerSP img,
.un_menu img,
.un_search img,
.footer-container img {
	vertical-align: bottom;
}


/*==============================================================
 * 2. 共通フッター：LPの footer 要素向け指定を打ち消す
 *============================================================*/

/**
 * 共通フッターは <footer class="ly_footer"> という footer 要素。
 * pc.css / sp.css の要素セレクタ `footer { ... }` が
 * LP自身のフッターだけでなく共通フッターにも当たってしまい、
 * 背景画像・上下パディング・中央揃え・overflow:hidden が乗る。
 *
 * LP側のセレクタを変えずに済ませるため、
 * .footer-container を足した (0,2,0) で該当プロパティのみ戻す。
 * position:relative は共通フッター側に害が無いのでそのままにしている。
 */
.footer-container .ly_footer {
	background: none;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	text-align: left;
	overflow: visible;
}


/*==============================================================
 * 3. スクロールコンテナの衝突を回避
 *============================================================*/

/**
 * main.css（destyle）の body{overflow-y:scroll} を打ち消す。
 *
 * このLPは common.css が html{height:100%; overflow:auto}、
 * pc.css / sp.css が body{height:100%} を指定している。
 * html の overflow が visible 以外なので body の overflow は
 * ビューポートへ伝播せず、body 自身がスクロールコンテナになる。
 * body の高さは 100%（=1画面）なので、ページ全体が body の内側で
 * スクロールする状態になり、
 *   ・contents.js のスムーススクロール（window.scrollTo）
 *   ・ページトップボタンの出現判定（window.scrollY）
 *   ・共通ヘッダーのSP追従処理（$(window).scrollTop()）
 * がいずれも動かなくなる。
 *
 * 横スクロールバー分のガタつき防止は common.css の
 * html{scrollbar-gutter:stable} が担っているので、
 * overflow-y は visible に戻して問題ない。
 */
body {
	overflow-y: visible;
}


/*==============================================================
 * 4. 共通ヘッダー：レイアウト調整
 *============================================================*/

/**
 * コンテンツ幅の制限を解除
 *
 * main.css は PC時に .ly_content へ
 *   min-width: 67.5rem(1080px) / max-width: 100rem(1600px) / margin: 0 auto
 * を指定している。MOVIE WALKER本体の1080px固定カラム前提の指定。
 *
 * このLPは width:100% の可変レイアウトなので、
 *   ・1600px超のウィンドウ … max-width で頭打ちになり左右に余白が出る
 *   ・768〜1080px         … min-width で横スクロールが出る
 * どちらもデザイン意図と合わないため、幅の制限のみ解除する。
 */
@media screen and (min-width: 768px) {
	.ly_content {
		min-width: 0;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/**
 * PCヘッダー：ウィンドウが広いとき左右に黒背景が出るのを防ぐ
 *
 * main.css の .ly_headerPC は position:fixed / left:0 のみで width 指定が無く、
 * 内側の .ly_headerPC_inner が max-width:100rem(1600px) で中央寄せされている。
 * MOVIE WALKER本体はページ背景が白のため気付かないが、
 * 背景が黒の本LPでは1600pxを超えた分の左右にbodyの黒が露出してしまう。
 *
 * ヘッダー自体を全幅の白にすることで、本体と同じ見た目に戻す。
 * （ナビの中身は1600px中央寄せのまま。本体の配置を変えない）
 */
@media screen and (min-width: 768px) {
	.ly_headerPC {
		width: 100%;
		right: 0;
		background-color: #fff;
	}
}

/**
 * PCヘッダー：ナビ下の境界線を消す
 *
 * main.css は .bl_headerNavbarPC に border-bottom: solid 1px #e6e6e6 を持つ。
 * ページ背景が白のMOVIE WALKER本体では区切りとして機能するが、
 * 本LPはヘッダー直下が黒地のため線が浮いてしまう。
 */
@media screen and (min-width: 768px) {
	.bl_headerNavbarPC {
		border-bottom: none;
	}
}

/**
 * 共通ヘッダーの検索ボックス：input の字幅をMOVIE WALKER本体と揃える
 *
 * main.css は検索inputに width を持たず、size=20相当の固有幅で決まる。
 * さらに親の li が display:table-cell（shrink-to-fit）なので、
 * inputの字幅がそのままヘッダー上の占有幅になる。
 *
 * destyle が input へ font-size / font-weight の継承を効かせるため、
 * body の 13px / 500 が流れ込んで本体と字幅がずれる。
 * 上のヘッダー各要素への指定（16px / 400）を継承させて本体に揃える。
 */
header .un_navSearch_box .un_navSearchInput input,
.un_menu .un_menuSearch_box .un_menuSearchInput input,
.un_search .un_searchInner .un_menuSearch_box .un_menuSearchInput input {
	font-size: inherit;
	font-weight: 400;
}

/**
 * ドロワー内の検索アイコン（虫眼鏡）が出ない問題への対処
 *
 * 背景：
 *   共通ヘッダーの虫眼鏡は、PC側とSPドロワー側でマークアップが異なる。
 *     PC   : <img src="/assets/images/icon-search.svg">          … 直接指定なので表示される
 *     SP   : <img src="/img/common/temporaryImage.svg"
 *                 data-src="/assets/images/icon-search.svg" class="lazyload">
 *   SP側は vanilla-lazyload で src を差し替える前提のマークアップ。
 *
 *   本LPは vanilla-lazyload を読み込んでいないため、headerApi.js の
 *     const hasVanillaLazyload = typeof lazyLoadInstance !== 'undefined';
 *   が false になりフォールバック処理へ入る。ところがその対象が
 *     $('.ly_headerPC picture source.lazyload')
 *     $('.ly_headerPC img.lazyload')
 *   と .ly_headerPC 配下に限定されている。
 *   ドロワー .un_menu は </header> の外側＝ヘッダーの「兄弟」要素なので
 *   選択されず、src が 1×1 のプレースホルダのまま残る。
 *   （本番の /special/odyssey-film/ でも同じ状態）
 *
 *   src の差し替えは CSS では行えないため、
 *   span 側に背景画像として同じアイコンを置いて見た目を復元する。
 *   ※ background-color:#eee（PC幅時）を消さないよう longhand で指定すること。
 *
 * TODO: 本来は JS 側で .un_menu 配下の .lazyload も差し替えるのが筋。
 *       同じ理由でドロワー内のバナー画像も出ていないが、そちらは URL が
 *       動的なため CSS では代替できない。
 */
.un_menu .un_menuSearch_box .un_menuSearchInput span {
	background-image: url(https://press.moviewalker.jp/assets/images/icon-search.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.0625rem 1.0625rem;
}
.un_menu .un_menuSearch_box .un_menuSearchInput span img {
	visibility: hidden;
}


/*==============================================================
 * 5. box-sizing の巻き戻し
 *============================================================*/

/**
 * main.css（destyle）の `* { box-sizing: border-box }` を、
 * 影響が出る要素だけ content-box に戻す。
 *
 * このLPの common.css は box-sizing を指定していないため、
 * main.css を読み込むと全要素が border-box に変わる。
 * 幅を持ちつつ padding/border も持つ要素だけが実寸で変化し、
 * 計測したところ下の3つ（いずれも border:1px）が
 * 各2px 細くなり、ページ全体で約4px 縮んでいた。
 *
 * 見た目にはほぼ影響しない差だが、共通パーツの追加で
 * LPの実寸を変えないよう戻しておく。
 *
 * ※ pc.css / sp.css が今後更新され、幅と左右padding/borderを
 *   併せ持つ要素が増えた場合は同じズレが起きる。
 *   その際はこの節に追記すること。
 *   （逆に .title4_block / #present_imgAll / #present_kikan01 /
 *     #present_kikan02 は LP側が自前で border-box を宣言しており、
 *     もともと影響を受けない）
 */

/* sp.css は .screen_logo に自前で border-box を宣言しているのでPC時のみ戻す */
@media screen and (min-width: 769px) {
	.screen_logo {
		box-sizing: content-box;
	}
}

.present_kiyakubtn,
.bnrImg {
	box-sizing: content-box;
}

/**
 * .screen_warning は sp.css が width:100% + padding-left:1em を持つ。
 * border-box だと padding が内側に入って本文幅が 1em 狭くなり、
 * 折り返し位置が変わる可能性がある。
 * （元の content-box では親を 1em はみ出していたが、
 *   ここでは実装の是非ではなく現状維持を優先する）
 */
.screen_warning {
	box-sizing: content-box;
}


/*==============================================================
 * 6. LP側のオーバーレイを共通ヘッダーより前面に出す
 *============================================================*/

/**
 * 共通ヘッダーは
 *   .ly_headerSP … position:fixed / z-index:10000
 *   .un_menu     … position:fixed / z-index:15000
 * を持つ。一方このLPのオーバーレイは
 *   #loader-bg  z-index:150（#loader は 200）
 *   #kiyakuAll  z-index:30
 * しかないため、
 *   ・ローディング中の黒幕の上にSPヘッダーが乗る
 *   ・応募規約モーダルがSPヘッダー／ドロワーの下に潜る
 * という状態になる。
 *
 * 規約モーダルは contents.js が body に position:fixed を当てて
 * スクロールをロックするが、共通ヘッダーは fixed のまま残るため
 * z-index で前面に出しておく必要がある。
 *
 * #loader / #kiyaku_btn_close はそれぞれ #loader-bg / #kiyakuAll の
 * 子要素で、親が新しい重ね合わせコンテキストになるため据え置きでよい。
 */
#loader-bg {
	z-index: 20000;
}
#kiyakuAll {
	z-index: 20000;
}


/*==============================================================
 * 7. フッターのSNSシェアボタン（このLP固有・共通パーツとは無関係）
 *
 * ※このファイルは本来 MOVIE WALKER 共通パーツの打ち消し用だが、
 *   依頼によりここへ追記している。
 *   comment/ 側の mw-override.css も、同じ理由で
 *   .notice__box / .indent 用のユーティリティを抱えている。
 *
 * ※この節の @media は sp.css に合わせた max-width:768px を使う。
 *   1〜6節が main.css に合わせて min-width:768px を使っているのとは
 *   基準が違うので注意（このLPは 769/768、main.css は 768/767 で切る）。
 *============================================================*/

/**
 * comment/（感想投稿キャンペーン）の .footer__share-list を、
 * 見た目が完全に同じになるように移植したもの。
 * comment/assets/css/odyssey.common.css の該当ブロックを
 * 数値も含めてそのまま持ってきている。クラス名も同じ。
 *
 * ★comment/ 側と違う点は次の2つだけ
 *
 *   1. CSS変数を :root ではなく .footer__share-list に持たせている
 *      comment/ は :root に --vw-min / --easing-outquart を定義しているが、
 *      このLPには存在しない。:root に足すとLP全体へ影響が出かねないので、
 *      このコンポーネントの中だけで完結させた。
 *      子孫（.footer__share-list-item / .shareLists__link）へは
 *      継承で届くので、comment/ と同じ計算結果になる。
 *
 *   2. アイコンのパス
 *      comment/ : ../img/common/sns/icon_*.svg
 *      このLP   : ../images/sns/icon_*.svg
 *      （comment/assets/img/common/sns/ から images/sns/ へコピー済み）
 *
 * --vw-min はデザイン基準幅。comment/ と同じく
 *   PC : 1240（1240px以上で 690px 上限に張り付く）
 *   SP : 750（=92vw 相当まで広がる）
 * で切り替える。ブレークポイントも comment/ と同じ 768px。
 */

/*---------------------------------------------
list
----------------------------------------------*/

.footer__share-list {
	--vw-min: 1240;
	--easing-outquart: cubic-bezier(0.25, 1, 0.5, 1);
	display: flex;
	justify-content: center;
	width: min(calc(690 / var(--vw-min) * 100vw), 690px);
	margin: min(calc(56 / var(--vw-min) * 100vw), 56px) auto 0;
	padding: min(calc(20 / var(--vw-min) * 100vw), 20px) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/*---------------------------------------------
item
----------------------------------------------*/

.footer__share-list-item {
	width: min(calc(216 / var(--vw-min) * 100vw), 216px);
	height: min(calc(34 / var(--vw-min) * 100vw), 34px);
}
.footer__share-list-item--x {
	background: black;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: min(calc(6 / var(--vw-min) * 100vw), 6px) 0 0 min(calc(6 / var(--vw-min) * 100vw), 6px);
}
.footer__share-list-item--facebook {
	background: #3B5998;
}
.footer__share-list-item--line {
	background: #00B900;
	border-radius: 0 min(calc(6 / var(--vw-min) * 100vw), 6px) min(calc(6 / var(--vw-min) * 100vw), 6px) 0;
}

@media screen and (max-width: 768px) {
	.footer__share-list {
		--vw-min: 750;
	}
	.footer__share-list-item {
		width: calc(220 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
	.footer__share-list-item--x {
		border-radius: calc(6 / var(--vw-min) * 100vw) 0 0 calc(6 / var(--vw-min) * 100vw);
	}
	.footer__share-list-item--line {
		border-radius: 0 calc(6 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw) 0;
	}
}

/*---------------------------------------------
link
----------------------------------------------*/

/**
 * アイコンは :before に mask-image で載せ、色は background-color:#FFF で作る。
 * comment/ と同じ方式。
 */
.footer__share-list .shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
	transition: opacity .3s var(--easing-outquart);
}
.footer__share-list .shareLists__link:before {
	content: "";
	width: min(calc(18 / var(--vw-min) * 100vw), 18px);
	height: min(calc(18 / var(--vw-min) * 100vw), 18px);
	background-color: #FFF;
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
}

@media screen and (max-width: 768px) {
	.footer__share-list .shareLists__link:before {
		width: calc(22 / var(--vw-min) * 100vw);
		height: calc(22 / var(--vw-min) * 100vw);
	}
}

/**
 * comment/ は .shareLists__link:hover{opacity:0.7} を持つ。
 * このLPの sp.css は a:hover{opacity:1} でホバーを無効化しているが、
 * こちらは詳細度が同じで後に読まれるため comment/ と同じ挙動になる。
 */
.footer__share-list .shareLists__link:hover {
	opacity: 0.7;
}

/* 各SNSパーツ */
.footer__share-list-item--x .shareLists__link:before {
	-webkit-mask-image: url(../images/sns/icon_x.svg);
	mask-image: url(../images/sns/icon_x.svg);
}
.footer__share-list-item--facebook .shareLists__link:before {
	-webkit-mask-image: url(../images/sns/icon_fb.svg);
	mask-image: url(../images/sns/icon_fb.svg);
}
.footer__share-list-item--line .shareLists__link:before {
	-webkit-mask-image: url(../images/sns/icon_line.svg);
	mask-image: url(../images/sns/icon_line.svg);
}

/**
 * スクリーンリーダー向けのラベル（"X share" など）を見えなくする。
 * comment/ 側は odyssey.common.css に .hd があるが
 * このLPには無いのでここで定義する。
 * display:none ではなく潰して隠すのは、読み上げから外さないため。
 */
.footer__share-list .hd {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}