@charset "utf-8";
/* =============================================================================
   無料動画ページ（/movie_f/）改善 2026-11
   ============================================================================= */

/* ---- ヘッダーロゴ：このページは h1 ではなく div（#header h1 と同じ見た目） ---- */
#header .headerLogo{ font-size:14px; float:left; margin:0; padding:8px 0 0; line-height:50px; }
#header .headerLogo a{ display:block; width:300px; padding:0 20px; box-sizing:content-box; }
@media screen and (max-width:1050px){
	#header .headerLogo a{ max-width:180px; }
}
@media screen and (max-width:800px){
	#header .headerLogo{ padding-top:0; padding-left:34px; line-height:47px; }
	#header .headerLogo a{ width:160px; padding:0 10px; max-width:inherit; }
}

/* ---- ページ見出し：h2 → h1 に変更（見た目は従来の h2.gTitle と同じ） ---- */
.freeMovieView h1.gTitle + p.message{ font-size:28px; font-weight:700; line-height:1.4; margin-top:12px; padding-top:0; }
@media screen and (max-width:800px){
	.freeMovieView h1.gTitle{ font-size:40px; }
}
@media screen and (max-width:500px){
	.freeMovieView h1.gTitle{ font-size:24px; }
}

/* ---- 動画カード（flexで行ごとに高さをそろえ、関連商品ボタンを下端に置く） ---- */
.freeMovieView ul.freeMovieListBox{ display:flex; flex-wrap:wrap; }
.freeMovieView ul.freeMovieListBox > li.movieCard{ display:flex; flex-direction:column; vertical-align:top; }
.freeMovieView ul.freeMovieListBox > li.movieCard.is-hidden{ display:none; }

/* 関連商品ボタン：再生リンクの外、カードの下端に幅いっぱい */
.freeMovieView ul.freeMovieListBox > li.movieCard > a.movieLinkButton{ margin:auto 15px 15px; width:auto; }
.freeMovieView ul.freeMovieListBox > li.movieCard > ul.movieTags + a.movieLinkButton{ margin-top:auto; }

/* サムネイル：<a> の高さ（既存の16:9固定）いっぱいに表示。再生アイコン(::after)は上に重なる */
.freeMovieView ul.freeMovieListBox .youtubeImage img{
	position:absolute; left:0; top:0; width:100%; height:100%;
	object-fit:cover; display:block; border:0;
}

/* タイトル：見た目は2行で省略（HTMLには全文を出力） */
.freeMovieView ul.freeMovieListBox .movieTitle{
	font-size:16px; font-weight:700; line-height:1.5; color:#000;
	margin:12px 15px 8px; padding:0; min-height:3em;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* タグ（部位→業態、最大3個） */
.freeMovieView ul.freeMovieListBox ul.movieTags{ list-style:none; margin:0 15px 12px; padding:0; min-height:26px; }
.freeMovieView ul.freeMovieListBox ul.movieTags li{
	display:inline-block; width:auto; margin:0 6px 6px 0; padding:2px 10px;
	box-shadow:none; background:#f2f2f2; border-radius:12px;
	font-size:12px; line-height:1.6; color:#333; vertical-align:top;
}

/* もっと見る */
.freeMovieView .movieMoreBox{ margin:0 0 50px; }
.freeMovieView .movieMoreBox button.movieMore{ width:100%; border:0; cursor:pointer; font-family:inherit; }
.freeMovieView .movieMoreBox button.movieMore[hidden]{ display:none; }

@media screen and (max-width:500px){
	.freeMovieView ul.freeMovieListBox > li.movieCard{ width:100%; }
	.freeMovieView ul.freeMovieListBox > li.movieCard > a.movieLinkButton{ margin:auto 12px 12px; }
	.freeMovieView ul.freeMovieListBox .movieTitle{ font-size:14px; margin:10px 12px 6px; }
	.freeMovieView ul.freeMovieListBox ul.movieTags{ margin:0 12px 10px; }
	.freeMovieView .movieMoreBox{ margin-bottom:30px; }
}

/* ---- 部位別ページの説明文 ---- */
.freeMovieView .movieIntro{ margin:24px 0 0; }
.freeMovieView .movieIntro p{ font-size:16px; line-height:1.9; margin:0; text-align:left; }

/* ---- 小見出し（部位別に見る／検索する） ---- */
.freeMovieView .moviePartsBox{ margin:40px 0 0; }
.freeMovieView .movieSubTitle{ font-size:22px; font-weight:900; line-height:1.4; text-align:center; margin:40px 0 0; }
.freeMovieView .moviePartsBox .movieSubTitle{ margin:0 0 20px; }

/* ---- 部位別に見る（商品カテゴリのボタン部品を流用）。.freeMovieView ul li の幅指定を打ち消す ---- */
.freeMovieView ul.categoryListBox.movieParts{ margin:0; padding:0; }
.freeMovieView ul.categoryListBox.movieParts > li{ width:calc(33.33% - 13.5px); display:list-item; margin:0; }
.freeMovieView ul.categoryListBox.movieParts > li.isCurrent a{ background:#222; box-shadow:0 3px 0 0 #000, 0 6px 14px 0 rgba(0,0,0,.12); }
.freeMovieView ul.categoryListBox.movieParts > li.isCurrent .title,
.freeMovieView ul.categoryListBox.movieParts > li.isCurrent .titleSp{ color:#fff; }
.freeMovieView ul.categoryListBox.movieParts > li.isCurrent a::after{ border-color:#fff; color:#fff; }

@media screen and (max-width:800px){
	.freeMovieView ul.categoryListBox.movieParts > li{ width:calc(33.33% - 6.7px); }
	.freeMovieView .movieIntro p{ font-size:15px; }
}
@media screen and (max-width:500px){
	.freeMovieView .movieSubTitle{ font-size:18px; margin-top:30px; }
	.freeMovieView .moviePartsBox{ margin-top:30px; }
	.freeMovieView .moviePartsBox .movieSubTitle{ margin:0 0 12px; }
	.freeMovieView .movieIntro{ margin-top:16px; }
	.freeMovieView .movieIntro p{ font-size:14px; line-height:1.8; }
}