/* =============================================== Selector Grouping =============================================== */ /* -------------------------------------------------------------- 追記時期：202008 component名： 関連ニュース 対象箇所：全画面 -------------------------------------------------------------- */ .cmpRNews { margin-bottom: 30px; } .cmpRNews .hdgBa { margin-bottom: 30px; } .cmpRNewsList { display: flex; flex-wrap: wrap; /*追加*/ justify-content: space-between; } /*追加*/ .cmpRNewsList::before, .cmpRNewsList::after { content: ""; display: block; width: calc((100% - 60px) / 4); } .cmpRNewsList::before { order: 1; } .cmpRNewsList::after { order: 2; } /*追加*/ .cmpRNewsList > li { width: calc((100% - 60px) / 4); border: 1px solid #dcdcdc; margin-bottom: 30px; } .cmpRNewsList > li >a { display: block; text-decoration: none; } .cmpRNewsList > li >a:hover .cmpRNewsTxt { text-decoration: underline; } /* .cmpRNewsThumb { position: relative; overflow: hidden; } */ .cmpRNewsThumb > div { position: relative; overflow: hidden; } .cmpRNewsThumb > div::before { content: ""; display: block; padding-top: calc((200 / 285) * 100%); } .cmpRNewsThumb > div img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; width: auto; max-width: none; vertical-align: top; } .cmpRNewsBody { padding: 20px 10px; } .cmpRNewsDate { margin-bottom: 10px; font-size: 14px; } .cmpRNewsTxt { margin-bottom: 0; font-size: 14px; } @media screen and (max-width: 800px) { .cmpRNewsList { flex-wrap: wrap; } .cmpRNewsList > li { width: calc((100% - 20px) / 2); } } @media screen and (max-width: 480px) { .cmpRNewsList { display: block; } .cmpRNewsList > li { width: 100%; margin-bottom: 4px; } .cmpRNewsList > li > a { display: flex; } .cmpRNewsThumb { flex-shrink: 0; min-width: 100px; width: 43.46%; } .cmpRNewsBody { flex-grow: 1; display: flex; flex-direction: column-reverse; justify-content: space-between; padding: 10px; } .cmpRNewsTxt { font-size: 14px; /* margin-bottom: calc((480/360) * 16px); */ margin-bottom: 0; line-height: 1.4; } .cmpRNewsDate { margin-bottom: 0; font-size: 12px; } } /* -------------------------------------------------------------- 追記時期：202008 ここまで -------------------------------------------------------------- */ /* Clear Fix */ .cmpMain > ul.slide, .cmpMain2 > ul.slide, .cmpMain > ul.slide > li, .cmpMain2 > ul.slide > li, .cmpMain > ul.slide > li > ul.list, .cmpMain2 > ul.slide > li > ul.list, .cmpMain > ul.nav, .cmpMain2 > ul.nav, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide, .cmpMain-flex > ul.slide > li, .cmpMain-flex > ul.slide > li > ul.list, .cmpMain-flex > ul.nav, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel > .slideWrap > ul.slide, .navChannel > ul.navController, .cmpMovie, .cmpMovie > .data, .cmpMovie > .data .slideWrap ul.slide, .cmpMovie2 .slideWrap > ul.slide, .cmpImage .slideWrap > ul.slide, .cmpImage2 .slideWrap > ul.slide, .cmpImageCharacter .slideWrap > ul.slide, .cmpItem, .cmpItem > .slideWrap > ul.slide, .cmpItem > ul.nav, .cmpItem > ul.item, .cmpItem > ul.item > li.type1 > a, .cmpItem > ul.item > li.type1 > div, .cmpItem > ul.item > li.type2 > a, .cmpItem > ul.item > li.type2 > div, .cmpItem > ul.item > li.type3 > a, .cmpItem > ul.item > li.type3 > div, .cmpItem > ul.item > li.type1.isColorDark > a, .cmpItem > ul.item > li.type1.isColorDark > div, .cmpItem > ul.item > li.type1.isColorGray > a, .cmpItem > ul.item > li.type1.isColorGray > div, .cmpItem > ul.item > li.type2.isColorDark > a, .cmpItem > ul.item > li.type2.isColorDark > div, .cmpItem > ul.item > li.type2.isColorGray > a, .cmpItem > ul.item > li.type2.isColorGray > div, .cmpItem > ul.item > li.type3.isColorDark > a, .cmpItem > ul.item > li.type3.isColorDark > div, .cmpItem > ul.item > li.type3.isColorGray > a, .cmpItem > ul.item > li.type3.isColorGray > div, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex, .cmpItem-flex > .slideWrap > ul.slide, .cmpItem-flex > ul.nav, .cmpItem-flex > ul.item, .cmpItem-flex > ul.item > li.type1 > a, .cmpItem-flex > ul.item > li.type1 > div, .cmpItem-flex > ul.item > li.type2 > a, .cmpItem-flex > ul.item > li.type2 > div, .cmpItem-flex > ul.item > li.type3 > a, .cmpItem-flex > ul.item > li.type3 > div, .cmpItem-flex > ul.item > li.type1.isColorDark > a, .cmpItem-flex > ul.item > li.type1.isColorDark > div, .cmpItem-flex > ul.item > li.type1.isColorGray > a, .cmpItem-flex > ul.item > li.type1.isColorGray > div, .cmpItem-flex > ul.item > li.type2.isColorDark > a, .cmpItem-flex > ul.item > li.type2.isColorDark > div, .cmpItem-flex > ul.item > li.type2.isColorGray > a, .cmpItem-flex > ul.item > li.type2.isColorGray > div, .cmpItem-flex > ul.item > li.type3.isColorDark > a, .cmpItem-flex > ul.item > li.type3.isColorDark > div, .cmpItem-flex > ul.item > li.type3.isColorGray > a, .cmpItem-flex > ul.item > li.type3.isColorGray > div, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 > ul, .cmpItem1 ul.slide, .cmpItem2 ul.slide, .cmpItem2-flex ul.slide, .cmpItem3 ul.slide, /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 > ul.slide, .cmpItem4 > ul.slide > li > a, .cmpItem4 > ul.slide > li.type1 > a, .cmpItem4 > ul.slide > li.type4 > a, .cmpItem4 > ul.slide > li.type3 > a, .cmpItem4 > ul.slide > li.type3 .data > dl.list, .cmpItem4 > ul.slideNone, .cmpItem4 > ul.slideNone > li > a, .cmpItem4 > ul.slideNone > li.type1 > a, .cmpItem4 > ul.slideNone > li.type4 > a, .cmpItem4 > ul.slideNone > li.type3 > a, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list, .cmpItem5 ul.slide, .cmpItem5 ul.slide > li > a > .data ul.icon, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide, .cmpItem4-flex > ul.slide > li > a, .cmpItem4-flex > ul.slide > li.type1 > a, .cmpItem4-flex > ul.slide > li.type4 > a, .cmpItem4-flex > ul.slide > li.type3 > a, .cmpItem4-flex > ul.slide > li.type3 .data > dl.list, .cmpItem4-flex > ul.slideNone, .cmpItem4-flex > ul.slideNone > li > a, .cmpItem4-flex > ul.slideNone > li.type1 > a, .cmpItem4-flex > ul.slideNone > li.type4 > a, .cmpItem4-flex > ul.slideNone > li.type3 > a, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list, .cmpItem5-flex ul.slide, .cmpItem5-flex ul.slide > li > a > .data ul.icon, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li, .cmpItem6 > ul.item > li > .info, .cmpItem6 > ul.item > li .data > dl.list, .cmpItem6 > ul.item > li .data ul.icon, .cmpItem7 ul.slide, .cmpItem7 ul.slide > li, .cmpItem7 ul.slide > li .info, .cmpItem8 ul.slide, .cmpItem9 ul.slide, .cmpNews, .cmpNews > .newsWrap > .news > .sns > ul, .cmpNews > .newsWrap > ul.item, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex, .cmpNews-flex > .newsWrap > .news > .sns > ul, .cmpNews-flex > .newsWrap > ul.item, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic, .cmpListSns, .cmpRankingMusic > li, .cmpListSns > li, .cmpListSns ul.sns > li, .cmpBanner > ul.tab, .cmpNavCharacter > .slideWrap > ul.slide, .cmpNavCharacter.typeFew > .slideWrap > ul.slide, .cmpNavCharacter.typeFixed > .slideWrap > ul.slide, .cmpColumn, .cmpColumn.typeCol2.typeGallery > .column.type1 > ul, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex, .cmpColumn-flex.typeCol2.typeGallery > .column.type1 > ul, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ ul.cmpListIcon, .cmpPanel, .cmpPanelSns > div > ul, .cmpGallery .mainGallery .slideWrap ul.slide, .cmpGallery .navGallery, .cmpGallery .navGallery .slideWrap ul.slide, .cmpTableBa.typeTheater .table dl.table { *zoom: 1; } .cmpMain > ul.slide:before, .cmpMain2 > ul.slide:before, .cmpMain > ul.slide > li:before, .cmpMain2 > ul.slide > li:before, .cmpMain > ul.slide > li > ul.list:before, .cmpMain2 > ul.slide > li > ul.list:before, .cmpMain > ul.nav:before, .cmpMain2 > ul.nav:before, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide:before, .cmpMain-flex > ul.slide > li:before, .cmpMain-flex > ul.slide > li > ul.list:before, .cmpMain-flex > ul.nav:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel > .slideWrap > ul.slide:before, .navChannel > ul.navController:before, .cmpMovie:before, .cmpMovie > .data:before, .cmpMovie > .data .slideWrap ul.slide:before, .cmpMovie2 .slideWrap > ul.slide:before, .cmpImage .slideWrap > ul.slide:before, .cmpImage2 .slideWrap > ul.slide:before, .cmpImageCharacter .slideWrap > ul.slide:before, .cmpItem:before, .cmpItem > .slideWrap > ul.slide:before, .cmpItem > ul.nav:before, .cmpItem > ul.item:before, .cmpItem > ul.item > li.type1 > a:before, .cmpItem > ul.item > li.type1 > div:before, .cmpItem > ul.item > li.type2 > a:before, .cmpItem > ul.item > li.type2 > div:before, .cmpItem > ul.item > li.type3 > a:before, .cmpItem > ul.item > li.type3 > div:before, .cmpItem > ul.item > li.type1.isColorDark > a:before, .cmpItem > ul.item > li.type1.isColorDark > div:before, .cmpItem > ul.item > li.type1.isColorGray > a:before, .cmpItem > ul.item > li.type1.isColorGray > div:before, .cmpItem > ul.item > li.type2.isColorDark > a:before, .cmpItem > ul.item > li.type2.isColorDark > div:before, .cmpItem > ul.item > li.type2.isColorGray > a:before, .cmpItem > ul.item > li.type2.isColorGray > div:before, .cmpItem > ul.item > li.type3.isColorDark > a:before, .cmpItem > ul.item > li.type3.isColorDark > div:before, .cmpItem > ul.item > li.type3.isColorGray > a:before, .cmpItem > ul.item > li.type3.isColorGray > div:before, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex:before, .cmpItem-flex > .slideWrap > ul.slide:before, .cmpItem-flex > ul.nav:before, .cmpItem-flex > ul.item:before, .cmpItem-flex > ul.item > li.type1 > a:before, .cmpItem-flex > ul.item > li.type1 > div:before, .cmpItem-flex > ul.item > li.type2 > a:before, .cmpItem-flex > ul.item > li.type2 > div:before, .cmpItem-flex > ul.item > li.type3 > a:before, .cmpItem-flex > ul.item > li.type3 > div:before, .cmpItem-flex > ul.item > li.type1.isColorDark > a:before, .cmpItem-flex > ul.item > li.type1.isColorDark > div:before, .cmpItem-flex > ul.item > li.type1.isColorGray > a:before, .cmpItem-flex > ul.item > li.type1.isColorGray > div:before, .cmpItem-flex > ul.item > li.type2.isColorDark > a:before, .cmpItem-flex > ul.item > li.type2.isColorDark > div:before, .cmpItem-flex > ul.item > li.type2.isColorGray > a:before, .cmpItem-flex > ul.item > li.type2.isColorGray > div:before, .cmpItem-flex > ul.item > li.type3.isColorDark > a:before, .cmpItem-flex > ul.item > li.type3.isColorDark > div:before, .cmpItem-flex > ul.item > li.type3.isColorGray > a:before, .cmpItem-flex > ul.item > li.type3.isColorGray > div:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 > ul:before, .cmpItem1 ul.slide:before, .cmpItem2 ul.slide:before, .cmpItem3 ul.slide:before, /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 > ul.slide:before, .cmpItem4 > ul.slide > li > a:before, .cmpItem4 > ul.slide > li.type1 > a:before, .cmpItem4 > ul.slide > li.type4 > a:before, .cmpItem4 > ul.slide > li.type3 > a:before, .cmpItem4 > ul.slide > li.type3 .data > dl.list:before, .cmpItem4 > ul.slideNone:before, .cmpItem4 > ul.slideNone > li > a:before, .cmpItem4 > ul.slideNone > li.type1 > a:before, .cmpItem4 > ul.slideNone > li.type4 > a:before, .cmpItem4 > ul.slideNone > li.type3 > a:before, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list:before, .cmpItem5 ul.slide:before, .cmpItem5 ul.slide > li > a > .data ul.icon:before, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide:before, .cmpItem4-flex > ul.slide > li > a:before, .cmpItem4-flex > ul.slide > li.type1 > a:before, .cmpItem4-flex > ul.slide > li.type4 > a:before, .cmpItem4-flex > ul.slide > li.type3 > a:before, .cmpItem4-flex > ul.slide > li.type3 .data > dl.list:before, .cmpItem4-flex > ul.slideNone:before, .cmpItem4-flex > ul.slideNone > li > a:before, .cmpItem4-flex > ul.slideNone > li.type1 > a:before, .cmpItem4-flex > ul.slideNone > li.type4 > a:before, .cmpItem4-flex > ul.slideNone > li.type3 > a:before, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list:before, .cmpItem5-flex ul.slide:before, .cmpItem5-flex ul.slide > li > a > .data ul.icon:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li:before, .cmpItem6 > ul.item > li > .info:before, .cmpItem6 > ul.item > li .data > dl.list:before, .cmpItem6 > ul.item > li .data ul.icon:before, .cmpItem7 ul.slide:before, .cmpItem7 ul.slide > li:before, .cmpItem7 ul.slide > li .info:before, .cmpItem8 ul.slide:before, .cmpItem9 ul.slide:before, .cmpNews:before, .cmpNews > .newsWrap > .news > .sns > ul:before, .cmpNews > .newsWrap > ul.item:before, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex:before, .cmpNews-flex > .newsWrap > .news > .sns > ul:before, .cmpNews-flex > .newsWrap > ul.item:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic:before, .cmpListSns:before, .cmpRankingMusic > li:before, .cmpListSns > li:before, .cmpListSns ul.sns > li:before, .cmpBanner > ul.tab:before, .cmpNavCharacter > .slideWrap > ul.slide:before, .cmpColumn:before, .cmpColumn.typeCol2.typeGallery > .column.type1 > ul:before, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex:before, .cmpColumn-flex.typeCol2.typeGallery > .column.type1 > ul:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ /* for .cmpSnsBlock .cmpSubFooter 2020.04.10 start ----------- */ .cmpSnsBlock:before, .cmpSnsBlock > div:before, .cmpSnsBlock > ul:before, .cmpSnsBlock > .cmpSnsList:before, .cmpSnsBlock > .cmpSnsList li:before, .cmpSnsBlock > .cmpSnsList div:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > a:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > div:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > .snsItemTitleBlock:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle > a:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle > div:before, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > .snsItemTitleBlock:before, .cmpSnsItemTitleBlock > .cmpSnsItemTitle:before, .cmpSubFooter:before, .cmpSubFooter > .cmpSubf_Title:before, .cmpSubFooter > .cmpSubf_PicupList:before, .cmpSubFooter > .cmpSubf_PicupList li:before, .cmpSubFooter > .cmpSubf_CharacterList:before, .cmpSubFooter > .cmpSubf_CharacterList li:before, .cmpSubFooter > .cmpSubf_CharacterList > li > a:before, .cmpSubf_CharacterItem:before, .cmpSubf_CharacterTitleBlock:before, .cmpSubf_CharacterTitleBlock > .cmpSubf_CharacterTitle:before, /* for .cmpSnsBlock .cmpSubFooter 2020.04.10 end ------------- */ ul.cmpListIcon:before, .cmpPanel:before, .cmpPanelSns > div > ul:before, .cmpGallery .mainGallery .slideWrap ul.slide:before, .cmpGallery .navGallery:before, .cmpGallery .navGallery .slideWrap ul.slide:before, .cmpTableBa.typeTheater .table dl.table:before, .cmpMain > ul.slide:after, .cmpMain2 > ul.slide:after, .cmpMain > ul.slide > li:after, .cmpMain2 > ul.slide > li:after, .cmpMain > ul.slide > li > ul.list:after, .cmpMain2 > ul.slide > li > ul.list:after, .cmpMain > ul.nav:after, .cmpMain2 > ul.nav:after, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide:after, .cmpMain-flex > ul.slide > li:after, .cmpMain-flex > ul.slide > li > ul.list:after, .cmpMain-flex > ul.nav:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel > .slideWrap > ul.slide:after, .navChannel > ul.navController:after, .cmpMovie:after, .cmpMovie > .data:after, .cmpMovie > .data .slideWrap ul.slide:after, .cmpMovie2 .slideWrap > ul.slide:after, .cmpImage .slideWrap > ul.slide:after, .cmpImage2 .slideWrap > ul.slide:after, .cmpImageCharacter .slideWrap > ul.slide:after, .cmpItem:after, .cmpItem > .slideWrap > ul.slide:after, .cmpItem > ul.nav:after, .cmpItem > ul.item:after, .cmpItem > ul.item > li.type1 > a:after, .cmpItem > ul.item > li.type1 > div:after, .cmpItem > ul.item > li.type2 > a:after, .cmpItem > ul.item > li.type2 > div:after, .cmpItem > ul.item > li.type3 > a:after, .cmpItem > ul.item > li.type3 > div:after, .cmpItem > ul.item > li.type1.isColorDark > a:after, .cmpItem > ul.item > li.type1.isColorDark > div:after, .cmpItem > ul.item > li.type1.isColorGray > a:after, .cmpItem > ul.item > li.type1.isColorGray > div:after, .cmpItem > ul.item > li.type2.isColorDark > a:after, .cmpItem > ul.item > li.type2.isColorDark > div:after, .cmpItem > ul.item > li.type2.isColorGray > a:after, .cmpItem > ul.item > li.type2.isColorGray > div:after, .cmpItem > ul.item > li.type3.isColorDark > a:after, .cmpItem > ul.item > li.type3.isColorDark > div:after, .cmpItem > ul.item > li.type3.isColorGray > a:after, .cmpItem > ul.item > li.type3.isColorGray > div:after, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex:after, .cmpItem-flex > .slideWrap > ul.slide:after, .cmpItem-flex > ul.nav:after, .cmpItem-flex > ul.item:after, .cmpItem-flex > ul.item > li.type1 > a:after, .cmpItem-flex > ul.item > li.type1 > div:after, .cmpItem-flex > ul.item > li.type2 > a:after, .cmpItem-flex > ul.item > li.type2 > div:after, .cmpItem-flex > ul.item > li.type3 > a:after, .cmpItem-flex > ul.item > li.type3 > div:after, .cmpItem-flex > ul.item > li.type1.isColorDark > a:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 > ul:after, .cmpItem1 ul.slide:after, .cmpItem2 ul.slide:after, .cmpItem3 ul.slide:after, /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 > ul.slide:after, .cmpItem4 > ul.slide > li > a:after, .cmpItem4 > ul.slide > li.type1 > a:after, .cmpItem4 > ul.slide > li.type4 > a:after, .cmpItem4 > ul.slide > li.type3 > a:after, .cmpItem4 > ul.slide > li.type3 .data > dl.list:after, .cmpItem4 > ul.slideNone:after, .cmpItem4 > ul.slideNone > li > a:after, .cmpItem4 > ul.slideNone > li.type1 > a:after, .cmpItem4 > ul.slideNone > li.type4 > a:after, .cmpItem4 > ul.slideNone > li.type3 > a:after, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list:after, .cmpItem5 ul.slide:after, .cmpItem5 ul.slide > li > a > .data ul.icon:after, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide:after, .cmpItem4-flex > ul.slide > li > a:after, .cmpItem4-flex > ul.slide > li.type1 > a:after, .cmpItem4-flex > ul.slide > li.type4 > a:after, .cmpItem4-flex > ul.slide > li.type3 > a:after, .cmpItem4-flex > ul.slide > li.type3 .data > dl.list:after, .cmpItem4-flex > ul.slideNone:after, .cmpItem4-flex > ul.slideNone > li > a:after, .cmpItem4-flex > ul.slideNone > li.type1 > a:after, .cmpItem4-flex > ul.slideNone > li.type4 > a:after, .cmpItem4-flex > ul.slideNone > li.type3 > a:after, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list:after, .cmpItem5-flex ul.slide:after, .cmpItem5-flex ul.slide > li > a > .data ul.icon:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li:after, .cmpItem6 > ul.item > li > .info:after, .cmpItem6 > ul.item > li .data > dl.list:after, .cmpItem6 > ul.item > li .data ul.icon:after, .cmpItem7 ul.slide:after, .cmpItem7 ul.slide > li:after, .cmpItem7 ul.slide > li .info:after, .cmpItem8 ul.slide:after, .cmpItem9 ul.slide:after, .cmpNews:after, .cmpNews > .newsWrap > .news > .sns > ul:after, .cmpNews > .newsWrap > ul.item:after, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex:after, .cmpNews-flex > .newsWrap > .news > .sns > ul:after, .cmpNews-flex > .newsWrap > ul.item:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic:after, .cmpListSns:after, .cmpRankingMusic > li:after, .cmpListSns > li:after, .cmpListSns ul.sns > li:after, .cmpBanner > ul.tab:after, .cmpNavCharacter > .slideWrap > ul.slide:after, .cmpColumn:after, .cmpColumn.typeCol2.typeGallery > .column.type1 > ul:after, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex:after, .cmpColumn-flex.typeCol2.typeGallery > .column.type1 > ul:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ ul.cmpListIcon:after, .cmpPanel:after, .cmpPanelSns > div > ul:after, .cmpGallery .mainGallery .slideWrap ul.slide:after, .cmpGallery .navGallery:after, .cmpGallery .navGallery .slideWrap ul.slide:after, .cmpTableBa.typeTheater .table dl.table:after { display: table; content: ''; } .cmpMain > ul.slide:after, .cmpMain2 > ul.slide:after, .cmpMain > ul.slide > li:after, .cmpMain2 > ul.slide > li:after, .cmpMain > ul.slide > li > ul.list:after, .cmpMain2 > ul.slide > li > ul.list:after, .cmpMain > ul.nav:after, .cmpMain2 > ul.nav:after, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide:after, .cmpMain-flex > ul.slide > li:after, .cmpMain-flex > ul.slide > li > ul.list:after, .cmpMain-flex > ul.nav:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel > .slideWrap > ul.slide:after, .navChannel > ul.navController:after, .cmpMovie:after, .cmpMovie > .data:after, .cmpMovie > .data .slideWrap ul.slide:after, .cmpMovie2 .slideWrap > ul.slide:after, .cmpImage .slideWrap > ul.slide:after, .cmpImage2 .slideWrap > ul.slide:after, .cmpImageCharacter .slideWrap > ul.slide:after, .cmpItem:after, .cmpItem > .slideWrap > ul.slide:after, .cmpItem > ul.nav:after, .cmpItem > ul.item:after, .cmpItem > ul.item > li.type1 > a:after, .cmpItem > ul.item > li.type1 > div:after, .cmpItem > ul.item > li.type2 > a:after, .cmpItem > ul.item > li.type2 > div:after, .cmpItem > ul.item > li.type3 > a:after, .cmpItem > ul.item > li.type3 > div:after, .cmpItem > ul.item > li.type1.isColorDark > a:after, .cmpItem > ul.item > li.type1.isColorDark > div:after, .cmpItem > ul.item > li.type1.isColorGray > a:after, .cmpItem > ul.item > li.type1.isColorGray > div:after, .cmpItem > ul.item > li.type2.isColorDark > a:after, .cmpItem > ul.item > li.type2.isColorDark > div:after, .cmpItem > ul.item > li.type2.isColorGray > a:after, .cmpItem > ul.item > li.type2.isColorGray > div:after, .cmpItem > ul.item > li.type3.isColorDark > a:after, .cmpItem > ul.item > li.type3.isColorDark > div:after, .cmpItem > ul.item > li.type3.isColorGray > a:after, .cmpItem > ul.item > li.type3.isColorGray > div:after, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex:after, .cmpItem-flex > .slideWrap > ul.slide:after, .cmpItem-flex > ul.nav:after, .cmpItem-flex > ul.item:after, .cmpItem-flex > ul.item > li.type1 > a:after, .cmpItem-flex > ul.item > li.type1 > div:after, .cmpItem-flex > ul.item > li.type2 > a:after, .cmpItem-flex > ul.item > li.type2 > div:after, .cmpItem-flex > ul.item > li.type3 > a:after, .cmpItem-flex > ul.item > li.type3 > div:after, .cmpItem-flex > ul.item > li.type1.isColorDark > a:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 > ul:after, .cmpItem1 ul.slide:after, .cmpItem2 ul.slide:after, .cmpItem3 ul.slide:after, /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 > ul.slide:after, .cmpItem4 > ul.slide > li > a:after, .cmpItem4 > ul.slide > li.type1 > a:after, .cmpItem4 > ul.slide > li.type4 > a:after, .cmpItem4 > ul.slide > li.type3 > a:after, .cmpItem4 > ul.slide > li.type3 .data > dl.list:after, .cmpItem4 > ul.slideNone:after, .cmpItem4 > ul.slideNone > li > a:after, .cmpItem4 > ul.slideNone > li.type1 > a:after, .cmpItem4 > ul.slideNone > li.type4 > a:after, .cmpItem4 > ul.slideNone > li.type3 > a:after, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list:after, .cmpItem5 ul.slide:after, .cmpItem5 ul.slide > li > a > .data ul.icon:after, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide:after, .cmpItem4-flex > ul.slide > li > a:after, .cmpItem4-flex > ul.slide > li.type1 > a:after, .cmpItem4-flex > ul.slide > li.type4 > a:after, .cmpItem4-flex > ul.slide > li.type3 > a:after, .cmpItem4-flex > ul.slide > li.type3 .data > dl.list:after, .cmpItem4-flex > ul.slideNone:after, .cmpItem4-flex > ul.slideNone > li > a:after, .cmpItem4-flex > ul.slideNone > li.type1 > a:after, .cmpItem4-flex > ul.slideNone > li.type4 > a:after, .cmpItem4-flex > ul.slideNone > li.type3 > a:after, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list:after, .cmpItem5-flex ul.slide:after, .cmpItem5-flex ul.slide > li > a > .data ul.icon:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li:after, .cmpItem6 > ul.item > li > .info:after, .cmpItem6 > ul.item > li .data > dl.list:after, .cmpItem6 > ul.item > li .data ul.icon:after, .cmpItem7 ul.slide:after, .cmpItem7 ul.slide > li:after, .cmpItem7 ul.slide > li .info:after, .cmpItem8 ul.slide:after, .cmpItem9 ul.slide:after, .cmpNews:after, .cmpNews > .newsWrap > .news > .sns > ul:after, .cmpNews > .newsWrap > ul.item:after, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex:after, .cmpNews-flex > .newsWrap > .news > .sns > ul:after, .cmpNews-flex > .newsWrap > ul.item:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic:after, .cmpListSns:after, .cmpRankingMusic > li:after, .cmpListSns > li:after, .cmpListSns ul.sns > li:after, .cmpBanner > ul.tab:after, .cmpNavCharacter > .slideWrap > ul.slide:after, .cmpColumn:after, .cmpColumn.typeCol2.typeGallery > .column.type1 > ul:after, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex:after, .cmpColumn-flex.typeCol2.typeGallery > .column.type1 > ul:after, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ /* for .cmpSnsBlock .cmpSubFooter 2020.04.10 start ----------- */ .cmpSnsBlock:after, .cmpSnsBlock > div:after, .cmpSnsBlock > ul:after, .cmpSnsBlock > .cmpSnsList:after, .cmpSnsBlock > .cmpSnsList li:after, .cmpSnsBlock > .cmpSnsList div:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > a:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > div:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItem > .snsItemTitleBlock:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle > a:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle > div:after, .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle > .snsItemTitleBlock:after, .cmpSnsItemTitleBlock > .cmpSnsItemTitle:after, .cmpSubFooter:after, .cmpSubFooter > .cmpSubf_Title:after, .cmpSubFooter > .cmpSubf_PicupList:after, .cmpSubFooter > .cmpSubf_PicupList li:after, .cmpSubFooter > .cmpSubf_CharacterList:after, .cmpSubFooter > .cmpSubf_CharacterList li:after, .cmpSubFooter > .cmpSubf_CharacterList > li > a:after, .cmpSubf_CharacterItem:after, .cmpSubf_CharacterTitleBlock:after, .cmpSubf_CharacterTitleBlock > .cmpSubf_CharacterTitle:after, /* for .cmpSnsBlock .cmpSubFooter 2020.04.10 end ------------- */ ul.cmpListIcon:after, .cmpPanel:after, .cmpPanelSns > div > ul:after, .cmpGallery .mainGallery .slideWrap ul.slide:after, .cmpGallery .navGallery:after, .cmpGallery .navGallery .slideWrap ul.slide:after, .cmpTableBa.typeTheater .table dl.table:after { clear: both; } .cmpMain > ul.slide > li > ul.list > li > a, .cmpMain2 > ul.slide > li > ul.list > li > a, .cmpMain > ul.slide > li > ul.list > li, .cmpMain2 > ul.slide > li > ul.list > li, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide > li > ul.list > li > a, .cmpMain-flex > ul.slide > li > ul.list > li, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpMovie > .data .slideWrap ul.slide > li > a, .cmpMovie > .data ul.nav > li > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a, .cmpItem > ul.nav > li > a, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a, .cmpItem-flex > ul.nav > li > a, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem2 ul.slide > li > .data > ul.list > li > a, .cmpItem2 ul.slide > li > .data > ul.list > li, .cmpItem2-flex ul.slide > li > .data > ul.list > li > a, .cmpItem2-flex ul.slide > li > .data > ul.list > li, .cmpItem5 ul.slide > li > a > .iconStar, .cmpItem5 ul.slide > li > a > .iconNew, .cmpItem5 ul.slide > li > a > .data ul.icon > li > span, /* -------------------------------------------------------------- 追記時期：201908 component名： k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem5-flex ul.slide > li > a > .iconStar, .cmpItem5-flex ul.slide > li > a > .iconNew, .cmpItem5-flex ul.slide > li > a > .data ul.icon > li > span, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li .data > .price span.iconMovienex, .cmpItem6 > ul.item > li .data ul.icon > li > span, .cmpNews > .newsWrap > .news > .sns > ul > li > a, .cmpNews > .newsWrap > ul.item > li > a, .cmpRankingMusic > li ul.list > li > a, .cmpListSns > li ul.list > li > a, .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a, .cmpNews-flex > .newsWrap > ul.item > li > a, .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpTimetable > .listTimeTableBa > dd > a.link, .cmpTimetable > .listTimeTableBa > div > a.link, .cmpAccordionBa > .section > .hdg a, ul.cmpListIcon > li > a, ul.cmpListIconTy1 > li, .cmpPanel > .column .hdg, #myStatus.isShowModal .cmpModal > .inner > .btnClose > a { position: relative; } .cmpMain > ul.slide > li > ul.list > li > a:before, .cmpMain2 > ul.slide > li > ul.list > li > a:before, .cmpMain > ul.slide > li > ul.list > li:before, .cmpMain2 > ul.slide > li > ul.list > li:before, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide > li > ul.list > li > a:before, .cmpMain-flex > ul.slide > li > ul.list > li:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpMovie > .data .slideWrap ul.slide > li > a:before, .cmpMovie > .data ul.nav > li > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a:before, .cmpItem > ul.nav > li > a:before, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a:before, .cmpItem-flex > ul.nav > li > a:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem2 ul.slide > li > .data > ul.list > li > a:before, .cmpItem2 ul.slide > li > .data > ul.list > li:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li > a:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li:before, .cmpItem5 ul.slide > li > a > .iconStar:before, .cmpItem5 ul.slide > li > a > .iconNew:before, .cmpItem5 ul.slide > li > a > .data ul.icon > li > span:before, /* -------------------------------------------------------------- 追記時期：201908 component名： k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem5-flex ul.slide > li > a > .iconStar:before, .cmpItem5-flex ul.slide > li > a > .iconNew:before, .cmpItem5-flex ul.slide > li > a > .data ul.icon > li > span:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li .data > .price span.iconMovienex:before, .cmpItem6 > ul.item > li .data ul.icon > li > span:before, .cmpNews > .newsWrap > .news > .sns > ul > li > a:before, .cmpNews > .newsWrap > ul.item > li > a:before, .cmpRankingMusic > li ul.list > li > a:before, .cmpListSns > li ul.list > li > a:before, .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a:before, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a:before, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a:before, .cmpNews-flex > .newsWrap > ul.item > li > a:before, .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a:before, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a:before, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpTimetable > .listTimeTableBa > dd > a.link:before, .cmpTimetable > .listTimeTableBa > div > a.link:before, .cmpAccordionBa > .section > .hdg a:before, ul.cmpListIcon > li > a:before, ul.cmpListIconTy1 > li:before, .cmpPanel > .column .hdg:before, #myStatus.isShowModal .cmpModal > .inner > .btnClose > a:before { position: absolute; top: 0; display: inline-block; content: ''; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); } .cmpNews > .newsWrap > .news > .link > a { position: relative; } .cmpNews > .newsWrap > .news > .link > a:after { position: absolute; top: 0; display: inline-block; content: ''; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .newsWrap > .news > .link > a { position: relative; } .cmpNews-flex > .newsWrap > .news > .link > a:after { position: absolute; top: 0; display: inline-block; content: ''; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpPanel > .column > *:last-child, #myStatus.isShowModal .cmpModal > .inner > .modalContents > *:last-child { margin-bottom: 0; } .cmpPanel > .column > .btnBa { margin-top: 20px; } .cmpItem1 > ul > li ul.navController1, .cmpItem4 > ul.navController1, .cmpNews > .newsWrap > ul.item > li > a > .date, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.navController1, .cmpNews-flex > .newsWrap > ul.item > li > a > .date, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpBanner > ul.tab > li.isCurrent > a.banner { display: none !important; } .cmpBanner > ul.banner { display: block !important; } /* =============================================== Modules Component =============================================== */ .setScale { position: relative; overflow: hidden; margin-bottom: 30px; } .setScale > div { width: 1200px; padding-top: 1px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .setScale + .hdgBa { margin-top: -4px; } .setScale + .secController, .setScale + .secListAll { margin-top: -4px; } /* Component ----------------------------------------------- */ .cmpMain a .lead:hover, .cmpMain a .thumb:hover, .cmpMain .linkBa *:hover, .cmpMain .news .link a:hover, .cmpMain .listLinkTy3 a:hover, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex a .lead:hover, .cmpMain-flex a .thumb:hover, .cmpMain-flex .linkBa *:hover, .cmpMain-flex .news .link a:hover, .cmpMain-flex .listLinkTy3 a:hover, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpMain2 a .lead:hover, .cmpMain2 a .thumb:hover, .cmpMain2 .linkBa *:hover, .cmpMain2 .news .link a:hover, .cmpMain2 .listLinkTy3 a:hover, .cmpItem a .lead:hover, .cmpItem a .thumb:hover, .cmpItem .linkBa *:hover, .cmpItem .news .link a:hover, .cmpItem .listLinkTy3 a:hover, /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex a .lead:hover, .cmpItem-flex a .thumb:hover, .cmpItem-flex .linkBa *:hover, .cmpItem-flex .news .link a:hover, .cmpItem-flex .listLinkTy3 a:hover, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 a .lead:hover, .cmpItem1 a .thumb:hover, .cmpItem1 .linkBa *:hover, .cmpItem1 .news .link a:hover, .cmpItem1 .listLinkTy3 a:hover, .cmpItem8 a .lead:hover, .cmpItem8 a .thumb:hover, .cmpItem8 .linkBa *:hover, .cmpItem8 .news .link a:hover, .cmpItem8 .listLinkTy3 a:hover, .cmpNews a .lead:hover, .cmpNews a .thumb:hover, .cmpNews .linkBa *:hover, .cmpNews .news .link a:hover, .cmpNews .listLinkTy3 a:hover, /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex a .lead:hover, .cmpNews-flex a .thumb:hover, .cmpNews-flex .linkBa *:hover, .cmpNews-flex .news .link a:hover, .cmpNews-flex .listLinkTy3 a:hover { /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ cursor: pointer; text-decoration: underline; } .cmpMain .linkBa, .cmpMain2 .linkBa, .cmpItem .linkBa, .cmpItem1 .linkBa, .cmpItem2 .linkBa, .cmpItem2-flex .linkBa, .cmpItem3 .linkBa, .cmpItem4 .linkBa, .cmpItem5 .linkBa, .cmpItem6 .linkBa, .cmpItem7 .linkBa, .cmpItem8 .linkBa, .cmpNews .linkBa, /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 c03) ピックアップパネル[基本] flexbox化 g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 c10) DVDパッケージ用パネル flexbox化 k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex .linkBa, .cmpItem-flex .linkBa, .cmpItem3-flex .linkBa, .cmpItem4-flex .linkBa, .cmpItem5-flex .linkBa, .cmpNews-flex .linkBa { /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ margin-bottom: 0; } .cmpMain, .cmpMain2 { position: relative; border: 1px solid gainsboro; } .cmpMain > ul.slide > li, .cmpMain2 > ul.slide > li { position: absolute; top: 0; left: 0; overflow: hidden; background-color: #fff; } .cmpMain > ul.slide > li:first-child, .cmpMain2 > ul.slide > li:first-child { position: relative; z-index: 1; } .cmpMain > ul.slide > li.isColorDark, .cmpMain2 > ul.slide > li.isColorDark { background-color: #FFF; } .cmpMain > ul.slide > li.isColorDark > .data, .cmpMain2 > ul.slide > li.isColorDark > .data { position: relative; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { z-index: 0; } .cmpMain > ul.slide > li.isColorDark > .data > div .thumb, .cmpMain2 > ul.slide > li.isColorDark > .data > div .thumb { margin-bottom: 0; text-align: center; } .cmpMain > ul.slide > li.isColorDark > .data > div .thumb img, .cmpMain2 > ul.slide > li.isColorDark > .data > div .thumb img { -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .2); box-shadow: 0 0 25px rgba(0, 0, 0, .2); } .cmpMain > ul.slide > li.isColorDark > .data > div .lead, .cmpMain > ul.slide > li.isColorDark > .data > div .lead1, .cmpMain2 > ul.slide > li.isColorDark > .data > div .lead, .cmpMain2 > ul.slide > li.isColorDark > .data > div .lead1 { color: #fff; } .cmpMain > ul.slide > li.isColorDark > .data > div .text, .cmpMain2 > ul.slide > li.isColorDark > .data > div .text { color: rgba(255, 255, 255, .8); } .cmpMain > ul.slide > li.isColorDark > ul.list, .cmpMain2 > ul.slide > li.isColorDark > ul.list { border: 0 solid rgba(255, 255, 255, .3); } .cmpMain > ul.slide > li.isColorDark > ul.list > li > a, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li > a { color: #fff; border-color: rgba(255, 255, 255, .3); } .cmpMain > ul.slide > li.isColorDark > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li > a:before { top: 50%; right: 40px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -87px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconVideo:before { top: 50%; left: 43px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -373px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconSite:before { top: 50%; left: 40px; width: 18px; height: 18px; margin-top: -9px; background-position: -477px -414px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before { top: 50%; left: 40px; width: 24px; height: 15px; margin-top: -7.5px; background-position: 0 -577px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTicket:before { top: 50%; left: 38px; width: 24px; height: 24px; margin-top: -12px; background-position: -496px -484px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconShopping:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -88px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconDownload:before { top: 50%; left: 38px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -206px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before { top: 50%; left: 38px; width: 22px; height: 20px; margin-top: -10px; background-position: -94px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTime:before { top: 50%; left: 38px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -89px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before { top: 50%; left: 38px; width: 24px; height: 18px; margin-top: -9px; background-position: -292px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconBehind:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -146px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconSearch:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -56px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconPresent:before { top: 50%; left: 38px; width: 24px; height: 22px; margin-top: -11px; background-position: -500px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconRequest:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -168px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconReserve:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -343px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -457px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconInternet:before { top: 50%; left: 38px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -540px -551px; } .cmpMain > ul.slide > li.isColorGray, .cmpMain2 > ul.slide > li.isColorGray { background-color: #FFF; } .cmpMain > ul.slide > li.isColorGray > .data, .cmpMain2 > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #FFF; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { z-index: 0; } .cmpMain > ul.slide > li.isColorGray > .data > div .thumb, .cmpMain2 > ul.slide > li.isColorGray > .data > div .thumb { text-align: center; } .cmpMain > ul.slide > li.isColorGray > .data > div .thumb img, .cmpMain2 > ul.slide > li.isColorGray > .data > div .thumb img { -webkit-box-shadow: 0 0 25px rgba(204, 204, 204, .2); box-shadow: 0 0 25px rgba(204, 204, 204, .2); } .cmpMain > ul.slide > li.isColorGray > .data > div .lead, .cmpMain > ul.slide > li.isColorGray > .data > div .lead1, .cmpMain2 > ul.slide > li.isColorGray > .data > div .lead, .cmpMain2 > ul.slide > li.isColorGray > .data > div .lead1 { color: #333; } .cmpMain > ul.slide > li.isColorGray > .data > div .text, .cmpMain2 > ul.slide > li.isColorGray > .data > div .text { color: #333; } .cmpMain > ul.slide > li.isColorGray > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li > a:before { top: 50%; right: 40px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -108px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconVideo:before { top: 50%; left: 43px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -345px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconSite:before { top: 50%; left: 40px; width: 18px; height: 18px; margin-top: -9px; background-position: -376px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before { top: 50%; left: 40px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -507px -463px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTicket:before { top: 50%; left: 38px; width: 24px; height: 24px; margin-top: -12px; background-position: -30px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconShopping:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -175px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconDownload:before { top: 50%; left: 38px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -178px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before { top: 50%; left: 38px; width: 22px; height: 20px; margin-top: -10px; background-position: -565px -332px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTime:before { top: 50%; left: 38px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -118px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before { top: 50%; left: 38px; width: 24px; height: 18px; margin-top: -9px; background-position: -322px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconBehind:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -117px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconSearch:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -84px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconPresent:before { top: 50%; left: 38px; width: 24px; height: 22px; margin-top: -11px; background-position: -470px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconRequest:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -140px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconReserve:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -28px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -429px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconInternet:before { top: 50%; left: 38px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -512px -551px; } .cmpMain > ul.slide > li.typeJacket > .data .thumb img, .cmpMain2 > ul.slide > li.typeJacket > .data .thumb img { width: 100%; height: auto; } .cmpMain > ul.slide > li > .thumb, .cmpMain2 > ul.slide > li > .thumb { float: right; width: 900px; height: 540px; } .cmpMain > ul.slide > li > .thumb > a, .cmpMain2 > ul.slide > li > .thumb > a { width: 100%; } .cmpMain > ul.slide > li > .thumb img, .cmpMain2 > ul.slide > li > .thumb img { width: 100%; height: auto; } .cmpMain > ul.slide > li > .data, .cmpMain2 > ul.slide > li > .data { position: relative; float: left; width: 298px; height: 100%; padding: 24px 32px 0 32px; } .cmpMain > ul.slide > li.typeJacket > .data, .cmpMain2 > ul.slide > li.typeJacket > .data { padding: 20px 40px 0; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { z-index: 0; } .cmpMain > ul.slide > li > .data > .logo, .cmpMain2 > ul.slide > li > .data > .logo { display: table; width: 260px; height: auto !important; margin: 0 -13px 18px; } .cmpMain > ul.slide > li > .data > .logo > span, .cmpMain2 > ul.slide > li > .data > .logo > span { display: table-cell; text-align: center; vertical-align: middle; } .cmpMain > ul.slide > li > .data > .logo > span > img, .cmpMain2 > ul.slide > li > .data > .logo > span > img { min-width: 140px; max-height: 110px; } .cmpMain > ul.slide > li > .data > div, .cmpMain2 > ul.slide > li > .data > div { margin-top: 10px; } .cmpMain > ul.slide > li > .data > div > .lead, .cmpMain2 > ul.slide > li > .data > div > .lead { font-size: 25px; font-weight: normal; line-height: 1.2; margin-bottom: 18px; } .cmpMain > ul.slide > li > .data > div > .lead1, .cmpMain2 > ul.slide > li > .data > div > .lead1 { font-size: 22px; font-size: 2.2rem; line-height: 1.2; margin-bottom: 10px; } .cmpMain > ul.slide > li > .data > div > .text, .cmpMain2 > ul.slide > li > .data > div > .text { font-size:14px; margin-top: 20px; margin-bottom: 10px; color: #777; } .cmpMain > ul.slide > li > .data > div > .text:first-child, .cmpMain2 > ul.slide > li > .data > div > .text:first-child { margin-top: 0; } .cmpMain > ul.slide > li > .data > div > .linkBa, .cmpMain2 > ul.slide > li > .data > div > .linkBa { margin-top: 10px; } .cmpMain > ul.slide > li > ul.list, .cmpMain2 > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: absolute; bottom: 0; left: 0; width: 298px; border: 0 solid #eaeaea; } .cmpMain > ul.slide > li > ul.list > li > a, .cmpMain2 > ul.slide > li > ul.list > li > a { display: block; padding: 12px 50px 12px 72px; border: 1px solid #eaeaea; border-width: 1px 0 0 0; } .cmpMain > ul.slide > li > ul.list > li > a:before, .cmpMain2 > ul.slide > li > ul.list > li > a:before { top: 50%; right: 32px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain > ul.slide > li > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li > ul.list > li.iconVideo:before { top: 50%; left: 32px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -233px; } .cmpMain > ul.slide > li > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li > ul.list > li.iconSite:before { top: 50%; left: 32px; width: 18px; height: 18px; margin-top: -9px; background-position: -375px -305px; } .cmpMain > ul.slide > li > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTrailer:before { top: 50%; left: 32px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -400px -363px; } .cmpMain > ul.slide > li > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTicket:before { top: 50%; left: 30px; width: 24px; height: 24px; margin-top: -12px; background-position: -406px -484px; } .cmpMain > ul.slide > li > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li > ul.list > li.iconShopping:before { top: 50%; left: 30px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -30px; } .cmpMain > ul.slide > li > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li > ul.list > li.iconDownload:before { top: 50%; left: 30px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -150px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li > ul.list > li.iconDownload2:before { top: 50%; left: 30px; width: 22px; height: 20px; margin-top: -10px; background-position: -122px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTime:before { top: 50%; left: 30px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -60px -521px; } .cmpMain > ul.slide > li > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTwitter:before { top: 50%; left: 30px; width: 24px; height: 18px; margin-top: -9px; background-position: -262px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li > ul.list > li.iconBehind:before { top: 50%; left: 30px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -59px; } .cmpMain > ul.slide > li > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li > ul.list > li.iconSearch:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px 0; } .cmpMain > ul.slide > li > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li > ul.list > li.iconPresent:before { top: 50%; left: 30px; width: 24px; height: 22px; margin-top: -11px; background-position: -530px -521px; } .cmpMain > ul.slide > li > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li > ul.list > li.iconRequest:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -196px; } .cmpMain > ul.slide > li > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li > ul.list > li.iconReserve:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -261px; } .cmpMain > ul.slide > li > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li > ul.list > li.iconCalendar:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -485px; } .cmpMain > ul.slide > li > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li > ul.list > li.iconInternet:before { top: 50%; left: 30px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -593px 0; } .cmpMain > ul.nav, .cmpMain2 > ul.nav { line-height: 1; position: absolute; z-index: 1000; top: 510px; right: 40px; margin-top: -20px; } .cmpMain > ul.nav > li, .cmpMain2 > ul.nav > li { float: left; width: 15px; height: 15px; margin-left: 6px; opacity: .6; border-radius: 15px; background-color: #e5e5e5; -ms-filter: 'alpha(opacity=60)'; } .cmpMain > ul.nav > li > a, .cmpMain2 > ul.nav > li > a { overflow: hidden; width: 21px; height: 21px; margin: -3px; } .cmpMain > ul.nav > li > a > span, .cmpMain2 > ul.nav > li > a > span { font-size: 10px; font-size: 1rem; position: relative; top: 10px; margin-left: 30px; } .cmpMain > ul.nav > li > .data:after, .cmpMain2 > ul.nav > li > .data:after { display: none; } .cmpMain > ul.nav > li:hover, .cmpMain2 > ul.nav > li:hover { opacity: .4; -ms-filter: 'alpha(opacity=40)'; } .cmpMain > ul.nav > li.isCurrent, .cmpMain2 > ul.nav > li.isCurrent { opacity: 1.0; background-color: #e5e5e5; -ms-filter: 'alpha(opacity=100)'; } .cmpMain > ul.nav > li.isCurrent a, .cmpMain2 > ul.nav > li.isCurrent a { cursor: default; } .cmpMain.typeDrama { margin-bottom: 50px; } .cmpMain.typeDrama .thumb + .data:after { z-index: 100; } .cmpMain2 { overflow: hidden; } .cmpMain2 > .slide > li { height: 540px; } .cmpMain2 > .thumb.typeMovie { position: relative; float: right; width: 900px; height: 540px; margin-top: -1px; margin-right: -1px; margin-bottom: -1px; margin-left: 0; } .cmpMain2 > .thumb.typeMovie:after { position: absolute; z-index: 10; top: 60px; left: 0; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #fff; } .cmpMain + .cmpColumn.typeDetail, .cmpMain2 + .cmpColumn.typeDetail { border-top: none !important; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex { position: relative; border: 1px solid gainsboro; } .cmpMain-flex > ul.slide > li { position: absolute; top: 0; left: 0; overflow: hidden; background-color: #fff; display: flex; } .cmpMain-flex > ul.slide > li:first-child { position: relative; z-index: 1; } .cmpMain-flex > ul.slide > li.isColorDark { background-color: #FFF; } .cmpMain-flex > ul.slide > li.isColorDark > .data { position: relative; } .cmpMain-flex > ul.slide > li.isColorDark > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpMain-flex > ul.slide > li.isColorDark > .data:after-flex { z-index: 0; } .cmpMain-flex > ul.slide > li.isColorDark > .data > div .thumb-flex { margin-bottom: 0; text-align: center; } .cmpMain-flex > ul.slide > li.isColorDark > .data > div .thumb img { -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .2); box-shadow: 0 0 25px rgba(0, 0, 0, .2); } .cmpMain-flex > ul.slide > li.isColorDark > .data > div .lead, .cmpMain-flex > ul.slide > li.isColorDark > .data > div .lead1 { color: #fff; } .cmpMain-flex > ul.slide > li.isColorDark > .data > div .text { color: rgba(255, 255, 255, .8); } .cmpMain-flex > ul.slide > li.isColorDark > ul.list { border: 0 solid rgba(255, 255, 255, .3); } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li > a { color: #fff; border-color: rgba(255, 255, 255, .3); } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li > a:before { top: 50%; right: 40px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -87px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconVideo:before { top: 50%; left: 43px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -373px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconSite:before { top: 50%; left: 40px; width: 18px; height: 18px; margin-top: -9px; background-position: -477px -414px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before { top: 50%; left: 40px; width: 24px; height: 15px; margin-top: -7.5px; background-position: 0 -577px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTicket:before { top: 50%; left: 38px; width: 24px; height: 24px; margin-top: -12px; background-position: -496px -484px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconShopping:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -88px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconDownload:before { top: 50%; left: 38px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -206px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before { top: 50%; left: 38px; width: 22px; height: 20px; margin-top: -10px; background-position: -94px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTime:before { top: 50%; left: 38px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -89px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before { top: 50%; left: 38px; width: 24px; height: 18px; margin-top: -9px; background-position: -292px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconBehind:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -146px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconSearch:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -56px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconPresent:before { top: 50%; left: 38px; width: 24px; height: 22px; margin-top: -11px; background-position: -500px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconRequest:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -168px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconReserve:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -343px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -457px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconInternet:before { top: 50%; left: 38px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -540px -551px; } .cmpMain-flex > ul.slide > li.isColorGray { background-color: #FFF; } .cmpMain-flex > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #FFF; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li.isColorGray > .data > div .thumb { text-align: center; } .cmpMain-flex > ul.slide > li.isColorGray > .data > div .thumb img { -webkit-box-shadow: 0 0 25px rgba(204, 204, 204, .2); box-shadow: 0 0 25px rgba(204, 204, 204, .2); } .cmpMain-flex > ul.slide > li.isColorGray > .data > div .lead, .cmpMain-flex > ul.slide > li.isColorGray > .data > div .lead1 { color: #333; } .cmpMain-flex > ul.slide > li.isColorGray > .data > div .text { color: #333; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li > a:before { top: 50%; right: 40px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -108px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconVideo:before { top: 50%; left: 43px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -345px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconSite:before { top: 50%; left: 40px; width: 18px; height: 18px; margin-top: -9px; background-position: -376px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before { top: 50%; left: 40px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -507px -463px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTicket:before { top: 50%; left: 38px; width: 24px; height: 24px; margin-top: -12px; background-position: -30px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconShopping:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -175px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconDownload:before { top: 50%; left: 38px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -178px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before { top: 50%; left: 38px; width: 22px; height: 20px; margin-top: -10px; background-position: -565px -332px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTime:before { top: 50%; left: 38px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -118px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before { top: 50%; left: 38px; width: 24px; height: 18px; margin-top: -9px; background-position: -322px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconBehind:before { top: 50%; left: 38px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -117px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconSearch:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -84px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconPresent:before { top: 50%; left: 38px; width: 24px; height: 22px; margin-top: -11px; background-position: -470px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconRequest:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -140px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconReserve:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -28px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before { top: 50%; left: 38px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -429px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconInternet:before { top: 50%; left: 38px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -512px -551px; } .cmpMain-flex > ul.slide > li.typeJacket > .data .thumb img { width: 100%; height: auto; } .cmpMain-flex > ul.slide > li > .thumb { width: 900px; height: 540px; order: 3; } .cmpMain-flex > ul.slide > li > .thumb > a { width: 100%; } .cmpMain-flex > ul.slide > li > .thumb img { width: 100%; height: auto; } .cmpMain-flex > ul.slide > li > .data { position: relative; width: 298px; height: 100%; padding: 24px 32px 0 32px; order: 1; } .cmpMain-flex > ul.slide > li.typeJacket > .data { padding: 20px 40px 0; } .cmpMain-flex > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpMain-flex > ul.slide > li > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li > .data > .logo { display: table; width: 260px; height: auto !important; margin: 0 -13px 18px; } .cmpMain-flex > ul.slide > li > .data > .logo > span { display: table-cell; text-align: center; vertical-align: middle; } .cmpMain-flex > ul.slide > li > .data > .logo > span > img { min-width: 140px; max-height: 110px; } .cmpMain-flex > ul.slide > li > .data > div { margin-top: 10px; } .cmpMain-flex > ul.slide > li > .data > div > .lead { font-size: 25px; font-weight: normal; line-height: 1.2; margin-bottom: 18px; } .cmpMain-flex > ul.slide > li > .data > div > .lead1 { font-size: 22px; font-size: 2.2rem; line-height: 1.2; margin-bottom: 10px; } .cmpMain-flex > ul.slide > li > .data > div > .text { font-size:14px; margin-top: 20px; margin-bottom: 10px; color: #777; } .cmpMain-flex > ul.slide > li > .data > div > .text:first-child { margin-top: 0; } .cmpMain-flex > ul.slide > li > .data > div > .linkBa { margin-top: 10px; } .cmpMain-flex > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: absolute; bottom: 0; left: 0; width: 298px; border: 0 solid #eaeaea; } .cmpMain-flex > ul.slide > li > ul.list > li > a { display: block; padding: 12px 50px 12px 72px; border: 1px solid #eaeaea; border-width: 1px 0 0 0; } .cmpMain-flex > ul.slide > li > ul.list > li > a:before { top: 50%; right: 32px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconVideo:before { top: 50%; left: 32px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -233px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconSite:before { top: 50%; left: 32px; width: 18px; height: 18px; margin-top: -9px; background-position: -375px -305px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTrailer:before { top: 50%; left: 32px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -400px -363px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTicket:before { top: 50%; left: 30px; width: 24px; height: 24px; margin-top: -12px; background-position: -406px -484px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconShopping:before { top: 50%; left: 30px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -30px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconDownload:before { top: 50%; left: 30px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -150px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconDownload2:before { top: 50%; left: 30px; width: 22px; height: 20px; margin-top: -10px; background-position: -122px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTime:before { top: 50%; left: 30px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -60px -521px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTwitter:before { top: 50%; left: 30px; width: 24px; height: 18px; margin-top: -9px; background-position: -262px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconBehind:before { top: 50%; left: 30px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -59px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconSearch:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px 0; } .cmpMain-flex > ul.slide > li > ul.list > li.iconPresent:before { top: 50%; left: 30px; width: 24px; height: 22px; margin-top: -11px; background-position: -530px -521px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconRequest:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -196px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconReserve:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -261px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconCalendar:before { top: 50%; left: 30px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -485px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconInternet:before { top: 50%; left: 30px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -593px 0; } .cmpMain-flex > ul.nav { line-height: 1; position: absolute; z-index: 1000; top: 510px; right: 40px; margin-top: -20px; } .cmpMain-flex > ul.nav > li { float: left; width: 15px; height: 15px; margin-left: 6px; opacity: .6; border-radius: 15px; background-color: #e5e5e5; -ms-filter: 'alpha(opacity=60)'; } .cmpMain-flex > ul.nav > li > a { overflow: hidden; width: 21px; height: 21px; margin: -3px; } .cmpMain-flex > ul.nav > li > a > span { font-size: 10px; font-size: 1rem; position: relative; top: 10px; margin-left: 30px; } .cmpMain-flex > ul.nav > li > .data:after { display: none; } .cmpMain-flex > ul.nav > li:hover { opacity: .4; -ms-filter: 'alpha(opacity=40)'; } .cmpMain-flex > ul.nav > li.isCurrent { opacity: 1.0; background-color: #e5e5e5; -ms-filter: 'alpha(opacity=100)'; } .cmpMain-flex > ul.nav > li.isCurrent a { cursor: default; } .cmpMain-flex.typeDrama { margin-bottom: 50px; } .cmpMain-flex.typeDrama .thumb + .data:after { z-index: 100; } .cmpMain-flex + .cmpColumn-flex.typeDetail { border-top: none !important; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel { position: relative; padding: 30px 120px; border: 1px solid gainsboro; border-width: 0 1px 1px; background-color: #f5f7f8; } .navChannel > .slideWrap { overflow: hidden; width: 100%; } .navChannel > .slideWrap > ul.slide { width: 2000%; } .navChannel > .slideWrap > ul.slide li { float: left; padding: 10px; } .navChannel > .slideWrap > ul.slide li a { width: 100%; } .navChannel > .slideWrap > ul.slide li img { border: 10px solid transparent; } .navChannel > .slideWrap > ul.slide li.isCurrent img { border-color: #0093d0; } .navChannel > ul.navController { position: absolute; top: 50%; width: 94%; height: 1px; margin-top: -30px; margin-left: -85px; } .navChannel > ul.navController li { float: left; } .navChannel > ul.navController li.next { float: right; } .cmpMovie { border: 1px solid gainsboro; } .cmpMovie > ul.movie { position: relative; float: right; width: 900px; height: 540px; background-color: #000; } .cmpMovie > ul.movie > li { position: absolute; top: 0; left: 0; } .cmpMovie > ul.movie > li:first-child { position: relative; z-index: 1; } .cmpMovie > .data { font-size: 14px; font-size: 1.4rem; position: relative; z-index: 1; float: left; width: 298px; height: 538px; } .cmpMovie > .data:after { position: absolute; z-index: 1; top: 60px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpMovie > .data > .logo { display: table; width: 100%; } .cmpMovie > .data > .logo > span { display: table-cell; height: 180px; text-align: center; vertical-align: middle; } .cmpMovie > .data .slideWrap { overflow: hidden; height: 300px; border-top: 1px solid gainsboro; } .cmpMovie > .data .slideWrap ul.slide { position: relative; top: 0; left: 0; } .cmpMovie > .data .slideWrap ul.slide > li > a { position: relative; display: block; height: 100px; padding: 20px 10px 10px 152px; border-bottom: 1px solid gainsboro; } .cmpMovie > .data .slideWrap ul.slide > li > a:hover { text-decoration: none; } .cmpMovie > .data .slideWrap ul.slide > li > a:hover .title { text-decoration: underline; } .cmpMovie > .data .slideWrap ul.slide > li > a > .title { font-weight: bold; } .cmpMovie > .data .slideWrap ul.slide > li > a > .time { color: #777; } .cmpMovie > .data .slideWrap ul.slide > li > a > img { position: absolute; top: 19px; left: 32px; width: 104px; height: 60px; } .cmpMovie > .data .slideWrap ul.slide > li.isCurrent { background-color: #f5f7f8; } .cmpMovie > .data .slideWrap ul.slide > li.isCurrent > a .title { color: #0093d0; } .cmpMovie > .data .label { font-weight: bold; line-height: 60px; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 110px 0 32px; border-top: 1px solid gainsboro; background-color: #fff; font-size: 14px; font-size: 1.4rem; } .cmpMovie > .data .label > .playing { display: inline-block; margin-left: 5px; } .cmpMovie > .data ul.nav { position: absolute; right: 5px; bottom: 10px; } .cmpMovie > .data ul.nav > li { display: inline-block; } .cmpMovie > .data ul.nav > li > a { display: block; overflow: hidden; width: 50px !important; height: 30px !important; } .cmpMovie > .data ul.nav > li > a:before { top: 50%; right: 50%; width: 13px; height: 9px; margin-top: -4.5px; margin-right: -6.5px; background-position: -593px -427px; } .cmpMovie > .data ul.nav > li > a > span { display: inline-block; margin-top: 4em; } .cmpMovie > .data ul.nav > li.prev > a { border-right: 1px solid gainsboro; } .cmpMovie > .data ul.nav > li.prev > a:before { top: 50%; right: 50%; width: 13px; height: 9px; margin-top: -4.5px; margin-right: -6.5px; background-position: -593px -472px; } .cmpMovie > .data ul.nav > li.isInvalid { opacity: .3; -ms-filter: 'alpha(opacity=30)'; } .cmpMovie > .data ul.nav > li.isInvalid a { cursor: default; } .cmpMovie > .data ul.nav > li.isInvalid a span { display: none; } .cmpMovie2 { position: relative; } .cmpMovie2 .slideWrap { overflow: hidden; width: 100%; max-width: 720px; } .cmpMovie2 .slideWrap > ul.slide { position: relative; left: 0; width: 2000%; -webkit-transition: left .5s; transition: left .5s; } .cmpMovie2 .slideWrap > ul.slide > li { position: relative; display: inline-block; float: left; width: 5%; height: 50%; padding-top: 3%; } .cmpMovie2 .slideWrap > ul.slide > li > iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMovie2 ul.navController1 { position: absolute; top: 50%; margin-top: -25px; } .cmpMovie2 ul.navController1 > li { position: relative; left: -35px; } .cmpMovie2 ul.navController1 > li.next { right: -35px; left: auto; } .cmpImage { position: relative; } .cmpImage .slideWrap { overflow: hidden; width: 100%; max-width: 720px; } .cmpImage .slideWrap > ul.slide { position: relative; left: 0; width: 4000%; -webkit-transition: left .5s; transition: left .5s; } .cmpImage .slideWrap > ul.slide > li { position: relative; display: inline-block; float: left; width: 2.5%; height: 100%; text-align: center; } .cmpImage .slideWrap > ul.slide > li p.caption { display: block; margin-top: 10px; } .cmpImage ul.navController1 { position: absolute; top: 50%; margin-top: -25px; } .cmpImage ul.navController1 > li { position: relative; left: -35px; } .cmpImage ul.navController1 > li.next { right: -35px; left: auto; } .cmpImage2, .cmpImageCharacter { position: relative; } .cmpImage2 .slideWrap, .cmpImageCharacter .slideWrap { overflow: hidden; width: 100%; } .cmpImage2 .slideWrap > ul.slide, .cmpImageCharacter .slideWrap > ul.slide { position: relative; left: 0; width: 40000%; -webkit-transition: left .5s; transition: left .5s; } .cmpImage2 .slideWrap > ul.slide > li, .cmpImageCharacter .slideWrap > ul.slide > li { position: relative; display: inline-block; float: left; width: .25%; height: 100%; } .cmpImageCharacter .slideWrap > ul.slide > li { height: auto; } .cmpImage2 .slideWrap > ul.slide > li .column.img, .cmpImageCharacter .slideWrap > ul.slide > li .column.img { margin-bottom: 0; } .cmpImage2 ul.navController1, .cmpImageCharacter ul.navController1 { position: absolute; top: 50%; margin-top: -25px; } .cmpImage2 ul.navController1 > li, .cmpImageCharacter ul.navController1 > li { position: relative; } .cmpImage2 ul.navController1 > li.next, .cmpImageCharacter ul.navController1 > li.next { left: auto; } .cmpItem { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; } .cmpItem a:hover { text-decoration: none; } .cmpItem a .lead:hover { text-decoration: underline; } .cmpItem .text, .cmpItem .text1 { color: #777; } .cmpItem .linkBa { position: absolute; bottom: 32px; padding: 0 40px; } .cmpItem > .slideWrap { position: relative; float: left; overflow: hidden; width: 599px; border-right: 1px solid gainsboro; } .cmpItem > .slideWrap > ul.slide { position: relative; left: 0; width: 1000%; height: 788px; -webkit-transition: left .5s; transition: left .5s; background-color: #f5f7f8; } .cmpItem > .slideWrap > ul.slide > li { position: relative; display: inline-block; float: left; width: 598px; height: 100%; } .cmpItem > .slideWrap > ul.slide > li > a, .cmpItem > .slideWrap > ul.slide > li > div { width: 100%; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb, .cmpItem > .slideWrap > ul.slide > li > div > .thumb { width: 600px; height: 450px; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb img, .cmpItem > .slideWrap > ul.slide > li > div > .thumb img { width: 100%; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb > a, .cmpItem > .slideWrap > ul.slide > li > a > .thumb > div, .cmpItem > .slideWrap > ul.slide > li > div > .thumb > a, .cmpItem > .slideWrap > ul.slide > li > div > .thumb > div { width: 100%; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb > a img, .cmpItem > .slideWrap > ul.slide > li > a > .thumb > div img, .cmpItem > .slideWrap > ul.slide > li > div > .thumb > a img, .cmpItem > .slideWrap > ul.slide > li > div > .thumb > div img { width: 100%; } .cmpItem > .slideWrap > ul.slide > li > a > .lead, .cmpItem > .slideWrap > ul.slide > li > div > .lead { font-size: 25px; line-height: 1.2; position: relative; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem > .slideWrap > ul.slide > li > div > .lead:after { position: absolute; z-index: 1; top: 1px; top: -48px; left: 40px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem > .slideWrap > ul.slide > li > a + .text1, .cmpItem > .slideWrap > ul.slide > li > div + .text1 { padding-top: 35px; } .cmpItem > .slideWrap > ul.slide > li > .text, .cmpItem > .slideWrap > ul.slide > li > .text1 { margin-bottom: 1.5em; padding: 0 40px; font-size:14px; } .cmpItem > .slideWrap > ul.slide.typeAutoH { height: auto !important; } .cmpItem > .slideWrap > ul.slide.typeAutoH > li > a > .thumb, .cmpItem > .slideWrap > ul.slide.typeAutoH > li > div > .thumb, .cmpItem > .slideWrap > ul.slide.typeAutoH > li > .thumb { height: auto !important; } .cmpItem > .slideWrap > ul.slide.typeAutoH > li > a > .thumb a, .cmpItem > .slideWrap > ul.slide.typeAutoH > li > div > .thumb a, .cmpItem > .slideWrap > ul.slide.typeAutoH > li > .thumb a { vertical-align: bottom; } .cmpItem > .slideWrap .listLinkTy3 { position: absolute; bottom: 32px; margin: 0; padding: 0 160px 0 40px; } .cmpItem > .slideWrap .listLinkTy3 > li { margin: 0; margin-left: 20px; padding-right: 0; } .cmpItem > .slideWrap .listLinkTy3 > li:first-child { margin-left: 0; } .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a, .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a { padding-left: 28px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a:before, .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a:before { border-radius: 0; background-color: inherit; } .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a:after, .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a:after { display: none; } .cmpItem > .slideWrap .listLinkTy3 > li.iconShopping > a:before { top: 50%; left: 0; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -204px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconSite > a:before { top: 50%; left: 0; width: 18px; height: 18px; margin-top: -9px; background-position: -453px -414px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:before { top: 50%; left: 0; width: 22px; height: 24px; margin-top: -12px; background-position: -537px 0; } .cmpItem > .slideWrap .listLinkTy3 > li.iconTicket > a:before { top: 50%; left: 0; width: 24px; height: 24px; margin-top: -12px; background-position: 0 -521px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconTrailer > a:before { top: 50%; left: 0; width: 24px; height: 15px; margin-top: -7.5px; background-position: -30px -577px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconInfo > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -289px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconSearch > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -112px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconTv > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -401px; } .cmpItem > .slideWrap .listLinkTy3 > li.iconCalendar > a:before { top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background-position: -565px -436px; } .cmpItem > ul.nav { position: absolute; right: 650px; bottom: 20px; } .cmpItem > ul.nav > li { float: left; margin-left: 7px; } .cmpItem > ul.nav > li > a { display: block; width: 50px; height: 50px; border: 1px solid #c1c1c1; border-radius: 50px; } .cmpItem > ul.nav > li > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -317px -168px; } .cmpItem > ul.nav > li > a > span { position: relative; z-index: -1; } .cmpItem > ul.nav > li.prev > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -478px -551px; } .cmpItem > ul.nav > li.isInvalid { opacity: .3; -ms-filter: 'alpha(opacity=30)'; } .cmpItem > ul.nav > li.isInvalid a { cursor: default; } .cmpItem > ul.nav > li.isInvalid a span { display: none; } .cmpItem > ul.item { float: right; width: 600px; height: 788px; margin: 0 -1px 0 0; } .cmpItem > ul.item > li { position: relative; float: left; overflow: hidden; width: 300px; height: 449px; } .cmpItem > ul.item > li:first-child { border-right: 1px solid gainsboro; } .cmpItem > ul.item > li > a, .cmpItem > ul.item > li > div { display: block; width: 100%; } .cmpItem > ul.item > li > a > .thumb, .cmpItem > ul.item > li > div > .thumb { width: 299px; height: 210px; } .cmpItem > ul.item > li > a > .thumb img, .cmpItem > ul.item > li > div > .thumb img { width: 100%; height: 100%; } .cmpItem > ul.item > li > a > .lead, .cmpItem > ul.item > li > div > .lead { font-size: 20px; line-height: 1.2; position: relative; margin-bottom: 0; padding: 24px 32px 18px; } .cmpItem > ul.item > li > a > .lead:after, .cmpItem > ul.item > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem > ul.item > li > .data > .text, .cmpItem > ul.item > li > .data > .text1 { font-size: 14px; padding: 0 32px; } .cmpItem > ul.item > li > .data > .text1:first-child { padding-top: 25px; } .cmpItem > ul.item > li > .data > .linkBa { bottom: 32px; padding: 0 32px; } .cmpItem > ul.item > li.type1, .cmpItem > ul.item > li.type2, .cmpItem > ul.item > li.type3 { clear: both; width: 600px; height: 340px; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem > ul.item > li.type1 > a, .cmpItem > ul.item > li.type1 > div, .cmpItem > ul.item > li.type2 > a, .cmpItem > ul.item > li.type2 > div, .cmpItem > ul.item > li.type3 > a, .cmpItem > ul.item > li.type3 > div { position: relative; width: 100%; height: 100%; cursor: default; } .cmpItem > ul.item > li.type1 > a > .thumb, .cmpItem > ul.item > li.type1 > div > .thumb, .cmpItem > ul.item > li.type2 > a > .thumb, .cmpItem > ul.item > li.type2 > div > .thumb, .cmpItem > ul.item > li.type3 > a > .thumb, .cmpItem > ul.item > li.type3 > div > .thumb { float: right; width: 50%; height: auto; margin: 0; } .cmpItem > ul.item > li.type1 > a > .data, .cmpItem > ul.item > li.type1 > div > .data, .cmpItem > ul.item > li.type2 > a > .data, .cmpItem > ul.item > li.type2 > div > .data, .cmpItem > ul.item > li.type3 > a > .data, .cmpItem > ul.item > li.type3 > div > .data { position: relative; float: left; width: 50%; height: 100%; } .cmpItem > ul.item > li.type1 > a > .data > .text1:first-child, .cmpItem > ul.item > li.type1 > div > .data > .text1:first-child, .cmpItem > ul.item > li.type2 > a > .data > .text1:first-child, .cmpItem > ul.item > li.type2 > div > .data > .text1:first-child, .cmpItem > ul.item > li.type3 > a > .data > .text1:first-child, .cmpItem > ul.item > li.type3 > div > .data > .text1:first-child { padding-top: 25px; } .cmpItem > ul.item > li.type1 > a .lead, .cmpItem > ul.item > li.type1 > div .lead, .cmpItem > ul.item > li.type2 > a .lead, .cmpItem > ul.item > li.type2 > div .lead, .cmpItem > ul.item > li.type3 > a .lead, .cmpItem > ul.item > li.type3 > div .lead { line-height: 1.2; font-size: 20px; font-size: 2rem; margin-bottom: 0; padding: 40px 32px 25px; } .cmpItem > ul.item > li.type1 > a .text, .cmpItem > ul.item > li.type1 > a .text1, .cmpItem > ul.item > li.type1 > div .text, .cmpItem > ul.item > li.type1 > div .text1, .cmpItem > ul.item > li.type2 > a .text, .cmpItem > ul.item > li.type2 > a .text1, .cmpItem > ul.item > li.type2 > div .text, .cmpItem > ul.item > li.type2 > div .text1, .cmpItem > ul.item > li.type3 > a .text, .cmpItem > ul.item > li.type3 > a .text1, .cmpItem > ul.item > li.type3 > div .text, .cmpItem > ul.item > li.type3 > div .text1 { font-size: 14px; font-size: 1.4rem; margin-bottom: 0; padding: 0 32px; } .cmpItem > ul.item > li.type1 > a .linkBa, .cmpItem > ul.item > li.type1 > div .linkBa, .cmpItem > ul.item > li.type2 > a .linkBa, .cmpItem > ul.item > li.type2 > div .linkBa, .cmpItem > ul.item > li.type3 > a .linkBa, .cmpItem > ul.item > li.type3 > div .linkBa { float: left; padding: 0 32px; } .cmpItem > ul.item > li.type1.isColorDark > a, .cmpItem > ul.item > li.type1.isColorDark > div, .cmpItem > ul.item > li.type1.isColorGray > a, .cmpItem > ul.item > li.type1.isColorGray > div, .cmpItem > ul.item > li.type2.isColorDark > a, .cmpItem > ul.item > li.type2.isColorDark > div, .cmpItem > ul.item > li.type2.isColorGray > a, .cmpItem > ul.item > li.type2.isColorGray > div, .cmpItem > ul.item > li.type3.isColorDark > a, .cmpItem > ul.item > li.type3.isColorDark > div, .cmpItem > ul.item > li.type3.isColorGray > a, .cmpItem > ul.item > li.type3.isColorGray > div { position: relative; width: 100%; height: 100%; cursor: default; color: #fff; } .cmpItem > ul.item > li.type1.isColorDark > a:after, .cmpItem > ul.item > li.type1.isColorDark > div:after, .cmpItem > ul.item > li.type1.isColorGray > a:after, .cmpItem > ul.item > li.type1.isColorGray > div:after, .cmpItem > ul.item > li.type2.isColorDark > a:after, .cmpItem > ul.item > li.type2.isColorDark > div:after, .cmpItem > ul.item > li.type2.isColorGray > a:after, .cmpItem > ul.item > li.type2.isColorGray > div:after, .cmpItem > ul.item > li.type3.isColorDark > a:after, .cmpItem > ul.item > li.type3.isColorDark > div:after, .cmpItem > ul.item > li.type3.isColorGray > a:after, .cmpItem > ul.item > li.type3.isColorGray > div:after { display: none; } .cmpItem > ul.item > li.type1.isColorDark > a > .thumb, .cmpItem > ul.item > li.type1.isColorDark > div > .thumb, .cmpItem > ul.item > li.type1.isColorGray > a > .thumb, .cmpItem > ul.item > li.type1.isColorGray > div > .thumb, .cmpItem > ul.item > li.type2.isColorDark > a > .thumb, .cmpItem > ul.item > li.type2.isColorDark > div > .thumb, .cmpItem > ul.item > li.type2.isColorGray > a > .thumb, .cmpItem > ul.item > li.type2.isColorGray > div > .thumb, .cmpItem > ul.item > li.type3.isColorDark > a > .thumb, .cmpItem > ul.item > li.type3.isColorDark > div > .thumb, .cmpItem > ul.item > li.type3.isColorGray > a > .thumb, .cmpItem > ul.item > li.type3.isColorGray > div > .thumb { float: right; width: 50%; height: auto; margin: 0; } .cmpItem > ul.item > li.type1.isColorDark > a > .data, .cmpItem > ul.item > li.type1.isColorDark > div > .data, .cmpItem > ul.item > li.type1.isColorGray > a > .data, .cmpItem > ul.item > li.type1.isColorGray > div > .data, .cmpItem > ul.item > li.type2.isColorDark > a > .data, .cmpItem > ul.item > li.type2.isColorDark > div > .data, .cmpItem > ul.item > li.type2.isColorGray > a > .data, .cmpItem > ul.item > li.type2.isColorGray > div > .data, .cmpItem > ul.item > li.type3.isColorDark > a > .data, .cmpItem > ul.item > li.type3.isColorDark > div > .data, .cmpItem > ul.item > li.type3.isColorGray > a > .data, .cmpItem > ul.item > li.type3.isColorGray > div > .data { position: relative; float: left; width: 50%; height: 100%; } .cmpItem > ul.item > li.type1.isColorDark > a .lead, .cmpItem > ul.item > li.type1.isColorDark > div .lead, .cmpItem > ul.item > li.type1.isColorGray > a .lead, .cmpItem > ul.item > li.type1.isColorGray > div .lead, .cmpItem > ul.item > li.type2.isColorDark > a .lead, .cmpItem > ul.item > li.type2.isColorDark > div .lead, .cmpItem > ul.item > li.type2.isColorGray > a .lead, .cmpItem > ul.item > li.type2.isColorGray > div .lead, .cmpItem > ul.item > li.type3.isColorDark > a .lead, .cmpItem > ul.item > li.type3.isColorDark > div .lead, .cmpItem > ul.item > li.type3.isColorGray > a .lead, .cmpItem > ul.item > li.type3.isColorGray > div .lead { font-size: 20px; font-size: 2rem; margin-bottom: 0; padding: 40px 32px 25px; } .cmpItem > ul.item > li.type1.isColorDark > a .lead:after, .cmpItem > ul.item > li.type1.isColorDark > div .lead:after, .cmpItem > ul.item > li.type1.isColorGray > a .lead:after, .cmpItem > ul.item > li.type1.isColorGray > div .lead:after, .cmpItem > ul.item > li.type2.isColorDark > a .lead:after, .cmpItem > ul.item > li.type2.isColorDark > div .lead:after, .cmpItem > ul.item > li.type2.isColorGray > a .lead:after, .cmpItem > ul.item > li.type2.isColorGray > div .lead:after, .cmpItem > ul.item > li.type3.isColorDark > a .lead:after, .cmpItem > ul.item > li.type3.isColorDark > div .lead:after, .cmpItem > ul.item > li.type3.isColorGray > a .lead:after, .cmpItem > ul.item > li.type3.isColorGray > div .lead:after { display: none; } .cmpItem > ul.item > li.type1.isColorDark > a .text, .cmpItem > ul.item > li.type1.isColorDark > a .text1, .cmpItem > ul.item > li.type1.isColorDark > div .text, .cmpItem > ul.item > li.type1.isColorDark > div .text1, .cmpItem > ul.item > li.type1.isColorGray > a .text, .cmpItem > ul.item > li.type1.isColorGray > a .text1, .cmpItem > ul.item > li.type1.isColorGray > div .text, .cmpItem > ul.item > li.type1.isColorGray > div .text1, .cmpItem > ul.item > li.type2.isColorDark > a .text, .cmpItem > ul.item > li.type2.isColorDark > a .text1, .cmpItem > ul.item > li.type2.isColorDark > div .text, .cmpItem > ul.item > li.type2.isColorDark > div .text1, .cmpItem > ul.item > li.type2.isColorGray > a .text, .cmpItem > ul.item > li.type2.isColorGray > a .text1, .cmpItem > ul.item > li.type2.isColorGray > div .text, .cmpItem > ul.item > li.type2.isColorGray > div .text1, .cmpItem > ul.item > li.type3.isColorDark > a .text, .cmpItem > ul.item > li.type3.isColorDark > a .text1, .cmpItem > ul.item > li.type3.isColorDark > div .text, .cmpItem > ul.item > li.type3.isColorDark > div .text1, .cmpItem > ul.item > li.type3.isColorGray > a .text, .cmpItem > ul.item > li.type3.isColorGray > a .text1, .cmpItem > ul.item > li.type3.isColorGray > div .text, .cmpItem > ul.item > li.type3.isColorGray > div .text1 { font-size: 14px; font-size: 1.4rem; margin-bottom: 0; padding: 0 32px; color: #aaa; } .cmpItem > ul.item > li.type1.isColorDark > a .linkBa, .cmpItem > ul.item > li.type1.isColorDark > div .linkBa, .cmpItem > ul.item > li.type1.isColorGray > a .linkBa, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa, .cmpItem > ul.item > li.type2.isColorDark > a .linkBa, .cmpItem > ul.item > li.type2.isColorDark > div .linkBa, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa, .cmpItem > ul.item > li.type3.isColorDark > a .linkBa, .cmpItem > ul.item > li.type3.isColorDark > div .linkBa, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa { float: left; padding: 0 40px; } .cmpItem > ul.item > li.type1.isColorDark > a .linkBa span, .cmpItem > ul.item > li.type1.isColorDark > div .linkBa span, .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span, .cmpItem > ul.item > li.type2.isColorDark > a .linkBa span, .cmpItem > ul.item > li.type2.isColorDark > div .linkBa span, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span, .cmpItem > ul.item > li.type3.isColorDark > a .linkBa span, .cmpItem > ul.item > li.type3.isColorDark > div .linkBa span, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span { color: #fff; } .cmpItem > ul.item > li.type1.isColorDark > a .linkBa span:before, .cmpItem > ul.item > li.type1.isColorDark > div .linkBa span:before, .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span:before, .cmpItem > ul.item > li.type2.isColorDark > a .linkBa span:before, .cmpItem > ul.item > li.type2.isColorDark > div .linkBa span:before, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span:before, .cmpItem > ul.item > li.type3.isColorDark > a .linkBa span:before, .cmpItem > ul.item > li.type3.isColorDark > div .linkBa span:before, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span:before { background-color: #fff; } .cmpItem > ul.item > li.type1.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type1.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type2.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type2.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type3.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type3.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -608px -87px; } .cmpItem > ul.item > li.type1.isColorGray > a, .cmpItem > ul.item > li.type1.isColorGray > div, .cmpItem > ul.item > li.type2.isColorGray > a, .cmpItem > ul.item > li.type2.isColorGray > div, .cmpItem > ul.item > li.type3.isColorGray > a, .cmpItem > ul.item > li.type3.isColorGray > div { color: #333; } .cmpItem > ul.item > li.type1.isColorGray > a .text, .cmpItem > ul.item > li.type1.isColorGray > a .text1, .cmpItem > ul.item > li.type1.isColorGray > div .text, .cmpItem > ul.item > li.type1.isColorGray > div .text1, .cmpItem > ul.item > li.type2.isColorGray > a .text, .cmpItem > ul.item > li.type2.isColorGray > a .text1, .cmpItem > ul.item > li.type2.isColorGray > div .text, .cmpItem > ul.item > li.type2.isColorGray > div .text1, .cmpItem > ul.item > li.type3.isColorGray > a .text, .cmpItem > ul.item > li.type3.isColorGray > a .text1, .cmpItem > ul.item > li.type3.isColorGray > div .text, .cmpItem > ul.item > li.type3.isColorGray > div .text1 { color: #333; } .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span { color: #333; } .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span:before, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span:before, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span:before, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span:before { background-color: #0093d0; } .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -608px -108px; } .cmpItem > ul.item > li.type1 { overflow: hidden; border-top: 1px solid gainsboro; } .cmpItem > ul.item > li.type2 + .type1 { border-top: none; } .cmpItem > ul.item > li.type2 { height: 449px; } .cmpItem > ul.item > li.type2 > a .lead, .cmpItem > ul.item > li.type2 > div .lead { line-height: 1.2; font-size: 20px; font-size: 2rem; position: relative; margin-bottom: 0; padding: 60px 32px 18px; } .cmpItem > ul.item > li.type2 > a .lead:after, .cmpItem > ul.item > li.type2 > div .lead:after { position: absolute; z-index: 1; top: 40px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpItem > ul.item > li.type2 > a .lead:after, .cmpItem > ul.item > li.type2 > div .lead:after { display: inline-block; } .cmpItem > ul.item > li.type3 { margin: 0; border-top: 1px solid gainsboro; } .cmpItem > ul.item > li.type3 iframe { width: 100%; height: 338px; } .cmpItem.slideR > .slideWrap { float: right; border-right: none; border-left: 1px solid gainsboro; } .cmpItem.slideR > .nav { right: 50px; } .cmpItem.slideR > .item { margin: 0 0 0 -1px; } .cmpItem.slideR > .item li { border-right: none !important; } .cmpItem.slideOnly > .slideWrap { top: 0; float: none; width: 100%; border-right: none; } .cmpItem.slideOnly > .slideWrap > ul.slide { height: 450px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li { width: 1200px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb { float: left; width: 50%; height: 450px; margin: -1px 0 0 -1px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb > a, .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb > div { width: 100%; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb > a img, .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb > div img { width: 100%; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; position: relative; float: left; width: 50%; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 50px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: #f5f7f8; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .text { float: left; width: 50%; margin-bottom: 1.5em; padding: 0 40px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li .listLinkTy3 { left: 600px; } .cmpItem.slideOnly > ul.nav { right: 50px; } .cmpItem.slideNone { border-width: 1px 1px 0; } .cmpItem.slideNone > .slideWrap { top: 0; float: none; width: 100%; border-right: none; } .cmpItem.slideNone > .slideWrap > ul.slide { width: 100%; height: 438px; background-color: #fff; } .cmpItem.slideNone > .slideWrap > ul.slide > li { overflow: hidden; width: 1200px; border-bottom: 1px solid gainsboro; } .cmpItem.slideNone > .slideWrap > ul.slide > li.isBgColor1 { background-color: #f5f7f8; } .cmpItem.slideNone > .slideWrap > ul.slide > li.isBgColor1 > .lead { position: relative; } .cmpItem.slideNone > .slideWrap > ul.slide > li.isBgColor1 > .lead:after { position: absolute; z-index: 1; top: 40px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: #f5f7f8; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb { float: left; width: 50%; height: 450px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb > a, .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb > div { width: 100%; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb > a img, .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb > div img { width: 100%; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; position: relative; float: left; width: 50%; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 50px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: white; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead .sub { font-size: 18px; font-size: 1.8rem; font-weight: bold; position: relative; top: -12px; display: inline-block; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead > a:hover { text-decoration: underline; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead1, .cmpItem.slideNone > .slideWrap > ul.slide > li > .text, .cmpItem.slideNone > .slideWrap > ul.slide > li > .info { float: left; width: 50%; margin-bottom: 1.5em; padding: 0 40px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead1 { font-size: 20px; font-size: 2rem; font-weight: normal; margin-bottom: 24px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .info { margin-top: -20px; } .cmpItem.slideNone > .slideWrap > ul.slide > li .linkBa, .cmpItem.slideNone > .slideWrap > ul.slide > li .listLinkTy3 { left: 600px; margin-bottom: 0; padding-right: 0; } /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; display: flex; } .cmpItem-flex a:hover { text-decoration: none; } .cmpItem-flex a .lead:hover { text-decoration: underline; } .cmpItem-flex .text, .cmpItem-flex .text1 { color: #777; } .cmpItem-flex .linkBa { position: absolute; bottom: 32px; padding: 0 40px; } .cmpItem-flex > .slideWrap { position: relative; overflow: hidden; width: 599px; border-right: 1px solid gainsboro; } .cmpItem-flex > .slideWrap > ul.slide { position: relative; left: 0; width: 1000%; height: 788px; -webkit-transition: left .5s; transition: left .5s; background-color: #f5f7f8; display: flex; } .cmpItem-flex > .slideWrap > ul.slide > li { position: relative; display: inline-block; width: 598px; height: 100%; } .cmpItem-flex > .slideWrap > ul.slide > li > a, .cmpItem-flex > .slideWrap > ul.slide > li > div { width: 100%; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb { width: 600px; height: 450px; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb img, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb img { width: 100%; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb > a, .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb > div, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb > a, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb > div { width: 100%; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb > a img, .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb > div img, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb > a img, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb > div img { width: 100%; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead { font-size: 25px; line-height: 1.2; position: relative; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead:after { position: absolute; z-index: 1; top: 1px; top: -48px; left: 40px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem-flex > .slideWrap > ul.slide > li > a + .text1, .cmpItem-flex > .slideWrap > ul.slide > li > div + .text1 { padding-top: 35px; } .cmpItem-flex > .slideWrap > ul.slide > li > .text, .cmpItem-flex > .slideWrap > ul.slide > li > .text1 { margin-bottom: 1.5em; padding: 0 40px; font-size:14px; } .cmpItem-flex > .slideWrap > ul.slide.typeAutoH { height: auto !important; } .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > a > .thumb, .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > div > .thumb, .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > .thumb { height: auto !important; } .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > a > .thumb a, .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > div > .thumb a, .cmpItem-flex > .slideWrap > ul.slide.typeAutoH > li > .thumb a { vertical-align: bottom; } .cmpItem-flex > .slideWrap .listLinkTy3 { position: absolute; bottom: 32px; margin: 0; padding: 0 160px 0 40px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li { margin: 0; margin-left: 20px; padding-right: 0; } .cmpItem-flex > .slideWrap .listLinkTy3 > li:first-child { margin-left: 0; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a { padding-left: 28px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a:before, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a:before { border-radius: 0; background-color: inherit; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a:after, .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a:after { display: none; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconShopping > a:before { top: 50%; left: 0; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -204px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSite > a:before { top: 50%; left: 0; width: 18px; height: 18px; margin-top: -9px; background-position: -453px -414px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:before { top: 50%; left: 0; width: 22px; height: 24px; margin-top: -12px; background-position: -537px 0; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTicket > a:before { top: 50%; left: 0; width: 24px; height: 24px; margin-top: -12px; background-position: 0 -521px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTrailer > a:before { top: 50%; left: 0; width: 24px; height: 15px; margin-top: -7.5px; background-position: -30px -577px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconInfo > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -289px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconSearch > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -112px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconTv > a:before { top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -401px; } .cmpItem-flex > .slideWrap .listLinkTy3 > li.iconCalendar > a:before { top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background-position: -565px -436px; } .cmpItem-flex > ul.nav { position: absolute; right: 650px; bottom: 20px; } .cmpItem-flex > ul.nav > li { float: left; margin-left: 7px; } .cmpItem-flex > ul.nav > li > a { display: block; width: 50px; height: 50px; border: 1px solid #c1c1c1; border-radius: 50px; } .cmpItem-flex > ul.nav > li > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -317px -168px; } .cmpItem-flex > ul.nav > li > a > span { position: relative; z-index: -1; } .cmpItem-flex > ul.nav > li.prev > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -478px -551px; } .cmpItem-flex > ul.nav > li.isInvalid { opacity: .3; -ms-filter: 'alpha(opacity=30)'; } .cmpItem-flex > ul.nav > li.isInvalid a { cursor: default; } .cmpItem-flex > ul.nav > li.isInvalid a span { display: none; } .cmpItem-flex > ul.item { width: 600px; height: 788px; margin: 0 -1px 0 0; display: flex; flex-wrap: wrap; } .cmpItem-flex > ul.item > li { position: relative; overflow: hidden; width: 300px; height: 449px; } .cmpItem-flex > ul.item > li.type3 > div > .youtube { flex: 1; } .cmpItem-flex > ul.item > li:first-child { border-right: 1px solid gainsboro; } .cmpItem-flex > ul.item > li > a, .cmpItem-flex > ul.item > li > div { display: block; width: 100%; } .cmpItem-flex > ul.item > li > a > .thumb, .cmpItem-flex > ul.item > li > div > .thumb { width: 299px; height: 210px; } .cmpItem-flex > ul.item > li > a > .thumb img, .cmpItem-flex > ul.item > li > div > .thumb img { width: 100%; height: 100%; } .cmpItem-flex > ul.item > li > a > .lead, .cmpItem-flex > ul.item > li > div > .lead { font-size: 20px; line-height: 1.2; position: relative; margin-bottom: 0; padding: 24px 32px 18px; } .cmpItem-flex > ul.item > li > a > .lead:after, .cmpItem-flex > ul.item > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem-flex > ul.item > li > .data > .text, .cmpItem-flex > ul.item > li > .data > .text1 { font-size: 14px; padding: 0 32px; } .cmpItem-flex > ul.item > li > .data > .text1:first-child { padding-top: 25px; } .cmpItem-flex > ul.item > li > .data > .linkBa { bottom: 32px; padding: 0 32px; } .cmpItem-flex > ul.item > li.type1, .cmpItem-flex > ul.item > li.type2, .cmpItem-flex > ul.item > li.type3 { width: 600px; height: 340px; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem-flex > ul.item > li.type1 > a, .cmpItem-flex > ul.item > li.type1 > div, .cmpItem-flex > ul.item > li.type2 > a, .cmpItem-flex > ul.item > li.type2 > div, .cmpItem-flex > ul.item > li.type3 > a, .cmpItem-flex > ul.item > li.type3 > div { position: relative; width: 100%; height: 100%; cursor: default; } .cmpItem-flex > ul.item > li.type1 > a > .thumb, .cmpItem-flex > ul.item > li.type1 > div > .thumb, .cmpItem-flex > ul.item > li.type2 > a > .thumb, .cmpItem-flex > ul.item > li.type2 > div > .thumb, .cmpItem-flex > ul.item > li.type3 > a > .thumb, .cmpItem-flex > ul.item > li.type3 > div > .thumb { width: 50%; height: auto; margin: 0; } .cmpItem-flex > ul.item > li.type1 > a > .data, .cmpItem-flex > ul.item > li.type1 > div > .data, .cmpItem-flex > ul.item > li.type2 > a > .data, .cmpItem-flex > ul.item > li.type2 > div > .data, .cmpItem-flex > ul.item > li.type3 > a > .data, .cmpItem-flex > ul.item > li.type3 > div > .data { position: relative; width: 50%; height: 100%; } .cmpItem-flex > ul.item > li.type1 > a > .data > .text1:first-child, .cmpItem-flex > ul.item > li.type1 > div > .data > .text1:first-child, .cmpItem-flex > ul.item > li.type2 > a > .data > .text1:first-child, .cmpItem-flex > ul.item > li.type2 > div > .data > .text1:first-child, .cmpItem-flex > ul.item > li.type3 > a > .data > .text1:first-child, .cmpItem-flex > ul.item > li.type3 > div > .data > .text1:first-child { padding-top: 25px; } .cmpItem-flex > ul.item > li.type1 > a .lead, .cmpItem-flex > ul.item > li.type1 > div .lead, .cmpItem-flex > ul.item > li.type2 > a .lead, .cmpItem-flex > ul.item > li.type2 > div .lead, .cmpItem-flex > ul.item > li.type3 > a .lead, .cmpItem-flex > ul.item > li.type3 > div .lead { line-height: 1.2; font-size: 20px; font-size: 2rem; margin-bottom: 0; padding: 40px 32px 25px; } .cmpItem-flex > ul.item > li.type1 > a .text, .cmpItem-flex > ul.item > li.type1 > a .text1, .cmpItem-flex > ul.item > li.type1 > div .text, .cmpItem-flex > ul.item > li.type1 > div .text1, .cmpItem-flex > ul.item > li.type2 > a .text, .cmpItem-flex > ul.item > li.type2 > a .text1, .cmpItem-flex > ul.item > li.type2 > div .text, .cmpItem-flex > ul.item > li.type2 > div .text1, .cmpItem-flex > ul.item > li.type3 > a .text, .cmpItem-flex > ul.item > li.type3 > a .text1, .cmpItem-flex > ul.item > li.type3 > div .text, .cmpItem-flex > ul.item > li.type3 > div .text1 { font-size: 14px; font-size: 1.4rem; margin-bottom: 0; padding: 0 32px; } .cmpItem-flex > ul.item > li.type1 > a .linkBa, .cmpItem-flex > ul.item > li.type1 > div .linkBa, .cmpItem-flex > ul.item > li.type2 > a .linkBa, .cmpItem-flex > ul.item > li.type2 > div .linkBa, .cmpItem-flex > ul.item > li.type3 > a .linkBa, .cmpItem-flex > ul.item > li.type3 > div .linkBa { float: left; padding: 0 32px; } .cmpItem-flex > ul.item > li.type1.isColorLight > a, .cmpItem-flex > ul.item > li.type1.isColorLight > div, .cmpItem-flex > ul.item > li.type1.isColorDark > a, .cmpItem-flex > ul.item > li.type1.isColorDark > div, .cmpItem-flex > ul.item > li.type1.isColorGray > a, .cmpItem-flex > ul.item > li.type1.isColorGray > div, .cmpItem-flex > ul.item > li.type2.isColorLight > a, .cmpItem-flex > ul.item > li.type2.isColorLight > div, .cmpItem-flex > ul.item > li.type2.isColorDark > a, .cmpItem-flex > ul.item > li.type2.isColorDark > div, .cmpItem-flex > ul.item > li.type2.isColorGray > a, .cmpItem-flex > ul.item > li.type2.isColorGray > div, .cmpItem-flex > ul.item > li.type3.isColorLight > a, .cmpItem-flex > ul.item > li.type3.isColorLight > div, .cmpItem-flex > ul.item > li.type3.isColorDark > a, .cmpItem-flex > ul.item > li.type3.isColorDark > div, .cmpItem-flex > ul.item > li.type3.isColorGray > a, .cmpItem-flex > ul.item > li.type3.isColorGray > div { position: relative; width: 100%; height: 100%; cursor: default; display: flex; align-items: flex-start; } .cmpItem-flex > ul.item > li.type1.isColorDark > a, .cmpItem-flex > ul.item > li.type1.isColorDark > div, .cmpItem-flex > ul.item > li.type1.isColorGray > a, .cmpItem-flex > ul.item > li.type1.isColorGray > div, .cmpItem-flex > ul.item > li.type2.isColorDark > a, .cmpItem-flex > ul.item > li.type2.isColorDark > div, .cmpItem-flex > ul.item > li.type2.isColorGray > a, .cmpItem-flex > ul.item > li.type2.isColorGray > div, .cmpItem-flex > ul.item > li.type3.isColorDark > a, .cmpItem-flex > ul.item > li.type3.isColorDark > div, .cmpItem-flex > ul.item > li.type3.isColorGray > a, .cmpItem-flex > ul.item > li.type3.isColorGray > div { color: #fff; } .cmpItem-flex > ul.item > li.type1.isColorLight > a:after, .cmpItem-flex > ul.item > li.type1.isColorLight > div:after, .cmpItem-flex > ul.item > li.type1.isColorDark > a:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div:after, .cmpItem-flex > ul.item > li.type2.isColorLight > a:after, .cmpItem-flex > ul.item > li.type2.isColorLight > div:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div:after, .cmpItem-flex > ul.item > li.type3.isColorLight > a:after, .cmpItem-flex > ul.item > li.type3.isColorLight > div:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div:after { display: none; } .cmpItem-flex > ul.item > li.type1.isColorLight > a > .thumb, .cmpItem-flex > ul.item > li.type1.isColorLight > div > .thumb, .cmpItem-flex > ul.item > li.type1.isColorDark > a > .thumb, .cmpItem-flex > ul.item > li.type1.isColorDark > div > .thumb, .cmpItem-flex > ul.item > li.type1.isColorGray > a > .thumb, .cmpItem-flex > ul.item > li.type1.isColorGray > div > .thumb, .cmpItem-flex > ul.item > li.type2.isColorLight > a > .thumb, .cmpItem-flex > ul.item > li.type2.isColorLight > div > .thumb, .cmpItem-flex > ul.item > li.type2.isColorDark > a > .thumb, .cmpItem-flex > ul.item > li.type2.isColorDark > div > .thumb, .cmpItem-flex > ul.item > li.type2.isColorGray > a > .thumb, .cmpItem-flex > ul.item > li.type2.isColorGray > div > .thumb, .cmpItem-flex > ul.item > li.type3.isColorLight > a > .thumb, .cmpItem-flex > ul.item > li.type3.isColorLight > div > .thumb, .cmpItem-flex > ul.item > li.type3.isColorDark > a > .thumb, .cmpItem-flex > ul.item > li.type3.isColorDark > div > .thumb, .cmpItem-flex > ul.item > li.type3.isColorGray > a > .thumb, .cmpItem-flex > ul.item > li.type3.isColorGray > div > .thumb { width: 50%; height: auto; margin: 0; order: 2; } .cmpItem-flex > ul.item > li.type1.isColorLight > a > .data, .cmpItem-flex > ul.item > li.type1.isColorLight > div > .data, .cmpItem-flex > ul.item > li.type1.isColorDark > a > .data, .cmpItem-flex > ul.item > li.type1.isColorDark > div > .data, .cmpItem-flex > ul.item > li.type1.isColorGray > a > .data, .cmpItem-flex > ul.item > li.type1.isColorGray > div > .data, .cmpItem-flex > ul.item > li.type2.isColorLight > a > .data, .cmpItem-flex > ul.item > li.type2.isColorLight > div > .data, .cmpItem-flex > ul.item > li.type2.isColorDark > a > .data, .cmpItem-flex > ul.item > li.type2.isColorDark > div > .data, .cmpItem-flex > ul.item > li.type2.isColorGray > a > .data, .cmpItem-flex > ul.item > li.type2.isColorGray > div > .data, .cmpItem-flex > ul.item > li.type3.isColorLight > a > .data, .cmpItem-flex > ul.item > li.type3.isColorLight > div > .data, .cmpItem-flex > ul.item > li.type3.isColorDark > a > .data, .cmpItem-flex > ul.item > li.type3.isColorDark > div > .data, .cmpItem-flex > ul.item > li.type3.isColorGray > a > .data, .cmpItem-flex > ul.item > li.type3.isColorGray > div > .data { position: relative; width: 50%; height: 100%; order: 1; } .cmpItem-flex > ul.item > li.type1.isColorLight > a .lead, .cmpItem-flex > ul.item > li.type1.isColorLight > div .lead, .cmpItem-flex > ul.item > li.type1.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type1.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type1.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type1.isColorGray > div .lead, .cmpItem-flex > ul.item > li.type2.isColorLight > a .lead, .cmpItem-flex > ul.item > li.type2.isColorLight > div .lead, .cmpItem-flex > ul.item > li.type2.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type2.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type2.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type2.isColorGray > div .lead, .cmpItem-flex > ul.item > li.type3.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type3.isColorLight > div .lead, .cmpItem-flex > ul.item > li.type3.isColorLight > a .lead, .cmpItem-flex > ul.item > li.type3.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type3.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type3.isColorGray > div .lead { font-size: 20px; font-size: 2rem; margin-bottom: 0; padding: 40px 32px 25px; } .cmpItem-flex > ul.item > li.type1.isColorLight > a .lead:after, .cmpItem-flex > ul.item > li.type1.isColorLight > div .lead:after, .cmpItem-flex > ul.item > li.type1.isColorDark > a .lead:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div .lead:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a .lead:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div .lead:after, .cmpItem-flex > ul.item > li.type2.isColorLight > a .lead:after, .cmpItem-flex > ul.item > li.type2.isColorLight > div .lead:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a .lead:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div .lead:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a .lead:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div .lead:after, .cmpItem-flex > ul.item > li.type3.isColorLight > a .lead:after, .cmpItem-flex > ul.item > li.type3.isColorLight > div .lead:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a .lead:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div .lead:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a .lead:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div .lead:after { display: none; } .cmpItem-flex > ul.item > li.type1.isColorLight > a .text, .cmpItem-flex > ul.item > li.type1.isColorLight > a .text1, .cmpItem-flex > ul.item > li.type1.isColorLight > div .text, .cmpItem-flex > ul.item > li.type1.isColorLight > div .text1, .cmpItem-flex > ul.item > li.type1.isColorDark > a .text, .cmpItem-flex > ul.item > li.type1.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type1.isColorDark > div .text, .cmpItem-flex > ul.item > li.type1.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type1.isColorGray > a .text, .cmpItem-flex > ul.item > li.type1.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type2.isColorLight > a .text, .cmpItem-flex > ul.item > li.type2.isColorLight > a .text1, .cmpItem-flex > ul.item > li.type2.isColorLight > div .text, .cmpItem-flex > ul.item > li.type2.isColorLight > div .text1, .cmpItem-flex > ul.item > li.type2.isColorDark > a .text, .cmpItem-flex > ul.item > li.type2.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type2.isColorDark > div .text, .cmpItem-flex > ul.item > li.type2.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type3.isColorLight > a .text, .cmpItem-flex > ul.item > li.type3.isColorLight > a .text1, .cmpItem-flex > ul.item > li.type3.isColorLight > div .text, .cmpItem-flex > ul.item > li.type3.isColorLight > div .text1, .cmpItem-flex > ul.item > li.type3.isColorDark > a .text, .cmpItem-flex > ul.item > li.type3.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type3.isColorDark > div .text, .cmpItem-flex > ul.item > li.type3.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text1 { font-size: 14px; font-size: 1.4rem; margin-bottom: 0; padding: 0 32px; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .text, .cmpItem-flex > ul.item > li.type1.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type1.isColorDark > div .text, .cmpItem-flex > ul.item > li.type1.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type1.isColorGray > a .text, .cmpItem-flex > ul.item > li.type1.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type2.isColorDark > a .text, .cmpItem-flex > ul.item > li.type2.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type2.isColorDark > div .text, .cmpItem-flex > ul.item > li.type2.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type3.isColorDark > a .text, .cmpItem-flex > ul.item > li.type3.isColorDark > a .text1, .cmpItem-flex > ul.item > li.type3.isColorDark > div .text, .cmpItem-flex > ul.item > li.type3.isColorDark > div .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text1 { color: #aaa; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa, .cmpItem-flex > ul.item > li.type1.isColorDark > div .linkBa, .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa, .cmpItem-flex > ul.item > li.type2.isColorDark > a .linkBa, .cmpItem-flex > ul.item > li.type2.isColorDark > div .linkBa, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa, .cmpItem-flex > ul.item > li.type3.isColorDark > a .linkBa, .cmpItem-flex > ul.item > li.type3.isColorDark > div .linkBa, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa { float: left; padding: 0 40px; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa span, .cmpItem-flex > ul.item > li.type1.isColorDark > div .linkBa span, .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorDark > a .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorDark > div .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorDark > a .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorDark > div .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span { color: #fff; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa span:before, .cmpItem-flex > ul.item > li.type1.isColorDark > div .linkBa span:before, .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorDark > a .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorDark > div .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorDark > a .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorDark > div .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:before { background-color: #fff; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -608px -87px; } .cmpItem-flex > ul.item > li.type1.isColorGray > a, .cmpItem-flex > ul.item > li.type1.isColorGray > div, .cmpItem-flex > ul.item > li.type2.isColorGray > a, .cmpItem-flex > ul.item > li.type2.isColorGray > div, .cmpItem-flex > ul.item > li.type3.isColorGray > a, .cmpItem-flex > ul.item > li.type3.isColorGray > div { color: #333; } .cmpItem-flex > ul.item > li.type1.isColorGray > a .text, .cmpItem-flex > ul.item > li.type1.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text, .cmpItem-flex > ul.item > li.type1.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text, .cmpItem-flex > ul.item > li.type2.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text, .cmpItem-flex > ul.item > li.type2.isColorGray > div .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text, .cmpItem-flex > ul.item > li.type3.isColorGray > a .text1, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text, .cmpItem-flex > ul.item > li.type3.isColorGray > div .text1 { color: #333; } .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span { color: #333; } .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:before, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:before { background-color: #0093d0; } .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -608px -108px; } .cmpItem-flex > ul.item > li.type1 { overflow: hidden; border-top: 1px solid gainsboro; } .cmpItem-flex > ul.item > li.type2 + .type1 { border-top: none; } .cmpItem-flex > ul.item > li.type2 { height: 449px; } .cmpItem-flex > ul.item > li.type2 > a .lead, .cmpItem-flex > ul.item > li.type2 > div .lead { line-height: 1.2; font-size: 20px; font-size: 2rem; position: relative; margin-bottom: 0; padding: 60px 32px 18px; } .cmpItem-flex > ul.item > li.type2 > a .lead:after, .cmpItem-flex > ul.item > li.type2 > div .lead:after { position: absolute; z-index: 1; top: 40px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpItem-flex > ul.item > li.type2 > a .lead:after, .cmpItem-flex > ul.item > li.type2 > div .lead:after { display: inline-block; } .cmpItem-flex > ul.item > li.type3 { margin: 0; border-top: 1px solid gainsboro; } .cmpItem-flex > ul.item > li.type3 iframe { width: 100%; height: 338px; } .cmpItem-flex.slideR > .slideWrap { float: right; border-right: none; border-left: 1px solid gainsboro; } .cmpItem-flex.slideR > .nav { right: 50px; } .cmpItem-flex.slideR > .item { margin: 0 0 0 -1px; } .cmpItem-flex.slideR > .item li { border-right: none !important; } .cmpItem-flex.slideOnly > .slideWrap { top: 0; float: none; width: 100%; border-right: none; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide { height: 450px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li { width: 1200px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb { float: left; width: 50%; height: 450px; margin: -1px 0 0 -1px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb > a, .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb > div { width: 100%; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb > a img, .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb > div img { width: 100%; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; position: relative; float: left; width: 50%; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 50px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: #f5f7f8; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .text { float: left; width: 50%; margin-bottom: 1.5em; padding: 0 40px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li .listLinkTy3 { left: 600px; } .cmpItem-flex.slideOnly > ul.nav { right: 50px; } .cmpItem-flex.slideNone { border-width: 1px 1px 0; } .cmpItem-flex.slideNone > .slideWrap { top: 0; float: none; width: 100%; border-right: none; } .cmpItem-flex.slideNone > .slideWrap > ul.slide { width: 100%; height: 438px; background-color: #fff; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li { overflow: hidden; width: 1200px; border-bottom: 1px solid gainsboro; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li.isBgColor1 { background-color: #f5f7f8; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li.isBgColor1 > .lead { position: relative; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li.isBgColor1 > .lead:after { position: absolute; z-index: 1; top: 40px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: #f5f7f8; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb { float: left; width: 50%; height: 450px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb > a, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb > div { width: 100%; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb > a img, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb > div img { width: 100%; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; position: relative; float: left; width: 50%; margin-bottom: 0; padding: 40px 40px 24px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 50px; left: -49px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: white; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead .sub { font-size: 18px; font-size: 1.8rem; font-weight: bold; position: relative; top: -12px; display: inline-block; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead > a:hover { text-decoration: underline; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead1, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .text, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .info { float: left; width: 50%; margin-bottom: 1.5em; padding: 0 40px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead1 { font-size: 20px; font-size: 2rem; font-weight: normal; margin-bottom: 24px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .info { margin-top: -20px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li .linkBa, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li .listLinkTy3 { left: 600px; margin-bottom: 0; padding-right: 0; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 { position: relative; overflow: hidden; border: 1px solid gainsboro; } .cmpItem1 a:hover { cursor: default; text-decoration: none; } .cmpItem1 .text { color: #777; } .cmpItem1 > ul { position: relative; left: 0; width: 1000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem1 > ul > li { position: relative; float: left; width: 10%; background-color: #fff; } .cmpItem1 > ul > li > .hdg { position: absolute; z-index: -1; } .cmpItem1 ul.slide { background-color: #fff; } .cmpItem1 ul.slide > li { float: left; width: 299px; border: 1px solid gainsboro; background-color: #fff; } .cmpItem1 ul.slide > li > a { position: relative; display: block; width: 100%; height: 100%; } .cmpItem1 ul.slide > li > a > .thumb { display: table; width: 100%; table-layout: fixed; text-align: center; } .cmpItem1 ul.slide > li > a > .thumb > span { display: table-cell; width: 100%; vertical-align: middle; } .cmpItem1 ul.slide > li > a > .data { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; } .cmpItem1 ul.slide > li > a > .data > .lead { line-height: 1.2; font-size: 14px; font-size: 1.4rem; } .cmpItem1 ul.slide > li > a > .data > div > span.price { font-size: 14px; font-size: 1.4rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpItem1 ul.slide > li > a > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; color: #777; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmpItem1 ul.slide > li.type1 { overflow: hidden; width: 600px; height: 710px; border-width: 0; background-color: #f5f6f8; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span { height: 600px; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span img { width: 100%; } .cmpItem1 ul.slide > li.type1 > a > .thumb.taC > span { padding-bottom: 25%; } .cmpItem1 ul.slide > li.type1 > a > .thumb.taC > span img { width: auto; max-width: 100%; } .cmpItem1 ul.slide > li.type1 > a > .data { position: relative; position: absolute; padding: 24px 32px 20px 32px; } .cmpItem1 ul.slide > li.type1 > a > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpItem1 ul.slide > li.type1 > a > .data > .lead { margin-bottom: 10px; font-size: 25px; font-size: 2.5rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmpItem1 ul.slide > li.type1 > a > .data > div > span.price { font-size: 16px; font-size: 1.6rem; } .cmpItem1 ul.slide > li.type1 > a > .data > div > span.brand { font-size: 12px; font-size: 1.2rem; } .cmpItem1 ul.slide > li.type1 + .type2, .cmpItem1 ul.slide > li.type1 + .type2 + .type2, .cmpItem1 ul.slide > li.type1 + .type2 + .type3, .cmpItem1 ul.slide > li.type1 + .type3, .cmpItem1 ul.slide > li.type1 + .type3 + .type3 { border-width: 0 0 0 1px; } .cmpItem1 ul.slide > li.type2 > a > .thumb > span img, .cmpItem1 ul.slide > li.type3 > a > .thumb > span img { max-width: 234px; height: auto; } .cmpItem1 ul.slide > li.type2 > a > .data, .cmpItem1 ul.slide > li.type3 > a > .data { position: absolute; padding: 24px 32px 24px 32px; } .cmpItem1 ul.slide > li.type2 > a > .data > .lead, .cmpItem1 ul.slide > li.type3 > a > .data > .lead { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmpItem1 ul.slide > li.type2 { float: right; height: 720px; } .cmpItem1 ul.slide > li.type2 .thumb > span { height: 600px; } .cmpItem1 ul.slide > li.type3 { height: 360px; border-width: 1px 0 0 1px; } .cmpItem1 ul.slide > li.type3 .thumb > span { height: 264px; vertical-align: bottom; } .cmpItem2, .cmpItem2-flex { position: relative; overflow: hidden; width: 100%; border: 1px solid gainsboro; background-color: #fff; } .cmpItem2 .thumb > span > img:hover, .cmpItem2-flex .thumb > span > img:hover { cursor: pointer; text-decoration: underline; } .cmpItem2 .listLinkTy4, .cmpItem2 .linkBa, .cmpItem2-flex .listLinkTy4, .cmpItem2-flex .linkBa { position: absolute; bottom: 20px; margin-bottom: 0; } .cmpItem2 .slideWrap, .cmpItem2-flex .slideWrap { margin: 0 -1px; } .cmpItem2 ul.slide, .cmpItem2-flex ul.slide { position: relative; left: 0; width: 2000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem2 ul.slide > li, .cmpItem2-flex ul.slide > li { float: left; width: 1.25%; height: 100%; border: 1px solid gainsboro; border-width: 0 1px 0 0; } .cmpItem2 ul.slide > li:nth-child(4n), .cmpItem2-flex ul.slide > li:nth-child(4n) { border-right-width: 0; } .cmpItem2 ul.slide > li > .thumb a, .cmpItem2-flex ul.slide > li > .thumb a { display: block; } .cmpItem2 ul.slide > li > .thumb a img, .cmpItem2-flex ul.slide > li > .thumb a img { display: block; width: 100%; } .cmpItem2 ul.slide > li > .data, .cmpItem2-flex ul.slide > li > .data { position: relative; min-height: 180px; padding: 24px 32px 60px 32px; } .cmpItem2 ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem2 ul.slide > li > .data.isNomore, .cmpItem2-flex ul.slide > li > .data.isNomore { padding-bottom: 20px; } .cmpItem2 ul.slide > li > .data > .lead, .cmpItem2-flex ul.slide > li > .data > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; margin-bottom: 10px; } .cmpItem2 ul.slide > li > .data > .lead1, .cmpItem2-flex ul.slide > li > .data > .lead1 { margin-bottom: 20px; color: #777; } .cmpItem2 ul.slide > li > .data > .lead1 > a, .cmpItem2-flex ul.slide > li > .data > .lead1 > a { display:block; } .cmpItem2 ul.slide > li > .data > .lead1 span, .cmpItem2-flex ul.slide > li > .data > .lead1 span { margin-bottom:15px; font-size:2rem; display:block; color:#333; } .cmpItem2 ul.slide > li > .data > .release, .cmpItem2-flex ul.slide > li > .data > .release { font-size: 12px; font-size: 1.2rem; display: inline-block; margin-bottom: -5px; padding: 5px 12px; color: #737373; border-radius: 2em; background-color: #f5f7f8; } .cmpItem2 ul.slide > li > .data > ul.list, .cmpItem2-flex ul.slide > li > .data > ul.list { margin-top: 15px; } .cmpItem2 ul.slide > li > .data > ul.list > li > a, .cmpItem2-flex ul.slide > li > .data > ul.list > li > a { display: block; padding: 10px 0 10px 35px; } .cmpItem2 ul.slide > li > .data > ul.list > li > a:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li > a:before { top: 50%; right: 0; width: 8px; height: 14px; margin-top: -7px; background-position: -593px -171px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconVideo:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconVideo:before { top: 50%; left: 5px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -233px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconSite:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconSite:before { top: 50%; left: 2px; width: 18px; height: 18px; margin-top: -9px; background-position: -375px -305px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconTrailer:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconTrailer:before { top: 50%; left: 2px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -400px -363px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconTicket:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconTicket:before { top: 50%; left: 0; width: 24px; height: 24px; margin-top: -12px; background-position: -406px -484px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconShopping:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconShopping:before { top: 50%; left: 0; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -30px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconDownload:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconDownload:before { top: 50%; left: 0; width: 22px; height: 19px; margin-top: -9.5px; background-position: -150px -551px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconDownload2:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconDownload2:before { top: 50%; left: 0; width: 22px; height: 20px; margin-top: -10px; background-position: -122px -551px; } .cmpItem2 ul.slide > li > .data > ul.list > li.iconTime:before, .cmpItem2-flex ul.slide > li > .data > ul.list > li.iconTime:before { top: 50%; left: 0; width: 18px; height: 18px; margin-top: -9px; background-position: -352px -551px; } .cmpItem2 > ul.navController1, .cmpItem2-flex > ul.navController1 { position: absolute; top: 22%; margin-top: -30px; } .cmpItem2 > ul.navController1 > li, .cmpItem2-flex > ul.navController1 > li { position: relative; } .cmpItem2.slideNone, .cmpItem2-flex.slideNone { border-width: 0 0 0 1px; } .cmpItem2.slideNone .slideWrap, .cmpItem2-flex.slideNone .slideWrap { margin: 0; } .cmpItem2.slideNone ul.slide, .cmpItem2-flex.slideNone ul.slide { width: 100%; } .cmpItem2.slideNone ul.slide > li, .cmpItem2-flex.slideNone ul.slide > li { width: 25%; border-width: 1px 1px 1px 0; } .cmpItem2-flex ul.slide { display: flex; flex-wrap: wrap; } .cmpItem2-flex ul.slide > li { float: none; height: auto; position: relative; } .cmpItem2-flex ul.slide > li > .thumb { position: relative; } .cmpItem2-flex ul.slide > li > .thumb:after { position: absolute; z-index: 1; bottom: -1px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem2-flex ul.slide > li > .data { position: static; } .cmpItem3 { position: relative; } .cmpItem3 .thumb img:hover, .cmpItem3 .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem3 > .slideWrap { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; } .cmpItem3 > .slideWrap:after { position: absolute; z-index: 2; top: 0; left: 0; display: inline-block; width: 2px; height: 100%; content: ''; background-color: #fff; } .cmpItem3 > .slideWrap:after { right: 0; left: auto; } .cmpItem3 ul.slide { position: relative; left: 0; width: 2000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem3 ul.slide > li { float: left; width: 1.25%; border: 1px solid gainsboro; border-width: 0 0 0 1px; } .cmpItem3 ul.slide > li:first-child, .cmpItem3 ul.slide > li:nth-child(4n+1) { border-width: 0; } .cmpItem3 ul.slide > li > a { display: block; padding: 32px 32px 24px; } .cmpItem3 ul.slide > li > a:hover { cursor: default; text-decoration: none; } .cmpItem3 ul.slide > li > a > .thumb { width: 100%; margin-bottom: 20px; text-align: center; } .cmpItem3 ul.slide > li > a > .thumb > span { display: inline-block; width: 100%; } .cmpItem3 ul.slide > li > a > .thumb > span img { position: relative; /* -------------------------------------------------------------- 修正時期：201908 component名： g01) ページレコメンド[自動] 対象箇所：全画面 -------------------------------------------------------------- */ width: auto; /* -------------------------------------------------------------- 修正時期：201908 ここまで -------------------------------------------------------------- */ max-width: 234px; max-height: 234px; } .cmpItem3 ul.slide > li > a > .data { font-size: 14px; font-size: 1.4rem; margin: 0 auto; } .cmpItem3 ul.slide > li > a > .data > .lead { margin-bottom: 3px; } .cmpItem3 ul.slide > li > a > .data > .lead { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .cmpItem3 ul.slide > li > a > .data > p.blank { color: #777; font-size: 80%; margin: 5px 0 0; } .cmpItem3 ul.slide > li > a > .data > div > span.price { font-size: 14px; font-size: 1.4rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpItem3 ul.slide > li > a > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; color: #777; } .cmpItem3 ul.slide > li > a > .data span.time { font-size: 14px; font-size: 1.4rem; color: #777; } .cmpItem3.lineNone .slideWrap { padding: 0 20px; } .cmpItem3.lineNone ul.slide > li { border: none; } .cmpItem3.lineNone ul.slide > li > a { padding: 40px 20px 20px 20px; } .cmpItem3.lineNone ul.slide > li > a span img { max-width: 100%; } .cmpItem3.bdrTopNone .slideWrap { border-width: 0 0 0 1px; } .cmpItem3.bdrTopNone .slideWrap li { border-width: 1px 1px 1px 0 !important; } .cmpItem3 > ul.navController1 { position: absolute; top: 50%; margin-top: -30px; } .cmpItem3 > ul.navController1 > li { position: relative; z-index: 10; } .cmpItem3.typeNarrow ul.slide > li > a { padding: 20px 42px 20px !important; } .cmpItem3.typeNarrow ul.slide > li > a > .thumb { margin-bottom: 0; } .cmpItem3.typeNarrow ul.slide > li > a > .thumb > span, .cmpItem3.typeNarrow ul.slide > li > a > .thumb > span > img { width: 100%; } /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex { position: relative; } .cmpItem3-flex .thumb img:hover, .cmpItem3-flex .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem3-flex > .slideWrap { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; } .cmpItem3-flex > .slideWrap:after { position: absolute; z-index: 2; top: 0; left: 0; display: inline-block; width: 2px; height: 100%; content: ''; background-color: #fff; } .cmpItem3-flex > .slideWrap:after { right: 0; left: auto; } .cmpItem3-flex ul.slide { display: flex; position: relative; left: 0; width: 2000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem3-flex ul.slide > li { width: 1.25%; border: 1px solid gainsboro; border-width: 0 0 0 1px; } .cmpItem3-flex ul.slide > li:first-child, .cmpItem3-flex ul.slide > li:nth-child(4n+1) { border-width: 0; } .cmpItem3-flex ul.slide > li > a { display: block; padding: 32px 32px 24px; } .cmpItem3-flex ul.slide > li > a:hover { cursor: default; text-decoration: none; } .cmpItem3-flex ul.slide > li > a > .thumb { width: 100%; margin-bottom: 20px; text-align: center; } .cmpItem3-flex ul.slide > li > a > .thumb > span { display: inline-block; width: 100%; } .cmpItem3-flex ul.slide > li > a > .thumb > span img { position: relative; /* -------------------------------------------------------------- 修正時期：201908 component名： g01) ページレコメンド[自動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ width: auto; /* -------------------------------------------------------------- 修正時期：201908 ここまで -------------------------------------------------------------- */ max-width: 234px; max-height: 234px; } /* -------------------------------------------------------------- 追記時期：201908 component名： g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex.lineNone ul.slide > li > a span img { max-width: 100%; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem3-flex ul.slide > li > a > .data { font-size: 14px; font-size: 1.4rem; margin: 0 auto; } .cmpItem3-flex ul.slide > li > a > .data > .lead { margin-bottom: 3px; } .cmpItem3-flex ul.slide > li > a > .data > .lead { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .cmpItem3-flex ul.slide > li > a > .data > p.blank { color: #777; font-size: 80%; margin: 5px 0 0; } .cmpItem3-flex ul.slide > li > a > .data > div > span.price { font-size: 14px; font-size: 1.4rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpItem3-flex ul.slide > li > a > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; color: #777; } .cmpItem3-flex ul.slide > li > a > .data span.time { font-size: 14px; font-size: 1.4rem; color: #777; } .cmpItem3-flex.lineNone .slideWrap { padding: 0 20px; } .cmpItem3-flex.lineNone ul.slide > li { border: none; } .cmpItem3-flex.lineNone ul.slide > li > a { padding: 40px 20px 20px 20px; } .cmpItem3.lineNone ul.slide > li > a span img { max-width: 100%; } .cmpItem3-flex.bdrTopNone .slideWrap { border-width: 0 0 0 1px; } .cmpItem3-flex.bdrTopNone .slideWrap li { border-width: 1px 1px 1px 0 !important; } .cmpItem3-flex > ul.navController1 { position: absolute; top: 50%; margin-top: -30px; } .cmpItem3-flex > ul.navController1 > li { position: relative; z-index: 10; } .cmpItem3-flex.typeNarrow ul.slide > li > a { padding: 20px 42px 20px !important; } .cmpItem3-flex.typeNarrow ul.slide > li > a > .thumb { margin-bottom: 0; } .cmpItem3-flex.typeNarrow ul.slide > li > a > .thumb > span, .cmpItem3-flex.typeNarrow ul.slide > li > a > .thumb > span > img { width: 100%; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 { border: 1px solid gainsboro; border-width: 1px 0 0 1px; } .cmpItem4 .thumb > span > img:hover, .cmpItem4 .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem4 a { display: block; } .cmpItem4 a:hover { cursor: default; text-decoration: none; } .cmpItem4 > ul.slide { position: relative; left: 0; -webkit-transition: left .5s; transition: left .5s; background-color: #fff; } .cmpItem4 > ul.slide > li, .cmpItem4 > ul.slideNone > li { float: left; overflow: hidden; height: 440px; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem4 > ul.slide > li .data > .lead, .cmpItem4 > ul.slideNone > li .data > .lead { line-height: 1.2; margin-bottom: 10px; } .cmpItem4 > ul.slide > li.type1, .cmpItem4 > ul.slide > li.type4, .cmpItem4 > ul.slideNone > li.type1, .cmpItem4 > ul.slideNone > li.type4 { width: 50%; background-color: #fff; } .cmpItem4 > ul.slide > li.type1 > a > .thumb, .cmpItem4 > ul.slide > li.type1 > a > .data, .cmpItem4 > ul.slide > li.type4 > a > .thumb, .cmpItem4 > ul.slide > li.type4 > a > .data, .cmpItem4 > ul.slideNone > li.type1 > a > .thumb, .cmpItem4 > ul.slideNone > li.type1 > a > .data, .cmpItem4 > ul.slideNone > li.type4 > a > .thumb, .cmpItem4 > ul.slideNone > li.type4 > a > .data { float: left; width: 50%; } .cmpItem4 > ul.slide > li.type1 .thumb, .cmpItem4 > ul.slide > li.type4 .thumb, .cmpItem4 > ul.slideNone > li.type1 .thumb, .cmpItem4 > ul.slideNone > li.type4 .thumb { position: relative; display: table; height: 439px; text-align: center; background-color: #f5f7f8; } .cmpItem4 > ul.slide > li.type1 .thumb span, .cmpItem4 > ul.slide > li.type4 .thumb span, .cmpItem4 > ul.slideNone > li.type1 .thumb span, .cmpItem4 > ul.slideNone > li.type4 .thumb span { display: table-cell; width: 100%; vertical-align: middle; } .cmpItem4 > ul.slide > li.type1 .thumb span img, .cmpItem4 > ul.slide > li.type4 .thumb span img, .cmpItem4 > ul.slideNone > li.type1 .thumb span img, .cmpItem4 > ul.slideNone > li.type4 .thumb span img { width: 200px; max-width: 200px; height: auto; } .cmpItem4 > ul.slide > li.type1 .data, .cmpItem4 > ul.slideNone > li.type1 .data { position: relative; padding: 60px 40px 0; } .cmpItem4 > ul.slide > li.type4 .data, .cmpItem4 > ul.slideNone > li.type4 .data { position: relative; padding: 60px 32px 0; } .cmpItem4 > ul.slide > li.type1 .data:after, .cmpItem4 > ul.slide > li.type4 .data:after, .cmpItem4 > ul.slideNone > li.type1 .data:after, .cmpItem4 > ul.slideNone > li.type4 .data:after { position: absolute; z-index: 1; top: 60px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem4 > ul.slide > li.type1 .data > .lead, .cmpItem4 > ul.slide > li.type4 .data > .lead, .cmpItem4 > ul.slideNone > li.type1 .data > .lead, .cmpItem4 > ul.slideNone > li.type4 .data > .lead { font-size: 20px; font-size: 2rem; margin-bottom: 18px; } .cmpItem4 > ul.slide > li.type1 .data > .text, .cmpItem4 > ul.slide > li.type4 .data > .text, .cmpItem4 > ul.slideNone > li.type1 .data > .text, .cmpItem4 > ul.slideNone > li.type4 .data > .text { margin-top: 15px; margin-bottom: 10px; color: #777; } .cmpItem4 > ul.slide > li.type1 .data > .release, .cmpItem4 > ul.slide > li.type4 .data > .release, .cmpItem4 > ul.slideNone > li.type1 .data > .release, .cmpItem4 > ul.slideNone > li.type4 .data > .release { margin-bottom: 10px; } .cmpItem4 > ul.slide > li.type1 .data > .btnBa, .cmpItem4 > ul.slide > li.type4 .data > .btnBa, .cmpItem4 > ul.slideNone > li.type1 .data > .btnBa, .cmpItem4 > ul.slideNone > li.type4 .data > .btnBa { margin-top: 30px; } .cmpItem4 > ul.slide > li.type4, .cmpItem4 > ul.slideNone > li.type4 { border-width: 0 0 1px 0; } .cmpItem4 > ul.slide > li.type5, .cmpItem4 > ul.slideNone > li.type5 { width: 50%; padding: 80px 55px; } .cmpItem4 > ul.slide > li.type5 > a > .thumb, .cmpItem4 > ul.slideNone > li.type5 > a > .thumb { display: inline-block; text-align: center; } .cmpItem4 > ul.slide > li.type2, .cmpItem4 > ul.slideNone > li.type2 { width: 25%; background-color: #fff; } .cmpItem4 > ul.slide > li.type2 > a, .cmpItem4 > ul.slideNone > li.type2 > a { padding: 30px 49px 42px 50px; } .cmpItem4 > ul.slide > li.type2 > a > .thumb, .cmpItem4 > ul.slideNone > li.type2 > a > .thumb { margin-bottom: 20px; } .cmpItem4 > ul.slide > li.type3, .cmpItem4 > ul.slideNone > li.type3 { width: 50%; height: 336px; } .cmpItem4 > ul.slide > li.type3 > a > .thumb, .cmpItem4 > ul.slide > li.type3 > a > .data, .cmpItem4 > ul.slideNone > li.type3 > a > .thumb, .cmpItem4 > ul.slideNone > li.type3 > a > .data { float: left; } .cmpItem4 > ul.slide > li.type3 .thumb, .cmpItem4 > ul.slideNone > li.type3 .thumb { position: relative; width: 38.5%; } .cmpItem4 > ul.slide > li.type3 .thumb > span, .cmpItem4 > ul.slideNone > li.type3 .thumb > span { display: block; } .cmpItem4 > ul.slide > li.type3 .thumb > span img, .cmpItem4 > ul.slideNone > li.type3 .thumb > span img { width: 100%; } .cmpItem4 > ul.slide > li.type3 .data, .cmpItem4 > ul.slideNone > li.type3 .data { position: relative; width: 61.5%; padding: 24px 32px 0 32px; } .cmpItem4 > ul.slide > li.type3 .data:after, .cmpItem4 > ul.slideNone > li.type3 .data:after { position: absolute; z-index: 1; top: 35px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem4 > ul.slide > li.type3 .data > .lead, .cmpItem4 > ul.slideNone > li.type3 .data > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; margin-bottom: 18px; } .cmpItem4 > ul.slide > li.type3 .data > dl.list, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list { margin-bottom: 15px; } .cmpItem4 > ul.slide > li.type3 .data > dl.list > dt, .cmpItem4 > ul.slide > li.type3 .data > dl.list > dd, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list > dt, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list > dd { display: inline-block; float: left; } .cmpItem4 > ul.slide > li.type3 .data > dl.list > dt, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list > dt { clear: both; } .cmpItem4 > ul.slide > li.type3 .data > dl.list > dt:after, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list > dt:after { display: inline-block; content: '：'; } .cmpItem4 > ul.slide > li.type3 .data > dl.list > dd, .cmpItem4 > ul.slideNone > li.type3 .data > dl.list > dd { margin-bottom: 10px; color: #777; } /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex { border: 1px solid gainsboro; border-width: 1px 0 0 1px; } .cmpItem4-flex .thumb > span > img:hover, .cmpItem4-flex .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem4-flex a { display: block; } .cmpItem4-flex a:hover { cursor: default; text-decoration: none; } .cmpItem4-flex > ul.slide { position: relative; left: 0; -webkit-transition: left .5s; transition: left .5s; background-color: #fff; display: flex; flex-wrap: wrap; } .cmpItem4-flex > ul.slide > li, .cmpItem4-flex > ul.slideNone > li { overflow: hidden; height: 440px; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem4-flex > ul.slide > li .data > .lead, .cmpItem4-flex > ul.slideNone > li .data > .lead { line-height: 1.2; margin-bottom: 10px; } .cmpItem4-flex > ul.slide > li.type1, .cmpItem4-flex > ul.slide > li.type4, .cmpItem4-flex > ul.slideNone > li.type1, .cmpItem4-flex > ul.slideNone > li.type4 { width: 50%; background-color: #fff; } .cmpItem4-flex > ul.slide > li.type1 > a, .cmpItem4-flex > ul.slide > li.type4 > a, .cmpItem4-flex > ul.slideNone > li.type1 > a, .cmpItem4-flex > ul.slideNone > li.type4 > a { display: flex; } .cmpItem4-flex > ul.slide > li.type1 > a > .thumb, .cmpItem4-flex > ul.slide > li.type1 > a > .data, .cmpItem4-flex > ul.slide > li.type4 > a > .thumb, .cmpItem4-flex > ul.slide > li.type4 > a > .data, .cmpItem4-flex > ul.slideNone > li.type1 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type1 > a > .data, .cmpItem4-flex > ul.slideNone > li.type4 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type4 > a > .data { width: 50%; } .cmpItem4-flex > ul.slide > li.type1 .thumb, .cmpItem4-flex > ul.slide > li.type4 .thumb, .cmpItem4-flex > ul.slideNone > li.type1 .thumb, .cmpItem4-flex > ul.slideNone > li.type4 .thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 439px; text-align: center; background-color: #f5f7f8; } .cmpItem4-flex > ul.slide > li.type1 .thumb span, .cmpItem4-flex > ul.slide > li.type4 .thumb span, .cmpItem4-flex > ul.slideNone > li.type1 .thumb span, .cmpItem4-flex > ul.slideNone > li.type4 .thumb span { width: 100%; } .cmpItem4-flex > ul.slide > li.type1 .thumb span img, .cmpItem4-flex > ul.slide > li.type4 .thumb span img, .cmpItem4-flex > ul.slideNone > li.type1 .thumb span img, .cmpItem4-flex > ul.slideNone > li.type4 .thumb span img { width: 200px; max-width: 200px; height: auto; } .cmpItem4-flex > ul.slide > li.type1 .data, .cmpItem4-flex > ul.slideNone > li.type1 .data { position: relative; padding: 60px 40px 0; } .cmpItem4-flex > ul.slide > li.type4 .data, .cmpItem4-flex > ul.slideNone > li.type4 .data { position: relative; padding: 60px 32px 0; } .cmpItem4-flex > ul.slide > li.type1 .data:after, .cmpItem4-flex > ul.slide > li.type4 .data:after, .cmpItem4-flex > ul.slideNone > li.type1 .data:after, .cmpItem4-flex > ul.slideNone > li.type4 .data:after { position: absolute; z-index: 1; top: 60px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem4-flex > ul.slide > li.type1 .data > .lead, .cmpItem4-flex > ul.slide > li.type4 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type1 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type4 .data > .lead { font-size: 20px; font-size: 2rem; margin-bottom: 18px; } .cmpItem4-flex > ul.slide > li.type1 .data > .text, .cmpItem4-flex > ul.slide > li.type4 .data > .text, .cmpItem4-flex > ul.slideNone > li.type1 .data > .text, .cmpItem4-flex > ul.slideNone > li.type4 .data > .text { margin-top: 15px; margin-bottom: 10px; color: #777; } .cmpItem4-flex > ul.slide > li.type1 .data > .release, .cmpItem4-flex > ul.slide > li.type4 .data > .release, .cmpItem4-flex > ul.slideNone > li.type1 .data > .release, .cmpItem4-flex > ul.slideNone > li.type4 .data > .release { margin-bottom: 10px; } .cmpItem4-flex > ul.slide > li.type1 .data > .btnBa, .cmpItem4-flex > ul.slide > li.type4 .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type1 .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type4 .data > .btnBa { margin-top: 30px; } .cmpItem4-flex > ul.slide > li.type4, .cmpItem4-flex > ul.slideNone > li.type4 { border-width: 0 0 1px 0; } .cmpItem4-flex > ul.slide > li.type5, .cmpItem4-flex > ul.slideNone > li.type5 { width: 50%; padding: 80px 55px; } .cmpItem4-flex > ul.slide > li.type5 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type5 > a > .thumb { display: inline-block; text-align: center; } .cmpItem4-flex > ul.slide > li.type2, .cmpItem4-flex > ul.slideNone > li.type2 { width: 25%; background-color: #fff; } .cmpItem4-flex > ul.slide > li.type2 > a, .cmpItem4-flex > ul.slideNone > li.type2 > a { padding: 30px 49px 42px 50px; } .cmpItem4-flex > ul.slide > li.type2 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type2 > a > .thumb { margin-bottom: 20px; } .cmpItem4-flex > ul.slide > li.type3, .cmpItem4-flex > ul.slideNone > li.type3 { width: 50%; height: 336px; } .cmpItem4-flex > ul.slide > li.type3 > a > .thumb, .cmpItem4-flex > ul.slide > li.type3 > a > .data, .cmpItem4-flex > ul.slideNone > li.type3 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type3 > a > .data { float: left; } .cmpItem4-flex > ul.slide > li.type3 .thumb, .cmpItem4-flex > ul.slideNone > li.type3 .thumb { position: relative; width: 38.5%; } .cmpItem4-flex > ul.slide > li.type3 .thumb > span, .cmpItem4-flex > ul.slideNone > li.type3 .thumb > span { display: block; } .cmpItem4-flex > ul.slide > li.type3 .thumb > span img, .cmpItem4-flex > ul.slideNone > li.type3 .thumb > span img { width: 100%; } .cmpItem4-flex > ul.slide > li.type3 .data, .cmpItem4-flex > ul.slideNone > li.type3 .data { position: relative; width: 61.5%; padding: 24px 32px 0 32px; } .cmpItem4-flex > ul.slide > li.type3 .data:after, .cmpItem4-flex > ul.slideNone > li.type3 .data:after { position: absolute; z-index: 1; top: 35px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem4-flex > ul.slide > li.type3 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type3 .data > .lead { font-size: 25px; font-size: 2.5rem; line-height: 1.2; margin-bottom: 18px; } .cmpItem4-flex > ul.slide > li.type3 .data > dl.list, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list { margin-bottom: 15px; } .cmpItem4-flex > ul.slide > li.type3 .data > dl.list > dt, .cmpItem4-flex > ul.slide > li.type3 .data > dl.list > dd, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list > dt, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list > dd { display: inline-block; float: left; } .cmpItem4-flex > ul.slide > li.type3 .data > dl.list > dt, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list > dt { clear: both; } .cmpItem4-flex > ul.slide > li.type3 .data > dl.list > dt:after, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list > dt:after { display: inline-block; content: '：'; } .cmpItem4-flex > ul.slide > li.type3 .data > dl.list > dd, .cmpItem4-flex > ul.slideNone > li.type3 .data > dl.list > dd { margin-bottom: 10px; color: #777; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem5 { position: relative; } .cmpItem5 .thumb > span > img:hover, .cmpItem5 .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem5 > .slideWrap { position: relative; border: 1px solid gainsboro; border-width: 1px 0 0 1px; background-color: #fff; } .cmpItem5 ul.slide { position: relative; width: 100%; } .cmpItem5 ul.slide > li { float: left; width: 25%; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem5 ul.slide > li > a { position: relative; display: block; height: 100%; padding: 40px 40px 32px; } .cmpItem5 ul.slide > li > a:hover { cursor: default; text-decoration: none; } .cmpItem5 ul.slide > li > a > .iconStar, .cmpItem5 ul.slide > li > a > .iconNew { position: absolute; top: 0; right: 0; display: inline-block; overflow: hidden; width: 53px; height: 46px; } .cmpItem5 ul.slide > li > a > .iconStar:before, .cmpItem5 ul.slide > li > a > .iconNew:before { top: 0; right: 0; width: 53px; height: 46px; margin-top: 0; background-position: -54px -384px; } .cmpItem5 ul.slide > li > a > .iconStar:before, .cmpItem5 ul.slide > li > a > .iconNew:before { position: static; } .cmpItem5 ul.slide > li > a > .iconStar > span, .cmpItem5 ul.slide > li > a > .iconNew > span { position: relative; z-index: -1; } .cmpItem5 ul.slide > li > a > .iconNew { overflow: hidden; width: 53px; height: 46px; } .cmpItem5 ul.slide > li > a > .iconNew:before { top: 0; right: 0; width: 53px; height: 46px; margin-top: 0; background-position: -113px -384px; } .cmpItem5 ul.slide > li > a > .iconNew:before { position: static; } .cmpItem5 ul.slide > li > a > .thumb { margin-bottom: 20px; text-align: center; } .cmpItem5 ul.slide > li > a > .thumb img { width: 100%; } .cmpItem5 ul.slide > li > a > .thumb > img { position: relative; z-index: 1; max-width: 200px; height: auto; } .cmpItem5 ul.slide > li > a > .data > .lead { margin-bottom: 3px; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div >.data { font-size: 14px; font-size: 1.4rem; } .cmpItem5 ul.slide > li > a > .data > div > span.release, .cmpItem5 ul.slide > li > a > .data > div > span.text, .cmpItem5 ul.slide > li > a > .data > div > span.star { display: inline-block; margin-bottom: 10px; } .cmpItem5 ul.slide > li > a > .data > div > span.release { font-weight: bold; margin: 0; } .cmpItem5 ul.slide > li > a > .data > p.blank { color: #777; font-size: 80%; margin: 5px 0 0; } .cmpItem5 ul.slide > li > a > .data > div > span.star { overflow: hidden; vertical-align: bottom; text-indent: -3em; } .cmpItem5 ul.slide > li > a > .data > div > span.star > span.icon:after { margin-right: 3px; content: '★'; color: #c81717; } .cmpItem5 ul.slide > li > a > .data > div > span.star > span.text:hover { cursor: pointer; text-decoration: underline; } .cmpItem5 ul.slide > li > a > .data ul.icon { line-height: 1.2; width: 100%; margin-bottom: -10px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li { float: left; width: 33.33333%; height: 40px; text-align: center; border-left: 1px solid #e5e5e5; } .cmpItem5 ul.slide > li > a > .data ul.icon > li:first-child { border: none; } .cmpItem5 ul.slide > li > a > .data ul.icon > li > span { display: inline-block; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconDvd > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconDvd > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -92px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconDvd > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBluray > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBluray > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -368px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBluray > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOndemand > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOndemand > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px 0; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOndemand > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconMovienex > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconMovienex > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -322px -384px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconMovienex > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: 0 -438px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOther > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOther > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -100px -438px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconOther > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconHeadphone > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconHeadphone > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -138px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconHeadphone > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconWebcast > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconWebcast > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -222px -384px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconWebcast > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame1 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame1 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -376px -384px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame1 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame2 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame2 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -276px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame2 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame3 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame3 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -184px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame3 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame4 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame4 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -46px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame4 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame5 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame5 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -322px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame5 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame6 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame6 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -276px -384px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame6 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame8 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame8 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -54px -438px; } .cmpItem5 ul.slide > li > a > .data ul.icon > li.iconGame8 > span:before { position: static; } .cmpItem5 ul.slide > li > a > .data ul.icon > li:last-child { text-align: right; } .cmpItem5 ul.slide > li > a > .data ul.icon > li:first-child { text-align: left; } .cmpItem5 ul.slide > li > a > .data ul.icon2 { margin-top: 20px; margin-bottom: -5px; } .cmpItem5 ul.slide > li > a > .data ul.icon2 > li { display: inline-block; margin-right: 12px; padding-left: 17px; border-left: 1px solid gainsboro; } .cmpItem5 ul.slide > li > a > .data ul.icon2 > li > span { font-size: 12px; font-size: 1.2rem; font-weight: bold; display: inline-block; padding: 2px 6px; color: #fff; background-color: #999; } .cmpItem5 ul.slide > li > a > .data ul.icon2 > li:first-child { padding-left: 0; border: none; } .cmpItem5.bdrTopNone .slideWrap { border-width: 0 0 0 1px; } .cmpItem5.bdrTopNone .slideWrap li { border-width: 1px 1px 1px 0 !important; } .cmpItem5 > .linkShowMore { display: none; } /* -------------------------------------------------------------- 追記時期：201908 component名： k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem5-flex { position: relative; } .cmpItem5-flex .thumb > span > img:hover, .cmpItem5-flex .data > .lead:hover { cursor: pointer; text-decoration: underline; } .cmpItem5-flex > .slideWrap { position: relative; border: 1px solid gainsboro; border-width: 1px 0 0 1px; background-color: #fff; } .cmpItem5-flex ul.slide { position: relative; width: 100%; display: flex; flex-wrap: wrap; } .cmpItem5-flex ul.slide > li { width: 25%; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem5-flex ul.slide > li > a { position: relative; display: block; height: 100%; padding: 40px 40px 32px; } .cmpItem5-flex ul.slide > li > a:hover { cursor: default; text-decoration: none; } .cmpItem5-flex ul.slide > li > a > .iconStar, .cmpItem5-flex ul.slide > li > a > .iconNew { position: absolute; top: 0; right: 0; display: inline-block; overflow: hidden; width: 53px; height: 46px; } .cmpItem5-flex ul.slide > li > a > .iconStar:before, .cmpItem5-flex ul.slide > li > a > .iconNew:before { top: 0; right: 0; width: 53px; height: 46px; margin-top: 0; background-position: -54px -384px; } .cmpItem5-flex ul.slide > li > a > .iconStar:before, .cmpItem5-flex ul.slide > li > a > .iconNew:before { position: static; } .cmpItem5-flex ul.slide > li > a > .iconStar > span, .cmpItem5-flex ul.slide > li > a > .iconNew > span { position: relative; z-index: -1; } .cmpItem5-flex ul.slide > li > a > .iconNew { overflow: hidden; width: 53px; height: 46px; } .cmpItem5-flex ul.slide > li > a > .iconNew:before { top: 0; right: 0; width: 53px; height: 46px; margin-top: 0; background-position: -113px -384px; } .cmpItem5-flex ul.slide > li > a > .iconNew:before { position: static; } .cmpItem5-flex ul.slide > li > a > .thumb { margin-bottom: 20px; text-align: center; } .cmpItem5-flex ul.slide > li > a > .thumb img { width: 100%; } .cmpItem5-flex ul.slide > li > a > .thumb > img { position: relative; z-index: 1; max-width: 200px; height: auto; } .cmpItem5-flex ul.slide > li > a > .data > .lead { margin-bottom: 3px; } .cmpItem5-flex.listImage ul.slide > div > div > li > a > .data, .cmpItem5-flex.listImage ul.slide > div > div > li > div >.data { font-size: 14px; font-size: 1.4rem; } .cmpItem5-flex ul.slide > li > a > .data > div > span.release, .cmpItem5-flex ul.slide > li > a > .data > div > span.text, .cmpItem5-flex ul.slide > li > a > .data > div > span.star { display: inline-block; margin-bottom: 10px; } .cmpItem5-flex ul.slide > li > a > .data > div > span.release { font-weight: bold; margin: 0; } .cmpItem5-flex ul.slide > li > a > .data > p.blank { color: #777; font-size: 80%; margin: 5px 0 0; } .cmpItem5-flex ul.slide > li > a > .data > div > span.star { overflow: hidden; vertical-align: bottom; text-indent: -3em; } .cmpItem5-flex ul.slide > li > a > .data > div > span.star > span.icon:after { margin-right: 3px; content: '★'; color: #c81717; } .cmpItem5-flex ul.slide > li > a > .data > div > span.star > span.text:hover { cursor: pointer; text-decoration: underline; } .cmpItem5-flex ul.slide > li > a > .data ul.icon { line-height: 1.2; width: 100%; margin-bottom: -10px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li { float: left; width: 33.33333%; height: 40px; text-align: center; border-left: 1px solid #e5e5e5; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li:first-child { border: none; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li > span { display: inline-block; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconDvd > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconDvd > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -92px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconDvd > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBluray > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBluray > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -368px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBluray > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOndemand > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOndemand > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px 0; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOndemand > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconMovienex > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconMovienex > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -322px -384px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconMovienex > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: 0 -438px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconBlurayDvd > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOther > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOther > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -100px -438px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconOther > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconHeadphone > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconHeadphone > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -453px -138px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconHeadphone > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconWebcast > span { overflow: hidden; width: 48px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconWebcast > span:before { top: 0; left: 0; width: 48px; height: 40px; margin-top: 0; background-position: -222px -384px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconWebcast > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame1 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame1 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -376px -384px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame1 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame2 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame2 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -276px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame2 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame3 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame3 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -184px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame3 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame4 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame4 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -46px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame4 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame5 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame5 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -453px -322px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame5 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame6 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame6 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -276px -384px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame6 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame8 > span { overflow: hidden; width: 40px; height: 40px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame8 > span:before { top: 0; left: 0; width: 40px; height: 40px; margin-top: 0; background-position: -54px -438px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li.iconGame8 > span:before { position: static; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li:last-child { text-align: right; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li:first-child { text-align: left; } .cmpItem5-flex ul.slide > li > a > .data ul.icon2 { margin-top: 20px; margin-bottom: -5px; } .cmpItem5-flex ul.slide > li > a > .data ul.icon2 > li { display: inline-block; margin-right: 12px; padding-left: 17px; border-left: 1px solid gainsboro; } .cmpItem5-flex ul.slide > li > a > .data ul.icon2 > li > span { font-size: 12px; font-size: 1.2rem; font-weight: bold; display: inline-block; padding: 2px 6px; color: #fff; background-color: #999; } .cmpItem5-flex ul.slide > li > a > .data ul.icon2 > li:first-child { padding-left: 0; border: none; } .cmpItem5-flex.bdrTopNone .slideWrap { border-width: 0 0 0 1px; } .cmpItem5-flex.bdrTopNone .slideWrap li { border-width: 1px 1px 1px 0 !important; } .cmpItem5-flex > .linkShowMore { display: none; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li { overflow: hidden; margin-bottom: 50px; border: 1px solid gainsboro; background-color: #fff; } .cmpItem6 > ul.item > li > .info, .cmpItem6 > ul.item > li > .detail { float: left; width: 50%; } .cmpItem6 > ul.item > li .thumb, .cmpItem6 > ul.item > li .data { float: left; width: 50%; } .cmpItem6 > ul.item > li .thumb { height: 100%; } .cmpItem6 > ul.item > li .thumb > span { display: inline-block; width: 100%; } .cmpItem6 > ul.item > li .thumb > span img { width: 100%; } .cmpItem6 > ul.item > li .data { position: relative; padding: 24px 32px 0 32px; } .cmpItem6 > ul.item > li .data:after { position: absolute; z-index: 1; top: 35px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem6 > ul.item > li .data .lineBa { margin: 20px 0 30px; } .cmpItem6 > ul.item > li .data > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; margin-bottom: 15px; } .cmpItem6 > ul.item > li .data > .price { font-weight: bold; margin-bottom: 10px; } .cmpItem6 > ul.item > li .data > .price span.iconMovienex { position: relative; top: -5px; display: inline-block; overflow: hidden; width: 66px; height: 60px; margin: 0 8px; vertical-align: middle; } .cmpItem6 > ul.item > li .data > .price span.iconMovienex:before { top: 0; left: 0; width: 66px; height: 60px; margin-top: 0; background-position: 0 -94px; } .cmpItem6 > ul.item > li .data > .price span.iconMovienex:before { position: static; } .cmpItem6 > ul.item > li .data > .price span.iconMovienex > span { display: none; } .cmpItem6 > ul.item > li .data > .price, .cmpItem6 > ul.item > li .data ul.listIconBa { display: inline-block; } .cmpItem6 > ul.item > li .data .linkBa { margin-bottom: 10px; } .cmpItem6 > ul.item > li .data > dl.list { margin-bottom: 10px; } .cmpItem6 > ul.item > li .data > dl.list > dt, .cmpItem6 > ul.item > li .data > dl.list > dd { display: inline-block; float: left; } .cmpItem6 > ul.item > li .data > dl.list > dt { font-weight: bold; clear: both; } .cmpItem6 > ul.item > li .data > dl.list > dt:after { display: inline-block; content: '：'; } .cmpItem6 > ul.item > li .data > dl.list > dd { margin-bottom: 10px; color: #777; } .cmpItem6 > ul.item > li .data > dl.list .end { color: #d90e0f; } .cmpItem6 > ul.item > li .data > .text { color: #777; } .cmpItem6 > ul.item > li .data ul.icon { line-height: 1.2; width: 100%; margin-bottom: -10px; } .cmpItem6 > ul.item > li .data ul.icon > li { float: left; width: 33.33333%; height: 50px; text-align: center; border-left: 1px solid #e5e5e5; } .cmpItem6 > ul.item > li .data ul.icon > li:first-child { border: none; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame8 { height: 52px; } .cmpItem6 > ul.item > li .data ul.icon > li > span { display: inline-block; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame1 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame1 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -334px -224px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame1 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame2 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame2 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -268px -112px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame2 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame3 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame3 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -132px -218px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame3 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame4 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame4 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: 0 -274px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame4 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame5 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame5 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -132px -274px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame5 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame6 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame6 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -264px -274px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame6 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame7 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame7 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -334px 0; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame7 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame8 > span { overflow: hidden; width: 60px; height: 52px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame8 > span:before { top: 0; left: 0; width: 60px; height: 52px; margin-top: 0; background-position: 0 -160px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame8 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame9 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame9 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -334px -168px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame9 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame10 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame10 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -66px -160px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame10 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame11 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame11 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -132px -160px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame11 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame12 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame12 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -198px -160px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame12 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame13 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame13 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -268px 0; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame13 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame14 > span { overflow: hidden; width: 60px; height: 50px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame14 > span:before { top: 0; left: 0; width: 60px; height: 50px; margin-top: 0; background-position: -268px -56px; } .cmpItem6 > ul.item > li .data ul.icon > li.iconGame14 > span:before { position: static; } .cmpItem6 > ul.item > li .data ul.icon > li:last-child { text-align: right; } .cmpItem6 > ul.item > li .data ul.icon > li:first-child { text-align: left; } .cmpItem6 > ul.item > li .detail { padding: 40px 40px 32px 40px; border-left: 1px solid gainsboro; background-color: #f5f7f8; } .cmpItem6 > ul.item > li .detail .hdgTy2, .cmpItem6 > ul.item > li .detail .hdgTy3 { font-size: 20px; font-size: 2rem; } .cmpItem6 > ul.item > li .detail .hdgTy3.iconShopping:before, .cmpItem6 > ul.item > li .detail .hdgTy3.iconDownload:before { top: 40%; } .cmpItem6 > ul.item > li .detail ul.listIconStudio { margin-bottom: 30px; } .cmpItem6 > ul.item > li.type2 .thumb, .cmpItem6 > ul.item > li.type3 .thumb { display: table; padding: 80px 50px; background-color: #f5f7f8; } .cmpItem6 > ul.item > li.type2 .thumb > span, .cmpItem6 > ul.item > li.type3 .thumb > span { display: table-cell; vertical-align: middle; } .cmpItem6 > ul.item > li.type3 .thumb { padding: 60px 30px; } .cmpItem7 { position: relative; } .cmpItem7 > .slideWrap { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; } .cmpItem7 ul.slide { position: relative; left: 0; width: 1000%; -webkit-transition: left .5s; transition: left .5s; background-color: #fff; } .cmpItem7 ul.slide > li { float: left; width: 10%; height: 440px; margin-right: 1px; } .cmpItem7 ul.slide > li .info, .cmpItem7 ul.slide > li .movie { float: left; width: 50%; } .cmpItem7 ul.slide > li .info .thumb, .cmpItem7 ul.slide > li .info .data { float: left; width: 50%; } .cmpItem7 ul.slide > li .info .thumb { position: relative; display: table; height: 439px; padding: 20px; text-align: center; background-color: #f5f7f8; } .cmpItem7 ul.slide > li .info .thumb > span { display: table-cell; width: 100%; vertical-align: middle; } .cmpItem7 ul.slide > li .info .thumb > span img { width: 100%; max-width: 200px; height: auto; } .cmpItem7 ul.slide > li .info .data { position: relative; padding: 50px 50px 0; } .cmpItem7 ul.slide > li .info .data:after { position: absolute; z-index: 1; top: 50px; left: -37px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem7 ul.slide > li .info .data > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; margin-bottom: 20px; } .cmpItem7 ul.slide > li .info .data > .text { font-size: 14px; font-size: 1.4rem; margin-top: 15px; margin-bottom: 20px; color: #777; } .cmpItem7 ul.slide > li .info .data > .release { margin-bottom: 20px; } .cmpItem7 ul.slide > li .movie { padding: 80px 55px 80px 40px; } .cmpItem7 ul.slide > li .movie > a > .thumb { display: inline-block; text-align: center; } .cmpItem7 > ul.navController1 { position: absolute; top: 50%; margin-top: -30px; } .cmpItem7 > ul.navController1 > li { position: relative; } .cmpItem7 + ul.listNoticeBa { margin: 20px 0 0; } .cmpItem8 a:hover { cursor: default; text-decoration: none; } .cmpItem8 > .slideWrap { position: relative; overflow: hidden; border: 1px solid gainsboro; background-color: #fff; } .cmpItem8 ul.slide { position: relative; left: 0; width: 1000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem8 ul.slide > li { float: left; overflow: hidden; width: 5%; height: 550px; border-right: 1px solid gainsboro; } .cmpItem8 ul.slide > li:nth-child(2n) { border-right: none; } .cmpItem8 ul.slide > li > span, .cmpItem8 ul.slide > li > a { position: relative; display: block; width: 100%; height: 100%; } .cmpItem8 ul.slide > li > span > .thumb, .cmpItem8 ul.slide > li > a > .thumb { width: 100%; } .cmpItem8 ul.slide > li > span > .thumb img, .cmpItem8 ul.slide > li > a > .thumb img { width: 100%; height: auto; } .cmpItem8 ul.slide > li > span > .lead, .cmpItem8 ul.slide > li > a > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; position: relative; margin: 0 0 10px; padding: 24px 32px 0 32px; } .cmpItem8 ul.slide > li > span > .lead:after, .cmpItem8 ul.slide > li > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem8 ul.slide > li > span > .text, .cmpItem8 ul.slide > li > a > .text { width: 100%; margin: 0 0 20px; line-height: 1.2; color: #777; } .cmpItem8 ul.slide > li > span > .text { padding: 0 32px; } .cmpItem8 ul.slide > li > a > .text { padding: 0 10em 0 32px; } .cmpItem8 ul.slide > li > span > .linkBa, .cmpItem8 ul.slide > li > a > .linkBa { position: absolute; right: 40px; bottom: 32px; } .cmpItem8 > ul.navController1 { position: absolute; top: 40%; margin-top: -30px; } .cmpItem8 > ul.navController1 > li { position: relative; } .cmpItem8.slideNone ul.slide { width: 100%; } .cmpItem8.slideNone ul.slide > li { width: 50%; } .cmpItem9 > .slideWrap { position: relative; overflow: hidden; border: 1px solid gainsboro; border-width: 1px; background-color: #fff; } .cmpItem9 .lytImgTy3 { margin-bottom: 0; border: none; background-color: #fff; } .cmpItem9 .lytImgTy3 .img { border: none !important; } .cmpItem9 .lytImgTy3 .contents { position: relative; } .cmpItem9 .lytImgTy3 .contents:after { position: absolute; z-index: 1; top: 42%; left: -39px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-right-color: white; } .cmpItem9 ul.slide { position: relative; left: 0; width: 100%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem9 ul.slide > li { border-top: 1px solid gainsboro; } .cmpItem9 ul.slide > li:first-child { border-top: none; } .cmpItem9 ul.slide > li .hdgTy3, .cmpItem9 ul.slide > li .lead { font-size: 20px; font-size: 2rem; margin-bottom: 8px; } .cmpItem9 ul.slide > li .info { margin-bottom: 8px; } .cmpItem9 ul.slide > li .text { margin-bottom: 8px; color: #777; } .cmpItem9 > ul.navController1 { display: none; } .cmpNews { border: 1px solid gainsboro; border-width: 1px; background-color: #fff; } .cmpNews a:hover { cursor: default; text-decoration: none; } .cmpNews > .pickup { width: 600px; } .cmpNews > .pickup > a { position: relative; width: 600px; height: 598px; } .cmpNews > .pickup > a > .thumb { width: 100%; height: auto; } .cmpNews > .pickup > a > .thumb img { width: 100%; height: auto; } .cmpNews > .pickup > a > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; position: relative; margin: 0 0 10px; padding: 24px 7.5em 0 32px; } .cmpNews > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews > .pickup > a > .text { font-size: 14px; font-size: 1.4rem; margin: 0 0 10px; padding: 0 150px 0 32px; color: #777; } .cmpNews > .pickup > a > .linkBa { position: absolute; right: 32px; bottom: 38px; } .cmpNews > .movienex { width: 600px; height: 598px; padding: 65px 45px 0 65px; background: #f5f7f8 url(/etc/designs/disney/libs/common/image/news-movienex-bg.jpg) no-repeat right bottom; } .cmpNews > .movienex > .heading { font-size: 25px; font-size: 2.5rem; font-weight: normal; margin-bottom: 15px; } .cmpNews > .movienex > .text { margin-bottom: 40px; color: #838383; } .cmpNews > .movienex > .listNumBa { margin-right: 50%; margin-bottom: 40px; } .cmpNews > .movienex > .btnBa span, .cmpNews > .movienex > .btnBa a { padding: 18px 60px 18px 30px; } .cmpNews > .movienex > .btnBa span:after, .cmpNews > .movienex > .btnBa a:after { right: 30px; } .cmpNews > .movienex > .btnBa span:hover, .cmpNews > .movienex > .btnBa a:hover { cursor: pointer; text-decoration: underline; } .cmpNews > .newsWrap { float: right; width: 598px; border: 1px solid gainsboro; border-width: 0 0 0 1px; } .cmpNews > .newsWrap > .news { position: relative; height: 118px; padding: 40px 10em 0 40px; } .cmpNews > .newsWrap > .news > .heading { font-size: 25px; font-size: 2.5rem; font-weight: normal; float: left; margin-right: 20px; } .cmpNews > .newsWrap > .news > .link { margin-top: 7px; } .cmpNews > .newsWrap > .news > .link > a { display: inline-block; padding-left: 26px; color: #0093d0; } .cmpNews > .newsWrap > .news > .link > a:hover { text-decoration: underline; } .cmpNews > .newsWrap > .news > .link > a:before { position: absolute; top: 50%; left: 0; display: inline-block; width: 20px; height: 20px; margin-top: -10px; content: ''; border-radius: 20px; background-color: #0093d0; } .cmpNews > .newsWrap > .news > .link > a:after { top: 50%; left: 8px; width: 6px; height: 9px; margin-top: -4.5px; background-position: -608px -108px; } .cmpNews > .newsWrap > .news > .sns { position: absolute; top: 35px; right: 30px; } .cmpNews > .newsWrap > .news > .sns > ul { display: inline-block; } .cmpNews > .newsWrap > .news > .sns > ul > li { display: inline-block; margin-left: 5px; } .cmpNews > .newsWrap > .news > .sns > ul > li > a { display: block !important; width: 44px !important; height: 44px !important; margin: 0 auto; padding: 0 !important; border: 1px solid gainsboro; border-radius: 100px; } .cmpNews > .newsWrap > .news > .sns > ul > li > a:hover { cursor: pointer; } .cmpNews > .newsWrap > .news > .sns > ul > li > a > span { position: relative; bottom: -3em; } .cmpNews > .newsWrap > .news > .sns > ul > li > a:before { position: absolute !important; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a { overflow: hidden; width: 14px; height: 32px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a:before { top: 50%; left: 50%; width: 14px; height: 32px; margin-top: -16px; margin-left: -7px; background-position: -507px -38px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a:before { position: static; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a { overflow: hidden; width: 24px; height: 32px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a:before { top: 50%; left: 50%; width: 24px; height: 32px; margin-top: -16px; margin-left: -12px; background-position: -507px 0; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a:before { position: static; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a { overflow: hidden; width: 30px; height: 32px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a:before { top: 50%; left: 50%; width: 30px; height: 32px; margin-top: -16px; margin-left: -15px; background-position: -448px -438px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a:before { position: static; } .cmpNews > .newsWrap > ul.item { background-color: #f5f7f8; } .cmpNews > .newsWrap > ul.item > li > a { position: relative; display: block; height: 120px; padding: 30px 60px 0 200px; border: 1px solid gainsboro; border-width: 1px 0 0; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 { border-bottom-width: 0; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li:first-child > a { border-top-width: 0; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li > a { padding-left: 35px !important; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li > a > .lead { font-size: 18px; font-size: 1.8rem; margin-top: 4px !important; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap2 > ul > li > a { padding-left: 140px !important; } .cmpNews > .newsWrap > ul.item > li > a:before { top: 50%; right: 40px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -168px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb { position: absolute; top: 30px; left: 40px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb img { width: 86px; max-width: 86px; height: 60px; margin-left: -5px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date { position: relative; z-index: 1; display: inline-block; width: 60px; height: 60px; padding-top: .4em; text-align: center; color: #fff; background-color: #138ac1; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date > span { display: block; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date > .dateDD { font-size: 18px; font-size: 1.8rem; font-weight: bold; position: relative; bottom: -.3em; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date > .dateMM { font-size: 10px; font-size: 1rem; } .cmpNews > .newsWrap > ul.item > li > a > .lead { line-height: 1.2; font-size: 14px; font-size: 1.4rem; margin: 8px 0 4px; } .cmpNews.typeFew { background-color: #f5f7f8; } .cmpNews.typeFew > .newsWrap > .news { border-bottom: 1px solid gainsboro; background-color: #fff; } .cmpNews.typeFew > .newsWrap .item > li:first-child > a { border-top: none; } .cmpNews.typeFew > .movienex { height: 240px; padding: 45px 45px 0 65px; background: #f5f7f8; } .cmpNews.typeFew > .movienex .text { margin-bottom: 20px; } .cmpNews + .cmpBanner { margin-top: -1px; } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex { border: 1px solid gainsboro; border-width: 1px; background-color: #fff; display: flex; } .cmpNews-flex a:hover { cursor: default; text-decoration: none; } .cmpNews-flex > .pickup { width: 600px; order: 1; } .cmpNews-flex > .pickup > a { position: relative; width: 600px; height: 598px; } .cmpNews-flex > .pickup > a > .thumb { width: 100%; height: auto; } .cmpNews-flex > .pickup > a > .thumb img { width: 100%; height: auto; } .cmpNews-flex > .pickup > a > .lead { font-size: 20px; font-size: 2rem; line-height: 1.2; position: relative; margin: 0 0 10px; padding: 24px 7.5em 0 32px; } .cmpNews-flex > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews-flex > .pickup > a > .text { font-size: 14px; font-size: 1.4rem; margin: 0 0 10px; padding: 0 150px 0 32px; color: #777; } .cmpNews-flex > .pickup > a > .linkBa { position: absolute; right: 32px; bottom: 38px; } .cmpNews-flex > .movienex { width: 600px; height: 598px; padding: 65px 45px 0 65px; background: #f5f7f8 url(/etc/designs/disney/libs/common/image/news-movienex-bg.jpg) no-repeat right bottom; } .cmpNews-flex > .movienex > .heading { font-size: 25px; font-size: 2.5rem; font-weight: normal; margin-bottom: 15px; } .cmpNews-flex > .movienex > .text { margin-bottom: 40px; color: #838383; } .cmpNews-flex > .movienex > .listNumBa { margin-right: 50%; margin-bottom: 40px; } .cmpNews-flex > .movienex > .btnBa span, .cmpNews-flex > .movienex > .btnBa a { padding: 18px 60px 18px 30px; } .cmpNews-flex > .movienex > .btnBa span:after, .cmpNews-flex > .movienex > .btnBa a:after { right: 30px; } .cmpNews-flex > .movienex > .btnBa span:hover, .cmpNews-flex > .movienex > .btnBa a:hover { cursor: pointer; text-decoration: underline; } .cmpNews-flex > .newsWrap { width: 598px; border: 1px solid gainsboro; border-width: 0 0 0 1px; order: 2; } .cmpNews-flex > .newsWrap > .news { position: relative; height: 118px; padding: 40px 10em 0 40px; } .cmpNews-flex > .newsWrap > .news > .heading { font-size: 25px; font-size: 2.5rem; font-weight: normal; float: left; margin-right: 20px; } .cmpNews-flex > .newsWrap > .news > .link { margin-top: 7px; } .cmpNews-flex > .newsWrap > .news > .link > a { display: inline-block; padding-left: 26px; color: #0093d0; } .cmpNews-flex > .newsWrap > .news > .link > a:hover { text-decoration: underline; } .cmpNews-flex > .newsWrap > .news > .link > a:before { position: absolute; top: 50%; left: 0; display: inline-block; width: 20px; height: 20px; margin-top: -10px; content: ''; border-radius: 20px; background-color: #0093d0; } .cmpNews-flex > .newsWrap > .news > .link > a:after { top: 50%; left: 8px; width: 6px; height: 9px; margin-top: -4.5px; background-position: -608px -108px; } .cmpNews-flex > .newsWrap > .news > .sns { position: absolute; top: 35px; right: 30px; } .cmpNews-flex > .newsWrap > .news > .sns > ul { display: inline-block; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li { display: inline-block; margin-left: 5px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a { display: block !important; width: 44px !important; height: 44px !important; margin: 0 auto; padding: 0 !important; border: 1px solid gainsboro; border-radius: 100px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a:hover { cursor: pointer; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a > span { position: relative; bottom: -3em; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a:before { position: absolute !important; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a { overflow: hidden; width: 14px; height: 32px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a:before { top: 50%; left: 50%; width: 14px; height: 32px; margin-top: -16px; margin-left: -7px; background-position: -507px -38px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a:before { position: static; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a { overflow: hidden; width: 24px; height: 32px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a:before { top: 50%; left: 50%; width: 24px; height: 32px; margin-top: -16px; margin-left: -12px; background-position: -507px 0; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a:before { position: static; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a { overflow: hidden; width: 30px; height: 32px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a:before { top: 50%; left: 50%; width: 30px; height: 32px; margin-top: -16px; margin-left: -15px; background-position: -448px -438px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a:before { position: static; } .cmpNews-flex > .newsWrap > ul.item { background-color: #f5f7f8; } .cmpNews-flex > .newsWrap > ul.item > li > a { position: relative; display: block; height: 120px; padding: 30px 60px 0 200px; border: 1px solid gainsboro; border-width: 1px 0 0; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 { border-bottom-width: 0; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li:first-child > a { border-top-width: 0; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li > a { padding-left: 35px !important; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li > a > .lead { font-size: 18px; font-size: 1.8rem; margin-top: 4px !important; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap2 > ul > li > a { padding-left: 140px !important; } .cmpNews-flex > .newsWrap > ul.item > li > a:before { top: 50%; right: 40px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -168px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb { position: absolute; top: 30px; left: 40px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb img { width: 86px; max-width: 86px; height: 60px; margin-left: -5px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date { position: relative; z-index: 1; display: inline-block; width: 60px; height: 60px; padding-top: .4em; text-align: center; color: #fff; background-color: #138ac1; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date > span { display: block; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date > .dateDD { font-size: 18px; font-size: 1.8rem; font-weight: bold; position: relative; bottom: -.3em; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date > .dateMM { font-size: 10px; font-size: 1rem; } .cmpNews-flex > .newsWrap > ul.item > li > a > .lead { line-height: 1.2; font-size: 14px; font-size: 1.4rem; margin: 8px 0 4px; } .cmpNews-flex.typeFew { background-color: #f5f7f8; } .cmpNews-flex.typeFew > .newsWrap > .news { border-bottom: 1px solid gainsboro; background-color: #fff; } .cmpNews-flex.typeFew > .newsWrap .item > li:first-child > a { border-top: none; } .cmpNews-flex.typeFew > .movienex { height: 240px; padding: 45px 45px 0 65px; background: #f5f7f8; } .cmpNews-flex.typeFew > .movienex .text { margin-bottom: 20px; } .cmpNews-flex + .cmpBanner { margin-top: -1px; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic, .cmpListSns { line-height: 1.2; border: 1px solid gainsboro; border-width: 1px 0; } .cmpRankingMusic > li, .cmpListSns > li { position: relative; display: inline-block; float: left; overflow: hidden; width: 300px; height: 600px; background-color: #fff; } .cmpRankingMusic > li .thumb, .cmpListSns > li .thumb { width: 100%; } .cmpRankingMusic > li .thumb a, .cmpListSns > li .thumb a { width: 100%; height: 100%; } .cmpRankingMusic > li .thumb a img, .cmpListSns > li .thumb a img { width: 100%; height: auto; } .cmpRankingMusic > li .data, .cmpListSns > li .data { height: 300px; padding: 30px 50px 20px; } .cmpRankingMusic > li .rank, .cmpListSns > li .rank { font-size: 24px; font-size: 2.4rem; font-weight: bold; display: block; margin-bottom: 20px; color: #0093d0; } .cmpRankingMusic > li .lead, .cmpListSns > li .lead { font-size: 22px; font-size: 2.2rem; margin-bottom: 10px; } .cmpRankingMusic > li .text, .cmpListSns > li .text { font-size: 18px; font-size: 1.8rem; margin-bottom: 20px; } .cmpRankingMusic > li ul.list > li, .cmpListSns > li ul.list > li { margin-bottom: 10px; } .cmpRankingMusic > li ul.list > li.iconShopping > a:before, .cmpListSns > li ul.list > li.iconShopping > a:before { top: 50%; left: 0; width: 16px; height: 17px; margin-top: -8.5px; background-position: -417px -551px; } .cmpRankingMusic > li ul.list > li.iconHeadphone > a:before, .cmpListSns > li ul.list > li.iconHeadphone > a:before { top: 50%; left: 1px; width: 14px; height: 15px; margin-top: -7.5px; background-position: -593px -129px; } .cmpRankingMusic > li ul.list > li > a, .cmpListSns > li ul.list > li > a { padding-left: 30px; } .cmpRankingMusic > li.rank1, .cmpListSns > li.rank1 { width: 900px; } .cmpRankingMusic > li.rank5, .cmpRankingMusic > li.rank6, .cmpRankingMusic > li.rank8, .cmpRankingMusic > li.rank9, .cmpListSns > li.rank5, .cmpListSns > li.rank6, .cmpListSns > li.rank8, .cmpListSns > li.rank9 { width: 50%; height: 300px; } .cmpRankingMusic > li.rank5 .thumb, .cmpRankingMusic > li.rank6 .thumb, .cmpRankingMusic > li.rank8 .thumb, .cmpRankingMusic > li.rank9 .thumb, .cmpListSns > li.rank5 .thumb, .cmpListSns > li.rank6 .thumb, .cmpListSns > li.rank8 .thumb, .cmpListSns > li.rank9 .thumb { width: 50%; } .cmpRankingMusic > li.rank5 .data, .cmpRankingMusic > li.rank6 .data, .cmpRankingMusic > li.rank8 .data, .cmpRankingMusic > li.rank9 .data, .cmpListSns > li.rank5 .data, .cmpListSns > li.rank6 .data, .cmpListSns > li.rank8 .data, .cmpListSns > li.rank9 .data { width: 50%; } .cmpRankingMusic > li.rank1, .cmpRankingMusic > li.rank5, .cmpRankingMusic > li.rank7, .cmpRankingMusic > li.rank10, .cmpListSns > li.rank1, .cmpListSns > li.rank5, .cmpListSns > li.rank7, .cmpListSns > li.rank10 { color: #fff; background-color: #003e58; } .cmpRankingMusic > li.rank1 a, .cmpRankingMusic > li.rank5 a, .cmpRankingMusic > li.rank7 a, .cmpRankingMusic > li.rank10 a, .cmpListSns > li.rank1 a, .cmpListSns > li.rank5 a, .cmpListSns > li.rank7 a, .cmpListSns > li.rank10 a { color: #fff; } .cmpRankingMusic > li.rank1 .rank, .cmpRankingMusic > li.rank5 .rank, .cmpRankingMusic > li.rank7 .rank, .cmpRankingMusic > li.rank10 .rank, .cmpListSns > li.rank1 .rank, .cmpListSns > li.rank5 .rank, .cmpListSns > li.rank7 .rank, .cmpListSns > li.rank10 .rank { color: #0093d0; } .cmpRankingMusic > li.rank4, .cmpRankingMusic > li.rank6, .cmpRankingMusic > li.rank9, .cmpListSns > li.rank4, .cmpListSns > li.rank6, .cmpListSns > li.rank9 { color: #fff; background-color: #0093d0; } .cmpRankingMusic > li.rank4 a, .cmpRankingMusic > li.rank6 a, .cmpRankingMusic > li.rank9 a, .cmpListSns > li.rank4 a, .cmpListSns > li.rank6 a, .cmpListSns > li.rank9 a { color: #fff; } .cmpRankingMusic > li.rank4 .rank, .cmpRankingMusic > li.rank6 .rank, .cmpRankingMusic > li.rank9 .rank, .cmpListSns > li.rank4 .rank, .cmpListSns > li.rank6 .rank, .cmpListSns > li.rank9 .rank { color: #8edeff; } .cmpRankingMusic > li.rank4 ul.list > li.iconShopping > a:before, .cmpRankingMusic > li.rank6 ul.list > li.iconShopping > a:before, .cmpRankingMusic > li.rank9 ul.list > li.iconShopping > a:before, .cmpListSns > li.rank4 ul.list > li.iconShopping > a:before, .cmpListSns > li.rank6 ul.list > li.iconShopping > a:before, .cmpListSns > li.rank9 ul.list > li.iconShopping > a:before { top: 50%; left: 0; width: 16px; height: 17px; margin-top: -8.5px; background-position: -439px -551px; } .cmpRankingMusic > li.rank4 ul.list > li.iconHeadphone > a:before, .cmpRankingMusic > li.rank6 ul.list > li.iconHeadphone > a:before, .cmpRankingMusic > li.rank9 ul.list > li.iconHeadphone > a:before, .cmpListSns > li.rank4 ul.list > li.iconHeadphone > a:before, .cmpListSns > li.rank6 ul.list > li.iconHeadphone > a:before, .cmpListSns > li.rank9 ul.list > li.iconHeadphone > a:before { top: 50%; left: 1px; width: 14px; height: 15px; margin-top: -7.5px; background-position: -593px -150px; } .cmpRankingMusic > li.rank3 .thumb, .cmpListSns > li.rank3 .thumb { position: absolute; top: 301px; } .cmpRankingMusic > li.rank3 .data, .cmpListSns > li.rank3 .data { position: absolute; top: 0; } .cmpRankingMusic > li.rank5 .thumb, .cmpRankingMusic > li.rank9 .thumb, .cmpListSns > li.rank5 .thumb, .cmpListSns > li.rank9 .thumb { position: absolute; left: 300px; } .cmpRankingMusic > li.rank5 .data, .cmpRankingMusic > li.rank9 .data, .cmpListSns > li.rank5 .data, .cmpListSns > li.rank9 .data { position: absolute; left: 0; } .cmpRankingMusic > li.rank6 .thumb, .cmpRankingMusic > li.rank8 .thumb, .cmpListSns > li.rank6 .thumb, .cmpListSns > li.rank8 .thumb { position: absolute; left: 0; } .cmpRankingMusic > li.rank6 .data, .cmpRankingMusic > li.rank8 .data, .cmpListSns > li.rank6 .data, .cmpListSns > li.rank8 .data { position: absolute; left: 300px; } .cmpRankingMusic > li.rank1, .cmpListSns > li.rank1 { border-left: 1px solid gainsboro; } .cmpRankingMusic > li.rank1 .thumb, .cmpListSns > li.rank1 .thumb { float: right; width: 66.66667%; } .cmpRankingMusic > li.rank1 .data, .cmpListSns > li.rank1 .data { position: relative; width: 33.33333%; height: 600px; padding: 120px 50px 10px; } .cmpRankingMusic > li.rank1 .data:after, .cmpListSns > li.rank1 .data:after { position: absolute; z-index: 1; top: 100px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #003e58; } .cmpRankingMusic > li.rank1 .rank, .cmpListSns > li.rank1 .rank { font-size: 50px; font-size: 5rem; margin-bottom: 25px; } .cmpRankingMusic > li.rank1 .lead, .cmpListSns > li.rank1 .lead { font-size: 26px; font-size: 2.6rem; } .cmpRankingMusic > li.rank1 .text, .cmpListSns > li.rank1 .text { font-size: 22px; font-size: 2.2rem; margin-bottom: 25px; } .cmpRankingMusic > li.rank2, .cmpListSns > li.rank2 { border-right: 1px solid gainsboro; } .cmpRankingMusic > li.rank2 .data, .cmpListSns > li.rank2 .data { position: relative; } .cmpRankingMusic > li.rank2 .data:after, .cmpListSns > li.rank2 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpRankingMusic > li.rank3, .cmpListSns > li.rank3 { border-left: 1px solid gainsboro; } .cmpRankingMusic > li.rank3 .data, .cmpListSns > li.rank3 .data { position: relative; } .cmpRankingMusic > li.rank3 .data:after, .cmpListSns > li.rank3 .data:after { position: absolute; z-index: 1; top: 99.5%; top: 98.5%; left: 151px; width: 0; height: 0; margin-left: -25px; content: ''; border: 25px solid transparent; border-top-color: white; } .cmpRankingMusic > li.rank4 .data, .cmpListSns > li.rank4 .data { position: relative; } .cmpRankingMusic > li.rank4 .data:after, .cmpListSns > li.rank4 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #0093d0; } .cmpRankingMusic > li.rank5 .data, .cmpListSns > li.rank5 .data { position: relative; } .cmpRankingMusic > li.rank5 .data:after, .cmpListSns > li.rank5 .data:after { position: absolute; z-index: 1; top: 125px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #003e58; } .cmpRankingMusic > li.rank6 .data, .cmpListSns > li.rank6 .data { position: relative; } .cmpRankingMusic > li.rank6 .data:after, .cmpListSns > li.rank6 .data:after { position: absolute; z-index: 1; top: 125px; left: -47px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: #0093d0; } .cmpRankingMusic > li.rank7 .data, .cmpListSns > li.rank7 .data { position: relative; } .cmpRankingMusic > li.rank7 .data:after, .cmpListSns > li.rank7 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #003e58; } .cmpRankingMusic > li.rank8 .data, .cmpListSns > li.rank8 .data { position: relative; } .cmpRankingMusic > li.rank8 .data:after, .cmpListSns > li.rank8 .data:after { position: absolute; z-index: 1; top: 125px; left: -48px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: white; } .cmpRankingMusic > li.rank9 .data, .cmpListSns > li.rank9 .data { position: relative; } .cmpRankingMusic > li.rank9 .data:after, .cmpListSns > li.rank9 .data:after { position: absolute; z-index: 1; top: 125px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #0093d0; } .cmpRankingMusic > li.rank10, .cmpListSns > li.rank10 { margin-top: -300px; } .cmpRankingMusic > li.rank10 .data, .cmpListSns > li.rank10 .data { position: relative; } .cmpRankingMusic > li.rank10 .data:after, .cmpListSns > li.rank10 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #003e58; } .cmpListSns { border-width: 1px 0 0 1px; } .cmpListSns.bdrTopNone { border-width: 0 0 0 1px; } .cmpListSns.bdrTopNone > li { border-width: 1px 1px 1px 0 !important; } .cmpListSns > li { color: #333 !important; border: 1px solid gainsboro; border-width: 0 1px 1px 0 !important; background-color: #fff !important; } .cmpListSns > li.rank1 { width: 898px; background-color: #f5f7f8 !important; } .cmpListSns > li.rank3 { width: 299px; } .cmpListSns > li.rank3 img { max-width: auto; } .cmpListSns > li.rank1 .data { position: relative; padding: 120px 35px 10px 50px; } .cmpListSns > li.rank1 .data:after { position: absolute; z-index: 1; top: 100px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: #f5f7f8; } .cmpListSns > li.rank4 .data { position: relative; } .cmpListSns > li.rank4 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpListSns > li.rank5 .data { position: relative; } .cmpListSns > li.rank5 .data:after { position: absolute; z-index: 1; top: 125px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpListSns > li.rank6 .data { position: relative; } .cmpListSns > li.rank6 .data:after { position: absolute; z-index: 1; top: 125px; left: -47px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: white; } .cmpListSns > li.rank7 .data { position: relative; } .cmpListSns > li.rank7 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpListSns > li.rank8 .data { position: relative; } .cmpListSns > li.rank8 .data:after { position: absolute; z-index: 1; top: 125px; left: -48px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-right-color: white; } .cmpListSns > li.rank9 .data { position: relative; } .cmpListSns > li.rank9 .data:after { position: absolute; z-index: 1; top: 125px; left: 100.5%; left: 98.5%; width: 0; height: 0; content: ''; border: 25px solid transparent; border-left-color: white; } .cmpListSns > li.rank10 { margin-top: -300px; } .cmpListSns > li.rank10 .data { position: relative; } .cmpListSns > li.rank10 .data:after { position: absolute; z-index: 1; top: 2px; top: -47px; left: 126px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpListSns > li .thumb { width: 100%; height: auto; } .cmpListSns > li .thumb img { width: 100%; height: auto; } .cmpListSns > li .data { padding: 60px 30px 20px 45px; } .cmpListSns > li .data .lead { margin-bottom: 25px; } .cmpListSns ul.sns > li { font-size: 13px; font-size: 1.3rem; position: relative; display: block; height: 30px; padding-left: 6em; } .cmpListSns ul.sns > li .twitterBtn { padding-top: 2px; } .cmpListSns ul.sns > li a.label { font-weight: bold; position: absolute; top: 50%; left: 0; display: inline-block; width: 6em; margin-top: -10px; color: #0093d0 !important; } .cmpListSns ul.sns > li.line { height: 40px; } .cmpListSns .facebookBtn { display: inline; width: 70px !important; } .cmpListSns .facebookBtn iframe { float: left; overflow: hidden !important; width: 70px !important; } .cmpListSns .LineBtn { height: 35px; } .cmpListSns .countBody { position: relative; float: left; height: 20px; margin-top: 4px; } .cmpListSns .countBody span.count { font-size: 10px; line-height: 1.2em; height: 10px; margin-left: 5px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; } .cmpListSns .countBody span.arrow { position: absolute; top: 3px; left: 3px; width: 4px; height: 6px; background: url(/etc/designs/disney/libs/common/image/fb-counter-arrow.png) no-repeat top center; } .cmpBanner > ul.tab { text-align: center; border: 1px solid gainsboro; } .cmpBanner > ul.tab > li { float: left; width: 25%; } .cmpBanner > ul.tab > li > a.logo { line-height: 120px; z-index: 1; display: inline-block; width: 100%; } .cmpBanner > ul.tab > li > a.logo > span { display: inline-block; width: 48%; } .cmpBanner > ul.tab > li > a.logo > span > img { width: 95.138%; vertical-align: middle; } .cmpBanner > ul.tab > li > a.banner { display: none; } .cmpBanner > ul.tab > li.isCurrent > a.logo { position: relative; } .cmpBanner > ul.tab > li.isCurrent > a.logo:after { position: absolute; z-index: 1; top: 99.5%; top: 98.5%; left: 51%; width: 0; height: 0; margin-left: -30px; content: ''; border: 30px solid transparent; border-top-color: white; } .cmpBanner > ul.banner { position: relative; } .cmpBanner > ul.banner > li { position: absolute; top: 0; left: 0; display: none; } .cmpBanner > ul.banner > li:first-child { position: static; display: block; } .cmpBanner > ul.banner > li > a { width: 100%; } .cmpBanner > ul.banner > li > a > img { width: 100%; max-width: none; } .cmpBanner > ul.banner > li.isCurrent { display: block; } .cmpNavCharacter { position: relative; } .cmpNavCharacter > .slideWrap { overflow: hidden; width: 1040px; margin: 0 auto; } .cmpNavCharacter > .slideWrap > ul.slide { line-height: 1.2; position: relative; left: 0; width: 1000%; padding: 15px 0 20px; -webkit-transition: left .5s; transition: left .5s; } .cmpNavCharacter > .slideWrap > ul.slide > li { float: left; width: 1.25%; text-align: center; } .cmpNavCharacter > .slideWrap > ul.slide > li > a { font-weight: bold; position: relative; z-index: 1; display: block; width: 100%; padding: 0 8px; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.caption { font-size: 14px; font-size: 1.4rem; display: inline-block; margin-top: 10px; color: #888; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.thumb { display: inline-block; overflow: hidden; width: 100%; max-width: 98px; height: auto; border: 8px solid #fff; border-radius: 100px; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.thumb img { width: 100%; height: auto; border-radius: 100px; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover { margin-top: -10px; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a > span.thumb, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover > span.thumb { width: 128px; max-width: 100%; height: auto; border-color: #e2e9ed; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a > span.caption, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover > span.caption { font-size: 15px; font-size: 1.5rem; margin-top: 7px; color: #0093d0; } .cmpNavCharacter > ul.navController { position: absolute; top: 31px; left: 0; width: 100%; } .cmpNavCharacter > ul.navController > li { position: absolute; top: 0; left: 0; } .cmpNavCharacter > ul.navController > li.isInvalid { display: list-item; opacity: .3; -ms-filter: 'alpha(opacity=30)'; } .navChannel > ul.navController > li > a, .cmpNavCharacter > ul.navController > li > a { width: 60px; height: 60px; border-radius: 60px; text-align: center; } .navChannel > ul.navController > li > a:before { background-image: url(/etc/designs/disney/libs/common/image/sprite.png); } .cmpNavCharacter > ul.navController > li.next { right: 0; left: auto; } .cmpNavCharacter > ul.navController > li > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -317px -168px; } .cmpNavCharacter > ul.navController > li.prev > a:before { top: 50%; left: 50%; width: 11px; height: 17px; margin-top: -8.5px; margin-left: -5.5px; background-position: -478px -551px; } .cmpNavCharacter > ul.navController > li > a:after { display: none; } /* Type Fixed --------------------------------------------------- */ .cmpNavCharacter.typeFixed > .slideWrap > ul.slide { width: 100%; } .cmpNavCharacter.typeFixed > .slideWrap > ul.slide > li { width: 12.5%; } .cmpNavCharacter.typeFixed > ul.navController { display: none; } .navFixedCharacterMore { width: 1008px; margin: -15px auto 0; padding: 0 0 20px; text-align: right; } /* Type Few --------------------------------------------------- */ .cmpNavCharacter.typeFew > .slideWrap > ul.slide { line-height: 1.2; width: 100%; padding: 15px 0 20px; text-align: center; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li { display: inline-block; float: none; width: 22%; height: 100px; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > br { display: none; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a { display: table; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a > span.caption { display: table-cell; width: 50%; padding-left: 10px; text-align: left; vertical-align: middle; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a > span.thumb { display: inline-block; vertical-align: middle; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li.isCurrent { width: 24%; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li.isCurrent > a, .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a:hover { text-decoration: none; } .cmpNavCharacter.typeFew > .navController { display: none; } .cmpColumn { width: 100%; margin-bottom: 30px; } .cmpColumn > .column { float: left; } .cmpColumn > .column > *:last-child { margin-bottom: 0 !important; } .cmpColumn.typeTable { display: table; } .cmpColumn.typeTable > .column { display: table-cell; vertical-align: top; } .cmpColumn.typeCol2 { width: 100%; margin-right: -20px; margin-left: -20px; } .cmpColumn.typeCol2 > .column { width: 50%; padding: 0 20px; } .cmpColumn.typeCol2.typeCharacter { margin: 0; } .cmpColumn.typeCol2.typeCharacter > .column { padding: 40px; } .cmpColumn.typeCol2.typeCharacter > .column.img { padding: 0; } .cmpColumn.typeCol2.typeCharacter > .column.img img { width: 100%; height: auto; } .cmpColumn.typeCol2.typeGallery { margin: 0; } .cmpColumn.typeCol2.typeGallery > .column { position: relative; padding: 0; } .cmpColumn.typeCol2.typeGallery > .column .btnBa { position: absolute; bottom: 70px; left: 40px; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a { padding: 18px 60px 18px 30px; color: #fff; border: 2px solid #fff; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a:after { top: 50%; right: 20px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -191px; } .cmpColumn.typeCol2.typeGallery > .column.type1 > ul li { float: left; width: 50%; } .cmpColumn.typeCol2.typeMusic { margin: 0; border: 1px solid gainsboro; } .cmpColumn.typeCol2.typeMusic > .column { float: left; width: 50%; } .cmpColumn.typeCol2.typeMusic > .column.type1 { padding: 40px 40px 32px; text-align: center; background-color: #f5f7f8; } .cmpColumn.typeCol2.typeMusic > .column.type1 .thumb > a { width: 100%; height: 100%; } .cmpColumn.typeCol2.typeMusic > .column.type1 .thumb img { width: 100%; height: auto; } .cmpColumn.typeCol2.typeMusic > .column.type2 { padding: 40px 40px 32px; border-left: 1px solid gainsboro; } .cmpColumn.typeCol2.typeMusic > .column.type2 .hdgTy3 { margin-top: 20px; font-size: 20px; font-size: 2rem; } .cmpColumn.typeCol2.typeMusic > .column.type2 .hdgTy3.iconShopping:before, .cmpColumn.typeCol2.typeMusic > .column.type2 .hdgTy3.iconDownload:before { top: 40%; } .cmpColumn.typeCol2.typeMusic > .column.type2 .text { margin-bottom: 30px; color: #777; } .cmpColumn.typeCol2.typeMusicList { margin: 0; padding: 0; } .cmpColumn.typeCol2.typeMusicList > .column { float: left; overflow: auto; width: 50%; } .cmpColumn.typeCol2.typeMusicList > .column.type1, .cmpColumn.typeCol2.typeMusicList > .column.type2 { padding: 0; } .cmpColumn.typeCol2.typeMusicList > .column.type1:first-child, .cmpColumn.typeCol2.typeMusicList > .column.type2:first-child { margin-right: -1px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 15px 20px; border: 1px solid gainsboro; border-width: 1px 1px 0 1px; background-color: #f5f7f8; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 47px; position: relative; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li { display: inline-block; vertical-align: middle; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 60px; height: 60px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 25px; font-size: 2.5rem; margin-left: 10px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone { position: absolute; top: 8px; right: 0; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a { padding-left: 25px; color: #0093d0; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a:before, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a:before { top: 50%; left: 0; width: 14px; height: 15px; margin-top: -7.5px; background-position: -593px -129px; } .cmpColumn.typeCol2.typeMusicList > .column.type1.type2, .cmpColumn.typeCol2.typeMusicList > .column.type2.type2 { float: none; width: 100%; margin: 0 auto; } .cmpColumn.typeCol2.typeDetail { margin: 0; border: 1px solid gainsboro; } .cmpColumn.typeCol2.typeDetail > .column { padding: 24px 32px 20px 32px; } .cmpColumn.typeCol2.typeDetail > .column:first-child { border-right: 1px solid gainsboro; } .cmpColumn.typeCol3 { width: 100%; margin-right: -20px; margin-left: -20px; } .cmpColumn.typeCol3 > .column { width: 33.33333%; padding: 0 20px; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex { width: 100%; margin-bottom: 30px; display: flex; } .cmpColumn-flex > .column { flex: 1; } .cmpColumn-flex > .column > *:last-child { margin-bottom: 0 !important; } .cmpColumn-flex.typeTable { display: table; } .cmpColumn-flex.typeTable > .column { display: table-cell; vertical-align: top; } .cmpColumn-flex.typeCol2 { width: 100%; margin-right: -20px; margin-left: -20px; } .cmpColumn-flex.typeCol2 > .column { width: 50%; padding: 0 20px; } .cmpColumn-flex.typeCol2.typeCharacter { margin: 0; } .cmpColumn-flex.typeCol2.typeCharacter > .column { padding: 40px; } .cmpColumn-flex.typeCol2.typeCharacter > .column.img { padding: 0; } .cmpColumn-flex.typeCol2.typeCharacter > .column.img img { width: 100%; height: auto; } .cmpColumn-flex.typeCol2.typeGallery { margin: 0; } .cmpColumn-flex.typeCol2.typeGallery > .column { position: relative; padding: 0; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa { position: absolute; bottom: 70px; left: 40px; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a { padding: 18px 60px 18px 30px; color: #fff; border: 2px solid #fff; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a:after { top: 50%; right: 20px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -191px; } .cmpColumn-flex.typeCol2.typeGallery > .column.type1 > ul li { float: left; width: 50%; } .cmpColumn-flex.typeCol2.typeMusic { margin: 0; border: 1px solid gainsboro; } .cmpColumn-flex.typeCol2.typeMusic > .column { float: left; width: 50%; } .cmpColumn-flex.typeCol2.typeMusic > .column.type1 { padding: 40px 40px 32px; text-align: center; background-color: #f5f7f8; } .cmpColumn-flex.typeCol2.typeMusic > .column.type1 .thumb > a { width: 100%; height: 100%; } .cmpColumn-flex.typeCol2.typeMusic > .column.type1 .thumb img { width: 100%; height: auto; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 { padding: 40px 40px 32px; border-left: 1px solid gainsboro; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .hdgTy3 { margin-top: 20px; font-size: 20px; font-size: 2rem; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .hdgTy3.iconShopping:before, .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .hdgTy3.iconDownload:before { top: 40%; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .text { margin-bottom: 30px; color: #777; } .cmpColumn-flex.typeCol2.typeMusicList { margin: 0; padding: 0; } .cmpColumn-flex.typeCol2.typeMusicList > .column { float: left; overflow: auto; width: 50%; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 { padding: 0; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1:first-child, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2:first-child { margin-right: -1px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 15px 20px; border: 1px solid gainsboro; border-width: 1px 1px 0 1px; background-color: #f5f7f8; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 47px; position: relative; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li { display: inline-block; vertical-align: middle; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 60px; height: 60px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 25px; font-size: 2.5rem; margin-left: 10px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone { position: absolute; top: 8px; right: 0; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a { padding-left: 25px; color: #0093d0; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone > a:before, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone > a:before { top: 50%; left: 0; width: 14px; height: 15px; margin-top: -7.5px; background-position: -593px -129px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1.type2, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2.type2 { float: none; width: 100%; margin: 0 auto; } .cmpColumn-flex.typeCol2.typeDetail { margin: 0; border: 1px solid gainsboro; } .cmpColumn-flex.typeCol2.typeDetail > .column { padding: 24px 32px 20px 32px; } .cmpColumn-flex.typeCol2.typeDetail > .column:first-child { border-right: 1px solid gainsboro; } .cmpColumn-flex.typeCol3 { width: 100%; margin-right: -20px; margin-left: -20px; } .cmpColumn-flex.typeCol3 > .column { width: 33.33333%; padding: 0 20px; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpTimetable { overflow-y: scroll; max-height: 800px; padding-right: 20px; } .cmpTimetable * { word-break: normal; } .cmpTimetable.scrollNone { overflow-y: auto; max-height: none; padding-right: 0; } .cmpTimetable.isRun > dl.listTimeTableBa > dd > .contents { display: none; } .cmpTimetable > .listTimeTableBa { display: table; width: 100%; border: 1px solid gainsboro; border-width: 0 0 1px 1px; } .cmpTimetable > .listTimeTableBa:first-child { border-width: 1px 0 1px 1px; } .cmpTimetable > .listTimeTableBa > dt, .cmpTimetable > .listTimeTableBa > dd, .cmpTimetable > .listTimeTableBa > div { display: table-cell; border: 1px solid gainsboro; border-width: 0 1px 0 0; } .cmpTimetable > .listTimeTableBa > dt { width: 10%; text-align: center; vertical-align: middle; background-color: #f5f7f8; } .cmpTimetable > .listTimeTableBa > dt .time { font-size: 24px; font-size: 2.4rem; font-weight: bold; display: block; } .cmpTimetable > .listTimeTableBa > dd, .cmpTimetable > .listTimeTableBa > div { width: 90%; vertical-align: top; } .cmpTimetable > .listTimeTableBa > dd > .link, .cmpTimetable > .listTimeTableBa > div > .link { display: block; padding: 25px 40px 20px; } .cmpTimetable > .listTimeTableBa > dd > .link .hdg, .cmpTimetable > .listTimeTableBa > div > .link .hdg { font-size: 24px; font-size: 2.4rem; } .cmpTimetable > .listTimeTableBa > dd > .link .hdg span.iconCh, .cmpTimetable > .listTimeTableBa > div > .link .hdg span.iconCh { position: relative; top: -2px; } .cmpTimetable > .listTimeTableBa > dd > .link .comment, .cmpTimetable > .listTimeTableBa > div > .link .comment { margin-bottom: 0; color: #777; } .cmpTimetable > .listTimeTableBa > dd > .link span.iconCh, .cmpTimetable > .listTimeTableBa > div > .link span.iconCh { font-size: 12px; font-size: 1.2rem; font-weight: bold; display: inline-block; margin: 0 0 0 10px; padding: 1px 4px; color: #777; border: 1px solid gainsboro; background-color: #f5f7f8; } .cmpTimetable > .listTimeTableBa > dd > a.link:before, .cmpTimetable > .listTimeTableBa > div > a.link:before { top: 50%; right: 40px; width: 24px; height: 24px; margin-top: -12px; background-position: -466px -484px; } .cmpTimetable > .listTimeTableBa > dd > a.link:hover, .cmpTimetable > .listTimeTableBa > div > a.link:hover { cursor: default; text-decoration: none; } .cmpTimetable > .listTimeTableBa > dd > a.link:hover:before, .cmpTimetable > .listTimeTableBa > div > a.link:hover:before { cursor: pointer; text-decoration: underline; } .cmpTimetable > .listTimeTableBa > dd > a.link .hdg:hover, .cmpTimetable > .listTimeTableBa > div > a.link .hdg:hover { cursor: pointer; text-decoration: underline; } .cmpTimetable > .listTimeTableBa > dd > .contents, .cmpTimetable > .listTimeTableBa > div > .contents { padding: 0 40px; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents { display: table; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column { display: table-cell; float: left; width: 70%; padding: 0 40px 0 0; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column .listBa, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column .listBa, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column .listBa, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column .listBa { margin-bottom: 15px; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column .listBa > dd, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column .listBa > dd, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column .listBa > dd, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column .listBa > dd { color: #777; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column .text, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column .text, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column .text, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column .text { color: #777; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column.line, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column.line, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column.line, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column.line { width: 30%; padding: 0 0 0 40px; border-left: 1px solid gainsboro; } .cmpTimetable > .listTimeTableBa > div .comment { margin-bottom: 0; } .cmpTimetable > .listTimeTableBa.isCurrent > dt, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt { color: #fff; background-color: #0093d0; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div { position: relative; display: block; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div:after, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { position: absolute; z-index: 1; top: 50%; left: 101%; left: 99%; width: 0; height: 0; content: ''; border: 20px solid transparent; border-left-color: #0093d0; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div:after, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { margin-top: -20px; } .cmpTimetable > .listTimeTableBa.isCurrent > dt .time, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt .time { color: #fff; } .cmpTimetable > .listTimeTableBa.isCurrent > dd > a.link:before, .cmpTimetable > .listTimeTableBa.isCurrent > div > a.link:before { top: 50%; right: 40px; width: 24px; height: 24px; margin-top: -12px; background-position: -315px -484px; } .cmpTimetable > .listTimeTableBa.isCurrent > dd > .contents, .cmpTimetable > .listTimeTableBa.isCurrent > div > .contents { display: block !important; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt { background-color: #333; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div { position: relative; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { position: absolute; z-index: 1; top: 50%; left: 101%; left: 99%; width: 0; height: 0; content: ''; border: 20px solid transparent; border-left-color: #333; } .cmpAccordionBa { margin-bottom: 50px; } .cmpAccordionBa > .hdgBa { margin: 0; padding: 40px 0; color: #4d4d4d; border-bottom: 1px solid gainsboro; } .cmpAccordionBa > .section { border-bottom: 1px solid gainsboro; } .cmpAccordionBa > .section > .hdg { font-size: 14px; font-size: 1.4rem; } .cmpAccordionBa > .section > .hdg a { display: block; padding: 28px 60px 28px 40px; text-decoration: none; } .cmpAccordionBa > .section > .hdg a:before { top: 50%; right: 42px; width: 12px; height: 12px; margin-top: -6px; background-position: -593px -305px; } .cmpAccordionBa > .section > .hdg a:hover { text-decoration: underline; } .cmpAccordionBa > .section > .hdg a:hover:before { top: 50%; right: 42px; width: 12px; height: 12px; margin-top: -6px; background-position: -593px -359px; } .cmpAccordionBa > .section > .contents { padding: 0 40px; } .cmpAccordionBa > .section.isClose > .hdg a:before { top: 50%; right: 42px; width: 12px; height: 12px; margin-top: -6px; background-position: -593px -323px; } .cmpAccordionBa > .section.isClose > .hdg a:hover:before { top: 50%; right: 42px; width: 12px; height: 12px; margin-top: -6px; background-position: -593px -341px; } ul.cmpListIcon { font-size: 20px; font-size: 2rem; border: 1px solid gainsboro; background-color: #f5f7f8; } ul.cmpListIcon > li { float: left; text-align: center; } ul.cmpListIcon > li > a { display: block; padding: 100px 10px 30px; border: 1px solid gainsboro; border-width: 0 1px 0 0; } ul.cmpListIcon > li.iconDocument > a:before { top: 40px; left: 50%; width: 35px; height: 44px; margin-top: 0; margin-left: -17.5px; background-position: -334px -280px; } ul.cmpListIcon > li.iconMobile > a:before { top: 40px; left: 50%; width: 28px; height: 45px; margin-top: 0; margin-left: -14px; background-position: -400px -212px; } ul.cmpListIcon > li.iconBuy > a:before { top: 40px; left: 50%; width: 44px; height: 43px; margin-top: 0; margin-left: -22px; background-position: -172px -384px; } ul.cmpListIcon > li.iconComment > a:before { top: 40px; left: 50%; width: 43px; height: 43px; margin-top: 0; margin-left: -21.5px; background-position: -268px -168px; } ul.cmpListIcon > li:first-child > a { border-left: none; } ul.cmpListIcon.typeCol2 > li { width: 50%; } ul.cmpListIcon.typeCol3 > li { width: 33.33333%; } ul.cmpListIcon.typeCol4 > li { width: 25%; } ul.cmpListIconTy1 { font-size: 20px; font-size: 2rem; padding: 25px 30px; border: 1px solid gainsboro; background-color: #f5f7f8; } ul.cmpListIconTy1 > li { display: inline-block; margin-right: 30px; padding: 5px 0 5px 25px; } ul.cmpListIconTy1 > li.iconTel:before { top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background-position: -565px -358px; } ul.cmpListIconTy1 > li.iconCatalog:before { top: 50%; left: 0; width: 19px; height: 19px; margin-top: -9.5px; background-position: -375px -280px; } ul.cmpListIconTy1 > li.iconInfo:before { top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; background-position: -565px -514px; } .cmpPanel { border: 1px solid gainsboro; background-color: #f5f7f8; } .cmpPanel > .column { float: left; padding: 40px 40px 32px; border: 1px solid gainsboro; border-width: 0 0 0 1px; } .cmpPanel > .column:first-child { border-left: none; } .cmpPanel > .column .btnBa > a { border-width: 2px; } .cmpPanel > .column .hdg { font-size: 25px; font-size: 2.5rem; font-weight: normal; margin-bottom: 20px; } .cmpPanel > .column .hdg > span.sub { font-size: 14px; font-size: 1.4rem; margin-left: 10px; } .cmpPanel > .column .hdg.iconShopping, .cmpPanel > .column .hdg.iconSearch, .cmpPanel > .column .hdg.iconTv, .cmpPanel > .column .hdg.iconTel, .cmpPanel > .column .hdg.iconTicket, .cmpPanel > .column .hdg.iconInternet, .cmpPanel > .column .hdg.iconInfo, .cmpPanel > .column .hdg.iconReserve, .cmpPanel > .column .hdg.iconSphone, .cmpPanel > .column .hdg.iconMail, .cmpPanel > .column .hdg.iconCalendar, .cmpPanel > .column .hdg.iconAny { padding-top: 58px; } .cmpPanel > .column .hdg.iconShopping:before { top: 3px; left: 0; width: 44px; height: 44px; margin-top: 0; background-position: -400px -263px; } .cmpPanel > .column .hdg.iconSearch:before { top: 0; left: 0; width: 48px; height: 48px; margin-top: 0; background-position: -330px -330px; } .cmpPanel > .column .hdg.iconTv:before { top: 3px; left: 0; width: 62px; height: 48px; margin-top: 0; background-position: -46px -330px; } .cmpPanel > .column .hdg.iconTel:before { top: 0; left: 0; width: 47px; height: 48px; margin-top: 0; background-position: -400px 0; } .cmpPanel > .column .hdg.iconTicket:before { top: 0; left: 0; width: 48px; height: 48px; margin-top: 0; background-position: -168px -330px; } .cmpPanel > .column .hdg.iconInternet:before { top: 0; left: 0; width: 47px; height: 38px; margin-top: 0; background-position: -274px -438px; } .cmpPanel > .column .hdg.iconInfo:before { top: 0; left: 0; width: 48px; height: 48px; margin-top: 0; background-position: 0 -384px; } .cmpPanel > .column .hdg.iconReserve:before { top: 0; left: 0; width: 48px; height: 48px; margin-top: 0; background-position: -276px -330px; } .cmpPanel > .column .hdg.iconSphone:before { top: 0; left: 0; width: 40px; height: 48px; margin-top: 0; background-position: 0 -330px; } .cmpPanel > .column .hdg.iconMail:before { top: 0; left: 0; width: 47px; height: 47px; margin-top: 0; background-position: -400px -107px; } .cmpPanel > .column .hdg.iconCalendar:before { top: 0; left: 0; width: 48px; height: 48px; margin-top: 0; background-position: -114px -330px; } .cmpPanel.typeCol2 > .column { width: 50%; } .cmpPanel.typeCol3 > .column { width: 33.33333%; } .cmpPanel.typeCol4 > .column { width: 25%; } .cmpPanelSns { font-size: 12px; font-size: 1.2rem; position: absolute; z-index: 100; top: 185px; right: 40px; width: 239px; } .cmpPanelSns > div { position: relative; position: relative; } .cmpPanelSns > div:before { position: absolute; z-index: 1; top: 1px; top: -24px; left: 166px; width: 0; height: 0; content: ''; border: 12.5px solid transparent; border-bottom-color: gainsboro; } .cmpPanelSns > div:after { position: absolute; z-index: 1; top: 2px; top: -22px; left: 167px; width: 0; height: 0; content: ''; border: 12.5px solid transparent; border-bottom-color: #f5f6f8; } /* SNS Panel Page Bottom Style */ .cmpPanelSns.jsPositionBottom { padding-bottom: 17.5px; } .cmpPanelSns.jsPositionBottom > div:before { top: auto; bottom: 1px; bottom: -24px; border: 12.5px solid transparent; border-top-color: gainsboro; } .cmpPanelSns.jsPositionBottom > div:after { top: auto; bottom: 2px; bottom: -22px; border: 12.5px solid transparent; border-top-color: #f5f6f8; } .cmpPanelSns > div > ul { border: 1px solid #dbdbdb; border-width: 1px 0 0 1px; background-color: #f5f6f8; } .cmpPanelSns > div > ul > li { float: left; border: 1px solid #dbdbdb; border-width: 0 1px 1px 0; } .cmpPanelSns > div > ul > li > a { display: block; width: 118px; padding: 20px 0; text-align: center; } .cmpPanelSns > div > .panel { font-size: 11px; font-size: 1.1rem; padding: 10px; border: 1px solid #dbdbdb; border-width: 0 1px 1px 1px; background-color: #f5f6f8; } .cmpPanelSns.isClose { display: none; } .cmpModal { width: 100%; height: 100%; } .cmpModal > .inner { position: relative; margin: 0 auto; background-color: #fff; } .cmpModal > .inner > .btnClose { display: none; } .cmpModal .hdgBa { margin-bottom: 25px; } #myStatus.isShowModal .strWrapper { position: inherit; } #myStatus.isShowModal .cmpPanelSns { display: none; } #myStatus.isShowModal .cmpModal { position: absolute; z-index: 100; top: 0; left: 0; padding: 20px 80px; background: url(/etc/designs/disney/libs/common/image/modal-bg.png) repeat center center; } #myStatus.isShowModal .cmpModal > .inner { width: 100%; max-width: 800px; margin-top: 0; } #myStatus.isShowModal .cmpModal > .inner > .btnClose { position: absolute; top: 0; right: -60px; display: inline-block; } #myStatus.isShowModal .cmpModal > .inner > .btnClose > a { display: block; overflow: hidden; width: 60px; height: 60px; color: #fff; background-color: #0093d0; } #myStatus.isShowModal .cmpModal > .inner > .btnClose > a:before { top: 50%; left: 50%; width: 15px; height: 15px; margin-top: -7.5px; margin-left: -7.5px; background-position: -593px -66px; } #myStatus.isShowModal .cmpModal > .inner > .btnClose > a > span { position: relative; z-index: -1; } #myStatus.isShowModal .cmpModal > .inner > .modalContents { min-height: 392px; padding: 40px; } #myStatus.isShowModal .cmpModal > .inner > .modalContents .hdgTy3 { font-size: 20px; font-size: 2rem; } #myStatus.isShowModal .cmpModal > .inner > .modalContents .hdgTy3:before { top: 40%; } .cmpGallery .mainGallery { position: relative; margin-bottom: 20px; } .cmpGallery .mainGallery .slideWrap { position: relative; left: 0; overflow: hidden; width: 100%; } .cmpGallery .mainGallery .slideWrap ul.slide { width: 2000%; } .cmpGallery .mainGallery .slideWrap ul.slide li { float: left; width: 5%; } .cmpGallery .mainGallery .slideWrap ul.navController { position: absolute; top: 50%; width: 100%; margin-top: -45px; } .cmpGallery .mainGallery .slideWrap ul.navController li a { width: 90px; height: 90px; border: 2px solid #fff !important; border-radius: 90px; background: url(/etc/designs/disney/libs/common/image/transparent-bg.png) repeat 0 0; } .cmpGallery .mainGallery .slideWrap ul.navController li.prev { border-radius: 90px; float: left; margin-left: 40px; } .cmpGallery .mainGallery .slideWrap ul.navController li.prev a:before { top: 50%; left: 37px; width: 21px; height: 31px; margin-top: -15.5px; background-position: -507px -76px; } .cmpGallery .mainGallery .slideWrap ul.navController li.next { float: right; margin-right: 40px; } .cmpGallery .mainGallery .slideWrap ul.navController li.next a:before { top: 50%; left: 39px; width: 21px; height: 31px; margin-top: -15.5px; background-position: -507px -113px; } .cmpGallery .navGallery { position: relative; width: 100%; } .cmpGallery .navGallery .logo { float: left; width: 280px; height: 150px; } .cmpGallery .navGallery .slideWrap { float: right; overflow: hidden; width: 830px; margin-top: 12px; margin-right: 43px; } .cmpGallery .navGallery .slideWrap ul.slide { position: relative; left: 0; width: 1000%; } .cmpGallery .navGallery .slideWrap ul.slide li { float: left; width: 2.5%; } .cmpGallery .navGallery .slideWrap ul.slide li a { width: 100%; } .cmpGallery .navGallery .slideWrap ul.slide li a img { border: 10px solid #fff; } .cmpGallery .navGallery .slideWrap ul.slide li a:hover img { border-color: #f5f7f8; } .cmpGallery .navGallery .slideWrap ul.slide li.isCurrent a img { border-color: #0093d0; } .cmpGallery .navGallery ul.navController1 { position: absolute; top: 43px; right: 0; width: 920px; } .cmpGallery .navGallery ul.navController1 li { margin: 0 -10px 0 0; } .cmpGallery .navGallery ul.navController1 li a { width: 60px; height: 60px; border-radius: 60px; background-color: transparent; } .cmpGallery .navGallery ul.navController1 li a:before { background-image: url(/etc/designs/disney/libs/common/image/sprite.png); } .cmpGallery .navGallery ul.navController1 li a:after { display: none; } .cmpGallery .navGallery ul.navController1 li.prev { margin: 0 0 0 -10px; } .cmpGallery .navGallery ul.navController1 li a span { top: -20px; display: inline-block; } .cmpGallery .navGallery ul.navController1 li.prev a:before { top: 50%; left: 10px; width: 19px; height: 30px; margin-top: -15px; background-position: -507px -222px; } .cmpGallery .navGallery ul.navController1 li.next a:before { top: 50%; right: 0; left: 50%; width: 19px; height: 30px; margin-top: -15px; background-position: -507px -258px; } .cmpTableBa { width: 100%; margin-bottom: 30px; color: #777; border: 1px solid #dcdcdc; border-width: 1px 0 0 1px; } .cmpTableBa + .cmpTableBa { margin-top: -30px; } .cmpTableBa a { color: #0093d0; } .cmpTableBa.typeTheater ul.haed { font-weight: bold; display: table; width: 100%; color: #333; background-color: #f5f7f8; } .cmpTableBa.typeTheater ul.haed > li { display: table-cell; width: 38%; padding: 30px 20px; border: 1px solid #dcdcdc; border-width: 0 1px 1px 0; } .cmpTableBa.typeTheater ul.haed > li:first-child { width: 24%; } .cmpTableBa.typeTheater .table { display: table; width: 100%; } .cmpTableBa.typeTheater .table .hdg { display: table-cell; width: 24%; padding: 10px; vertical-align: top; border: 1px solid #dcdcdc; border-width: 0 1px 1px 0; } .cmpTableBa.typeTheater .table dl.table { display: table-cell; width: 76%; vertical-align: top; } .cmpTableBa.typeTheater .table dl.table dt, .cmpTableBa.typeTheater .table dl.table dd { float: left; width: 50%; padding: 18px 20px; border: 1px solid #dcdcdc; border-width: 0 1px 1px 0; } .cmpTableBa.typeTheater .table dl.table dt { clear: both; } /* ----------------------------------------------------------------------------- * pseudo SELECT ----------------------------------------------------------------------------- */ .cmpItem.slideNone > .slideWrap > .slide.typeAutoH > li > .cmpListSelect { position: relative; float: left; width: 50%; padding: 0 0 0 40px; margin-bottom: 1.5em; +zoom: 1; } .cmpItem.slideNone > .slideWrap > .slide.typeAutoH > li > .cmpListSelect:after { clear: both; display: block; content: ''; } /* static pseudo SELECT ----------------------------------------------------------------------------- */ .listSelect { display: inline-block; width: 60%; border: 1px solid gainsboro; border-radius: 4px; font-size: 14px; font-size: 1.4rem; font-weight: bold; color: #777; vertical-align: middle; z-index: 10000; overflow: hidden; } .listSelect > dt, .selectItem { display: none; border-top: 1px solid gainsboro; } .listSelect > *:first-child { display: block; border-top: none; } .listSelect > * > a { position: relative; display: block; padding: .7em 1.5em .7em .7em; background: #fff; color: #777; outline: none; } .cmpListSelect > .listSelect > *:first-child > a:after { position: absolute; right: 10px; top: 50%; display: block; width: 0; height: 0; margin-top: -4px; border-width: 7px 5px 0; border-color: #333 transparent transparent; border-style: solid; content: ''; } /* pseudo SELECT Selected value link ----------------------------------------------------------------------------- */ .linkDownloader { display: none; } .linkDownloader.downloaderEnabled { display: inline-block; margin: 0; vertical-align: middle; font-size: 16px; font-size: 1.6rem; } .linkDownloader.downloaderEnabled a { position: relative; display: block; padding-left: 44px; color: #0093d0; font-weight: bold; outline: none; } .linkDownloader.downloaderEnabled a:before { position: absolute; top: 50%; left: 8px; display: block; width: 25px; height: 22px; margin-top: -11px; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); background-position: -402px -521px; content: ''; } .linkDownloader.downloaderEnabled a:hover { text-decoration: underline; } /* inserted list ----------------------------------------------------------------------------- */ .insSetScale { display: block; position: absolute; z-index: 10000; transition: opacity .1s ease; } .insSetScale > div { width: 1200px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .insSetScale > div > div { margin: 1px -1px 0 0; border: 1px solid transparent; border-right: none; } .insListSelect { position: relative; width: 50%; margin: 0 0 0 auto; padding: 0 0 0 50px; } .insListSelect .listSelect { position: relative; max-height: 300px; margin-top: -1px; margin-left: -1px; border-width: 2px; overflow: auto; -webkit-overflow-scrolling: touch; } .insListSelect .listSelect dt { display: none; } .insListSelect .selectItem { display: block; } .insListSelect .listSelect > .selectItem > a:hover { background: #0093d0; color: #fff; text-decoration: none; } .isStandingBy .listSelect, .insSetScale.isStandingBy { visibility: hidden; } /* ========== Body SNS Component ========== */ /* ----- Body SNS General ----- */ .bodySns { margin: 50px 0 53px; } .bodySnsContent { margin: 0; text-align: center; z-index: 3000; } .bodySnsLead { margin: 0; font-size: 1.4rem; font-size: 14px; font-weight: bold; } .bodySnsContent > ul { display: block; margin: 11px 0 0; vertical-align: bottom; } .bodySnsContent > ul > li { display: inline-block; margin: 0 5px; vertical-align: bottom; } .bodySnsContent > ul > li > a { overflow: hidden; } .bodySnsContent > ul > li > a, .bodySnsContent > ul > li > a:before { display: block; width: 40px; height: 40px; } .bodySnsContent > ul > li > a:before { background: transparent url(/etc/designs/disney/libs/common/image/body-sns-sprite.png) left -77px no-repeat; content: ''; } /* Twitter */ .bodySnsContent > ul > li.shareTw > a:before { background-position: 0 -79px; } /* Facebook */ .bodySnsContent > ul > li.shareFb > a:before { background-position: -40px -79px; } /* Google+ */ .bodySnsContent > ul > li.shareGoogle > a:before { background-position: -80px -79px; } /* E-Mail */ .bodySnsContent > ul > li.shareMail > a:before { background-position: -120px -79px; } /* LINE */ .bodySnsContent > ul > li.shareLine > a:before { background-position: -160px -79px; } /* ------ Body SNS Fixed ------ */ .bodySnsIsFixed > .bodySnsContent { position: fixed; left: 0; right: 0; margin: auto; } .bodySns.bodySnsIsFixed .bodySnsLead { visibility: hidden; text-indent: -100%; } .is_ipad .bodySnsContent > ul > li > a:before { background-size: 200px 60px; } /* Twitter */ .is_ipad .bodySnsContent > ul > li.shareTw > a:before { background-position: 0 0; } /* Facebook */ .is_ipad .bodySnsContent > ul > li.shareFb > a:before { background-position: -40px 0; } /* Google+ */ .is_ipad .bodySnsContent > ul > li.shareGoogle > a:before { background-position: -80px 0; } /* E-Mail */ .is_ipad .bodySnsContent > ul > li.shareMail > a:before { background-position: -120px 0; } /* LINE */ .is_ipad .bodySnsContent > ul > li.shareLine > a:before { background-position: -160px 0; } @media only screen and (min-width: 801px) { .pseudoCmp.bodySns > .bodySnsContent { visibility: hidden; } .pseudoCmp.bodySns.bodySnsIsFixed > .bodySnsContent { top: 0; right: auto; bottom: 0; left: 6px; margin: auto; visibility: visible; transition: bottom .3s ease-out 0s; } .bodySns.bodySnsIsFixed > .bodySnsContent > .bodySnsLead { display: none; } .bodySns.bodySnsIsFixed > .bodySnsContent > ul { margin: 0; } .bodySns.bodySnsIsFixed > .bodySnsContent > ul > li { display: block; margin: 0 0 9px; } .bodySns.bodySnsIsFixed > .bodySnsContent > ul > li:last-child { margin: 0; } } /* ========== Body SNS Component ========== */ @media only screen and (min-width: 801px) and (max-width: 900px) { .cmpItem.slideOnly > .slideWrap > ul.slide > li > .text { font-size: 1.8rem; } .cmpItem1 ul.slide > li > a > .data > .lead { font-size: 1.65rem; } .cmpItem1 ul.slide > li > a > .data > div > span.price { font-size: 1.65rem; } .cmpItem1 ul.slide > li > a > .data > div > span.brand { display: none; } .cmpItem3 ul.slide > li > a > .data > div > span.price { font-size: 1.65rem; } .cmpItem3 ul.slide > li > a > .data > div > span.brand { display: none; } .cmpItem4 > ul.slide > li.type1 .data > .text, .cmpItem4 > ul.slide > li.type4 .data > .text, .cmpItem4 > ul.slideNone > li.type1 .data > .text, .cmpItem4 > ul.slideNone > li.type4 .data > .text{ font-size: 1.65rem; } /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide > li.type1 .data > .text, .cmpItem4-flex > ul.slide > li.type4 .data > .text, .cmpItem4-flex > ul.slideNone > li.type1 .data > .text, .cmpItem4-flex > ul.slideNone > li.type4 .data > .text{ font-size: 1.65rem; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem7 ul.slide > li .info .data > .text { font-size: 1.65rem; } .cmpItem8 ul.slide > li > span > .text, .cmpItem8 ul.slide > li > a > .text { font-size: 1.65rem; } .cmpNews > .pickup > a > .text { font-size: 1.65rem; } .cmpNews > .newsWrap > ul.item > li > a > .lead { font-size: 1.65rem; } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .pickup > a > .text { font-size: 1.65rem; } .cmpNews-flex > .newsWrap > ul.item > li > a > .lead { font-size: 1.65rem; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ } @media only screen and (max-width: 1297px) { .cmpMain.typeDrama > ul.slide > li { width: 100%; } .cmpMain.typeDrama > ul.slide > li > .thumb { position: relative; float: none; width: 100%; max-width: 900px; height: auto; margin: 0 auto; text-align: center; } .cmpMain.typeDrama > ul.slide > li > .thumb > iframe, .cmpMain.typeDrama > ul.slide > li > .thumb object { width: 702px !important; height: 405px !important; } .cmpMain.typeDrama > ul.slide > li > .thumb + .data:after { display: none; } .cmpMain.typeDrama > ul.slide > li > .data { position: relative; float: none; width: 100%; height: auto; padding: 40px; } .cmpMain.typeDrama > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 41px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpMain.typeDrama > ul.slide > li > .data:after { z-index: 0; } .cmpMain.typeDrama > ul.slide > li > .data > .logo { display: table-cell; width: 180px; margin: 0; padding-right: 40px; vertical-align: middle; } .cmpMain.typeDrama > ul.slide > li > .data > .logo > span { padding: 0; } .cmpMain.typeDrama > ul.slide > li > .data > .logo > span > img { width: 100%; max-height: none; } .cmpMain.typeDrama > ul.slide > li > .data > div { display: table-cell; height: auto; margin-top: 0; vertical-align: middle; } .cmpMain.typeDrama > ul.slide > li > .data > div > .lead { margin-bottom: 8px; } .cmpMain.typeDrama > ul.slide > li > .data > div > .text { margin-top: 0; margin-bottom: 0; } .cmpMain.typeDrama > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 1px 0 0 !important; } .cmpMain.typeDrama > ul.slide > li > ul.list > li { display: none; float: left; width: 50%; } .cmpMain.typeDrama > ul.slide > li > ul.list > li > a { padding: 17px 40px 17px 80px; border-width: 0 1px 0 0; } .cmpMain.typeDrama > ul.slide > li > ul.list > li > a:before { top: 50%; right: 30px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(1), .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain.typeDrama > ul.nav { top: 390px; right: 30px; margin-top: 0; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex.typeDrama > ul.slide > li { width: 100%; } .cmpMain-flex.typeDrama > ul.slide > li > .thumb { position: relative; float: none; width: 100%; max-width: 900px; height: auto; margin: 0 auto; text-align: center; } .cmpMain-flex.typeDrama > ul.slide > li > .thumb > iframe, .cmpMain-flex.typeDrama > ul.slide > li > .thumb object { width: 702px !important; height: 405px !important; } .cmpMain-flex.typeDrama > ul.slide > li > .thumb + .data:after { display: none; } .cmpMain-flex.typeDrama > ul.slide > li > .data { position: relative; float: none; width: 100%; height: auto; padding: 40px; } .cmpMain-flex.typeDrama > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 41px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpMain-flex.typeDrama > ul.slide > li > .data:after { z-index: 0; } .cmpMain-flex.typeDrama > ul.slide > li > .data > .logo { display: table-cell; width: 180px; margin: 0; padding-right: 40px; vertical-align: middle; } .cmpMain-flex.typeDrama > ul.slide > li > .data > .logo > span { padding: 0; } .cmpMain-flex.typeDrama > ul.slide > li > .data > .logo > span > img { width: 100%; max-height: none; } .cmpMain-flex.typeDrama > ul.slide > li > .data > div { display: table-cell; height: auto; margin-top: 0; vertical-align: middle; } .cmpMain-flex.typeDrama > ul.slide > li > .data > div > .lead { margin-bottom: 8px; } .cmpMain-flex.typeDrama > ul.slide > li > .data > div > .text { margin-top: 0; margin-bottom: 0; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 1px 0 0 !important; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li { display: none; float: left; width: 50%; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li > a { padding: 17px 40px 17px 80px; border-width: 0 1px 0 0; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li > a:before { top: 50%; right: 30px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(1), .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain-flex.typeDrama > ul.nav { top: 390px; right: 30px; margin-top: 0; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ } @media only screen and (max-width: 800px) { .setScale { margin-bottom: 25px; } .setScale > div { width: auto; } .setScaleTab > div { width: 1200px; } .cmpMain > ul.slide > li, .cmpMain2 > ul.slide > li { width: 100%; } .cmpMain > ul.slide > li.isColorDark > .data, .cmpMain2 > ul.slide > li.isColorDark > .data { position: relative; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: black; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { z-index: 0; } .cmpMain > ul.slide > li.isColorGray > .data, .cmpMain2 > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #ccc; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { z-index: 0; } .cmpMain > ul.slide > li.typeJacket > .data, .cmpMain > ul.slide > li.typeJacket > .list, .cmpMain2 > ul.slide > li.typeJacket > .data, .cmpMain2 > ul.slide > li.typeJacket > .list { display: none; } .cmpMain > ul.slide > li > .thumb, .cmpMain2 > ul.slide > li > .thumb { float: none; width: 100%; height: auto; } .cmpMain > ul.slide > li > .thumb.typeMovie, .cmpMain2 > ul.slide > li > .thumb.typeMovie { position: relative; width: 100%; padding-top: 60%; } .cmpMain > ul.slide > li > .thumb.typeMovie > iframe, .cmpMain > ul.slide > li > .thumb.typeMovie object, .cmpMain2 > ul.slide > li > .thumb.typeMovie > iframe, .cmpMain2 > ul.slide > li > .thumb.typeMovie object { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMain > ul.slide > li > .thumb.typeMovie + .data:after, .cmpMain2 > ul.slide > li > .thumb.typeMovie + .data:after { display: none; } .cmpMain > ul.slide > li > .data, .cmpMain2 > ul.slide > li > .data { position: relative; float: none; width: 100%; height: auto; padding: 24px 32px 20px 32px; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { z-index: 0; } .cmpMain > ul.slide > li > .data > .logo, .cmpMain2 > ul.slide > li > .data > .logo { display: table-cell; width: 180px; margin: 0; padding-right: 40px; vertical-align: middle; } .cmpMain > ul.slide > li > .data > .logo > span, .cmpMain2 > ul.slide > li > .data > .logo > span { padding: 0; } .cmpMain > ul.slide > li > .data > .logo > span > img, .cmpMain2 > ul.slide > li > .data > .logo > span > img { width: 100%; max-height: none; } .cmpMain > ul.slide > li > .data > div, .cmpMain2 > ul.slide > li > .data > div { display: table-cell; height: auto; margin-top: 0; vertical-align: middle; } .cmpMain > ul.slide > li > .data > div > .lead, .cmpMain2 > ul.slide > li > .data > div > .lead { margin-bottom: 8px; font-size: 22px; font-size: 2.2rem; } .cmpMain > ul.slide > li > .data > div > .text, .cmpMain2 > ul.slide > li > .data > div > .text { margin-top: 0; margin-bottom: 0; font-size:15px; font-size:1.5rem; } .cmpMain > ul.slide > li > ul.list, .cmpMain2 > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 1px 0 0 !important; } .cmpMain > ul.slide > li > ul.list > li, .cmpMain2 > ul.slide > li > ul.list > li { display: none; float: left; width: 50%; } .cmpMain > ul.slide > li > ul.list > li > a, .cmpMain2 > ul.slide > li > ul.list > li > a { padding: 17px 40px 17px 80px; border-width: 0 1px 0 0; } .cmpMain > ul.slide > li > ul.list > li > a:before, .cmpMain2 > ul.slide > li > ul.list > li > a:before { top: 50%; right: 30px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain > ul.slide > li > ul.list > li:nth-child(1), .cmpMain > ul.slide > li > ul.list > li:nth-child(2), .cmpMain2 > ul.slide > li > ul.list > li:nth-child(1), .cmpMain2 > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain > ul.slide > li > ul.list > li:nth-child(2) a, .cmpMain2 > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain > ul.nav, .cmpMain2 > ul.nav { top: 390px; right: 30px; margin-top: 0; } .cmpMain.typeDrama { margin-bottom: 40px; } .cmpMain.typeDrama > ul.slide > li > .thumb { padding-top: 60%; } .cmpMain.typeDrama > ul.slide > li > .thumb > iframe, .cmpMain.typeDrama > ul.slide > li > .thumb object { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMain2 > .slide > li { height: auto; } .cmpMain2 > .thumb.typeMovie { float: none; width: 100%; height: auto; margin-top: -1px; margin-right: -1px; margin-bottom: 0; margin-left: -1px; padding-top: 60%; } .cmpMain2 > .thumb.typeMovie:after { display: none; } .cmpMain2 > .thumb.typeMovie iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMain2 > .thumb.typeMovie + .slide li { position: relative; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide > li { display: block; width: 100%; } .cmpMain-flex > ul.slide > li.isColorDark > .data { position: relative; } .cmpMain-flex > ul.slide > li.isColorDark > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: black; } .cmpMain-flex > ul.slide > li.isColorDark > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #ccc; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li.typeJacket > .data, .cmpMain-flex > ul.slide > li.typeJacket > .list { display: none; } .cmpMain-flex > ul.slide > li > .thumb { float: none; width: 100%; height: auto; } .cmpMain-flex > ul.slide > li > .thumb.typeMovie { position: relative; width: 100%; padding-top: 60%; } .cmpMain-flex > ul.slide > li > .thumb.typeMovie > iframe, .cmpMain-flex > ul.slide > li > .thumb.typeMovie object { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMain-flex > ul.slide > li > .thumb.typeMovie + .data:after { display: none; } .cmpMain-flex > ul.slide > li > .data { position: relative; float: none; width: 100%; height: auto; padding: 24px 32px 20px 32px; } .cmpMain-flex > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: white; } .cmpMain-flex > ul.slide > li > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li > .data > .logo { display: table-cell; width: 180px; margin: 0; padding-right: 40px; vertical-align: middle; } .cmpMain-flex > ul.slide > li > .data > .logo > span { padding: 0; } .cmpMain-flex > ul.slide > li > .data > .logo > span > img { width: 100%; max-height: none; } .cmpMain-flex > ul.slide > li > .data > div { display: table-cell; height: auto; margin-top: 0; vertical-align: middle; } .cmpMain-flex > ul.slide > li > .data > div > .lead { margin-bottom: 8px; font-size: 22px; font-size: 2.2rem; } .cmpMain-flex > ul.slide > li > .data > div > .text { margin-top: 0; margin-bottom: 0; font-size:15px; font-size:1.5rem; } .cmpMain-flex > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 1px 0 0 !important; display: flex; } .cmpMain-flex > ul.slide > li > ul.list > li { display: none; width: 50%; } .cmpMain-flex > ul.slide > li > ul.list > li > a { padding: 17px 40px 17px 80px; border-width: 0 1px 0 0; } .cmpMain-flex > ul.slide > li > ul.list > li > a:before { top: 50%; right: 30px; width: 9px; height: 15px; margin-top: -7.5px; background-position: -593px -45px; } .cmpMain-flex > ul.slide > li > ul.list > li:nth-child(1), .cmpMain-flex > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain-flex > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain-flex > ul.nav { top: 390px; right: 30px; margin-top: 0; } .cmpMain-flex.typeDrama { margin-bottom: 40px; } .cmpMain-flex.typeDrama > ul.slide > li > .thumb { padding-top: 60%; } .cmpMain-flex.typeDrama > ul.slide > li > .thumb > iframe, .cmpMain-flex.typeDrama > ul.slide > li > .thumb object { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .navChannel { padding: 20px 30px; } .navChannel > .slideWrap { overflow: hidden; width: 100%; } .navChannel > .slideWrap > ul.slide { width: 2000%; } .navChannel > .slideWrap > ul.slide li { width: 2.5%; text-align: center; } .navChannel > .slideWrap > ul.slide li img { border: 5px solid transparent; } .navChannel > ul.navController { width: 100%; margin-left: -32px; } .navChannel > ul.navController li > a { border: none; background-color: transparent; } .navChannel > ul.navController li > a:before { width: 11px; height: 17px; margin-top: -7.5px; margin-left: -4px; background-position: -254px -75px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .navChannel > ul.navController li.prev > a:before { margin-left: -5px; background-position: -254px -93px; } .cmpMovie > ul.movie { float: none; width: 100%; height: auto; margin: 0; } .cmpMovie > ul.movie > li { width: 100%; height: 100%; padding-top: 60%; } .cmpMovie > ul.movie > li > iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMovie > .data { display: table; float: none; width: 100%; height: auto; } .cmpMovie > .data:after { display: none; } .cmpMovie > .data > .logo { display: block; float: left; width: 33.33333%; padding: 10px; vertical-align: middle; } .cmpMovie > .data > .logo > span { height: auto; } .cmpMovie > .data > .logo > span img { width: 100%; max-height: 80px; } .cmpMovie > .data .slideWrap { display: block; float: right; overflow: hidden; width: 66.66666%; height: 100px; border: none; } .cmpMovie > .data .slideWrap ul.slide > li { float: left; width: 50%; } .cmpMovie > .data .slideWrap ul.slide > li > a { padding-left: 47%; border: none; } .cmpMovie > .data .slideWrap ul.slide > li > a > img { left: 3px; width: 40%; height: auto; } .cmpMovie > .data .slideWrap ul.slide > li > a > .title, .cmpMovie > .data .slideWrap ul.slide > li > a > .time { font-size: 15px; font-size: 1.5rem; } .cmpMovie > .data .label { position: static; clear: both; padding-right: 150px; text-align: right; font-size: 15px; font-size: 1.5rem; } .cmpMovie2 ul.navController1 { display: none; } .cmpImage ul.navController1 { display: none; } .cmpImage2 ul.navController1, .cmpImageCharacter ul.navController1 { display: none; } .cmpItem > ul.nav > li > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -75px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem > ul.nav > li.prev > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -93px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem > ul.item > li.type1.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type1.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type2.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type2.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem > ul.item > li.type3.isColorDark > a .linkBa span:after, .cmpItem > ul.item > li.type3.isColorDark > div .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -231px -276px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem { border: 1px solid gainsboro; } .cmpItem .linkBa { bottom: 40px; } .cmpItem > .slideWrap { top: 0; width: 100%; border-right: none; border-bottom: 1px solid gainsboro; } .cmpItem > .slideWrap > ul.slide { float: none; height: auto; } .cmpItem > .slideWrap > ul.slide > li { position: static; width: 10%; height: 100%; padding-bottom: 90px; border-width: 0 1px 0 0; } .cmpItem > .slideWrap > ul.slide > li .thumb img { width: 100%; height: auto !important; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb, .cmpItem > .slideWrap > ul.slide > li > div > .thumb { width: 100%; height: auto; } .cmpItem > .slideWrap > ul.slide > li > a > .thumb img, .cmpItem > .slideWrap > ul.slide > li > div > .thumb img { height: auto !important; } .cmpItem > .slideWrap > ul.slide > li > a > .lead, .cmpItem > .slideWrap > ul.slide > li > div > .lead { font-size: 22px; font-size: 2.2rem; padding: 24px 32px 20px 32px; } .cmpItem > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem > .slideWrap > ul.slide > li > div > .lead:after { left: 32px; } .cmpItem > .slideWrap > ul.slide > li > .text, .cmpItem > .slideWrap > ul.slide > li > .text1, .cmpItem > .slideWrap > ul.slide > li > .linkBa, .cmpItem > .slideWrap > ul.slide > li > .listLinkTy3 { font-size:15px; padding: 0 32px; } .cmpItem > ul.item > li > .data > .text1:first-child, .cmpItem > .slideWrap > ul.slide > li > a + .text1, .cmpItem > .slideWrap > ul.slide > li > div + .text1 { padding-top: 24px; } .cmpItem > .slideWrap > ul.slide > li > .listLinkTy3 { position: static; } .cmpItem > .slideWrap > ul.slide > li > .listLinkTy3 > li { margin: 0 20px 10px 0; } .cmpItem > .slideWrap > ul.slide > li > .listLinkTy3 > li:last-child { margin-right: 0; } .cmpItem > ul.nav { position: relative; top: -80px; right: 40px; float: right; margin-bottom: -50px; } .cmpItem > ul.item { width: 100%; width: calc(100% + 1px); height: auto; margin: 0; } .cmpItem > ul.item > li { position: relative; width: 50%; width: calc(50% - .5px); height: 100%; padding-bottom: 80px; } .cmpItem > ul.item > li:first-child { width: calc(50% + .5px); } .cmpItem > ul.item > li > a, .cmpItem > ul.item > li > div { width: 100%; } .cmpItem > ul.item > li > a > .thumb, .cmpItem > ul.item > li > div > .thumb { width: 100%; height: auto; margin: 0; } .cmpItem > ul.item > li > a > .thumb img, .cmpItem > ul.item > li > div > .thumb img { height: auto; } .cmpItem > ul.item > li > a > .lead, .cmpItem > ul.item > li > div > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem > ul.item > li > .data > .text, .cmpItem > ul.item > li > .data > .text1 { font-size: 15px; font-size:1.5rem; } .cmpItem > ul.item > li.type1.isColorDark > a .lead, .cmpItem > ul.item > li.type1.isColorDark > div .lead, .cmpItem > ul.item > li.type1.isColorGray > a .lead, .cmpItem > ul.item > li.type1.isColorGray > div .lead, .cmpItem > ul.item > li.type2.isColorDark > a .lead, .cmpItem > ul.item > li.type2.isColorDark > div .lead, .cmpItem > ul.item > li.type2.isColorGray > a .lead, .cmpItem > ul.item > li.type2.isColorGray > div .lead, .cmpItem > ul.item > li.type3.isColorDark > a .lead, .cmpItem > ul.item > li.type3.isColorDark > div .lead, .cmpItem > ul.item > li.type3.isColorGray > a .lead, .cmpItem > ul.item > li.type3.isColorGray > div .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem > ul.item > li > a > .lead:after, .cmpItem > ul.item > li > div > .lead:after { left: 32px; } .cmpItem > ul.item > li.type1, .cmpItem > ul.item > li.type2 { width: 100%; height: auto; margin: 0; padding-bottom: 0; border-right: none; } .cmpItem > ul.item > li.type1 > a .lead, .cmpItem > ul.item > li.type1 > div .lead, .cmpItem > ul.item > li.type1.isColorDark > a .lead, .cmpItem > ul.item > li.type1.isColorDark > div .lead { font-size: 22px; font-size: 2.2rem; padding: 24px 32px 18px; } .cmpItem > ul.item > li.type1 > a .text, .cmpItem > ul.item > li.type1 > div .text, .cmpItem > ul.item > li.type1.isColorDark > a .text, .cmpItem > ul.item > li.type1.isColorDark > div .text { padding: 0 32px; } .cmpItem > ul.item > li.type1 > a .linkBa, .cmpItem > ul.item > li.type1.isColorDark > a .linkBa { padding: 0 32px; } .cmpItem > ul.item > li.type1 > a, .cmpItem > ul.item > li.type2 > a { overflow: hidden; height: 100%; } .cmpItem > ul.item > li.type2 > a .lead, .cmpItem > ul.item > li.type2 > div .lead { padding: 24px 32px 18px; font-size: 22px; font-size: 2.2rem; } .cmpItem > ul.item > li.type1 > a .text, .cmpItem > ul.item > li.type1 > a .text1, .cmpItem > ul.item > li.type1 > div .text, .cmpItem > ul.item > li.type1 > div .text1, .cmpItem > ul.item > li.type2 > a .text, .cmpItem > ul.item > li.type2 > a .text1, .cmpItem > ul.item > li.type2 > div .text, .cmpItem > ul.item > li.type2 > div .text1, .cmpItem > ul.item > li.type3 > a .text, .cmpItem > ul.item > li.type3 > a .text1, .cmpItem > ul.item > li.type3 > div .text, .cmpItem > ul.item > li.type3 > div .text1 { font-size: 15px !important; font-size: 1.5rem !important; } .cmpItem > ul.item > li.type1 .data, .cmpItem > ul.item > li.type2 .data { padding-bottom: 80px; } .cmpItem > ul.item > li.type1:last-child { border-bottom: none; } .cmpItem > ul.item > li.type3 { width: 100%; height: auto; margin: 0; padding-bottom: 0; } .cmpItem > ul.item > li.type3 > div > .youtube { width: 100%; height: 100%; padding-top: 60%; } .cmpItem > ul.item > li.type3 > div > .youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpItem.slideR > .nav { right: 40px; } .cmpItem.slideOnly > .slideWrap { border-bottom: 0; } .cmpItem.slideOnly > .slideWrap > ul.slide { height: auto; } .cmpItem.slideOnly > .slideWrap > ul.slide > li { width: 10%; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .thumb { float: none; width: 100%; height: auto; margin: 0; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead { font-size: 22px; font-size: 2.2rem; position: relative; float: none; width: 100%; padding: 24px 32px 32px 32px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .text { float: none; width: 100%; padding: 0 32px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li .listLinkTy3 { position: static; } .cmpItem.slideNone > .slideWrap { border-bottom: 0; } .cmpItem.slideNone > .slideWrap > ul.slide { height: auto; } .cmpItem.slideNone > .slideWrap > ul.slide > li { width: 100%; padding-bottom: 20px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > * { float: none !important; width: 100% !important; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .info { margin-top: 0; padding: 0 32px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb { width: 100%; height: auto; margin: 0; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead { font-size: 22px; font-size: 2.2rem; position: relative; width: 100%; padding: 24px 32px 10px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead .sub { position: static; top: 0; margin-bottom: 10px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead1 { font-size: 22px; font-size: 2.2rem; margin-bottom: 18px; padding: 0 32px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .text { width: 100%; padding: 0 32px; } .cmpItem.slideNone > .slideWrap > ul.slide > li .linkBa { position: static; } /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex > ul.nav > li > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -75px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem-flex > ul.nav > li.prev > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -93px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorDark > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorDark > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:after { top: 5px; left: 8px; width: 6px; height: 9px; margin-top: 0; background-position: -231px -276px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpItem-flex > ul.item > li.type1.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type1.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type2.isColorGray > div .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > a .linkBa span:after, .cmpItem-flex > ul.item > li.type3.isColorGray > div .linkBa span:after { background-position: -217px -119px; } .cmpItem-flex { border: 1px solid gainsboro; display: block; } .cmpItem-flex .linkBa { bottom: 40px; } .cmpItem-flex > .slideWrap { top: 0; width: 100%; border-right: none; border-bottom: 1px solid gainsboro; } .cmpItem-flex > .slideWrap > ul.slide { float: none; height: auto; } .cmpItem-flex > .slideWrap > ul.slide > li { position: static; width: 10%; height: 100%; padding-bottom: 90px; border-width: 0 1px 0 0; } .cmpItem-flex > .slideWrap > ul.slide > li .thumb img { width: 100%; height: auto !important; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb { width: 100%; height: auto; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .thumb img, .cmpItem-flex > .slideWrap > ul.slide > li > div > .thumb img { height: auto !important; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead { font-size: 22px; font-size: 2.2rem; padding: 24px 32px 20px 32px; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead:after { left: 32px; } .cmpItem-flex > .slideWrap > ul.slide > li > .text, .cmpItem-flex > .slideWrap > ul.slide > li > .text1, .cmpItem-flex > .slideWrap > ul.slide > li > .linkBa, .cmpItem-flex > .slideWrap > ul.slide > li > .listLinkTy3 { font-size:15px; padding: 0 32px; } .cmpItem-flex > ul.item > li > .data > .text1:first-child, .cmpItem-flex > .slideWrap > ul.slide > li > a + .text1, .cmpItem-flex > .slideWrap > ul.slide > li > div + .text1 { padding-top: 24px; } .cmpItem-flex > .slideWrap > ul.slide > li > .listLinkTy3 { position: static; } .cmpItem-flex > .slideWrap > ul.slide > li > .listLinkTy3 > li { margin: 0 20px 10px 0; } .cmpItem-flex > .slideWrap > ul.slide > li > .listLinkTy3 > li:last-child { margin-right: 0; } .cmpItem-flex > ul.nav { position: relative; top: -80px; right: 40px; float: right; margin-bottom: -50px; } .cmpItem-flex > ul.item { width: 100%; width: calc(100% + 1px); height: auto; margin: 0; } .cmpItem-flex > ul.item > li { position: relative; width: 50%; width: calc(50% - .5px); height: auto; padding-bottom: 80px; } .cmpItem-flex > ul.item > li:first-child { width: calc(50% + .5px); } .cmpItem-flex > ul.item > li > a, .cmpItem-flex > ul.item > li > div { width: 100%; } .cmpItem-flex > ul.item > li > a > .thumb, .cmpItem-flex > ul.item > li > div > .thumb { width: 100%; height: auto; margin: 0; } .cmpItem-flex > ul.item > li > a > .thumb img, .cmpItem-flex > ul.item > li > div > .thumb img { height: auto; } .cmpItem-flex > ul.item > li > a > .lead, .cmpItem-flex > ul.item > li > div > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem-flex > ul.item > li > .data > .text, .cmpItem-flex > ul.item > li > .data > .text1 { font-size: 15px; font-size:1.5rem; } .cmpItem-flex > ul.item > li.type1.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type1.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type1.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type1.isColorGray > div .lead, .cmpItem-flex > ul.item > li.type2.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type2.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type2.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type2.isColorGray > div .lead, .cmpItem-flex > ul.item > li.type3.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type3.isColorDark > div .lead, .cmpItem-flex > ul.item > li.type3.isColorGray > a .lead, .cmpItem-flex > ul.item > li.type3.isColorGray > div .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem-flex > ul.item > li > a > .lead:after, .cmpItem-flex > ul.item > li > div > .lead:after { left: 32px; } .cmpItem-flex > ul.item > li.type1, .cmpItem-flex > ul.item > li.type2 { width: 100%; height: auto; margin: 0; padding-bottom: 0; border-right: none; } .cmpItem-flex > ul.item > li.type1 > a .lead, .cmpItem-flex > ul.item > li.type1 > div .lead, .cmpItem-flex > ul.item > li.type1.isColorDark > a .lead, .cmpItem-flex > ul.item > li.type1.isColorDark > div .lead { font-size: 22px; font-size: 2.2rem; padding: 24px 32px 18px; } .cmpItem-flex > ul.item > li.type1 > a .text, .cmpItem-flex > ul.item > li.type1 > div .text, .cmpItem-flex > ul.item > li.type1.isColorDark > a .text, .cmpItem-flex > ul.item > li.type1.isColorDark > div .text { padding: 0 32px; } .cmpItem-flex > ul.item > li.type1 > a .linkBa, .cmpItem-flex > ul.item > li.type1.isColorDark > a .linkBa { padding: 0 32px; } .cmpItem-flex > ul.item > li.type1 > a, .cmpItem-flex > ul.item > li.type2 > a { overflow: hidden; height: 100%; } .cmpItem-flex > ul.item > li.type2 > a .lead, .cmpItem-flex > ul.item > li.type2 > div .lead { padding: 24px 32px 18px; font-size: 22px; font-size: 2.2rem; } .cmpItem-flex > ul.item > li.type1 > a .text, .cmpItem-flex > ul.item > li.type1 > a .text1, .cmpItem-flex > ul.item > li.type1 > div .text, .cmpItem-flex > ul.item > li.type1 > div .text1, .cmpItem-flex > ul.item > li.type2 > a .text, .cmpItem-flex > ul.item > li.type2 > a .text1, .cmpItem-flex > ul.item > li.type2 > div .text, .cmpItem-flex > ul.item > li.type2 > div .text1, .cmpItem-flex > ul.item > li.type3 > a .text, .cmpItem-flex > ul.item > li.type3 > a .text1, .cmpItem-flex > ul.item > li.type3 > div .text, .cmpItem-flex > ul.item > li.type3 > div .text1 { font-size: 15px !important; font-size: 1.5rem !important; } .cmpItem-flex > ul.item > li.type1 .data, .cmpItem-flex > ul.item > li.type2 .data { height: auto !important; padding-bottom: 80px; } .cmpItem-flex > ul.item > li.type1:last-child { border-bottom: none; } .cmpItem-flex > ul.item > li.type3 { width: 100%; height: auto; margin: 0; padding-bottom: 0; } .cmpItem-flex > ul.item > li.type3 > div > .youtube { width: 100%; height: 100%; padding-top: 60%; } .cmpItem-flex > ul.item > li.type3 > div > .youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpItem-flex.slideR > .nav { right: 40px; } .cmpItem-flex.slideOnly > .slideWrap { border-bottom: 0; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide { height: auto; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li { width: 10%; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .thumb { float: none; width: 100%; height: auto; margin: 0; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead { font-size: 22px; font-size: 2.2rem; position: relative; float: none; width: 100%; padding: 24px 32px 32px 32px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -49px; left: 32px; width: 0; height: 0; content: ''; border: 25px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .text { float: none; width: 100%; padding: 0 32px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li .listLinkTy3 { position: static; } .cmpItem-flex.slideNone > .slideWrap { border-bottom: 0; } .cmpItem-flex.slideNone > .slideWrap > ul.slide { height: auto; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li { width: 100%; padding-bottom: 20px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > * { float: none !important; width: 100% !important; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .info { margin-top: 0; padding: 0 32px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb { width: 100%; height: auto; margin: 0; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead { font-size: 22px; font-size: 2.2rem; position: relative; width: 100%; padding: 24px 32px 10px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead .sub { position: static; top: 0; margin-bottom: 10px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead1 { font-size: 22px; font-size: 2.2rem; margin-bottom: 18px; padding: 0 32px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .text { width: 100%; padding: 0 32px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li .linkBa { position: static; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 ul.slide > li.type1 { width: 100%; height: auto; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span { height: auto; } .cmpItem1 ul.slide > li.type1 > a > .thumb.taC > span { padding: 10% 30px; } .cmpItem1 ul.slide > li.type1 > a > .data { position: relative; position: relative; margin-top: 0; padding: 24px 32px 20px 32px; } .cmpItem1 ul.slide > li.type1 > a > .data:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem1 ul.slide > li.type1 > a > .data > .lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-size: 1.5rem; } .cmpItem1 ul.slide > li.type1 > a > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; } .cmpItem1 ul.slide > li > a > .data > div > span.price, .cmpItem1 ul.slide > li.type1 > a > .data > div > span.price { font-size: 15px; font-size: 1.5rem; } .cmpItem1 ul.slide > li.type2, .cmpItem1 ul.slide > li.type3 { width: 50%; border-width: 1px 1px 0 0 !important; } .cmpItem1 ul.slide > li.type2 img, .cmpItem1 ul.slide > li.type3 img, .cmpItem1 ul.slide > li.type2 > a > .thumb > span img, .cmpItem1 ul.slide > li.type3 > a > .thumb > span img { width: 100% !important; max-width: 100%; } .cmpItem1 ul.slide > li.type3 { height: auto; } .cmpItem1 ul.slide > li.type2 { box-sizing: content-box; height: auto; border-width: 1px 0 !important; } .cmpItem1 ul.slide > li.type3 + .type3 { border-width: 1px 0 0 0 !important; } .cmpItem1 ul.slide > li.type3 + .type3 + .type3 { border-width: 1px 1px 0 0 !important; } .cmpItem1 ul.slide > li.type3 + .type3 + .type3 + .type3 { border-width: 1px 0 0 0 !important; } .cmpItem1 ul.slide > li.type2 + .type3 + .type3 { border-width: 1px 1px 0 0 !important; } .cmpItem1 ul.slide > li.type2 .thumb > span { height: auto; padding: 32px 32px 0px; } .cmpItem1 ul.slide > li.type3 .thumb > span { height: auto; padding: 32px 32px 0px; } .cmpItem1 ul.slide > li.type2 > a > .data, .cmpItem1 ul.slide > li.type3 > a > .data { position: relative; } .cmpItem1 ul.slide > li.type2 > a > .data > .lead, .cmpItem1 ul.slide > li.type3 > a > .data > .lead { margin-bottom: 10px; font-size: 15px; font-size: 1.5rem; } .cmpItem2 ul.slide > li, .cmpItem2-flex ul.slide > li { width: 2.5%; } .cmpItem2 ul.slide > li > .thumb a img, .cmpItem2-flex ul.slide > li > .thumb a img { width: 100%; } .cmpItem2 ul.slide > li > .data, .cmpItem2-flex ul.slide > li > .data { height: auto; padding-bottom: 85px; } .cmpItem2 ul.slide > li > .data > .lead, .cmpItem2-flex ul.slide > li > .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem2 ul.slide > li > .data:after, .cmpItem2-flex ul.slide > li > .data:after { left: 32px; } .cmpItem2 ul.slide > li > .data > .lead1, .cmpItem2-flex ul.slide > li > .data > .lead1 { margin-bottom: 0; } .cmpItem2 ul.slide > li > .data > .lead1 span, .cmpItem2-flex ul.slide > li > .data > .lead1 span { font-size:2rem; margin-bottom:15px; display: block; color:#333; } .cmpItem2 ul.slide > li > .data > .release, .cmpItem2-flex ul.slide > li > .data > .release { font-size: 11px; font-size: 1.1rem; } .cmpItem2 ul.slide > li > .data > ul.list > li, .cmpItem2-flex ul.slide > li > .data > ul.list > li { font-size: 16px; font-size: 1.6rem; } .cmpItem2 > ul.navController1, .cmpItem2-flex > ul.navController1 { top: 127px; } .cmpItem2-flex.slideNone { border: none; } .cmpItem2.slideNone ul.slide > li, .cmpItem2-flex.slideNone ul.slide > li { width: 50%; } .cmpItem2-flex.slideNone ul.slide > li:nth-child(2n+1) { border-left: 1px solid gainsboro; } .cmpItem2.slideNone ul.slide > li:nth-child(3), .cmpItem2.slideNone ul.slide > li:nth-child(n+3), .cmpItem2-flex.slideNone ul.slide > li:nth-child(3), .cmpItem2-flex.slideNone ul.slide > li:nth-child(n+3) { border-top: none; } .cmpItem3 ul.slide > li { width: 2.5%; height: auto; } .cmpItem3 ul.slide > li:first-child, .cmpItem3 ul.slide > li:nth-child(4n+1) { border-width: 0 0 0 1px; } .cmpItem3 ul.slide > li:nth-child(2n+1) { border-width: 0; } .cmpItem3 ul.slide > li > a { padding: 32px 32px 20px; } .cmpItem3 ul.slide > li > a > .thumb { width: auto; } .cmpItem3 ul.slide > li > a > .thumb > span { width: 100%; } /*.cmpItem3 ul.slide > li > a > .thumb img { max-width: 100% !important; max-height: 100% !important; }*/ .cmpItem3 ul.slide > li > a > .data > .lead { font-size: 15px; font-size: 1.5rem; } .cmpItem3 ul.slide > li > a > .data span.time, .cmpItem3 ul.slide > li > a > .data > div > span.price { font-size: 15px; font-size: 1.5rem; } .cmpItem3 ul.slide > li > a > .data > div > span.brand { display: block; } .cmpItem3 ul.slide > li > a > .data { width: 100%; } /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide > li { width: 2.5%; height: auto; } .cmpItem3-flex ul.slide > li:first-child, .cmpItem3-flex ul.slide > li:nth-child(4n+1) { border-width: 0 0 0 1px; } .cmpItem3-flex ul.slide > li:nth-child(2n+1) { border-width: 0; } .cmpItem3-flex ul.slide > li > a { padding: 32px 32px 20px; } .cmpItem3-flex ul.slide > li > a > .thumb { width: auto; } .cmpItem3-flex ul.slide > li > a > .thumb > span { width: 100%; } .cmpItem3-flex ul.slide > li > a > .data > .lead { font-size: 15px; font-size: 1.5rem; } .cmpItem3-flex ul.slide > li > a > .data span.time, .cmpItem3-flex ul.slide > li > a > .data > div > span.price { font-size: 15px; font-size: 1.5rem; } .cmpItem3-flex ul.slide > li > a > .data > div > span.brand { display: block; } .cmpItem3-flex ul.slide > li > a > .data { width: 100%; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 > ul.slide > li, .cmpItem4 > ul.slideNone > li { height: auto; border-width: 0 1px 1px 0; } .cmpItem4 > ul.slide > li.type1, .cmpItem4 > ul.slideNone > li.type1 { width: 100%; } .cmpItem4 > ul.slide > li.type1 > a > .thumb, .cmpItem4 > ul.slide > li.type1 > a > .data, .cmpItem4 > ul.slideNone > li.type1 > a > .thumb, .cmpItem4 > ul.slideNone > li.type1 > a > .data { display: table-cell; float: none; vertical-align: top; } .cmpItem4 > ul.slide > li.type1 > a .thumb, .cmpItem4 > ul.slideNone > li.type1 > a .thumb { width: 50%; height: auto; padding: 24px 32px; text-align: center; vertical-align: middle; } .cmpItem4 > ul.slide > li.type1 > a .thumb span, .cmpItem4 > ul.slideNone > li.type1 > a .thumb span { display: inline-block; } .cmpItem4 > ul.slide > li.type1 > a .thumb img, .cmpItem4 > ul.slideNone > li.type1 > a .thumb img { width: 100%; max-width: 100%; } .cmpItem4 > ul.slide > li.type1 > a .data, .cmpItem4 > ul.slideNone > li.type1 > a .data { width: 50%; padding: 20px 40px 20px; } .cmpItem4 > ul.slide > li.type1 .data:after, .cmpItem4 > ul.slide > li.type4 .data:after, .cmpItem4 > ul.slideNone > li.type1 .data:after, .cmpItem4 > ul.slideNone > li.type4 .data:after { top: 20px; } .cmpItem4 > ul.slide > li.type1 .data > .lead, .cmpItem4 > ul.slide > li.type4 .data > .lead, .cmpItem4 > ul.slideNone > li.type1 .data > .lead, .cmpItem4 > ul.slideNone > li.type4 .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem4 > ul.slide > li.type1 > a .data > .lead, .cmpItem4 > ul.slideNone > li.type1 > a .data > .lead { margin-bottom: 20px; } .cmpItem4 > ul.slide > li.type1 > a .data > .text, .cmpItem4 > ul.slideNone > li.type1 > a .data > .text { margin-top: 20px; margin-bottom: 20px; } .cmpItem4 > ul.slide > li.type1 > a .data > .release, .cmpItem4 > ul.slideNone > li.type1 > a .data > .release { margin-bottom: 20px; } .cmpItem4 > ul.slide > li.type2, .cmpItem4 > ul.slideNone > li.type2 { width: 50%; } .cmpItem4 > ul.slide > li.type2 > a, .cmpItem4 > ul.slideNone > li.type2 > a { padding: 24px 32px 0; } .cmpItem4 > ul.slide > li.type2 > a > .thumb, .cmpItem4 > ul.slideNone > li.type2 > a > .thumb { text-align: center; } .cmpItem4 > ul.slide > li.type3, .cmpItem4 > ul.slideNone > li.type3 { width: 100%; height: auto; } .cmpItem4 > ul.slide > li.type3 .data > .lead, .cmpItem4 > ul.slideNone > li.type3 .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem4 > ul.slide > li.type3 .data, .cmpItem4 > ul.slideNone > li.type3 .data { padding: 24px 32px 20px 32px; } .cmpItem4 > ul.slide > li.type3 .data:after, .cmpItem4 > ul.slideNone > li.type3 .data:after { top: 20px; } /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.slide > li, .cmpItem4-flex > ul.slideNone > li { height: auto; border-width: 0 1px 1px 0; } .cmpItem4-flex > ul.slide > li.type1, .cmpItem4-flex > ul.slideNone > li.type1 { width: 100%; } .cmpItem4-flex > ul.slide > li.type1 > a .thumb, .cmpItem4-flex > ul.slideNone > li.type1 > a .thumb { width: 50%; height: auto; padding: 24px 32px; } .cmpItem4-flex > ul.slide > li.type1 > a .thumb span, .cmpItem4-flex > ul.slideNone > li.type1 > a .thumb span { display: inline-block; } .cmpItem4-flex > ul.slide > li.type1 > a .thumb img, .cmpItem4-flex > ul.slideNone > li.type1 > a .thumb img { width: 100%; max-width: 100%; } .cmpItem4-flex > ul.slide > li.type1 > a .data, .cmpItem4-flex > ul.slideNone > li.type1 > a .data { width: 50%; padding: 20px 40px 20px; } .cmpItem4-flex > ul.slide > li.type1 .data:after, .cmpItem4-flex > ul.slide > li.type4 .data:after, .cmpItem4-flex > ul.slideNone > li.type1 .data:after, .cmpItem4-flex > ul.slideNone > li.type4 .data:after { top: 20px; } .cmpItem4-flex > ul.slide > li.type1 .data > .lead, .cmpItem4-flex > ul.slide > li.type4 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type1 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type4 .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .lead, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .lead { margin-bottom: 20px; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .text, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .text { margin-top: 20px; margin-bottom: 20px; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .release, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .release { margin-bottom: 20px; } .cmpItem4-flex > ul.slide > li.type2, .cmpItem4-flex > ul.slideNone > li.type2 { width: 50%; } .cmpItem4-flex > ul.slide > li.type2 > a, .cmpItem4-flex > ul.slideNone > li.type2 > a { padding: 24px 32px 0; } .cmpItem4-flex > ul.slide > li.type2 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type2 > a > .thumb { text-align: center; } .cmpItem4-flex > ul.slide > li.type3, .cmpItem4-flex > ul.slideNone > li.type3 { width: 100%; height: auto; } .cmpItem4-flex > ul.slide > li.type3 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type3 .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem4-flex > ul.slide > li.type3 .data, .cmpItem4-flex > ul.slideNone > li.type3 .data { padding: 24px 32px 20px 32px; } .cmpItem4-flex > ul.slide > li.type3 .data:after, .cmpItem4-flex > ul.slideNone > li.type3 .data:after { top: 20px; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem5 ul.slide > li { width: 50%; height: auto; } .cmpItem5 ul.slide > li > a { padding: 24px 32px 20px; } .cmpItem5 ul.slide > li > a > .thumb { width: auto; } .cmpItem5 ul.slide > li > a > .thumb img { max-width: 100%; } .cmpItem5 ul.slide > li > a > .data ul.icon > li:last-child, .cmpItem5 ul.slide > li > a > .data ul.icon > li:first-child { text-align: center; } .cmpItem5.isClose ul.slide > li:nth-child(12) ~ li { display: none; } .cmpItem5 > .linkShowMore { display: block; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div >.data { font-size: 15px; font-size: 1.5rem; } /* -------------------------------------------------------------- 追記時期：201908 component名： k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem5-flex ul.slide > li { width: 50%; height: auto; } .cmpItem5-flex ul.slide > li > a { padding: 24px 32px 20px; } .cmpItem5-flex ul.slide > li > a > .thumb { width: auto; } .cmpItem5-flex ul.slide > li > a > .thumb img { max-width: 100%; } .cmpItem5-flex ul.slide > li > a > .data ul.icon > li:last-child, .cmpItem5-flex ul.slide > li > a > .data ul.icon > li:first-child { text-align: center; } .cmpItem5-flex.isClose ul.slide > li:nth-child(12) ~ li { display: none; } .cmpItem5-flex > .linkShowMore { display: block; } .cmpItem5-flex.listImage ul.slide > div > div > li > a > .data, .cmpItem5-flex.listImage ul.slide > div > div > li > div >.data { font-size: 15px; font-size: 1.5rem; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li { margin-bottom: 40px; } .cmpItem6 > ul.item > li.type2 .thumb, .cmpItem6 > ul.item > li.type3 .thumb { padding: 32px; } .cmpItem6 > ul.item > li > .info, .cmpItem6 > ul.item > li > .detail { float: none; width: 100%; } .cmpItem6 > ul.item > li .data { padding: 32px 32px 15px; } .cmpItem6 > ul.item > li .data > .lead, .cmpItem6 > ul.item > li .data > .price { margin-bottom: 10px; } .cmpItem6 > ul.item > li > .detail { padding: 24px 32px 20px 32px; border-top: 1px solid gainsboro; border-left: none; } .cmpItem6 > ul.item > li > .detail .hdgTy2, .cmpItem6 > ul.item > li > .detail .hdgTy3 { font-size: 22px; font-size: 2.2rem; } .cmpItem7 ul.slide > li { height: auto; } .cmpItem7 ul.slide > li .info, .cmpItem7 ul.slide > li .movie { float: none; width: 100%; } .cmpItem7 ul.slide > li .info { display: table; } .cmpItem7 ul.slide > li .info .thumb, .cmpItem7 ul.slide > li .info .data { display: table-cell; float: none; } .cmpItem7 ul.slide > li .info .thumb { position: relative; width: 40%; height: auto; text-align: center; vertical-align: middle; } .cmpItem7 ul.slide > li .info .thumb span { display: inline-block; } .cmpItem7 ul.slide > li .info .data { width: 60%; padding: 40px 40px 20px; vertical-align: top; } .cmpItem7 ul.slide > li .info .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem7 ul.slide > li .movie { display: none; } .cmpItem8 ul.slide > li { width: 10%; height: auto; border-right: none; } .cmpItem8 ul.slide > li > span, .cmpItem8 ul.slide > li > a { width: 100%; height: auto; padding-bottom: 20px; } .cmpItem8 ul.slide > li > span > .thumb img, .cmpItem8 ul.slide > li > a > .thumb img { width: 100%; height: auto; margin: 0; } .cmpItem8 ul.slide > li > span > .lead, .cmpItem8 ul.slide > li > a > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem8 ul.slide > li > span > .text, .cmpItem8 ul.slide > li > a > .text { margin: 0; } .cmpItem8.slideNone ul.slide > li { width: 100%; border-top: 1px solid gainsboro; } .cmpItem8.slideNone ul.slide > li:first-child { border-top: none; } .cmpItem9 ul.slide { width: 1000%; } .cmpItem9 ul.slide > li { float: left; width: 10%; } .cmpItem9 .lytImgTy3.imageR .img, .cmpItem9 .lytImgTy3.imageR .contents, .cmpItem9 .lytImgTy3.imageL .img, .cmpItem9 .lytImgTy3.imageL .contents { display: block !important; width: 100% !important; } .cmpItem9 .lytImgTy3.imageR .img, .cmpItem9 .lytImgTy3.imageL .img { padding: 0 !important; } .cmpItem9 .lytImgTy3.imageR .img img, .cmpItem9 .lytImgTy3.imageL .img img { width: 100% !important; max-width: none; height: auto; } .cmpItem9 .lytImgTy3.imageR .contents, .cmpItem9 .lytImgTy3.imageL .contents { padding: 24px 32px 20px 32px; } .cmpItem9 ul.slide > li .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem9 > ul.navController1 { position: absolute; top: 35%; display: block; margin-top: -30px; } .cmpItem9 > ul.navController1 > li { position: relative; } .cmpNews { direction: rtl; } .cmpNews > .pickup, .cmpNews > .movienex, .cmpNews > .newsWrap { display: table-cell; float: none; width: 50%; vertical-align: top; direction: ltr; } .cmpNews > .pickup { position: relative; } .cmpNews > .pickup > a { position: static; width: 100%; height: auto; } .cmpNews > .pickup > a > .lead { font-size: 20px; font-size: 2rem; position: relative; padding: 24px 32px 0; margin-bottom: 18px; } .cmpNews > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews > .pickup > a > .text { font-size: 15px; font-size: 1.5rem; margin-bottom: 59px; padding: 0 32px; } .cmpNews > .pickup > a > .linkBa { position: absolute; margin-bottom: 0; padding: 0 32px; right: auto; bottom: 20px; } .cmpNews > .movienex { height: auto !important; padding: 35px 30px 20px 35px !important; -webkit-background-size: contain; background-size: contain; } .cmpNews > .movienex > .heading { font-size: 24px; font-size: 2.4rem; } .cmpNews > .movienex > .text { font-size: 9px; font-size: .9rem; } .cmpNews > .movienex > .listNumBa { font-size: 9px; font-size: .9rem; } .cmpNews > .movienex > .btnBa span { font-size: 12px; font-size: 1.2rem; } .cmpNews > .newsWrap > .news { height: auto; min-height: 90px; padding: 20px 20px 0 20px; } .cmpNews > .newsWrap > .news > .heading { font-size: 22px; font-size: 2.2rem; float: none; margin-bottom: 10px; } .cmpNews > .newsWrap > .news > .link { position: static; margin-top: 0; } .cmpNews > .newsWrap > .news > .sns { top: 23px; right: 20px; } .cmpNews > .newsWrap > ul.item > li > a { height: auto; min-height: 85px; padding: 20px 35px 20px 130px; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap2 > ul > li > a { padding-left: 100px !important; } .cmpNews > .newsWrap > ul.item > li > a:before { top: 50%; right: 20px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -139px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb { top: 20px; left: 20px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb img { width: 65px; max-width: 65px; height: 45px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date { width: 40px; height: 45px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date > .dateDD { font-size: 14px; font-size: 1.4rem; bottom: -.1em; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date > .dateMM { font-size: 7px; font-size: .7rem; } .cmpNews > .newsWrap > ul.item > li > a > .lead { line-height: 1.5; font-size: 13px; font-size: 1.3rem; margin: 0; } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .pickup, .cmpNews-flex > .movienex, .cmpNews-flex > .newsWrap { width: 50%; } .cmpNews-flex > .pickup { position: relative; } .cmpNews-flex > .pickup > a { position: static; width: 100%; height: auto; } .cmpNews-flex > .pickup > a > .lead { font-size: 20px; font-size: 2rem; position: relative; padding: 24px 32px 0; margin-bottom: 18px; } .cmpNews-flex > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews-flex > .pickup > a > .text { font-size: 15px; font-size: 1.5rem; margin-bottom: 59px; padding: 0 32px; } .cmpNews-flex > .pickup > a > .linkBa { position: absolute; margin-bottom: 0; padding: 0 32px; right: auto; bottom: 20px; } .cmpNews-flex > .movienex { height: auto !important; padding: 35px 30px 20px 35px !important; -webkit-background-size: contain; background-size: contain; } .cmpNews-flex > .movienex > .heading { font-size: 24px; font-size: 2.4rem; } .cmpNews-flex > .movienex > .text { font-size: 9px; font-size: .9rem; } .cmpNews-flex > .movienex > .listNumBa { font-size: 9px; font-size: .9rem; } .cmpNews-flex > .movienex > .btnBa span { font-size: 12px; font-size: 1.2rem; } .cmpNews-flex > .newsWrap > .news { height: auto; min-height: 90px; padding: 20px 20px 0 20px; } .cmpNews-flex > .newsWrap > .news > .heading { font-size: 22px; font-size: 2.2rem; float: none; margin-bottom: 10px; } .cmpNews-flex > .newsWrap > .news > .link { position: static; margin-top: 0; } .cmpNews-flex > .newsWrap > .news > .sns { top: 23px; right: 20px; } .cmpNews-flex > .newsWrap > ul.item > li > a { height: auto; min-height: 85px; padding: 20px 35px 20px 130px; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap2 > ul > li > a { padding-left: 100px !important; } .cmpNews-flex > .newsWrap > ul.item > li > a:before { top: 50%; right: 20px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -139px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb { top: 20px; left: 20px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb img { width: 65px; max-width: 65px; height: 45px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date { width: 40px; height: 45px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date > .dateDD { font-size: 14px; font-size: 1.4rem; bottom: -.1em; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date > .dateMM { font-size: 7px; font-size: .7rem; } .cmpNews-flex > .newsWrap > ul.item > li > a > .lead { line-height: 1.5; font-size: 13px; font-size: 1.3rem; margin: 0; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpBanner > ul.tab > li > a.logo { line-height: 90px; } .cmpBanner > ul.tab > li > a.logo > span { width: auto; } .cmpBanner > ul.tab > li > a.logo > span > img { width: 67.582%; } .cmpBanner > ul.banner > li > a > img { max-width: 100%; } .cmpNavCharacter { position: relative; padding: 0 60px; } .cmpNavCharacter > .slideWrap { width: 100%; } .cmpNavCharacter > .slideWrap > ul.slide > li { width: 2.5%; } .cmpNavCharacter > .slideWrap > ul.slide > li > a { padding: 0 2px; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.thumb { max-width: 90px; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover { margin-top: 0; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.caption { font-size: 15px; font-size: 1.5rem; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a > span.thumb, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover > span.thumb { width: 100px; } .cmpNavCharacter > .slideWrap > ul.slide > li.isCurrent > a > span.caption, .cmpNavCharacter > .slideWrap > ul.slide > li > a:hover > span.caption { font-size: 16px; font-size: 1.6rem; margin-top: 10px; } .cmpNavCharacter > ul.navController > li > a:before, .cmpNavCharacter > ul.navController1 > li > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -75px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpNavCharacter > ul.navController > li.prev > a:before, .cmpNavCharacter > ul.navController1 > li.prev > a:before { top: 50%; left: 50%; width: 10px; height: 15px; margin-top: -7.5px; margin-left: -5px; background-position: -254px -93px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } /* Type Fixed --------------------------------------------------- */ .cmpNavCharacter.typeFixed > .slideWrap > ul.slide { width: 1000%; } .cmpNavCharacter.typeFixed > .slideWrap > ul.slide > li { width: 2.5%; } .cmpNavCharacter.typeFixed > ul.navController { display: block; } .navFixedCharacterMore { width: 97%; margin-right: 0; margin-left: 0; padding-left: 60px; padding-right: 60px; } /* Type Few --------------------------------------------------- */ .cmpNavCharacter.typeFew { position: relative; padding: 0 60px; } .cmpNavCharacter.typeFew > .slideWrap { width: 100%; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide { width: 1000%; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li { float: left; width: 2.5% !important; height: auto; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a { padding: 0 2px; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a > span.thumb { width: 90px; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a { display: block; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a > span.caption, .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li > a > span.thumb { display: inline-block; padding-left: 0; } .cmpColumn.typeCol2 { margin-right: 0; margin-left: 0; } .cmpColumn.typeCol2 > .column { float: none; width: 100%; margin-bottom: 20px; padding: 0; } .cmpColumn.typeCol2 > .column *:last-child { margin-bottom: 0; } .cmpColumn.typeCol2.typeGallery > .column { float: left; width: 50%; } .cmpColumn.typeCol2.typeGallery > .column .btnBa { bottom: 30px; left: 35px; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a { font-size: 15px; font-size: 1.5rem; padding: 13px 50px 13px 25px; border-width: 1px; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a:after { top: 50%; right: 20px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -191px; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a:after { -webkit-background-size: initial !important; background-size: initial !important; } .cmpColumn.typeCol2.typeMusic > .column { float: none; width: 100%; margin-bottom: 0; padding: 40px !important; } .cmpColumn.typeCol2.typeMusic > .column.type1 { border-bottom: 1px solid gainsboro; } .cmpColumn.typeCol2.typeMusic > .column.type2 { border: none; } .cmpColumn.typeCol2.typeMusic > .column.type2 .listLinkTy2 { font-size: 15px; font-size: 1.5rem; } .cmpColumn.typeCol2.typeMusicList > .column { float: none; width: 100%; margin-bottom: 0; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 10px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 76px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 22px; font-size: 2.2rem; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone { top: 4px; font-size: 15px; font-size: 1.5rem; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 80px; height: 80px; } .cmpColumn.typeCol2.typeDetail > .column { float: none; width: 100%; padding: 24px 32px 20px 32px; border-top: 1px solid gainsboro; } .cmpColumn.typeCol2.typeDetail > .column:first-child { border: none; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .img > img { width: 120px; height: auto; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex.typeCol2 { margin-right: 0; margin-left: 0; display: block; } .cmpColumn-flex.typeCol2 > .column { float: none; width: 100%; margin-bottom: 20px; padding: 0; } .cmpColumn-flex.typeCol2 > .column *:last-child { margin-bottom: 0; } .cmpColumn-flex.typeCol2.typeGallery > .column { float: left; width: 50%; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa { bottom: 30px; left: 35px; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a { font-size: 15px; font-size: 1.5rem; padding: 13px 50px 13px 25px; border-width: 1px; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a:after { top: 50%; right: 20px; width: 11px; height: 17px; margin-top: -8.5px; background-position: -317px -191px; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a:after { -webkit-background-size: initial !important; background-size: initial !important; } .cmpColumn-flex.typeCol2.typeMusic > .column { float: none; width: 100%; margin-bottom: 0; padding: 40px !important; } .cmpColumn-flex.typeCol2.typeMusic > .column.type1 { border-bottom: 1px solid gainsboro; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 { border: none; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .listLinkTy2 { font-size: 15px; font-size: 1.5rem; } .cmpColumn-flex.typeCol2.typeMusicList > .column { float: none; width: 100%; margin-bottom: 0; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 10px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 76px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 22px; font-size: 2.2rem; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.iconHeadphone, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.iconHeadphone { top: 4px; font-size: 15px; font-size: 1.5rem; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 80px; height: 80px; } .cmpColumn-flex.typeCol2.typeDetail > .column { float: none; width: 100%; padding: 24px 32px 20px 32px; border-top: 1px solid gainsboro; } .cmpColumn-flex.typeCol2.typeDetail > .column:first-child { border: none; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .img > img { width: 120px; height: auto; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents { display: block; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column { display: block; float: none; width: 100%; padding: 0; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column dl.listBa, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column dl.listBa, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column dl.listBa, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column dl.listBa { margin-bottom: 10px; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column dl.listBa dt, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column dl.listBa dt, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column dl.listBa dt, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column dl.listBa dt { margin-bottom: 2px; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgBa > .contents .column.line, .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 > .contents .column.line, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgBa > .contents .column.line, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 > .contents .column.line { width: 100%; padding: 0; border-left: none; } .cmpAccordionBa > .hdgBa { font-size: 24px; font-size: 2.4rem; } .cmpAccordionBa > .section > .hdg { font-size: 15px; font-size: 1.5rem; } .cmpAccordionBa > .section > .hdg a { padding: 25px 50px 25px 30px; } .cmpAccordionBa > .section > .hdg a:before { right: 30px !important; } .cmpAccordionBa > .section > .contents { padding: 0 30px; } ul.cmpListIcon { font-size: 18px; font-size: 1.8rem; } ul.cmpListIcon.typeCol3, ul.cmpListIcon.typeCol4 { border-width: 1px 0 0 1px; } ul.cmpListIcon.typeCol3 > li, ul.cmpListIcon.typeCol4 > li { width: 50%; } ul.cmpListIcon.typeCol3 > li > a, ul.cmpListIcon.typeCol4 > li > a { padding: 80px 5px 15px; border-width: 0 1px 1px 0; } ul.cmpListIcon.typeCol3 > li > a:before, ul.cmpListIcon.typeCol4 > li > a:before { top: 25px; } ul.cmpListIconTy1 { font-size: 14px; font-size: 1.4rem; padding: 20px 20px; } ul.cmpListIconTy1 > li { margin-right: 10px; } ul.cmpListIconTy1 > li:last-child { margin-right: 0; margin-bottom: 0; } .cmpPanel > .column { padding: 40px 30px; } .cmpPanel > .column > .hdg { font-size: 22px; font-size: 2.2rem; } .cmpPanel > .column > .btnBa { margin-top: 10px; } .cmpPanelSns { top: 158px; right: 20px; width: 179px; } .cmpPanelSns > div { position: relative; position: relative; } .cmpPanelSns > div:before { position: absolute; z-index: 1; top: 1px; top: -14px; left: 147px; width: 0; height: 0; content: ''; border: 7.5px solid transparent; border-bottom-color: gainsboro; } .cmpPanelSns > div:after { position: absolute; z-index: 1; top: 2px; top: -12px; left: 148px; width: 0; height: 0; content: ''; border: 7.5px solid transparent; border-bottom-color: #f5f6f8; } /* SNS Panel Bottom Style */ .cmpPanelSns.jsPositionBottom { padding-bottom: 12.5px; } .cmpPanelSns.jsPositionBottom > div:before { top: auto; bottom: 1px; bottom: -14px; border: 7.5px solid transparent; border-top-color: gainsboro; } .cmpPanelSns.jsPositionBottom > div:after { top: auto; bottom: 2px; bottom: -12px; border: 7.5px solid transparent; border-top-color: #f5f6f8; } .cmpPanelSns > div > ul > li > a { width: 88px; padding: 10px 0; } #myStatus.isShowModal .cmpModal { padding: 20px; } #myStatus.isShowModal .cmpModal > .inner { min-height: 0; } #myStatus.isShowModal .cmpModal > .inner > .btnClose { top: -40px; right: 0; } #myStatus.isShowModal .cmpModal > .inner > .btnClose > a { width: 40px; height: 40px; } #myStatus.isShowModal .cmpModal > .inner > .btnClose > a:before { top: 50%; left: 50%; width: 12px; height: 12px; margin-top: -6px; margin-left: -6px; background-position: -474px -53px; -webkit-background-size: 492px 474px; background-size: 492px 474px; } #myStatus.isShowModal .cmpModal > .inner > .modalContents { padding: 30px; } #myStatus.isShowModal .cmpModal > .inner > .modalContents .hdgTy3 { font-size: 22px; font-size: 2.2rem; } .cmpGallery .mainGallery .slideWrap ul.navController li.prev a:before, .cmpGallery .mainGallery .slideWrap ul.navController li.next a:before { -webkit-background-size: inherit; background-size: inherit; } .cmpGallery .navGallery ul.navController1 li.prev a:before, .cmpGallery .navGallery ul.navController1 li.next a:before { -webkit-background-size: inherit; background-size: inherit; } .cmpTableBa.typeTheater ul.haed { display: none; } .cmpTableBa.typeTheater .table { display: block; } .cmpTableBa.typeTheater .table .hdg { font-weight: bold; display: block; width: 100%; padding: 24px 15px; color: #333; background-color: #f5f7f8; } .cmpTableBa.typeTheater .table dl.table { display: block; width: 100%; } .cmpTableBa.typeTheater .table dl.table dt, .cmpTableBa.typeTheater .table dl.table dd { padding: 24px 15px; } /* ----------------------------------------------------------------------------- * pseudo SELECT @max-width 800px ----------------------------------------------------------------------------- */ .cmpItem.slideNone > .slideWrap > .slide.typeAutoH > li > .cmpListSelect, .insListSelect { padding: 0 32px; } .insSetScale > div { width: auto; } .insListSelect { width: 100%; margin: 0; padding: 0 40px; } .listSelect { width: 49%; } .linkDownloader.downloaderEnabled { width: 49%; } /* ------ Body SNS General ------ */ .bodySns { margin: 40px 0; } .pseudoCmp.bodySns { display: none; } #myStatus.isMenuOpen .bodySns { display: none; } .bodySnsIsFixed > .bodySnsContent { bottom: 24px; } .bodySnsContent > ul > li > a:before { background-size: 200px 60px; } /* Twitter */ .bodySnsContent > ul > li.shareTw > a:before { background-position: 0 0; } /* Facebook */ .bodySnsContent > ul > li.shareFb > a:before { background-position: -40px 0; } /* Google+ */ .bodySnsContent > ul > li.shareGoogle > a:before { background-position: -80px 0; } /* E-Mail */ .bodySnsContent > ul > li.shareMail > a:before { background-position: -120px 0; } /* LINE */ .bodySnsContent > ul > li.shareLine > a:before { background-position: -160px 0; } } @media only screen and (max-width: 600px) { .cmpNews > .pickup, .cmpNews > .newsWrap, .cmpNews > .movienex { display: block; width: 100%; } .cmpNews > .pickup > a > .lead { font-size: 22px; font-size: 2.2rem; position: relative; margin-bottom: 18px; padding: 24px 32px 0; } .cmpNews > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews > .pickup > a > .text { font-size: 15px; font-size: 1.5rem; margin: 0 0 20px; padding: 0 32px; } .cmpNews > .pickup > a > .linkBa { position: static; margin: 0 0 20px; padding: 0 32px; } .cmpNews > .newsWrap { border-width: 0 0 1px; } .cmpNews > .newsWrap > .news { height: auto; padding: 30px 20px 25px 25px; border-width: 1px 0 0; } .cmpNews > .newsWrap > .news > .heading { line-height: 1.5; } .cmpNews > .newsWrap > .news > .sns { top: 38px; right: 10px; } .cmpNews > .newsWrap > .news > .sns > ul > li { margin-right: 0; margin-left: 0; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a { overflow: hidden; width: 10px; height: 23px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a:before { top: 50%; left: 50%; width: 10px; height: 23px; margin-top: -11.5px; margin-left: -5px; background-position: -355px -27px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsFb a:before { position: static; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a { overflow: hidden; width: 17px; height: 23px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a:before { top: 50%; left: 50%; width: 17px; height: 23px; margin-top: -11.5px; margin-left: -8.5px; background-position: -355px 0; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsTw a:before { position: static; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a { overflow: hidden; width: 21px; height: 23px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a:before { top: 50%; left: 50%; width: 21px; height: 23px; margin-top: -11.5px; margin-left: -10.5px; background-position: -314px -307px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews > .newsWrap > .news > .sns > ul > li.snsYt a:before { position: static; } .cmpNews > .newsWrap > .news > .sns > ul > li > a { width: 40px !important; height: 40px !important; } .cmpNews > .pickup img { vertical-align: sub; } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex { display: block; } .cmpNews-flex > .pickup, .cmpNews-flex > .newsWrap, .cmpNews-flex > .movienex { display: block; width: 100%; } .cmpNews-flex > .pickup > a > .lead { font-size: 22px; font-size: 2.2rem; position: relative; margin-bottom: 18px; padding: 24px 32px 0; } .cmpNews-flex > .pickup > a > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpNews-flex > .pickup > a > .text { font-size: 15px; font-size: 1.5rem; margin: 0 0 20px; padding: 0 32px; } .cmpNews-flex > .pickup > a > .linkBa { position: static; margin: 0 0 20px; padding: 0 32px; } .cmpNews-flex > .newsWrap { border-width: 0 0 1px; } .cmpNews-flex > .newsWrap > .news { height: auto; padding: 30px 20px 25px 25px; border-width: 1px 0 0; } .cmpNews-flex > .newsWrap > .news > .heading { line-height: 1.5; } .cmpNews-flex > .newsWrap > .news > .sns { top: 38px; right: 10px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li { margin-right: 0; margin-left: 0; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a { overflow: hidden; width: 10px; height: 23px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a:before { top: 50%; left: 50%; width: 10px; height: 23px; margin-top: -11.5px; margin-left: -5px; background-position: -355px -27px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsFb a:before { position: static; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a { overflow: hidden; width: 17px; height: 23px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a:before { top: 50%; left: 50%; width: 17px; height: 23px; margin-top: -11.5px; margin-left: -8.5px; background-position: -355px 0; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsTw a:before { position: static; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a { overflow: hidden; width: 21px; height: 23px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a:before { top: 50%; left: 50%; width: 21px; height: 23px; margin-top: -11.5px; margin-left: -10.5px; background-position: -314px -307px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li.snsYt a:before { position: static; } .cmpNews-flex > .newsWrap > .news > .sns > ul > li > a { width: 40px !important; height: 40px !important; } .cmpNews-flex > .pickup img { vertical-align: sub; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpPanel { border-width: 1px 0 0 1px; } .cmpPanel > .column { border-width: 0 1px 1px 0; } .cmpPanel.typeCol2 > .column { float: none; width: 100%; } } @media only screen and (max-width: 480px) { .cmpItem1 > ul > li ul.navController1, .cmpItem4 > ul.navController1, .cmpNews > .newsWrap > ul.item > li > a > .date, /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex > ul.navController1, .cmpNews-flex > .newsWrap > ul.item > li > a > .date, /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpBanner > ul.tab > li.isCurrent > a.banner { display: block !important; } .cmpBanner > ul.banner { display: none !important; } .setScale { margin-bottom: 15px; } .setScaleTab > div { width: auto; } .cmpMain > ul.slide > li, .cmpMain2 > ul.slide > li { height: 100%; } .cmpMain > ul.slide > li.isColorDark > .data, .cmpMain2 > ul.slide > li.isColorDark > .data { position: relative; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { position: absolute; z-index: 1; top: 0; top: -37px; left: 26px; width: 0; height: 0; content: ''; border: 19px solid transparent; border-bottom-color: black; } .cmpMain > ul.slide > li.isColorDark > .data:after, .cmpMain2 > ul.slide > li.isColorDark > .data:after { z-index: 0; } .cmpMain > ul.slide > li.isColorDark > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -153px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -373px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -477px -414px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: 0 -577px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -496px -484px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -88px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -206px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -94px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -89px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -292px -551px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -146px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -56px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -500px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -168px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -343px -521px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -457px; } .cmpMain > ul.slide > li.isColorDark > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li.isColorDark > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -540px -551px; } .cmpMain > ul.slide > li.isColorGray > .data, .cmpMain2 > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 0; top: -37px; left: 26px; width: 0; height: 0; content: ''; border: 19px solid transparent; border-bottom-color: #ccc; } .cmpMain > ul.slide > li.isColorGray > .data:after, .cmpMain2 > ul.slide > li.isColorGray > .data:after { z-index: 0; } .cmpMain > ul.slide > li.isColorGray > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -112px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li > a:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -345px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -376px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -507px -463px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -30px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -175px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -178px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -565px -332px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -118px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -322px -551px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -117px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -84px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -470px -521px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -140px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -28px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -429px; } .cmpMain > ul.slide > li.isColorGray > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li.isColorGray > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -512px -551px; } .cmpMain > ul.slide > li > .data, .cmpMain2 > ul.slide > li > .data { position: relative; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -37px; left: 26px; width: 0; height: 0; content: ''; border: 19px solid transparent; border-bottom-color: white; } .cmpMain > ul.slide > li > .data:after, .cmpMain2 > ul.slide > li > .data:after { z-index: 0; } .cmpMain > ul.slide > li > .data > .logo, .cmpMain2 > ul.slide > li > .data > .logo { display: block; width: 180px; margin: 0 0 20px; padding-right: 0; } .cmpMain > ul.slide > li > .data > div, .cmpMain2 > ul.slide > li > .data > div { display: block; } .cmpMain > ul.slide > li > .data > div > .lead, .cmpMain2 > ul.slide > li > .data > div > .lead { margin-bottom: 20px; } .cmpMain > ul.slide > li > .data > div > .lead1, .cmpMain2 > ul.slide > li > .data > div > .lead1 { font-size: 18px; font-size: 1.8rem; } .cmpMain > ul.slide > li > ul.list, .cmpMain2 > ul.slide > li > ul.list { border-width: 0 !important; } .cmpMain > ul.slide > li > ul.list > li, .cmpMain2 > ul.slide > li > ul.list > li { float: none; width: 100%; } .cmpMain > ul.slide > li > ul.list > li > a, .cmpMain2 > ul.slide > li > ul.list > li > a { padding: 17px 50px 17px 55px; border-width: 1px 0 0; } .cmpMain > ul.slide > li > ul.list > li > a:before, .cmpMain2 > ul.slide > li > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -139px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain > ul.slide > li > ul.list > li.iconVideo:before, .cmpMain2 > ul.slide > li > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -233px; } .cmpMain > ul.slide > li > ul.list > li.iconSite:before, .cmpMain2 > ul.slide > li > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -375px -305px; } .cmpMain > ul.slide > li > ul.list > li.iconTrailer:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -400px -363px; } .cmpMain > ul.slide > li > ul.list > li.iconTicket:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -406px -484px; } .cmpMain > ul.slide > li > ul.list > li.iconShopping:before, .cmpMain2 > ul.slide > li > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -30px; } .cmpMain > ul.slide > li > ul.list > li.iconDownload:before, .cmpMain2 > ul.slide > li > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -150px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconDownload2:before, .cmpMain2 > ul.slide > li > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -122px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconTime:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -60px -521px; } .cmpMain > ul.slide > li > ul.list > li.iconTwitter:before, .cmpMain2 > ul.slide > li > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -262px -551px; } .cmpMain > ul.slide > li > ul.list > li.iconBehind:before, .cmpMain2 > ul.slide > li > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -59px; } .cmpMain > ul.slide > li > ul.list > li.iconSearch:before, .cmpMain2 > ul.slide > li > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px 0; } .cmpMain > ul.slide > li > ul.list > li.iconPresent:before, .cmpMain2 > ul.slide > li > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -530px -521px; } .cmpMain > ul.slide > li > ul.list > li.iconRequest:before, .cmpMain2 > ul.slide > li > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -196px; } .cmpMain > ul.slide > li > ul.list > li.iconReserve:before, .cmpMain2 > ul.slide > li > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -261px; } .cmpMain > ul.slide > li > ul.list > li.iconCalendar:before, .cmpMain2 > ul.slide > li > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -485px; } .cmpMain > ul.slide > li > ul.list > li.iconInternet:before, .cmpMain2 > ul.slide > li > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -593px 0; } .cmpMain > ul.nav, .cmpMain2 > ul.nav { top: 140px; right: 22px; } .cmpMain.typeDrama { margin-bottom: 30px; } .cmpMain.typeDrama > ul.slide > li > .data { padding: 20px 25px 30px; } .cmpMain.typeDrama > ul.slide > li > .data > .logo { display: block; width: 180px; margin: 0 0 15px; padding-right: 0; } .cmpMain.typeDrama > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 0 !important; } .cmpMain.typeDrama > ul.slide > li > ul.list > li { width: 100%; } .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(1), .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain.typeDrama > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain.typeDrama > ul.slide > li > ul.list > li a { border-width: 1px 0 0 !important; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpMain-flex > ul.slide > li.isColorDark > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -153px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -373px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -477px -414px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: 0 -577px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -496px -484px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -88px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -206px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -94px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -89px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -292px -551px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -146px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -56px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -500px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -168px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -343px -521px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -457px; } .cmpMain-flex > ul.slide > li.isColorDark > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -540px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > .data { position: relative; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after { position: absolute; z-index: 1; top: 0; top: -37px; left: 26px; width: 0; height: 0; content: ''; border: 19px solid transparent; border-bottom-color: #ccc; } .cmpMain-flex > ul.slide > li.isColorGray > .data:after-flex { z-index: 0; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -112px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li > a:before { opacity: .5; -ms-filter: 'alpha(opacity=50)'; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -345px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -376px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -507px -463px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -30px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -175px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -178px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -565px -332px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -118px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -322px -551px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -117px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -84px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -470px -521px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -140px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -28px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -429px; } .cmpMain-flex > ul.slide > li.isColorGray > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -512px -551px; } .cmpMain-flex > ul.slide > li > .data { position: relative; } .cmpMain-flex > ul.slide > li > .data:after { position: absolute; z-index: 1; top: 0; top: -37px; left: 26px; width: 0; height: 0; content: ''; border: 19px solid transparent; border-bottom-color: white; } .cmpMain-flex > ul.slide > li > .data:after { z-index: 0; } .cmpMain-flex > ul.slide > li > .data > .logo { display: block; width: 180px; margin: 0 0 20px; padding-right: 0; } .cmpMain-flex > ul.slide > li > .data > div { display: block; } .cmpMain-flex > ul.slide > li > .data > div > .lead { margin-bottom: 20px; } .cmpMain-flex > ul.slide > li > .data > div > .lead1 { font-size: 18px; font-size: 1.8rem; } .cmpMain-flex > ul.slide > li > ul.list { border-width: 0 !important; display: block; } .cmpMain-flex > ul.slide > li > ul.list > li { width: 100%; } .cmpMain-flex > ul.slide > li > ul.list > li > a { padding: 17px 50px 17px 55px; border-width: 1px 0 0; } .cmpMain-flex > ul.slide > li > ul.list > li > a:before { top: 50%; right: 25px; width: 6px; height: 11px; margin-top: -5.5px; background-position: -283px -139px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconVideo:before { top: 50%; left: 28px; width: 12px; height: 22px; margin-top: -11px; background-position: -537px -233px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconSite:before { top: 50%; left: 25px; width: 18px; height: 18px; margin-top: -9px; background-position: -375px -305px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTrailer:before { top: 50%; left: 25px; width: 24px; height: 15px; margin-top: -7.5px; background-position: -400px -363px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTicket:before { top: 50%; left: 23px; width: 24px; height: 24px; margin-top: -12px; background-position: -406px -484px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconShopping:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -30px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconDownload:before { top: 50%; left: 23px; width: 22px; height: 19px; margin-top: -9.5px; background-position: -150px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconDownload2:before { top: 50%; left: 23px; width: 22px; height: 20px; margin-top: -10px; background-position: -122px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTime:before { top: 50%; left: 23px; width: 23px; height: 23px; margin-top: -11.5px; background-position: -60px -521px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconTwitter:before { top: 50%; left: 23px; width: 24px; height: 18px; margin-top: -9px; background-position: -262px -551px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconBehind:before { top: 50%; left: 23px; width: 22px; height: 23px; margin-top: -11.5px; background-position: -537px -59px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconSearch:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px 0; } .cmpMain-flex > ul.slide > li > ul.list > li.iconPresent:before { top: 50%; left: 23px; width: 24px; height: 22px; margin-top: -11px; background-position: -530px -521px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconRequest:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -565px -196px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconReserve:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -261px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconCalendar:before { top: 50%; left: 23px; width: 22px; height: 22px; margin-top: -11px; background-position: -537px -485px; } .cmpMain-flex > ul.slide > li > ul.list > li.iconInternet:before { top: 50%; left: 23px; width: 22px; height: 17px; margin-top: -8.5px; background-position: -593px 0; } .cmpMain-flex > ul.nav { top: 140px; right: 22px; } .cmpMain-flex.typeDrama { margin-bottom: 30px; } .cmpMain-flex.typeDrama > ul.slide > li > .data { padding: 20px 25px 30px; } .cmpMain-flex.typeDrama > ul.slide > li > .data > .logo { display: block; width: 180px; margin: 0 0 15px; padding-right: 0; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list { font-size: 16px; font-size: 1.6rem; position: static; width: 100%; border-width: 0 !important; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li { width: 100%; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(1), .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(2) { display: block; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li:nth-child(2) a { border-right: 0; } .cmpMain-flex.typeDrama > ul.slide > li > ul.list > li a { border-width: 1px 0 0 !important; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpMovie > ul.movie { float: none; width: 100%; height: auto; margin: 0; } .cmpMovie > ul.movie > li { width: 100%; height: 100%; padding-top: 60%; } .cmpMovie > ul.movie > li > iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .cmpMovie > .data { display: block; } .cmpMovie > .data > .logo { float: none; width: 100%; padding: 10px 25px; } .cmpMovie > .data > .logo > span { width: 100%; } .cmpMovie > .data > .logo > span img { max-width: 200px; height: auto; } .cmpMovie > .data .slideWrap { float: none; width: 100%; height: 240px; } .cmpMovie > .data .slideWrap ul.slide > li { float: none; width: 100%; } .cmpMovie > .data .slideWrap ul.slide > li > a { height: 80px; padding: 10px 30px 0 145px; border-top: 1px solid gainsboro; } .cmpMovie > .data .slideWrap ul.slide > li > a:before { top: 50%; right: 20px; width: 6px; height: 9px; margin-top: -4.5px; background-position: -159px -84px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpMovie > .data .slideWrap ul.slide > li > a > img { top: 9px; left: 25px; width: 104px; height: 60px; } .cmpMovie > .data .label { padding-right: 100px; padding-left: 25px; text-align: left; } .cmpItem .linkBa { bottom: 35px; } .cmpItem > ul.item > li > .data > .linkBa { position: static; } .cmpItem > .slideWrap { border-bottom: none; } .cmpItem > .slideWrap > ul.slide > li > a > .lead, .cmpItem > .slideWrap > ul.slide > li > div > .lead { position: relative; } .cmpItem > .slideWrap > ul.slide > li > a > .lead > img, .cmpItem > .slideWrap > ul.slide > li > div > .lead > img { display: block; margin: 0 auto; } .cmpItem > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem > .slideWrap > ul.slide > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem > ul.nav { top: -72px; right: 25px; } .cmpItem > ul.item > li, .cmpItem > ul.item > li:first-child { width: 100%; padding-bottom: 20px; border-top: 1px solid gainsboro; border-right: none !important; } .cmpItem > ul.item > li > a, .cmpItem > ul.item > li > div { width: 100%; } .cmpItem > ul.item > li > a > .thumb, .cmpItem > ul.item > li > div > .thumb { margin: 0; } .cmpItem > ul.item > li > a > .lead, .cmpItem > ul.item > li > div > .lead { position: relative; } .cmpItem > ul.item > li > a > .lead:after, .cmpItem > ul.item > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem > ul.item > li.type1 > a > .thumb, .cmpItem > ul.item > li.type1 > a > .data, .cmpItem > ul.item > li.type1 > div > .thumb, .cmpItem > ul.item > li.type1 > div > .data, .cmpItem > ul.item > li.type2 > a > .thumb, .cmpItem > ul.item > li.type2 > a > .data, .cmpItem > ul.item > li.type2 > div > .thumb, .cmpItem > ul.item > li.type2 > div > .data { float: none !important; width: 100% !important; } .cmpItem > ul.item > li.type1 > a > .data, .cmpItem > ul.item > li.type1 > div > .data { padding-bottom: 60px; } .cmpItem > ul.item > li.type2 > a > .data, .cmpItem > ul.item > li.type2 > div > .data { padding-bottom: 40px; } .cmpItem > ul.item > li.type1 > a > .data > .lead, .cmpItem > ul.item > li.type1 > div > .data > .lead, .cmpItem > ul.item > li.type2 > a > .data > .lead, .cmpItem > ul.item > li.type2 > div > .data > .lead { margin: 0; padding: 24px 32px 18px; } .cmpItem > ul.item > li.type1 > a > .data > .text, .cmpItem > ul.item > li.type1 > a > .data > .linkBa, .cmpItem > ul.item > li.type1 > div > .data > .text, .cmpItem > ul.item > li.type1 > div > .data > .linkBa, .cmpItem > ul.item > li.type2 > a > .data > .text, .cmpItem > ul.item > li.type2 > a > .data > .linkBa, .cmpItem > ul.item > li.type2 > div > .data > .text, .cmpItem > ul.item > li.type2 > div > .data > .linkBa { padding: 0 32px; } .cmpItem > ul.item > li.type1 > a > .data > .text, .cmpItem > ul.item > li.type1 > div > .data > .text, .cmpItem > ul.item > li.type2 > a > .data > .text, .cmpItem > ul.item > li.type2 > div > .data > .text { margin-bottom: 1.0em; } .cmpItem > ul.item > li.type1 > a > .data > .linkBa, .cmpItem > ul.item > li.type1 > div > .data > .linkBa { bottom: 20px; } .cmpItem > ul.item > li.type2 > a > .data > .linkBa, .cmpItem > ul.item > li.type2 > div > .data > .linkBa { bottom: 0; } .cmpItem > ul.item > li.type2 > a > .data > .lead, .cmpItem > ul.item > li.type2 > div > .data > .lead { position: relative; } .cmpItem > ul.item > li.type2 > a > .data > .lead:after, .cmpItem > ul.item > li.type2 > div > .data > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem.slideR > ul.nav, .cmpItem.slideOnly > ul.nav { right: 25px; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead { position: relative; } .cmpItem.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .thumb > img { height: auto; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead { position: relative; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead img { display: block; margin: 0 auto; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -29px; left: 26px; width: 0; height: 0; content: ''; border: 15px solid transparent; border-bottom-color: white; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead .sub { font-size: 14px; font-size: 1.4rem; top: -5px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .info { padding: 0 32px; } .cmpItem.slideNone > .slideWrap > ul.slide > li > .lead1, .cmpItem.slideNone > .slideWrap > ul.slide > li > .text, .cmpItem.slideNone > .slideWrap > ul.slide > li > .info { margin-bottom: 1em; } /* -------------------------------------------------------------- 追記時期：201908 component名： c03) ピックアップパネル[基本] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem-flex .linkBa { bottom: 35px; } .cmpItem-flex > ul.item > li > .data > .linkBa { position: static; } .cmpItem-flex > .slideWrap { border-bottom: none; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead { position: relative; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead > img, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead > img { display: block; margin: 0 auto; } .cmpItem-flex > .slideWrap > ul.slide > li > a > .lead:after, .cmpItem-flex > .slideWrap > ul.slide > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem-flex > ul.nav { top: -72px; right: 25px; } .cmpItem-flex > ul.item { display: block; } .cmpItem-flex > ul.item > li, .cmpItem-flex > ul.item > li:first-child { width: 100%; padding-bottom: 20px; border-top: 1px solid gainsboro; border-right: none !important; } .cmpItem-flex > ul.item > li > a, .cmpItem-flex > ul.item > li > div { width: 100%; } .cmpItem-flex > ul.item > li > a > .thumb, .cmpItem-flex > ul.item > li > div > .thumb { margin: 0; } .cmpItem-flex > ul.item > li > a > .lead, .cmpItem-flex > ul.item > li > div > .lead { position: relative; } .cmpItem-flex > ul.item > li > a > .lead:after, .cmpItem-flex > ul.item > li > div > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem-flex > ul.item > li.type1 > a, .cmpItem-flex > ul.item > li.type1 > div, .cmpItem-flex > ul.item > li.type2 > a, .cmpItem-flex > ul.item > li.type2 > div { display: block !important; } .cmpItem-flex > ul.item > li.type1 > a > .thumb, .cmpItem-flex > ul.item > li.type1 > a > .data, .cmpItem-flex > ul.item > li.type1 > div > .thumb, .cmpItem-flex > ul.item > li.type1 > div > .data, .cmpItem-flex > ul.item > li.type2 > a > .thumb, .cmpItem-flex > ul.item > li.type2 > a > .data, .cmpItem-flex > ul.item > li.type2 > div > .thumb, .cmpItem-flex > ul.item > li.type2 > div > .data { width: 100% !important; } .cmpItem-flex > ul.item > li.type1 > a > .data, .cmpItem-flex > ul.item > li.type1 > div > .data { padding-bottom: 60px; } .cmpItem-flex > ul.item > li.type2 > a > .data, .cmpItem-flex > ul.item > li.type2 > div > .data { padding-bottom: 40px; } .cmpItem-flex > ul.item > li.type1 > a > .data > .lead, .cmpItem-flex > ul.item > li.type1 > div > .data > .lead, .cmpItem-flex > ul.item > li.type2 > a > .data > .lead, .cmpItem-flex > ul.item > li.type2 > div > .data > .lead { margin: 0; padding: 24px 32px 18px; } .cmpItem-flex > ul.item > li.type1 > a > .data > .text, .cmpItem-flex > ul.item > li.type1 > a > .data > .linkBa, .cmpItem-flex > ul.item > li.type1 > div > .data > .text, .cmpItem-flex > ul.item > li.type1 > div > .data > .linkBa, .cmpItem-flex > ul.item > li.type2 > a > .data > .text, .cmpItem-flex > ul.item > li.type2 > a > .data > .linkBa, .cmpItem-flex > ul.item > li.type2 > div > .data > .text, .cmpItem-flex > ul.item > li.type2 > div > .data > .linkBa { padding: 0 32px; } .cmpItem-flex > ul.item > li.type1 > a > .data > .text, .cmpItem-flex > ul.item > li.type1 > div > .data > .text, .cmpItem-flex > ul.item > li.type2 > a > .data > .text, .cmpItem-flex > ul.item > li.type2 > div > .data > .text { margin-bottom: 1.0em; } .cmpItem-flex > ul.item > li.type1 > a > .data > .linkBa, .cmpItem-flex > ul.item > li.type1 > div > .data > .linkBa { bottom: 20px; } .cmpItem-flex > ul.item > li.type2 > a > .data > .linkBa, .cmpItem-flex > ul.item > li.type2 > div > .data > .linkBa { bottom: 0; } .cmpItem-flex > ul.item > li.type2 > a > .data > .lead, .cmpItem-flex > ul.item > li.type2 > div > .data > .lead { position: relative; } .cmpItem-flex > ul.item > li.type2 > a > .data > .lead:after, .cmpItem-flex > ul.item > li.type2 > div > .data > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 26px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem-flex.slideR > ul.nav, .cmpItem-flex.slideOnly > ul.nav { right: 25px; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead { position: relative; } .cmpItem-flex.slideOnly > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 32px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: #f5f7f8; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .thumb > img { height: auto; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead { position: relative; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead img { display: block; margin: 0 auto; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead:after { position: absolute; z-index: 1; top: 0; top: -29px; left: 26px; width: 0; height: 0; content: ''; border: 15px solid transparent; border-bottom-color: white; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead .sub { font-size: 14px; font-size: 1.4rem; top: -5px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .info { padding: 0 32px; } .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .lead1, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .text, .cmpItem-flex.slideNone > .slideWrap > ul.slide > li > .info { margin-bottom: 1em; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem1 { overflow: hidden; } .cmpItem1 > ul { width: 1000%; } .cmpItem1 > ul > li { overflow: hidden; width: 10%; } .cmpItem1 > ul > li > ul.navController1 { position: absolute; top: 176.5px; width: 100%; margin-top: -30px; text-align: left; } .cmpItem1 > ul > li > ul.navController1 > li { width: auto; margin: 0 5px 0 0; } .cmpItem1 > ul > li > ul.navController1 > li.prev{ margin: 0 0 0 5px; } .cmpItem1 > ul > li > ul.navController1 > li > a { width: 60px; height: 60px; } .cmpItem1 > ul > li > ul.navController1 > li > a:hover { cursor: pointer; } .cmpItem1 > ul > li > ul.navController1 > li.next { float: right; } .cmpItem1 ul.slide { position: relative; left: 0; width: 1000%; -webkit-transition: left .5s; transition: left .5s; } .cmpItem1 ul.slide > li.type1, .cmpItem1 ul.slide > li.type2, .cmpItem1 ul.slide > li.type3 { position: static; float: left; width: 10%; height: auto; } .cmpItem1 ul.slide > li.type1 { background-color: #fff; } .cmpItem1 ul.slide > li.type1 > a > .thumb { display: block; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span { display: block; padding: 100% 0 0; overflow: hidden; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span > img { position: absolute; left: 0; top: 0; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span, .cmpItem1 ul.slide > li.type2 > a > .thumb > span, .cmpItem1 ul.slide > li.type3 > a > .thumb > span { height: 0; } .cmpItem1 ul.slide > li.type1 > a > .thumb > span > img, .cmpItem1 ul.slide > li.type2 > a > .thumb > span > img, .cmpItem1 ul.slide > li.type3 > a > .thumb > span > img { width: 100%; } .cmpItem1 ul.slide > li.type1 > a > .thumb.taC > span, .cmpItem1 ul.slide > li.type2 > a > .thumb.taC > span, .cmpItem1 ul.slide > li.type3 > a > .thumb.taC > span { padding: 10% 25px; } .cmpItem1 ul.slide > li.type1 > a > .data, .cmpItem1 ul.slide > li.type2 > a > .data, .cmpItem1 ul.slide > li.type3 > a > .data { min-height: 0; padding: 24px 32px 20px; } .cmpItem1 ul.slide > li.type3 > a > .data:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 30px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem1 ul.slide > li.type1 > a > .data > .lead, .cmpItem1 ul.slide > li.type2 > a > .data > .lead, .cmpItem1 ul.slide > li.type3 > a > .data > .lead { margin-bottom: 0; font-size: 15px; font-size: 1.5rem; line-height: 1.5; } .cmpItem1 ul.slide > li.type1 > a > .data > div > span.price, .cmpItem1 ul.slide > li.type2 > a > .data > div > span.price, .cmpItem1 ul.slide > li.type3 > a > .data > div > span.price { font-size: 15px; font-size: 1.5rem; } .cmpItem1 ul.slide > li.type1 > a > .data > div > span.brand, .cmpItem1 ul.slide > li.type2 > a > .data > div > span.brand, .cmpItem1 ul.slide > li.type3 > a > .data > div > span.brand { font-size: 12px; font-size: 1.2rem; } .cmpItem1 ul.slide > li.type1 > a > .data { position: relative; } .cmpItem1 ul.slide > li.type1 > a > .data:after { position: absolute; z-index: 1; top: 0; top: -39px; left: 30px; width: 0; height: 0; content: ''; border: 20px solid transparent; border-bottom-color: white; } .cmpItem1 ul.slide > li.type2, .cmpItem1 ul.slide > li.type3 { box-sizing: border-box; border-width: 0 !important; } .cmpItem1 ul.slide > li.type2 > a > .thumb > span, .cmpItem1 ul.slide > li.type3 > a > .thumb > span { padding: 100% 0 0; } .cmpItem1 ul.slide > li.type2 > a > .thumb > span > img, .cmpItem1 ul.slide > li.type3 > a > .thumb > span > img { position: absolute; left: 0; top: 0; width: 100% !important; } .cmpItem1 ul.slide > li.type3, .cmpItem1 ul.slide > li.type3 + .type3, .cmpItem1 ul.slide > li.type3 + .type3 + .type3, .cmpItem1 ul.slide > li.type3 + .type3 + .type3 + .type3 { border-width: 0 !important; } .cmpItem2 .linkBa, .cmpItem2-flex .linkBa { bottom: 20px; } .cmpItem2 ul.slide > li, .cmpItem2-flex ul.slide > li { width: 5%; } .cmpItem2 ul.slide > li > .data, .cmpItem2-flex ul.slide > li > .data { padding: 24px 32px 80px; position: relative; } .cmpItem2.slideNone ul.slide > li { width: 100%; border-width: 0 1px 1px 0; } .cmpItem2-flex.slideNone ul.slide > li { width: 100%; border-width: 0 1px 1px 1px; } .cmpItem2 > ul.navController1, .cmpItem2-flex > ul.navController1 { top: 124px; margin-top: -30px; } .cmpItem2.slideNone ul.slide > li:first-child, .cmpItem2-flex.slideNone ul.slide > li:first-child { border-top: 1px solid gainsboro; } .cmpItem3 ul.slide > li { width: 5%; border: none !important; } .cmpItem3.bdrTopNone .slideWrap { border-width: 1px; } .cmpItem3.bdrTopNone .slideWrap li { border-width: 0 !important; } /* -------------------------------------------------------------- 追記時期：201908 component名： g01) ページレコメンド[自動] flexbox化 g02) ページレコメンド[手動] flexbox化 g03) 商品レコメンド[自動] flexbox化 g04) 商品レコメンド[手動] flexbox化 g06) 動画レコメンド[手動] flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem3-flex ul.slide > li { width: 5%; border: none !important; } .cmpItem3-flex.bdrTopNone .slideWrap { border-width: 1px; } .cmpItem3-flex.bdrTopNone .slideWrap li { border-width: 0 !important; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem4 { position: relative; } .cmpItem4 > ul.slide, .cmpItem4 > ul.slideNone { width: 1000%; } .cmpItem4 > ul.slide > li.type1, .cmpItem4 > ul.slide > li.type2, .cmpItem4 > ul.slideNone > li.type1, .cmpItem4 > ul.slideNone > li.type2 { float: left; width: 10%; background-color: #fff; } .cmpItem4 > ul.slide > li.type1 > a, .cmpItem4 > ul.slide > li.type2 > a, .cmpItem4 > ul.slideNone > li.type1 > a, .cmpItem4 > ul.slideNone > li.type2 > a { padding: 24px 32px 20px; } .cmpItem4 > ul.slide > li.type1 > a > .thumb, .cmpItem4 > ul.slide > li.type1 > a > .data, .cmpItem4 > ul.slide > li.type2 > a > .thumb, .cmpItem4 > ul.slide > li.type2 > a > .data, .cmpItem4 > ul.slideNone > li.type1 > a > .thumb, .cmpItem4 > ul.slideNone > li.type1 > a > .data, .cmpItem4 > ul.slideNone > li.type2 > a > .thumb, .cmpItem4 > ul.slideNone > li.type2 > a > .data { display: block; float: none; } .cmpItem4 > ul.slide > li.type1 > a .thumb, .cmpItem4 > ul.slide > li.type2 > a .thumb, .cmpItem4 > ul.slideNone > li.type1 > a .thumb, .cmpItem4 > ul.slideNone > li.type2 > a .thumb { width: auto; width: 100%; margin-bottom: 20px; padding: 0; text-align: center; background-color: #fff; } .cmpItem4 > ul.slide > li.type1 > a .thumb img, .cmpItem4 > ul.slide > li.type2 > a .thumb img, .cmpItem4 > ul.slideNone > li.type1 > a .thumb img, .cmpItem4 > ul.slideNone > li.type2 > a .thumb img { width: auto; height: auto; max-height: 290px; } .cmpItem4 > ul.slide > li.type1 > a .data, .cmpItem4 > ul.slide > li.type2 > a .data, .cmpItem4 > ul.slideNone > li.type1 > a .data, .cmpItem4 > ul.slideNone > li.type2 > a .data { width: 100%; padding: 0; } .cmpItem4 > ul.slide > li.type1 > a .data:after, .cmpItem4 > ul.slide > li.type2 > a .data:after { display: none; } .cmpItem4 > ul.slide > li.type1 > a .data > .lead, .cmpItem4 > ul.slide > li.type2 > a .data > .lead, .cmpItem4 > ul.slideNone > li.type1 > a .data > .lead, .cmpItem4 > ul.slideNone > li.type2 > a .data > .lead { font-size: 15px; font-size: 1.5rem; line-height: 1.2; margin-bottom: 0; } .cmpItem4 > ul.slide > li.type1 > a .data > .text, .cmpItem4 > ul.slide > li.type2 > a .data > .text, .cmpItem4 > ul.slideNone > li.type1 > a .data > .text, .cmpItem4 > ul.slideNone > li.type2 > a .data > .text { display: none; } .cmpItem4 > ul.slide > li.type1 > a .data > .release, .cmpItem4 > ul.slide > li.type1 > a .data > .btnBa, .cmpItem4 > ul.slide > li.type2 > a .data > .release, .cmpItem4 > ul.slide > li.type2 > a .data > .btnBa, .cmpItem4 > ul.slideNone > li.type1 > a .data > .release, .cmpItem4 > ul.slideNone > li.type1 > a .data > .btnBa, .cmpItem4 > ul.slideNone > li.type2 > a .data > .release, .cmpItem4 > ul.slideNone > li.type2 > a .data > .btnBa { /* display: none;*/ } .cmpItem4 > ul.slide > li.type1 > a .data > .btnBa, .cmpItem4 > ul.slide > li.type2 > a .data > .btnBa, .cmpItem4 > ul.slideNone > li.type1 > a .data > .btnBa, .cmpItem4 > ul.slideNone > li.type2 > a .data > .btnBa { display: none; } .cmpItem4 > ul.slide > li.type3, .cmpItem4 > ul.slideNone > li.type3 { width: 10%; height: auto; } .cmpItem4 > ul.slide > li.type3 > a > .thumb, .cmpItem4 > ul.slide > li.type3 > a > .data, .cmpItem4 > ul.slideNone > li.type3 > a > .thumb, .cmpItem4 > ul.slideNone > li.type3 > a > .data { float: none; } .cmpItem4 > ul.slide > li.type3 .thumb, .cmpItem4 > ul.slideNone > li.type3 .thumb { width: 100%; margin: 0; padding: 25px 25px 0; text-align: center; } .cmpItem4 > ul.slide > li.type3 .thumb span, .cmpItem4 > ul.slideNone > li.type3 .thumb span { display: inline-block; } .cmpItem4 > ul.slide > li.type3 .thumb img, .cmpItem4 > ul.slideNone > li.type3 .thumb img { width: auto; max-width: 200px; max-height: 290px; } .cmpItem4 > ul.slide > li.type3 .data, .cmpItem4 > ul.slideNone > li.type3 .data { width: 100%; padding: 18px 32px; } .cmpItem4 > ul.slide > li.type3 .data:after, .cmpItem4 > ul.slideNone > li.type3 .data:after { display: none; } .cmpItem4 > ul.slide > li.type3 .data > .lead, .cmpItem4 > ul.slideNone > li.type3 .data > .lead { font-size: 24px; font-size: 2.4rem; } .cmpItem4 > ul.navController1 { position: absolute; top: 50%; margin-top: -30px; } .cmpItem4 > ul.navController1 > li { position: relative; } .cmpItem4 > ul.navController1 > li > a:before { top: 50% !important; background-image: url(/etc/designs/disney/libs/common/image/carousel_sprite.png) !important; } /* -------------------------------------------------------------- 追記時期：201908 component名： c10) DVDパッケージ用パネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem4-flex { position: relative; } .cmpItem4-flex > ul.slide, .cmpItem4-flex > ul.slideNone { width: 1000%; } .cmpItem4-flex > ul.slide > li.type1, .cmpItem4-flex > ul.slide > li.type2, .cmpItem4-flex > ul.slideNone > li.type1, .cmpItem4-flex > ul.slideNone > li.type2 { float: left; width: 10%; background-color: #fff; } .cmpItem4-flex > ul.slide > li.type1 > a, .cmpItem4-flex > ul.slide > li.type2 > a, .cmpItem4-flex > ul.slideNone > li.type1 > a, .cmpItem4-flex > ul.slideNone > li.type2 > a { display: block; padding: 24px 32px 20px; } .cmpItem4-flex > ul.slide > li.type1 > a > .thumb, .cmpItem4-flex > ul.slide > li.type1 > a > .data, .cmpItem4-flex > ul.slide > li.type2 > a > .thumb, .cmpItem4-flex > ul.slide > li.type2 > a > .data, .cmpItem4-flex > ul.slideNone > li.type1 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type1 > a > .data, .cmpItem4-flex > ul.slideNone > li.type2 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type2 > a > .data { display: block; float: none; } .cmpItem4-flex > ul.slide > li.type1 > a .thumb, .cmpItem4-flex > ul.slide > li.type2 > a .thumb, .cmpItem4-flex > ul.slideNone > li.type1 > a .thumb, .cmpItem4-flex > ul.slideNone > li.type2 > a .thumb { width: auto; width: 100%; margin-bottom: 20px; padding: 0; text-align: center; background-color: #fff; } .cmpItem4-flex > ul.slide > li.type1 > a .thumb img, .cmpItem4-flex > ul.slide > li.type2 > a .thumb img, .cmpItem4-flex > ul.slideNone > li.type1 > a .thumb img, .cmpItem4-flex > ul.slideNone > li.type2 > a .thumb img { width: auto; height: auto; max-height: 290px; } .cmpItem4-flex > ul.slide > li.type1 > a .data, .cmpItem4-flex > ul.slide > li.type2 > a .data, .cmpItem4-flex > ul.slideNone > li.type1 > a .data, .cmpItem4-flex > ul.slideNone > li.type2 > a .data { width: 100%; padding: 0; } .cmpItem4-flex > ul.slide > li.type1 > a .data:after, .cmpItem4-flex > ul.slide > li.type2 > a .data:after { display: none; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .lead, .cmpItem4-flex > ul.slide > li.type2 > a .data > .lead, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .lead, .cmpItem4-flex > ul.slideNone > li.type2 > a .data > .lead { font-size: 15px; font-size: 1.5rem; line-height: 1.2; margin-bottom: 0; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .text, .cmpItem4-flex > ul.slide > li.type2 > a .data > .text, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .text, .cmpItem4-flex > ul.slideNone > li.type2 > a .data > .text { display: none; } .cmpItem4-flex > ul.slide > li.type1 > a .data > .release, .cmpItem4-flex > ul.slide > li.type1 > a .data > .btnBa, .cmpItem4-flex > ul.slide > li.type2 > a .data > .release, .cmpItem4-flex > ul.slide > li.type2 > a .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .release, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type2 > a .data > .release, .cmpItem4-flex > ul.slideNone > li.type2 > a .data > .btnBa { /* display: none;*/ } .cmpItem4-flex > ul.slide > li.type1 > a .data > .btnBa, .cmpItem4-flex > ul.slide > li.type2 > a .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type1 > a .data > .btnBa, .cmpItem4-flex > ul.slideNone > li.type2 > a .data > .btnBa { display: none; } .cmpItem4-flex > ul.slide > li.type3, .cmpItem4-flex > ul.slideNone > li.type3 { width: 10%; height: auto; } .cmpItem4-flex > ul.slide > li.type3 > a > .thumb, .cmpItem4-flex > ul.slide > li.type3 > a > .data, .cmpItem4-flex > ul.slideNone > li.type3 > a > .thumb, .cmpItem4-flex > ul.slideNone > li.type3 > a > .data { float: none; } .cmpItem4-flex > ul.slide > li.type3 .thumb, .cmpItem4-flex > ul.slideNone > li.type3 .thumb { width: 100%; margin: 0; padding: 25px 25px 0; text-align: center; } .cmpItem4-flex > ul.slide > li.type3 .thumb span, .cmpItem4-flex > ul.slideNone > li.type3 .thumb span { display: inline-block; } .cmpItem4-flex > ul.slide > li.type3 .thumb img, .cmpItem4-flex > ul.slideNone > li.type3 .thumb img { width: auto; max-width: 200px; max-height: 290px; } .cmpItem4-flex > ul.slide > li.type3 .data, .cmpItem4-flex > ul.slideNone > li.type3 .data { width: 100%; padding: 18px 32px; } .cmpItem4-flex > ul.slide > li.type3 .data:after, .cmpItem4-flex > ul.slideNone > li.type3 .data:after { display: none; } .cmpItem4-flex > ul.slide > li.type3 .data > .lead, .cmpItem4-flex > ul.slideNone > li.type3 .data > .lead { font-size: 24px; font-size: 2.4rem; } .cmpItem4-flex > ul.navController1 { position: absolute; top: 50%; margin-top: -30px; } .cmpItem4-flex > ul.navController1 > li { position: relative; } .cmpItem4-flex > ul.navController1 > li > a:before { top: 50% !important; background-image: url(/etc/designs/disney/libs/common/image/carousel_sprite.png) !important; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem5 ul.slide > li { width: 100%; } .cmpItem5.isClose ul.slide > li:nth-child(4) ~ li { display: none; } /* -------------------------------------------------------------- 追記時期：201908 component名： k04) BD/OD_作品一覧 flexbox化 k05) BD/OD_発売カレンダー flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpItem5-flex ul.slide > li { width: 100%; } .cmpItem5-flex.isClose ul.slide > li:nth-child(4) ~ li { display: none; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpItem6 > ul.item > li { margin-bottom: 10px; } .cmpItem6 > ul.item > li .thumb, .cmpItem6 > ul.item > li .data { float: none; width: 100%; } .cmpItem6 > ul.item > li .thumb { padding: 40px 40px 10px; } .cmpItem6 > ul.item > li .data { padding: 24px 40px 20px; } .cmpItem6 > ul.item > li .data:after { display: none; } .cmpItem6 > ul.item > li .data .lead { margin-bottom: 6px; font-size: 22px; font-size: 2.2rem; } .cmpItem6 > ul.item > li .data .price, .cmpItem6 > ul.item > li .data dl.list { font-size: 15px; font-size: 1.5rem; margin-bottom: 6px; } .cmpItem6 > ul.item > li > .detail { padding-right: 40px; padding-left: 40px; } .cmpItem6 > ul.item > li .data ul.listIconBa li { margin-bottom: 5px; } .cmpItem6 > ul.item > li .data .price span.iconMovienex { overflow: hidden; width: 47px; height: 42px; margin: 0 5px; } .cmpItem6 > ul.item > li .data .price span.iconMovienex:before { top: 0; left: 0; width: 47px; height: 42px; margin-top: 0; background-position: 0 -66px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpItem6 > ul.item > li .data .price span.iconMovienex:before { position: static; } .cmpItem6 > ul.item > li .data dl.list > dd { margin-bottom: 5px; } .cmpItem6 > ul.item > li.type2 .thumb { padding: 40px; } .cmpItem7 ul.slide > li { padding: 40px 40px 30px; } .cmpItem7 ul.slide > li .info .thumb { display: block; width: 100%; margin-bottom: 20px; padding: 0; text-align: center; background-color: inherit; } .cmpItem7 ul.slide > li .info .thumb span { display: table; } .cmpItem7 ul.slide > li .info .thumb img { width: auto; height: auto; max-height: 290px; } .cmpItem7 ul.slide > li .info .data { display: block; width: 100%; padding: 0; } .cmpItem7 ul.slide > li .info .data:after { display: none; } .cmpItem7 ul.slide > li .info .data .lead { font-size: 13px; font-size: 1.3rem; } .cmpItem7 ul.slide > li .info .data .text, .cmpItem7 ul.slide > li .info .data .release { display: none; } .cmpItem7 ul.slide > li .info .data .btnBa { margin-bottom: 10px; } .cmpItem8 ul.slide > li > a > .text { padding: 0 32px; } .cmpItem8 ul.slide > li > span > .linkBa, .cmpItem8 ul.slide > li > a > .linkBa { position: static; margin: 20px 32px 0; } .cmpItem8 > ul.navController1 { top: 123.5px; margin-top: -30px; } .cmpItem9 ul.slide > li .lead, .cmpItem9 ul.slide > li .text, .cmpItem9 ul.slide > li .info { margin-bottom: 12px; } .cmpItem9 > ul.navController1 { top: 135.5px; } .cmpNews > .newsWrap > ul.item { width: 100%; border-width: 0; } .cmpNews > .newsWrap > ul.item > li > a { padding: 20px 35px 20px 100px; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 { border-bottom-width: 1px; } .cmpNews.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li:first-child > a { border-top-width: 1px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb { top: 20px; left: 20px; } .cmpNews > .newsWrap > ul.item > li > a > .thumb img { margin-left: 0; } .cmpNews > .newsWrap > ul.item > li > a > .thumb > .date { display: none; } .cmpNews > .newsWrap > ul.item > li > a > .date { font-size: 11px; font-size: 1.1rem; margin-bottom: 4px; } .cmpNews > .newsWrap > ul.item > li > a > .date > span { display: inline-block; padding: 1px 5px; color: #fff; background-color: #138ac1; } .cmpNews > .movienex { padding: 30px 25px; background: #f5f7f8; } .cmpNews > .movienex .text, .cmpNews > .movienex ul.listNumBa { margin-bottom: 20px; } .cmpNews > .movienex ul.listNumBa { margin-right: 0; } /* -------------------------------------------------------------- 追記時期：201908 component名： f03) ニュースピックアップリスト flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpNews-flex > .newsWrap > ul.item { width: 100%; border-width: 0; } .cmpNews-flex > .newsWrap > ul.item > li > a { padding: 20px 35px 20px 100px; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 { border-bottom-width: 1px; } .cmpNews-flex.nCmpNews1.dateNone > .newsWrap.nNewsWrap1 > ul > li:first-child > a { border-top-width: 1px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb { top: 20px; left: 20px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb img { margin-left: 0; } .cmpNews-flex > .newsWrap > ul.item > li > a > .thumb > .date { display: none; } .cmpNews-flex > .newsWrap > ul.item > li > a > .date { font-size: 11px; font-size: 1.1rem; margin-bottom: 4px; } .cmpNews-flex > .newsWrap > ul.item > li > a > .date > span { display: inline-block; padding: 1px 5px; color: #fff; background-color: #138ac1; } .cmpNews-flex > .movienex { padding: 30px 25px; background: #f5f7f8; } .cmpNews-flex > .movienex .text, .cmpNews-flex > .movienex ul.listNumBa { margin-bottom: 20px; } .cmpNews-flex > .movienex ul.listNumBa { margin-right: 0; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpRankingMusic, .cmpListSns { border: 1px solid gainsboro; } .cmpRankingMusic > li, .cmpListSns > li { display: block; float: none !important; width: 100% !important; height: auto !important; margin-top: 0 !important; border: none !important; } .cmpRankingMusic > li .thumb, .cmpRankingMusic > li .data, .cmpListSns > li .thumb, .cmpListSns > li .data { position: static !important; top: 0 !important; left: 0 !important; float: none !important; width: 100% !important; } .cmpRankingMusic > li .data, .cmpListSns > li .data { position: relative !important; height: auto !important; padding: 30px 25px 40px !important; } .cmpRankingMusic > li .data:after, .cmpListSns > li .data:after { top: -49px !important; left: 25px !important; margin: 0 !important; border-color: transparent !important; border-bottom-color: #fff !important; } .cmpRankingMusic > li ul.list, .cmpListSns > li ul.list { font-size: 16px !important; font-size: 1.6rem !important; } .cmpRankingMusic > li .rank, .cmpListSns > li .rank { font-size: 30px !important; font-size: 3.0rem !important; margin-bottom: 15px !important; } .cmpRankingMusic > li .lead, .cmpListSns > li .lead { font-size: 22px !important; font-size: 2.2rem !important; } .cmpRankingMusic > li .text, .cmpListSns > li .text { font-size: 18px !important; font-size: 1.8rem !important; } .cmpRankingMusic > li.rank1 .data:after, .cmpRankingMusic > li.rank5 .data:after, .cmpRankingMusic > li.rank7 .data:after, .cmpRankingMusic > li.rank10 .data:after, .cmpListSns > li.rank1 .data:after, .cmpListSns > li.rank5 .data:after, .cmpListSns > li.rank7 .data:after, .cmpListSns > li.rank10 .data:after { border-bottom-color: #003e58 !important; } .cmpRankingMusic > li.rank4 .data:after, .cmpRankingMusic > li.rank6 .data:after, .cmpRankingMusic > li.rank9 .data:after, .cmpListSns > li.rank4 .data:after, .cmpListSns > li.rank6 .data:after, .cmpListSns > li.rank9 .data:after { border-bottom-color: #0093d0 !important; } .cmpListSns { border-bottom: none !important; } .cmpListSns.bdrTopNone { border-width: 1px 1px 0 !important; } .cmpListSns.bdrTopNone > li { border-width: 0 0 1px !important; } .cmpListSns > li { border-bottom: 1px solid #dcdcdc !important; } .cmpListSns > li.rank1 .data:after { border-bottom-color: #f5f7f8 !important; } .cmpListSns > li.rank2 .data:after, .cmpListSns > li.rank3 .data:after, .cmpListSns > li.rank4 .data:after { border-bottom-color: #fff !important; } .cmpBanner > ul.tab > li { float: none; width: 100%; border-top: 1px solid gainsboro; } .cmpBanner > ul.tab > li:first-child { border-top: none; } .cmpBanner > ul.tab > li > a.logo { line-height: 80px; } .cmpBanner > ul.tab > li > a.logo > span > img { width: auto; max-height: 40px; } .cmpBanner > ul.tab > li.isCurrent > a.logo { position: relative; } .cmpBanner > ul.tab > li.isCurrent > a.logo:after { position: absolute; z-index: 1; top: 99%; top: 98%; left: 51%; width: 0; height: 0; margin-left: -15px; content: ''; border: 15px solid transparent; border-top-color: white; } .cmpNavCharacter { padding: 0 25px; } .cmpNavCharacter > .slideWrap > ul.slide > li { width: 3.33333%; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.thumb { width: 95% !important; max-width: 100px !important; } .cmpNavCharacter > ul.navController > li { margin: 0; } .cmpNavCharacter > ul.navController > li.isInvalid { display: none; } .cmpNavCharacter > ul.navController > li > a { border: none; width: 60px; height: 60px; background-color: transparent; } .navChannel > ul.navController > li > a:after, .cmpNavCharacter > ul.navController > li > a:after, .cmpNavCharacter > ul.navController1 > li > a:after { position: absolute; top: 25%; right: 0; display: block; width: 50%; height: 50%; border-radius: 100%; background-color: rgba(85, 85, 85, .7); content: ''; } .cmpNavCharacter > ul.navController { top: 20%; bottom: auto; z-index: 10; } @media only screen and (max-width:320px) { .cmpNavCharacter > ul.navController { top: 15%; } } .navChannel > ul.navController li { margin-left: 7px; } .navChannel > ul.navController li.next { margin-right: 3px; } .navChannel > ul.navController > li > a:before, .cmpNavCharacter > ul.navController > li > a:before, .cmpNavCharacter > ul.navController1 > li > a:before { top: 50%; left: 75%; width: 9px; height: 14px; margin-top: -7px; margin-left: -4px; background-position: 0 -8px; -webkit-background-size: 19px 22px; background-size: 19px 22px; background-image: url(/etc/designs/disney/libs/common/image/carousel_sprite.png); z-index: 10; } .navChannel > ul.navController > li.prev > a:before, .cmpNavCharacter > ul.navController > li.prev > a:before, .cmpNavCharacter > ul.navController1 > li.prev > a:before { top: 50%; left: 25%; width: 9px; height: 14px; margin-top: -7px; margin-left: -6px; background-position: -10px -8px; -webkit-background-size: 19px 22px; background-size: 19px 22px; background-image: url(/etc/designs/disney/libs/common/image/carousel_sprite.png); } .navChannel > ul.navController > li.prev > a:after, .cmpNavCharacter > ul.navController > li.prev > a:after, .cmpNavCharacter > ul.navController1 > li.prev > a:after { left: 0; } /* Type Fixed --------------------------------------------------- */ .cmpNavCharacter.typeFixed > .slideWrap > ul.slide > li { width: 3.33333%; } .cmpNavCharacter.typeFixed > .slideWrap > ul.slide > li:nth-child(7n) { margin-left: 1.67777%; } .navFixedCharacterMore { width: 100%; padding-right: 25px; padding-left: 25px; } /* Type Few --------------------------------------------------- */ .cmpNavCharacter.typeFew { padding: 0 25px; } .cmpNavCharacter.typeFew > .slideWrap > ul.slide > li { width: 3.33333% !important; } .cmpNavCharacter.typeFew > .navController { display: block; } .cmpColumn.typeCol2.typeGallery > .column { float: none; width: 100%; } .cmpColumn.typeCol2.typeGallery > .column .btnBa { bottom: 30px; left: 25px; } .cmpColumn.typeCol2.typeGallery > .column .btnBa > a { padding: 13px 50px 13px 25px; font-size: 14px; font-size: 1.4rem; } .cmpColumn.typeCol2.typeGallery > .column.type1 { display: none; } .cmpColumn.typeCol2.typeMusic > .column.type1 { padding: 30px; } .cmpColumn.typeCol2.typeMusic > .column.type2 { padding: 24px 40px 20px !important; } .cmpColumn.typeCol2.typeMusic > .column.type2 .hdgTy2, .cmpColumn.typeCol2.typeMusic > .column.type2 .hdgTy3 { font-size: 22px; font-size: 2.2rem; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 5px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 44px; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 20px; font-size: 2rem; } .cmpColumn.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 50px; height: 50px; } .cmpColumn.typeCol2.typeDetail > .column { margin-bottom: 0; padding: 24px 32px 20px; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .contents { width: 65%; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .contents > .hdgTy2 { margin-bottom: 0; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .img { width: 35%; padding-top: 0; padding-left: 15px; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .img > img { width: 80px; } .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .img, .cmpColumn.typeCol2.typeDetail > .column .lytImgBa .contents { display: table-cell; vertical-align: middle; } /* -------------------------------------------------------------- 追記時期：201908 component名： k01) BD/OD_作品ヒーローパネル flexbox化 対象箇所：全画面 -------------------------------------------------------------- */ .cmpColumn-flex.typeCol2.typeGallery > .column { float: none; width: 100%; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa { bottom: 30px; left: 25px; } .cmpColumn-flex.typeCol2.typeGallery > .column .btnBa > a { padding: 13px 50px 13px 25px; font-size: 14px; font-size: 1.4rem; } .cmpColumn-flex.typeCol2.typeGallery > .column.type1 { display: none; } .cmpColumn-flex.typeCol2.typeMusic > .column.type1 { padding: 30px; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 { padding: 24px 40px 20px !important; } .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .hdgTy2, .cmpColumn-flex.typeCol2.typeMusic > .column.type2 .hdgTy3 { font-size: 22px; font-size: 2.2rem; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic { padding: 5px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul { line-height: 44px; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li.cdno, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li.cdno { font-size: 20px; font-size: 2rem; } .cmpColumn-flex.typeCol2.typeMusicList > .column.type1 > .hdgMusic > ul > li > img, .cmpColumn-flex.typeCol2.typeMusicList > .column.type2 > .hdgMusic > ul > li > img { width: 50px; height: 50px; } .cmpColumn-flex.typeCol2.typeDetail > .column { margin-bottom: 0; padding: 24px 32px 20px; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .contents { width: 65%; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .contents > .hdgTy2 { margin-bottom: 0; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .img { width: 35%; padding-top: 0; padding-left: 15px; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .img > img { width: 80px; } .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .img, .cmpColumn-flex.typeCol2.typeDetail > .column .lytImgBa .contents { display: table-cell; vertical-align: middle; } /* -------------------------------------------------------------- 追記時期：201908 ここまで -------------------------------------------------------------- */ .cmpTimetable { padding-right: 5px; } .cmpTimetable > .listTimeTableBa > dt { width: 18%; } .cmpTimetable > .listTimeTableBa > dt .time { font-size: 12px; font-size: 1.2rem; white-space: nowrap; } .cmpTimetable > .listTimeTableBa > dt .time .sub { font-size: 12px; font-size: 1.2rem; } .cmpTimetable > .listTimeTableBa > dd > .link, .cmpTimetable > .listTimeTableBa > div > .link { padding: 20px 35px 10px 20px; } .cmpTimetable > .listTimeTableBa > dd > .link .hdg, .cmpTimetable > .listTimeTableBa > div > .link .hdg { font-size: 18px; font-size: 1.8rem; display: inline-block; margin-bottom: 5px; } .cmpTimetable > .listTimeTableBa > dd > a.link:before, .cmpTimetable > .listTimeTableBa > div > a.link:before { top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; background-position: -373px -387px; -webkit-background-size: 492px 474px; background-size: 492px 474px; } .cmpTimetable > .listTimeTableBa > dd > .contents, .cmpTimetable > .listTimeTableBa > div > .contents { padding: 0 20px; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 .img, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 .img { text-align: left; } .cmpTimetable > .listTimeTableBa > dd > .contents .lytImgTy1 .img img, .cmpTimetable > .listTimeTableBa > div > .contents .lytImgTy1 .img img { max-width: 172px; height: auto; } .cmpTimetable > .listTimeTableBa > div { width: 100%; } .cmpTimetable > .listTimeTableBa > div > .link { padding-right: 20px; } .cmpTimetable > .listTimeTableBa > dd { width: 82%; } .cmpTimetable > .listTimeTableBa.isCurrent > dt, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt { color: #fff; background-color: #0093d0; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div { position: relative; display: block; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div:after, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { position: absolute; z-index: 1; top: 50%; left: 101%; left: 99%; width: 0; height: 0; content: ''; border: 20px solid transparent; border-left-color: #0093d0; } .cmpTimetable > .listTimeTableBa.isCurrent > dt > div:after, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { margin-top: -20px; } .cmpTimetable > .listTimeTableBa.isCurrent > dt .time, .cmpTimetable > .listTimeTableBa.isNowOnAir > dt .time { color: #fff; } .cmpTimetable > .listTimeTableBa.isCurrent > dd > a.link:before { top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; background-position: -252px -387px; -webkit-background-size: 492px 474px; background-size: 492px 474px; } .cmpTimetable > .listTimeTableBa.isCurrent > dd > .contents { display: block; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt { background-color: #333; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div { position: relative; } .cmpTimetable > .listTimeTableBa.isNowOnAir > dt > div:after { position: absolute; z-index: 1; top: 50%; left: 101%; left: 99%; width: 0; height: 0; content: ''; border: 20px solid transparent; border-left-color: #333; } .cmpAccordionBa > .section > .hdg a { padding: 20px 30px 20px 10px; } .cmpAccordionBa > .section > .hdg a:before { right: 10px !important; } .cmpAccordionBa > .section > .contents { padding: 0 10px; } ul.cmpListIcon { font-size: 16px; font-size: 1.6rem; } ul.cmpListIcon > li > a { padding: 70px 10px 25px !important; } ul.cmpListIcon > li.iconDocument > a:before { top: 25px; left: 50%; width: 25px; height: 31px; margin-top: 0; margin-left: -12.5px; background-position: -234px -196px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } ul.cmpListIcon > li.iconMobile > a:before { top: 25px; left: 50%; width: 20px; height: 32px; margin-top: 0; margin-left: -10px; background-position: -280px -148px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } ul.cmpListIcon > li.iconBuy > a:before { top: 25px; left: 50%; width: 31px; height: 31px; margin-top: 0; margin-left: -15.5px; background-position: -120px -269px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } ul.cmpListIcon > li.iconComment > a:before { top: 25px; left: 50%; width: 31px; height: 31px; margin-top: 0; margin-left: -15.5px; background-position: -188px -118px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } ul.cmpListIconTy1 > li { display: block; margin-bottom: 5px; } .cmpPanel > .column { padding: 24px 32px 20px; } .cmpPanel > .column > .hdg { font-size: 22px; font-size: 2.2rem; } .cmpPanel > .column > .hdg.iconShopping, .cmpPanel > .column > .hdg.iconSearch, .cmpPanel > .column > .hdg.iconTv, .cmpPanel > .column > .hdg.iconTel, .cmpPanel > .column > .hdg.iconTicket, .cmpPanel > .column > .hdg.iconInternet, .cmpPanel > .column > .hdg.iconInfo, .cmpPanel > .column > .hdg.iconReserve, .cmpPanel > .column > .hdg.iconSphone, .cmpPanel > .column > .hdg.iconMail, .cmpPanel > .column > .hdg.iconCalendar { padding-top: 45px; } .cmpPanel > .column > .hdg.iconAny { padding-top: 0; } .cmpPanel > .column > .hdg.iconShopping:before { top: 3px; left: 0; width: 31px; height: 31px; margin-top: 0; background-position: -280px -184px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconSearch:before { top: 0; left: 0; width: 34px; height: 34px; margin-top: 0; background-position: -231px -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconTv:before { top: 3px; left: 0; width: 44px; height: 34px; margin-top: 0; background-position: -32px -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconTel:before { top: 0; left: 0; width: 33px; height: 34px; margin-top: 0; background-position: -280px 0; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconTicket:before { top: 0; left: 0; width: 34px; height: 34px; margin-top: 0; background-position: -118px -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconInternet:before { top: 0; left: 0; width: 33px; height: 27px; margin-top: 0; background-position: -192px -307px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconInfo:before { top: 0; left: 0; width: 34px; height: 34px; margin-top: 0; background-position: 0 -269px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconReserve:before { top: 0; left: 0; width: 34px; height: 34px; margin-top: 0; background-position: -193px -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconSphone:before { top: 0; left: 0; width: 28px; height: 34px; margin-top: 0; background-position: 0 -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconMail:before { top: 0; left: 0; width: 33px; height: 33px; margin-top: 0; background-position: -280px -75px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanel > .column > .hdg.iconCalendar:before { top: 0; left: 0; width: 34px; height: 34px; margin-top: 0; background-position: -80px -231px; -webkit-background-size: 431px 414px; background-size: 431px 414px; } .cmpPanelSns { right: 10px; } #myStatus.isShowModal .cmpModal { padding: 10px; } #myStatus.isShowModal .cmpModal > .inner > .modalContents { min-height: inherit; padding: 20px; } #myStatus.isShowModal .cmpModal > .inner .hdgBa { font-size: 18px; font-size: 1.8rem; } .cmpGallery .mainGallery { margin-bottom: 5px; } .cmpGallery .mainGallery .slideWrap ul.navController { margin-top: -22px; } .cmpGallery .mainGallery .slideWrap ul.navController li a { width: 44px; height: 44px; } .cmpGallery .mainGallery .slideWrap ul.navController li.prev { margin-left: 15px; } .cmpGallery .mainGallery .slideWrap ul.navController li.prev a:before { top: 50%; left: 18px; width: 11px; height: 16px; margin-top: -8px; background-position: -254px -38px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpGallery .mainGallery .slideWrap ul.navController li.next { margin-right: 15px; } .cmpGallery .mainGallery .slideWrap ul.navController li.next a:before { top: 50%; left: 20px; width: 11px; height: 16px; margin-top: -8px; background-position: -254px -57px; -webkit-background-size: 308px 296px; background-size: 308px 296px; } .cmpGallery .navGallery { margin-bottom: 5px; } .cmpGallery .navGallery .slideWrap, .cmpGallery .navGallery ul.navController1 { display: none; } .cmpGallery .navGallery .logo { float: none; width: auto; height: auto; text-align: center; } /* ----------------------------------------------------------------------------- * pseudo SELECT @max-width 480px ----------------------------------------------------------------------------- */ .cmpItem.slideNone > .slideWrap > .slide.typeAutoH > li > .cmpListSelect, .insListSelect { padding: 0 25px; } .listSelect { display: block; width: 100%; } .linkDownloader.downloaderEnabled { display: block; width: 100%; margin: 1em 0 0; } /* ------ Body SNS General ------ */ .bodySns { margin: 30px 0 51px; } .bodySnsContent { margin: 0 0 31px; } .bodySnsContent > ul > li { margin: 0 9px; } } .nMainImg .mgT0 { margin-top:0px !important; } .nMainImg .mgT10 { margin-top:10px !important; } .nMainImg .mgT20 { margin-top:20px !important; } .nMainImg .mgT30 { margin-top:30px !important; } .nMainImg .mgT40 { margin-top:40px !important; } .nMainImg .mgT50 { margin-top:50px !important; } .nMainImg .mgT60 { margin-top:60px !important; } .nMainImg .mgB0 { margin-bottom:0px !important; } .nMainImg .mgB10 { margin-bottom:10px !important; } .nMainImg .mgB20 { margin-bottom:20px !important; } .nMainImg .mgB30 { margin-bottom:30px !important; } .nMainImg .mgB40 { margin-bottom:40px !important; } .nMainImg .mgB50 { margin-bottom:50px !important; } .nMainImg .mgB60 { margin-bottom:60px !important; } /* ----------------------------------------------------------- * * Character Navigation Expand * * -------------------------------------------------------- */ .cmpNavCharacter.typeExpand > .slideWrap { width: 100%; -moz-transition: height .75s ease; -webkit-transition: height .75s ease; transition: height .75s ease; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide { width: auto; padding-bottom: 0; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li { width: 132px; margin: 0 9px 1em; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a { padding: 8px 8px 0; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li.isCurrent > a, .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a:hover { margin-top: 0; padding: 0; text-decoration: none; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a > span { display: block; margin: 0 auto; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a > span.thumb { max-width: none; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a > span.caption { margin-top: 10px; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li.isCurrent > a > span.caption, .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a:hover > span.caption { margin-top: 6px; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a > br { display: none; } .expandButton { margin-top: 1em; } .expandButton a { display: block; border: 1px solid gainsboro; padding: 14px; background-color: #f6f7f9; font-size: 13px; font-size: 1.3rem; font-weight: bold; color: #0093d0; text-align: center; } .expandButton > a span { position: relative; display: inline-block; padding-left: 24px; } .expandButton a:hover span { text-decoration: underline; } .expandButton > a span:before { position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border-radius: 20px; background-color: #0093d0; } .expandButton > a span:after { position: absolute; top: 5px; left: 6px; display: inline-block; width: 9px; height: 9px; margin-top: 0; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); background-position: -593px -442px; content: ''; } .expandButton > a span.isExpanded:after { background-position: -593px -457px; } @media only screen and (max-width: 800px) { .cmpNavCharacter.typeExpand { padding: 0; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li { width: 23%; margin: 0 1%; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li.isCurrent > a > span.thumb, .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a:hover > span.thumb { width: 100%; } .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li.isCurrent > a > span.caption, .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li > a:hover > span.caption { margin-top: 2px; padding: 0 8px; } .cmpImage2 ul.navController1, .cmpImageCharacter ul.navController1 { display: block; } } @media only screen and (max-width: 480px) { .cmpNavCharacter.typeExpand > .slideWrap > ul.slide > li { width: 31.3333%; margin: 0 1%; } .cmpNavCharacter > .slideWrap > ul.slide > li > a > span.thumb { width: 100% !important; max-width: none !important; } } .cmpItem5.listImage .slideWrap { border-width: 0 0 0 1px; } .cmpItem5.listImage ul.slide > div > div { float: left; width: 25%; border: 1px solid gainsboro; border-width: 0 1px 1px 0; } .cmpItem5.listImage ul.slide > div > div:first-child, .cmpItem5.listImage ul.slide > div > div:nth-child(2), .cmpItem5.listImage ul.slide > div > div:nth-child(3), .cmpItem5.listImage ul.slide > div > div:nth-child(4) { border-width: 1px 1px 1px 0; } .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { position: relative; display: block; height: 100%; padding: 30px 32px 20px; } .cmpItem5.listImage ul.slide > div > div > li >a:hover { cursor: default; text-decoration: none; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb { margin-bottom: 20px; text-align: center; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb > img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb > img { position: relative; z-index: 1; max-width: 200px; height: auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div > .data { line-height: 1.2; font-size: 13px; font-size: 1.3rem; } .cmpItem5.listImage ul.slide > div > div > li > a > .data > .lead, .cmpItem5.listImage ul.slide > div > div > li > div > .data > .lead { margin-bottom: 3px; } .cmpItem5.listImage ul.slide > div > div > li > a > .data > .text, .cmpItem5.listImage ul.slide > div > div > li > div > .data > .text { color: #777; } .cmpItem5.listImage.bdrTopNone ul.slide > div > div { border-width: 1px 1px 1px 0 !important; } @media only screen and (max-width: 800px) { .cmpItem5.listImage ul.slide > div > div { width: 50%; height: auto; } .cmpItem5.listImage ul.slide > div > div:nth-child(3), .cmpItem5.listImage ul.slide > div > div:nth-child(4) { border-width: 0 1px 1px 0; } .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { padding: 40px; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb { width: auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img { max-width: 100%; } .cmpItem5.listImage.isClose ul.slide > div > div:nth-child(12) ~ div { display: none; } .cmpItem5.listImage.typeCol2.isClose ul.slide > div > div:nth-child(12) ~ div { display: block; } } @media only screen and (max-width: 480px) { .cmpItem5.listImage ul.slide > div > div { width: 100%; } .cmpItem5.listImage ul.slide > div > div:nth-child(2) { border-width: 0 1px 1px 0; } .cmpItem5.listImage.isClose ul.slide > div > div:nth-child(4) ~ div { display: none; } .cmpItem5.listImage.typeCol2.isClose ul.slide > div > div:nth-child(4) ~ div { display: block; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div > .data { font-size: 15px; font-size: 1.5rem; } .cmpItem5.listImage.typeCol2.forSp ul.slide > div > div { width: 50%; } .cmpItem5.listImage.typeCol2.forSp ul.slide > div > div:nth-child(2) { border-width: 1px 1px 1px 0; } } .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { position: relative; display: block; height: 100%; } .cmpItem5.listImage ul.slide > div > div > li > div > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb:hover, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb span, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb span:hover, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img:hover, .cmpItem5.listImage ul.slide > div > div > li > div > .data, .cmpItem5.listImage ul.slide > div > div > li > div > .data:hover, .cmpItem5.listImage ul.slide > div > div > li > div > .data p.lead, .cmpItem5.listImage ul.slide > div > div > li > div > .data p.lead:hover, .cmpItem5.listImage ul.slide > div > div > li > div > .data span.text, .cmpItem5.listImage ul.slide > div > div > li > div > .data span.text:hover { text-decoration:none; cursor:auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > a > .thumb:hover{ cursor:pointer; } @media screen and (min-width:801px){ .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { padding: 30px 32px 20px; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb{ width:100%; height:auto; margin-bottom:24px; text-align:center; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb span, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb span{ text-align:center; height:auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img{ height:auto; } } @media screen and (min-width:481px) and (max-width:800px){ .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { padding: 32px 32px 26px; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb{ display:table; width:100%; height:auto; margin-bottom:24px; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb span, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb span{ text-align:center; width:100%; height:auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img{ max-width:100%; height:auto; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div > .data{ margin-bottom:0; font-size: 15px; font-size: 1.5rem; } } @media screen and (max-width:480px){ .cmpItem5.listImage > .slideWrap { border-width: 0 0 0 1px; } .cmpItem5.listImage ul.slide > div > div > li > a, .cmpItem5.listImage ul.slide > div > div > li > div { padding: 0; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb{ margin: 0; } .cmpItem5.listImage ul.slide > div > div > li > a > .thumb img, .cmpItem5.listImage ul.slide > div > div > li > div > .thumb img{ width:100%; } .cmpItem5.listImage ul.slide > div > div > li > a > .data, .cmpItem5.listImage ul.slide > div > div > li > div > .data{ padding: 24px 32px; } } /* for .cmpMpanel */ .cmpMpanel { background-color: transparent; border: 0px; border-left:1px solid gainsboro; } .cmpMpanel > .column { background-color: #f5f7f8; box-sizing:border-box; border-top: 1px solid gainsboro; border-right: 1px solid gainsboro; border-bottom: 1px solid gainsboro; border-width:1px 1px 1px 0px; } .cmpMpanel h3 { margin-top: 0; margin-bottom:0; } .cmpMpanel:after { content: ""; display: table; clear: both; } .cmpMpanel > .column { width: 25%; box-sizing:border-box; float: left; display:block; padding: 24px 32px 57px; background-color: #f5f7f8; min-height:300px; } .cmpMpanel > .column { position:relative; } .cmpMpanel > .column > h3+ul { margin-top:18px; } .cmpMpanel > .column > ul { color: #737373; font-size: 14px; font-size: 1.4rem; margin: 0px; } .cmpMpanel h3 { font-size: 20px; font-size: 2rem; font-weight: normal; } .cmpMpanel > .column > .linkBa { position:absolute; margin-bottom: 0; bottom:20px; } @media only screen and (min-width:481px) and (max-width: 800px) { .cmpMpanel { border-left:1px solid gainsboro; border-top:1px solid gainsboro; } .cmpMpanel > .column { width: 50%; min-height:260px; padding: 24px 32px 57px; border-width: 0px 1px 1px 0px; float:left; position:relative; } .cmpMpanel > .column >h3+ul { margin-top:16px; line-height: 1.2; } .cmpMpanel > .column > ul { color: #737373; font-size: 15px; font-size: 1.5rem; margin: 0px; } .cmpMpanel h3 { font-size: 22px; font-size: 2.2rem; font-weight: normal; } .cmpMpanel > .column > .linkBa { position:absolute; bottom:20px; margin-right:25px; } } @media only screen and (max-width: 480px) { .cmpMpanel { border-top:1px solid gainsboro; border-left:1px solid gainsboro; } .cmpMpanel h3 { font-size: 22px; font-size: 2.2rem; } .cmpMpanel > .column { width: 100%; height:auto; min-height: 0; border-width: 0 1px 1px 0px; float:none; padding: 24px 32px 20px; } .cmpMpanel > .column >h3+ul { margin-top:12px; } .cmpMpanel > .column > ul { height: auto; font-size: 15px; font-size: 1.5rem; } .cmpMpanel > .column > .linkBa { position:relative; margin-top: 20px; margin-bottom: 0px; bottom: 0px; } } /* for .cmpItem6 */ p.appiconBa { overflow: hidden; position: relative; *zoom:1; margin-bottom:10px !important; display:block; text-align:left; } p.appiconBa span { font-size: 12px; font-size: 1.2rem; font-weight: bold; display: inline-block; margin: 0 6px 6px 0; padding: 1px 4px; color: #777; border: 1px solid gainsboro; background-color: #f5f7f8; min-width:50px; text-align:center; } @media screen and (min-width:801px){ .cmpItem6 > ul.item > li > .info br , .cmpItem6 > ul.item > li > .data br { display:none; } .cmpItem6 > ul.item > li .data { padding-top:40px; padding-bottom:32px; } .cmpItem6 > ul.item > li .data > .price { display:block; margin-bottom:20px; } } @media screen and (min-width:481px) and (max-width:800px){ .cmpItem6 > ul.item > li > .info br , .cmpItem6 > ul.item > li > .data br { display:none; } .cmpItem6 > ul.item > li .thumb { min-height:340px; } .cmpItem6 > ul.item > li .data:after { top: 22px; } .cmpItem6 > ul.item > li .data > .lead { font-size: 22px; font-size: 2.2rem; } .cmpItem6 > ul.item > li .data > .price { display:block; } } @media screen and (max-width:481px){ .cmpItem6 > ul.item > li > .info br , .cmpItem6 > ul.item > li > .data br { display:none; } .cmpItem6 > ul.item > li .data { padding-top:24px; padding-bottom:20px; } .cmpItem6 > ul.item > li .data > .price { display:block; margin-bottom:6px; } } /* for .tblKana */ dl.tblKana dt a{ color:#0093d0; } /* for .cmpShopSub */ .cmpShopSub { position: relative; overflow: hidden; } .cmpShopSub .text { color: #777; } .cmpShopSub > ul > li > .hdg { position: absolute; z-index: -1; } .cmpShopSub ul.slide { background-color: #fff; width:100%; } .cmpShopSub ul.slide > li { background-color: #fff; box-sizing: border-box; } .cmpShopSub ul.slide > li > a, .cmpShopSub ul.slide > li > div { position: relative; display: block; width: 100%; height: 100%; } .cmpShopSub ul.slide > li > a > .thumb, .cmpShopSub ul.slide > li > div > .thumb { display: table; width: 100%; text-align: center; } .cmpShopSub ul.slide > li > a > .thumb > span, .cmpShopSub ul.slide > li > div > .thumb > span { display: table-cell; width: 100%; } .cmpShopSub ul.slide > li > a > .data, .cmpShopSub ul.slide > li > div > .data { position: absolute; top: 264px; left: 0; width: 100%; background-color: #fff; } .cmpShopSub ul.slide > li.type2 > a > .data, .cmpShopSub ul.slide > li.type2 > div > .data, .cmpShopSub ul.slide > li.type4 > a > .data, .cmpShopSub ul.slide > li.type4 > div > .data { top: auto; bottom: 0; } .cmpShopSub ul.slide > li > a > .data > .lead, .cmpShopSub ul.slide > li > div > .data > .lead { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height: 1.2; font-size: 14px; font-size: 1.4rem; } .cmpShopSub ul.slide > li > a > .data > div > span.price, .cmpShopSub ul.slide > li > div > .data > div > span.price { font-size: 14px; font-size: 1.4rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpShopSub ul.slide > li > a > .data > div > span.brand, .cmpShopSub ul.slide > li > div > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; color: #777; display:block; } .cmpShopSub ul.slide > li.type3 { width:300px; height: 385px !important; border: 1px solid gainsboro; border-width:0 1px 1px 0; } .cmpShopSub ul.slide > li.type3 { float:left; } .cmpShopSub ul.slide > li.type3:nth-child(4n+1) { border-width:0px 1px 1px 1px; } .cmpShopSub ul.slide > li.type3:nth-of-type(1) { border-width:1px 1px 1px 1px; } .cmpShopSub ul.slide > li.type3:nth-of-type(2), .cmpShopSub ul.slide > li.type3:nth-of-type(3), .cmpShopSub ul.slide > li.type3:nth-of-type(4) { border-width:1px 1px 1px 0; } .cmpShopSub ul.slide > li.type3 > a > .thumb > span img, .cmpShopSub ul.slide > li.type3 > div > .thumb > span img { margin-top:16px; max-width: 220px; height: auto; } .cmpShopSub ul.slide > li.type3 > a > .data, .cmpShopSub ul.slide > li.type3 > div > .data { position: absolute; padding: 25px 40px; } .cmpShopSub ul.slide > li.type3 > a > .data > .lead, .cmpShopSub ul.slide > li.type3 > div > .data > .lead { margin-bottom: 0; } .cmpShopSub ul.slide > li.type3 .thumb > span { height: 264px; vertical-align: bottom; } .cmpShopSub ul.slide > li.type2, .cmpShopSub ul.slide > li.type4 { overflow: hidden; height: 770px; border: 1px solid gainsboro; width:300px; } .cmpShopSub ul.slide > li.type2 { float: right; } .cmpShopSub ul.slide > li.type4 { float: left; } .cmpShopSub ul.slide > li.type4 { border-width:1px 1px 1px 1px; } .cmpShopSub ul.slide > li.type4 + li.type2 { border-width:1px 1px 1px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 { border-width:1px 1px 1px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 + li.type3 + li.type3 , .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 1px 1px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 { border-width:1px 1px 1px 1px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 { border-width:1px 0px 1px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 0px 1px 0px; } .cmpShopSub ul.slide > li.type2 .thumb > span, .cmpShopSub ul.slide > li.type4 .thumb > span { height: 600px; vertical-align: middle; } .cmpShopSub ul.slide > li.type1 > a > .thumb > span img, .cmpShopSub ul.slide > li.type2 > a > .thumb > span img, .cmpShopSub ul.slide > li.type3 > a > .thumb > span img, .cmpShopSub ul.slide > li.type4 > a > .thumb > span img, .cmpShopSub ul.slide > li.type1 > div > .thumb > span img, .cmpShopSub ul.slide > li.type2 > div > .thumb > span img, .cmpShopSub ul.slide > li.type3 > div > .thumb > span img, .cmpShopSub ul.slide > li.type4 > div > .thumb > span img { max-width: 234px; height: auto; } .cmpShopSub ul.slide > li.type1 > a > .data, .cmpShopSub ul.slide > li.type2 > a > .data, .cmpShopSub ul.slide > li.type3 > a > .data, .cmpShopSub ul.slide > li.type4 > a > .data, .cmpShopSub ul.slide > li.type1 > div > .data, .cmpShopSub ul.slide > li.type2 > div > .data, .cmpShopSub ul.slide > li.type3 > div > .data, .cmpShopSub ul.slide > li.type4 > div > .data { position: absolute; padding: 24px 32px; } .cmpShopSub ul.slide > li.type1 > a > .data > .lead, .cmpShopSub ul.slide > li.type2 > a > .data > .lead, .cmpShopSub ul.slide > li.type3 > a > .data > .lead, .cmpShopSub ul.slide > li.type4 > a > .data > .lead, .cmpShopSub ul.slide > li.type1 > div > .data > .lead, .cmpShopSub ul.slide > li.type2 > div > .data > .lead, .cmpShopSub ul.slide > li.type3 > div > .data > .lead, .cmpShopSub ul.slide > li.type4 > div > .data > .lead { margin-bottom: 0; } @media only screen and (max-width:800px) { .cmpShopSub { position: relative; overflow: hidden; border: 1px solid gainsboro; border-width:1px 0 1px 1px; } .cmpShopSub .text { color: #777; } .cmpShopSub > ul > li > .hdg { position: absolute; z-index: -1; } .cmpShopSub ul.slide { background-color: #fff; width:100%; } .cmpShopSub ul.slide > li { float: left; background-color: #fff; border: 1px solid gainsboro; border-width:0px; } .cmpShopSub ul.slide > li > a, .cmpShopSub ul.slide > li > div { position: relative; display: block; width: 100%; height: 100%; } .cmpShopSub ul.slide > li > a > .thumb, .cmpShopSub ul.slide > li > div > .thumb { display: table; width: 100%; text-align: center; } .cmpShopSub ul.slide > li > a > .thumb > span, .cmpShopSub ul.slide > li > div > .thumb > span { display: table-cell; width: 100%; } .cmpShopSub ul.slide > li > a > .data, .cmpShopSub ul.slide > li > div > .data { position:relative; width: 100%; background-color: #fff; } .cmpShopSub ul.slide > li > a > .data > .lead, .cmpShopSub ul.slide > li > div > .data > .lead { font-size: 15px; font-size: 1.5rem; } .cmpShopSub ul.slide > li > a > .data > div > span.price, .cmpShopSub ul.slide > li > div > .data > div > span.price { font-size: 15px; font-size: 1.5rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpShopSub ul.slide > li > a > .data > div > span.brand, .cmpShopSub ul.slide > li > div > .data > div > span.brand { font-size: 11px; font-size: 1.1rem; color: #777; } .cmpShopSub ul.slide > li.type2 > a > .thumb > span img, .cmpShopSub ul.slide > li.type4 > a > .thumb > span img, .cmpShopSub ul.slide > li.type2 > div > .thumb > span img, .cmpShopSub ul.slide > li.type4 > div > .thumb > span img { width:100% } .cmpShopSub ul.slide > li.type2, .cmpShopSub ul.slide > li.type4 { height: auto; width:50%; } .cmpShopSub ul.slide > li.type3 { width:50%; /*height: auto;*/ border:1px solid gainsboro; border-width:0px 1px 1px 0px; } .cmpShopSub ul.slide > li.type3 > a > .thumb > span img, .cmpShopSub ul.slide > li.type3 > div > .thumb > span img { width:100%; max-width:none; height: auto; margin-top: 0; } .cmpShopSub ul.slide > li.type3 > a > .data, .cmpShopSub ul.slide > li.type3 > div > .data { position:relative; top: auto; padding: 25px 40px; } .cmpShopSub ul.slide > li.type3 > a > .data > .lead, .cmpShopSub ul.slide > li.type3 > div > .data > .lead { margin-bottom: 0; } .cmpShopSub ul.slide > li.type3 .thumb > span { height: auto; padding: 32px 32px 0; } .cmpShopSub ul.slide > li.type2 .thumb > span, .cmpShopSub ul.slide > li.type4 .thumb > span { height: auto; padding: 32px 32px 0; } .cmpShopSub ul.slide > li.type2 .thumb > span img, .cmpShopSub ul.slide > li.type4 .thumb > span img { width: 100%; } .cmpShopSub ul.slide > li.type3 { height:auto !important; border:1px solid gainsboro; } .cmpShopSub ul.slide > li.type3:nth-of-type(2n) { border-width:0px 0px 1px 0px; } .cmpShopSub ul.slide > li.type3:nth-child(2n+1) { border-width:0px 1px 1px 0px; } .cmpShopSub ul.slide > li.type4 { border-width: 0px 0px 0px 0px; } .cmpShopSub ul.slide > li.pickupBoxListMiddle2 { border-width: 0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type2 { border-width: 0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 { border-width: 0px 1px 1px 0px; } .cmpShopSub ul.slide > li.type3:nth-last-child(2) { border-width: 0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type3:nth-last-child(1) { border-width: 0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 { border-width:0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 { clear:both; /*border-width:0px 1px 1px 0px;*/ border-width:1px 1px 1px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:1px 0px 1px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type2 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 { /*border-width: 0px 0px 1px 1px;*/ border-width: 0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 { border-width: 1px 1px 1px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 + li.type3 { border-width: 1px 0px 1px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 + li.type3 + li.type3 { border-width: 0px 1px 0px 0px; } .cmpShopSub ul.slide > li.type4 + li.type2 + li.type3 + li.type3 + li.type3 + li.type3 { border-width: 0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type4 + li.type3 { border-width:0px 0px 1px 1px; } .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 { /*border-width:0px 0px 1px 1px;*/ border-width:0px 0px 0px 1px; } .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 + li.type3 { /*border-width:1px 1px 1px 0px;*/ border-width:1px 0px 1px 0px; } .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 + li.type3 + li.type3 { /*border-width:0px 0px 1px 0px;*/ border-width:1px 0px 1px 1px; } .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 0px 0px 0px; } .cmpShopSub ul.slide > li.type4 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 + li.type3 { border-width:0px 0px 0px 1px; } .cmpShopSub ul.slide > li:nth-child(2n) { border-right-width: 1px !important; } .cmpShopSub ul.slide > li.type1 > a > .thumb > span img, .cmpShopSub ul.slide > li.type2 > a > .thumb > span img, .cmpShopSub ul.slide > li.type4 > a > .thumb > span img, .cmpShopSub ul.slide > li.type1 > div > .thumb > span img, .cmpShopSub ul.slide > li.type2 > div > .thumb > span img, .cmpShopSub ul.slide > li.type4 > div > .thumb > span img { max-width: 100%; height: auto; } .cmpShopSub ul.slide > li.type1 > a > .data, .cmpShopSub ul.slide > li.type2 > a > .data, .cmpShopSub ul.slide > li.type3 > a > .data, .cmpShopSub ul.slide > li.type4 > a > .data, .cmpShopSub ul.slide > li.type1 > div > .data, .cmpShopSub ul.slide > li.type2 > div > .data, .cmpShopSub ul.slide > li.type3 > div > .data, .cmpShopSub ul.slide > li.type4 > div > .data { position: relative; padding: 24px 32px; } .cmpShopSub ul.slide > li.type1 > a > .data > .lead, .cmpShopSub ul.slide > li.type2 > a > .data > .lead, .cmpShopSub ul.slide > li.type3 > a > .data > .lead, .cmpShopSub ul.slide > li.type4 > a > .data > .lead, .cmpShopSub ul.slide > li.type1 > div > .data > .lead, .cmpShopSub ul.slide > li.type2 > div > .data > .lead, .cmpShopSub ul.slide > li.type3 > div > .data > .lead, .cmpShopSub ul.slide > li.type4 > div > .data > .lead { margin-bottom: 0; } } @media only screen and (min-width: 481px) and (max-width: 800px) { .cmpShopSub ul.slide > li.type1 > a > .thumb > span img, .cmpShopSub ul.slide > li.type2 > a > .thumb > span img, .cmpShopSub ul.slide > li.type4 > a > .thumb > span img, .cmpShopSub ul.slide > li.type1 > div > .thumb > span img, .cmpShopSub ul.slide > li.type2 > div > .thumb > span img, .cmpShopSub ul.slide > li.type4 > div > .thumb > span img { min-width: 160px; } } @media only screen and (max-width:480px) { .cmpShopSub { position: relative; overflow: hidden; border: 1px solid gainsboro; border-width:1px 1px 1px 1px; } .cmpShopSub ul.slide > li { float: none; width:100%; background-color: #fff; border: 1px solid gainsboro; } .cmpShopSub ul.slide > li:nth-child(2n) { border-right-width: 0 !important; } .cmpShopSub ul.slide > li > a > .data > .lead, .cmpShopSub ul.slide > li > div > .data > .lead { font-size: 15px; font-size: 1.5rem; } .cmpShopSub ul.slide > li > a > .data > div > span.price, .cmpShopSub ul.slide > li > div > .data > div > span.price { font-size: 15px; font-size: 1.5rem; font-weight: bold; display: inline-block; margin-right: 10px; } .cmpShopSub ul.slide > li.type1 > a > .data, .cmpShopSub ul.slide > li.type2 > a > .data, .cmpShopSub ul.slide > li.type3 > a > .data, .cmpShopSub ul.slide > li.type4 > a > .data, .cmpShopSub ul.slide > li.type1 > div > .data, .cmpShopSub ul.slide > li.type2 > div > .data, .cmpShopSub ul.slide > li.type3 > div > .data, .cmpShopSub ul.slide > li.type4 > div > .data { position:relative; padding: 24px 32px; } .cmpShopSub ul.slide > li.type2, .cmpShopSub ul.slide > li.type4 { height: auto; width:50%; } .cmpShopSub ul.slide > li.type3 { width:50%; height: auto; border:1px solid gainsboro; border-width:0px 1px 1px 0px; } .cmpShopSub ul.slide > li.type3 > a > .thumb > span img, .cmpShopSub ul.slide > li.type3 > div > .thumb > span img { width:100%; margin-top:0; max-width:none; height: auto; } .cmpShopSub ul.slide > li.type2, .cmpShopSub ul.slide > li.type4, .cmpShopSub ul.slide > li.type3, .cmpShopSub ul.slide > li.type4 + li.type2 , .cmpShopSub ul.slide > li.type4 + li.type2 +li.type3 , .cmpShopSub ul.slide > li.type4 + li.type2 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type4 + li.type2 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type2 +li.type3 , .cmpShopSub ul.slide > li.type2 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type2 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type2 +li.type3 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type2 +li.type3 +li.type3 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type4 +li.type3 , .cmpShopSub ul.slide > li.type4 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type4 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type4 +li.type3 +li.type3 +li.type3 +li.type3 , .cmpShopSub ul.slide > li.type4 +li.type3 +li.type3 +li.type3 +li.type3 +li.type3 { float:none; width:100%; border-width:0px 0px 1px 0px; } .cmpShopSub ul.slide > li.type3:nth-of-type(1), .cmpShopSub ul.slide > li.type3:nth-of-type(2n+1) { border-width:0px 0px 1px 0px; } .cmpShopSub ul.slide > li.type3:nth-last-child(1) { border-width:0px 0px 0px 0px !important; } .cmpShopSub ul.slide > li.type2 .thumb > span, .cmpShopSub ul.slide > li.type3 .thumb > span, .cmpShopSub ul.slide > li.type4 .thumb > span { position: relative; height: auto; padding: 100% 0 0; } .cmpShopSub ul.slide > li.type2 .thumb > span img, .cmpShopSub ul.slide > li.type3 .thumb > span img, .cmpShopSub ul.slide > li.type4 .thumb > span img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } } /* for .cmpItem.slideNone.mgB0 */ @media screen and (max-width:800px){ .cmpItem.slideNone.mgB0{ margin-bottom:0px !important; } .cmpItem.slideNone.mgB0 > .slideWrap > ul.slide > li { border-bottom: 1px; } } /* for text-component */ .parbase.read_text.section > p, .parbase.read_text.section > p.txtLeadBa, .parbase.read_text.section > div > div > p, .parbase.read_text.section > div > div > p.txtLeadBa{ word-break: normal; word-wrap: normal; } /* Topic path component */ .strTopicpath { font-size: 12px; font-size: 1.2rem; } .strTopicpath ul li { display: inline-block; margin: 0; padding: 0; vertical-align: middle; } .strTopicpath ul li:before { display: inline-block; margin: 0 .5em; content: '\>'; vertical-align: baseline; font-family: Arial, Helvetica, sans-serif; } .strTopicpath ul li strong { font-weight: normal; color: #333; } .strTopicpath ul .homeTopicpath { width: 18px; height: 16px; } .strTopicpath ul .homeTopicpath:before { display: none; } .strTopicpath ul .homeTopicpath > a { overflow: hidden; -webkit-box-sizing: content-box; box-sizing: content-box; width: 18px; height: 16px; } .strTopicpath ul .homeTopicpath > a:before { position: static; display: inline-block; width: 18px; height: 16px; margin-top: 0; background-image: url(/etc/designs/disney/libs/common/image/sprite.png); background-position: -593px -23px; content: ''; } /* -------------------------------------------------------------- Content Fold -------------------------------------------------------------- */ .foldEnabled .foldContent { height: 0; visibility: hidden; overflow: hidden; } .foldEnabled .expandContent { height: auto; visibility: visible; overflow: visible; } /* -------------------------------------------------------------- Tab Box -------------------------------------------------------------- */ .cmpColumn.typeTabBox { border-right: 1px solid #d9dadc; border-bottom: 1px solid #d9dadc; border-left: 1px solid #d9dadc; } .cmpColumn.typeTabBox ul.tabLinkBa.typeCol2 { margin-top: 0; margin-bottom: 0; padding-bottom: 1px; } .cmpColumn.typeTabBox ul.tabLinkBa.typeCol2 > li.isCurrent { background: transparent; } .cmpColumn.typeTabBox ul.tabLinkBa.typeCol2 > li > a{ padding: 30px 40px; } .cmpColumn.typeTabBox h3.hdgTy3 { margin: 18px 30px 10px 30px; font-size: 1.3rem; font-weight: bold; } .cmpColumn.typeTabBox .hdgTy3 + .setScale { margin-right: 6px; margin-left: 6px; } .cmpColumn.typeTabBox .cmpNavCharacter > .slideWrap { width: auto; } .cmpColumn.typeTabBox .cmpNavCharacter > .slideWrap > ul.slide { min-height: 185px; } /* Show More */ .cmpShowMore .linkShowMore { display: none; margin-top: -1px; text-align: center; } .isNoneSlide { height: auto !important; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap { overflow: visible; width: auto; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap > ul.slide { width: 100%; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap > ul.slide > li { width: 12.5%; height: 171px; } @media only screen and (max-width: 800px) { .cmpColumn.typeTabBox .cmpNavCharacter { padding: 0; } .cmpShowMore .linkShowMore { display: block; } .cmpShowMore .isClose { display: none; } .cmpColumn.typeTabBox .cmpShowMore .linkShowMore a { border-right: none; border-bottom: none; border-left: none; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap > ul.slide > li { width: 25%; } .cmpColumn.typeTabBox .cmpShowMore .linkShowMore a.isOpen span:after { background-position: -283px -244px; } .parbase.section.rss_article .nMainImg { width: 100%; } .parbase.section.rss_article > div > p { color: #777; } .parbase.section.rss_article > div > h1{ color: #777; } .parbase.section.rss_article > .linkBa { margin-bottom: 10px; } .cmpShopSub ul.slide > li > a > .data > .lead, .cmpShopSub ul.slide > li > div > .data > .lead { font-size: 15px; font-size: 1.5rem; } } @media only screen and (max-width: 480px) { .cmpColumn.typeTabBox .cmpNavCharacter { padding: 0; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap > ul.slide > li { width: 33.33333333333333%; } .cmpShowMore .cmpNavCharacter.isNoneSlide > .slideWrap > ul.slide > li > a > span.thumb { width: 95% !important; max-width: 100px !important; } } .parbase.section.rss_article .nMainImg { margin-bottom: 10px; } .shopNoticeLink { text-align: right; } .shopNoticeLink > a { font-size: 12px; padding: 3px 0; color: #8f8f8f; } /* ------------------------------------------------------------*/ /* for .cmpSnsBlock 2020.04.10 start */ .cmpSnsBlock{ margin: 40px auto 22px; display: flex; } .cmpSnsBlock > .cmpSnsTitle { width: 26%; max-width: 310px; font-size: 18px; color: #333; position: relative; } .cmpSnsBlock > .cmpSnsTitle > p { position: absolute; top: 50%; transform: translateY(-50%) } .cmpSnsBlock > .cmpSnsList{ display: flex; width: 74%; min-width: 600px; margin-right:8px; justify-content: flex-start; align-items: flex-start; -webkit-box-lines:multiple; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItem { display: -webkit-flex; display: flex; width: 16%; min-width: 124px; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItem.addlink > a { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .cmpSnsImg { display: inline-flex; position: relative; float:left; padding: 8px 8px 8px 28px; width: 15%; min-width: 100px; } .cmpSnsImgHasTitle { display: inline-flex; position: relative; float:left; padding: 8px 8px 8px 28px; width: 15%; min-width: 100px; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle { display: -webkit-flex; display: flex; justify-content: flex-start; align-items: flex-start; width: 33%; min-width: 248px; } .cmpSnsItemTitleBlock { display: inline-flex; position: relative; width: 140px; margin-right:8px; height: 80px; } .cmpSnsItemTitleBlock > .cmpSnsItemTitle { font-size: 14px; color: #333; position: absolute; top: 50%; transform: translateY(-50%) } .cmpSnsItemTitleBlock > .cmpSnsItemTitle:hover { text-decoration: underline; } @media only screen and (max-width: 800px) { .cmpSnsBlock{ display: inline; } .cmpSnsBlock > .cmpSnsTitle{ display: inline; max-width: 100%; position: static; } .cmpSnsBlock > .cmpSnsTitle > p { position: static; transform:none; margin: 40px 6px 12px; } .cmpSnsBlock > .cmpSnsList { width: 100%; min-width: 0; margin: 0 2px 22px 2px; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItem { min-width: 110px; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle { min-width: 220px; } .cmpSnsImg { padding: 8px; min-width: 80px; } .cmpSnsItemTitleBlock{ padding: 0; margin: 0; width: 140px; } .cmpSnsItemTitleBlock > .cmpSnsItemTitle { padding: 0; } } @media only screen and (max-width: 480px) { .cmpSnsBlock{ padding: 0; } .cmpSnsBlock > .cmpSnsList { margin: 0 0 22px 0; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItem { width: 25%; min-width:70px; } .cmpSnsBlock > .cmpSnsList > .cmpSnsItemHasTitle { width: 50%; min-width:140px; } .cmpSnsImg { margin-right:4px; width: 64px; min-width:64px; height: 64px; } .cmpSnsItemTitleBlock{ padding: 0; min-width:70px; max-width:50%; height: 100%; min-height: 64px; } } /* for .cmpSnsBlock 2020.04.10 end */ /* for .cmpSubFooter 2020.04.10 start */ .cmpSubFooter { margin-bottom: 0px; } .cmpSubFooter > .cmpSubf_Title { margin-top: 30px; font-size: 18px; padding: 10px; width: 100%; color: #333; background-color: #f5f7f8; margin-bottom: 10px; } .cmpSubFooter > .cmpSubf_PicupList { margin-bottom: 20px; } .cmpSubFooter > .cmpSubf_PicupList li { display: inline-block; margin: 10px; font-size: 14px; } .cmpSubFooter > .cmpSubf_CharacterList { display: flex; background-color: #fff; margin-bottom: 20px; justify-content: flex-start; align-items: flex-start; -webkit-box-lines:multiple; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .cmpSubFooter > .cmpSubf_CharacterList li { margin: 4px 0; width: 16%; min-width: 200px; max-width: 280px; } .cmpSubFooter > .cmpSubf_CharacterList > li > a { display: flex; margin: 0 4px; border: 1px solid gainsboro; } .cmpSubf_CharacterItem { margin-top: 6px; margin-left: 6px; margin-right: 6px; } .cmpSubf_CharacterTitleBlock { display: inline-flex; position: relative; width: 100%; margin-right: 6px; overflow: hidden; } .cmpSubf_CharacterTitleBlock > .cmpSubf_CharacterTitle { font-size: 14px; color: #333; position: absolute; top: 50%; transform: translateY(-50%) } .cmpSubf_CharacterTitleBlock > .cmpSubf_CharacterTitle:hover { text-decoration: underline; } @media only screen and (max-width: 800px) { .cmpSubFooter > .cmpSubf_PicupList{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 30px; } .cmpSubFooter > .cmpSubf_PicupList li{ display: inline-block; margin: 0; padding: 10px; min-height: 40px; } .cmpSubFooter > .cmpSubf_CharacterList { padding-left: 0; } .cmpSubFooter > .cmpSubf_CharacterList > li { width: 33.3%; min-width: 100px; margin: 8px 0px 0; } .cmpSubf_CharacterItem > .cmp-characterListItem__thumbnail { width: 100% !important; } @media only screen and (max-width: 480px) { .cmpSubFooter > .cmpSubf_CharacterList { justify-content: flex-start; align-items: flex-start; } .cmpSubFooter > .cmpSubf_CharacterList > li { width: 15%; min-width: 40px; margin: 4px 2px 0; } .cmpSubFooter > .cmpSubf_CharacterList > li > a { border: none; } .cmpSubf_CharacterItem { margin: 0; } .cmpSubf_CharacterItem > .cmp-characterListItem__thumbnail { width: 100% !important; } .cmpSubf_CharacterTitleBlock { display: none; } .cmpSubf_CharacterTitleBlock > .cmpSubf_CharacterTitle { display: none; } } /* for .cmpSubFooter 2020.04.10 end */ /* ------------------------------------------------------------*/