@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; } /* html -------------------------------------------------- */ html { font-size: 62.5%; } /* link -------------------------------------------------- */ a { text-decoration: none; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #c3303c; text-decoration: underline; } a:active { color: #c3303c; } a:focus { color: #c3303c; } a.colorRed:link, a.colorRed:visited { color: #c3303c; } .linkUnderline { text-decoration: underline; } @media screen and (max-width: 959px) { a:hover { color: #000000; } a:active { color: #000000; } a:focus { color: #000000; } a.colorRed:link, a.colorRed:visited { color: #000000; } } /* font -------------------------------------------------- */ @font-face { font-family: 'Hannari'; font-style: normal; font-weight: 400; src: url("/toppage/font/Hannari.woff") format("woff"), url("/toppage/font/Hannari.otf") format('opentype'); } /* IE */ @font-face { font-family: 'Hannari'; src: url('/toppage/font/Hannari.eot'); } /* IE6-IE8 */ @font-face { font-family: 'Hannari'; src: url('/toppage/font/Hannari.eot?#iefix') format('embedded-opentype'); } /* Safari, Android, iOS */ @font-face { font-family: 'Hannari'; src: url('/toppage/font/Hannari.ttf') format('truetype'); } /* body -------------------------------------------------- */ body { width: 100%; line-height: 1.5; color: #000000; font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif; background: #ffffff; -webkit-text-size-adjust: none; } @media screen and (max-width: 959px) { body { min-width: 100%; padding: 0; } } /* wrapperArea -------------------------------------------------- */ #wrapperArea { margin: 0 auto; width: 100%; background: #ffffff; position: relative; z-index: 3000; } /* anchors -------------------------------------------------- */ #anchors { padding: 0; margin: 0; position: absolute; left: -100em; top: -100em; } /* header -------------------------------------------------- */ #header { width: 100%; background-color: #ffffff; } #top #header { position: fixed; z-index: 9999; } #header .body { position: relative; padding: 0 95px 0 0; background-color: #ffffff; } .jsHeaderBody { margin: 20px auto; } .headerBodyMin { margin: 20px auto; -webkit-animation: anime .6s ease 0s 1 alternate; animation: anime .6s ease 0s 1 alternate; } @-webkit-keyframes anime { 0% { margin: 20px auto; } 100% { margin: 11px auto; } } @keyframes anime { 0% { margin: 20px auto; } 100% { margin: 11px auto; } } #header .body:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; } #header .logo { margin-left: -87.5px; position: absolute; left: 50%; top: 5px; overflow: hidden; } #header .logo a { display: block; } #header .logo img { width: 100%; height: auto; } #header .icon { padding: 38px 0 0; display: block; position: relative; text-align: center; font-size: 12px; font-size: 1.2rem; font-weight: bold; cursor: pointer; } #header .icon:hover { text-decoration: none; } #header .icon:after { content: ""; width: 32px; height: 30px; margin-left: -16px; background: url(/toppage/images/pc_header_icon.png) no-repeat; overflow: hidden; position: absolute; left: 50%; top: 0; } #header .icon_tickets:after { background-position: 0 0; } #header .icon_schedule:after { background-position: 0 -60px; } #header .icon_door:after { background-position: 0 -120px; } #header .icon_area:after { background-position: 0 -180px; } #header .icon_login:after { background-position: 0 -239px; } #header .icon_search:after { background-position: 0 -300px; } #header .icon_search.show:after { background-image: url( /toppage/images/pc_icon_close.png ); background-position: 0 0; } #header .icon_loggingIn:after { background-position: 0 -839px; } #header .icon_lang:after { background-position: 0 -1323px; } #header .icon:hover.icon_tickets:after { background-position: 0 -420px; } #header .icon:hover.icon_schedule:after { background-position: 0 -480px; } #header .icon:hover.icon_door:after { background-position: 0 -540px; } #header .icon:hover.icon_area:after { background-position: 0 -600px; } #header .icon:hover.icon_login:after { background-position: 0 -659px; } #header .icon:hover.icon_search:after { background-position: 0 -720px; } #header .icon:hover.icon_search.show:after { background-image: url(/toppage/images/pc_icon_close.png); background-position: bottom left; } #header .icon:hover.icon_loggingIn:after { background-position: 0 -899px; } @media screen and (min-width: 960px) { #header .icon:hover.icon_lang:after { background-position: 0 -1383px; } } #header ul.nav { list-style: none; margin: 0; display: block; } #header ul.nav:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; } #header ul.nav.navType1 { padding: 0; margin: 0; position: relative; z-index: 10; } #header ul.nav.navType1 li { width: auto; display: block; float: left; } #header ul.nav.navType1.floatRight li { width: 84px; margin: 0 0 0 7px; } #header ul.nav.navType1.floatLeft li { width: 84px; margin: 0 7px 0 0; } #header ul.nav.navType1.floatLeft li:first-child { margin: 0 7px 0 13px; } #header ul.nav.navType1 li a { background: none; } select#areaSelect { margin: 0; padding: 0; vertical-align:middle; background: transparent; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; text-align: center; text-align: -webkit-center; text-align: -moz-center; font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; } select#areaSelect::-ms-expand { display: none; } select#areaSelect:focus { outline: none; } #header .gsearchbox { cursor: pointer; position: relative; } #header .gsearchbox:hover { color: #c3303c; } #header .gsearchinput { height: 38px; font-size: 14px; font-size: 1.4rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #fff url( /toppage/images/pc_header_icon_seach_bg.png ) right center repeat-y; border: solid 1px #000; max-width: 959px; width: 100%; margin: 0 auto 45px; } #header .gsearchinput::after { content: ""; width: 9px; height: 6px; margin-left: -4px; position: absolute; top: -6px; left: 50%; background: url( /toppage/images/pc_header_icon_seach_after.png ) center center no-repeat; } #header .MF_submit_button { position: absolute; right: 0; top: 0; min-width: 38px; width: 38px; height: 36px; margin: 0; padding: 0; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; text-indent: -9999px; border: 0; } #header #MF_form_phrase { margin: 0; padding: 0; width: 175px; height: 36px !important; line-height: 36px; border: none; box-shadow: none; background: none; background-color: transparent !important; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; vertical-align: middle; } #header .MF_submit_button, #header .MF_submit_button:hover, #header .MF_submit_button:focus { background-color: transparent; background-image: none; border-color: transparent; filter: none; } #header dl.menu { position: absolute; top: 0; -webkit-rtl-ordering: none; right: 11px; width: 84px; } #header dl.menu > dt { padding: 38px 0 0; display: block; position: relative; } #header dl.menu > dt:after { content: ""; width: 32px; height: 30px; margin-left: -16px; background: url(/toppage/images/pc_header_icon.png) no-repeat; background-position: 0 -360px; overflow: hidden; position: absolute; left: 50%; top: 0; } #header dl.menu > dt:hover { color: #c3303c; } #header dl.menu > dt:hover:after { background-position: 0 -780px; } #header dl.menu > dt + dd.menuBox { width: 100%; padding: 10px; position: fixed; top: 0; left: 0; background-color: #ccc; z-index: 1111; } .gsst_a .gscb_a { display: none; } @media screen and (min-width: 960px) { #header #MF_form_phrase { width: 100%; padding-left: 11px !important; padding-right: 35px; border-radius: 0; vertical-align: top; } #header .gsearchinputInner { position: relative; } } @media screen and (max-width: 959px) { #header ul.nav.navType1.floatRight li.gsearchbox { height: 27px; display: block; cursor: pointer; position: relative; background: #fff; } #header .gsearchbox:hover { color: #000000; } #header .icon_search.show:before { width: 100%; height: 1px; background-color: #ffffff; display: block; position: absolute; bottom: -65px; left: 0; } #header .gsearchinput { font-size: 10px; font-size: 1.0rem; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; background: #fff; margin-bottom: 20px; } #header .gsearchinputInner { position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: solid 1px #000; background: url(/toppage/images/pc_header_icon_seach_bg.png) right center repeat-y; } #header .MF_submit_button { margin: 0; padding: 0; height: 36px; line-height: 36px; color: #fff; border: none; box-shadow: none; vertical-align: top; background: none; } #header .gsearchinput::after { display: none; } #header #MF_form_phrase { min-width: 38px; width: 100%; height: auto; line-height: 36px; margin: 0; padding: 0 0 0 11px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; border: none; vertical-align: middle; } #header .MF_submit_button, #header .MF_submit_button:hover, #header .MF_submit_button:focus { background-color: transparent; background-image: none; border-color: transparent; filter: none; } #header dl.menu { position: absolute; right: 29px; top: 0; -webkit-rtl-ordering: none; } #header dl.menu > dt { padding: 38px 0 0; display: block; position: relative; } #header dl.menu > dt:after { content: ""; width: 32px; height: 30px; margin-left: -16px; background: url(/toppage/images/pc_header_icon.png) no-repeat; background-position: 0 -360px; overflow: hidden; position: absolute; left: 50%; top: 0; } #header dl.menu > dt:hover { color: #000000; } #header dl.menu > dt:hover:after { background-position: 0 -780px; } #header dl.menu > dt + dd { padding: 5px; } #header dl.menu > dt + dd.menuBox { width: 100%; padding: 10px; position: fixed; top: 0; left: 0; background-color: #ccc; z-index: 1111; } } /* langList*/ .langList { position: fixed; left: 0; width: 100%; background: #fff; display: none; top: 55px; padding-top: 0px; } .langList__items { border-left: 0; border-top: 1px solid #ddd; float: none; } .langList__items:last-child { border-bottom: 1px solid #ddd; } .langList__items__link { padding: 5px; display: block; } .langList__items.active { background: url( /shared/global/images/icon_check.png ) left 10px center no-repeat; } @media screen and (min-width: 960px) { .langList { position: absolute; width: 170px; right: 47px; left: auto; top: 76px; transition: top 0.4s; } .langList.smallHeader { top: 57px; padding-top: 0; } .langList__items { border-left: 1px solid #ddd; border-right: 1px solid #ddd; } #header ul.nav.navType1 li .langList__items { width: 100%; margin: 0; float: none; } } @media screen and (max-width: 959px) { .langList { top: 88px; transition: top 0.4s; } .langList.smallHeader { top: 48px; } [id="header"] .langList__items__link { text-align: center; font-size: 12px; } } #header .mCSB_inside > .mCSB_container { margin-right: 0; } #header ul.btn { padding: 30px 0; margin: 0; text-align: center; } #header ul.btn li { width: 200px; padding: 0; margin: 0 15px; display: inline-block; font-weight: bold; } #header ul.btn li a { font-size: 14px; font-size: 1.4rem; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #header ul.btn li.btnType1 a { padding: 11px 0 10px; color: #ffffff; background-color: #aaa; pointer-events: none; } #header ul.btn li.btnType2 a { padding: 10px 0 9px; color: #000000; background-color: #ffffff; border: solid 1px #ccc; } #header ul.btn li.btnType2 a:hover { color: #c3303c; border: solid 1px #c3303c; } @media screen and (max-width: 959px) { #header ul.btn { width: 100%; padding: 8px 5px; margin: 0; background: #f0f0f0; } #header ul.btn li { width: 33%; padding: 0 2.5px; margin: 0; } #header ul.btn li a { font-size: 9px; font-size: 0.9rem; } #header ul.btn li.btnType2 a:hover { color: #000000; border: solid 1px #ccc; } } #header dl.menu > dt + dd .body { padding: 5px 0 5px; margin: 0; position: relative; width: 0; height: 0; top: 50%; left: 50%; opacity: 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #ffffff; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #header dl.menu > dt + dd .body .mCSB_container { padding: 55px 20px 55px; } @media screen and (max-width: 1108px) and (min-width: 960px) { #header dl.menu > dt + dd .body .mCSB_container { padding-top: 68px; } } .menuBoxFrame { width: 100%; height: 100%; top: 0; position: absolute; background-color: #ffffff; pointer-events: none; } .closeBtn { min-width: 30px; padding: 0; font-size: 12px; font-size: 1.2rem; cursor: pointer; display: inline-block; position: fixed; text-align: center; top: 20px; right: 20px; opacity: 0; } .closeBtn:before { content: ""; width: 30px; height: 30px; margin: 0 auto 4px; display: block; overflow: hidden; background-image: url(/toppage/images/pc_icon_close.png); } .closeBtn:hover { color: #c3303c; } .closeBtn:hover:before { background-position: left bottom; } @media screen and (max-width: 959px) { #header dl.menu > dt + dd .body { padding: 55px 20px 0; display: block; } .closeBtn { top: 17px; right: 17px; z-index: 2; font-size: 9px; font-size: 0.9rem; } .closeBtn:before { width: 24px; height: 24px; margin-bottom: 3px; background-image: url(/toppage/images/sp_icon_close.png); background-size: 24px auto; top: 11px; right: 11px; } .closeBtn:hover { color: #000000; } .closeBtn:hover:before { background-position: 0 0; } } .importantBlock { overflow: hidden; } p.importantNotices { padding: 11px 20px 9px; margin: 0 0 1px; font-size: 14px; font-size: 1.4rem; background: #eeeeee; } p.COVID-19 { width:100%; padding: 30px 0 28px; margin: 0 0 1px; line-height: 0; background: #c13240; } p.COVID-19 a { max-width: 1000px; padding: 15px 25px 14px; margin: 0 auto 4px; color: #fff; font-size: 17px; line-height: 1.5; font-weight: bold; text-align: left; display: block; background: #a2303a; } p.gray { width:100%; padding: 21px 0 17px; margin: 0 0 1px; line-height: 0; background: #DDDCDD; } p.gray a { max-width: 1000px; padding: 12px 25px 11px; margin: 0 auto 4px; color: #fff; font-size: 15px; line-height: 1.5; font-weight: bold; text-align: left; display: block; background: #A5ADAB; } .importantArea { width:100%; padding: 30px 0 28px; margin: 0 0 1px; background: #c13240; } .importantArea a { max-width: 1000px; padding: 3px 3px 14px; margin: 0 auto 4px; color: #a2303a; font-size: 17px; line-height: 1.5; font-weight: bold; text-align: left; display: block; background-color: #f8e7e8; } .importantTitle { text-align: center; color: #fff; font-size: 20px; padding: 14px 0; margin-bottom: 10px; background-color: #a2303a; } ul.importantNotices { list-style-type: disc; margin-left: 30px; } ul.importantNotices li { font-size: 15px; margin: 3px 0; } .importantArea a:hover { background-color: #f9eced; text-decoration: none; } .importantArea a:hover .importantTitle { background-color: #b55961; } .importantArea a:hover li { color: #b55961; } @media screen and (max-width: 959px) { .importantBlock a.colorRed:link,.importantBlock a.colorRed:visited { color: #c3303c; } } .noticeHidden { height: 0; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .noticeNone { opacity: 0; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } #header .menuTitle { max-width: 959px; width: 100%; margin: 0 auto 18px; font-size: 18px; font-size: 1.8rem; font-weight: bold; } #header dl.menu > dt + dd .body .mCSB_container > ul, #header dl.menu > dt + dd .body .mCSB_container > .menuListBox { max-width: 959px; width: 100%; margin: 0 auto; } #header dl.menu > dt + dd .body > ul, #header dl.menu > dt + dd .body .mCSB_container > ul { margin: 0 auto 55px; display: flex; justify-content: space-between; } #header dl.menu > dt + dd .body > ul > li, #header dl.menu > dt + dd .body .mCSB_container > ul > li { width: 168px; text-align: center; } #header dl.menu > dt + dd .body > ul > li a, #header dl.menu > dt + dd .body .mCSB_container > ul > li a { width: 168px; height: 168px; padding: 50px 0 0; font-size: 16px; font-size: 1.6rem; line-height: 1.375; font-weight: bold; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: rgba(255,255,255,0); border: solid 1px #ccc; display: block; } #header dl.menu > dt + dd .body > ul > li a:hover, #header dl.menu > dt + dd .body .mCSB_container > ul > li a:hover { text-decoration: none; } #header dl.menu > dt + dd .body > ul > li a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li a::before { content: ""; width: 32px; height: 30px; display: block; overflow: hidden; margin: 0 auto 15px; background-image: url(/toppage/images/pc_header_icon.png); } #header dl.menu > dt + dd .body > ul > li:nth-child(1) a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(1) a::before { background-position: 0 0; } #header dl.menu > dt + dd .body > ul > li:nth-child(1) a:hover::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(1) a:hover::before { background-position: 0 -420px; } #header dl.menu > dt + dd .body > ul > li:nth-child(2) a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(2) a::before { background-position: 0 -120px; } #header dl.menu > dt + dd .body > ul > li:nth-child(2) a:hover::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(2) a:hover::before { background-position: 0 -540px; } #header dl.menu > dt + dd .body > ul > li:nth-child(3) a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(3) a::before { background-position: 0 -60px; } #header dl.menu > dt + dd .body > ul > li:nth-child(3) a:hover::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(3) a:hover::before { background-position: 0 -480px; } #header dl.menu > dt + dd .body > ul > li:nth-child(4) a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(4) a::before { height: 31px; margin: 0 auto 14px; background-position: 0 -961px; } #header dl.menu > dt + dd .body > ul > li:nth-child(4) a:hover::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(4) a:hover::before { background-position: 0 -1021px; } #header dl.menu > dt + dd .body > ul > li:nth-child(5) a::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(5) a::before { background-position: 0 -1081px; } #header dl.menu > dt + dd .body > ul > li:nth-child(5) a:hover::before, #header dl.menu > dt + dd .body .mCSB_container > ul > li:nth-child(5) a:hover::before { background-position: 0 -1141px; } #header dl.menu > dt + dd .body > .menuListBox dl, #header dl.menu > dt + dd .body .mCSB_container > .menuListBox dl { width: 32%; margin: 0 2% 0 0; float: left; } #header dl.menu > dt + dd .body > .menuListBox dl:last-child, #header dl.menu > dt + dd .body .mCSB_container > .menuListBox dl:last-child { margin: 0; } #header dl.menu > dt + dd .body dl dt { margin: 0 0 20px; font-size: 18px; font-size: 1.8rem; font-weight: bold; } #header dl.menu > dt + dd .body dl dd ul { margin: 0 0 44px; font-size: 14px; font-size: 1.4rem; padding-left: 17px; /*メニュー文字数が2段の場合に追加*/ } #header dl.menu > dt + dd .body dl dd ul li { margin: 0 0 8px; text-indent: -17px; /*メニュー文字数が2段の場合に追加*/ } #header dl.menu > dt + dd .body dl dd ul li .strong { font-weight: bold; } #header dl.menu > dt + dd .body dl dd ul ul { margin: 8px 0 0 5px; /*メニュー文字数が2段の場合に追加*/ } #header dl.menu > dt + dd .body dl dd ul li a { padding: 0 0 0 17px; position: relative; } #header dl.menu > dt + dd .body dl dd ul li a:before { content: ""; width: 7px; height: 12px; margin: -6px 0 0; overflow: hidden; background: url(/toppage/images/arrow_middle_right_btn2.png) left top no-repeat; display: block; position: absolute; left: 0; top: 50%; } #header dl.menu > dt + dd .body dl dd ul li a:hover:before { background-position: left bottom; } #header dl.menu > dt + dd .body dl dd ul.snsLink li { margin: 0 0 17px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li a { padding: 0 0 0 45px; line-height: 30px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li a:before { width: 32px; height: 30px; margin: -15px 0 0; background: url(/toppage/images/sns_icon_2.png) no-repeat; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.twitter a:before { background-position: 0 0; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.line a:before { background-position: 0 -46px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.instagram a:before { background-position: 0 -94px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.youtube a:before { background-position: 0 -141px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.twitter a:hover:before { background-position: 0 -188px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.line a:hover:before { background-position: 0 -234px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.instagram a:hover:before { background-position: 0 -282px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.youtube a:hover:before { background-position: 0 -329px; } @media screen and (max-width: 959px) { #header .menuTitle { width: 100%; margin-bottom: 8px; font-size: 14px; font-size: 1.4rem; } #header dl.menu > dt + dd .body > ul, #header dl.menu > dt + dd .body > .menuListBox { width: 100%; } #header dl.menu > dt + dd .body > ul { margin: 0 0 25px; padding: 0; flex-flow: row wrap; } #header dl.menu > dt + dd .body > ul > li { width: 100%; margin: 0 0 5px; text-align: left; } #header dl.menu > dt + dd .body > ul > li a { width: 100%; height: auto; padding: 15px 0 10px 15px; font-size: 14px; font-size: 1.4rem; display: table; *overflow:auto; table-layout: fixed; background-image: url(/toppage/images/arrow_middle_right_2.png); background-repeat: no-repeat; background-position: right center; background-size: 15px auto; } * #header dl.menu > dt + dd .body > ul > li a { position: relative; } *+html #header dl.menu > dt + dd .body > ul > li a { position: relative; } #header dl.menu > dt + dd .body > ul > li a::before { width: 36px; height: 24px; background-image: url(/toppage/images/sp_header_icon.png); background-size: 24px auto; display: table-cell; *float:left; vertical-align: middle; background-repeat: no-repeat; } #header dl.menu > dt + dd .body > ul > li a.menu_tickets::before, #header dl.menu > dt + dd .body > ul > li a.menu_tickets:hover::before { background-position: 0 0; } #header dl.menu > dt + dd .body > ul > li a.menu_door::before, #header dl.menu > dt + dd .body > ul > li a.menu_door:hover::before { background-position: 0 -66px; } #header dl.menu > dt + dd .body > ul > li a.menu_stage_schedule::before, #header dl.menu > dt + dd .body > ul > li a.menu_stage_schedule:hover::before { background-position: 0 -34px; } #header dl.menu > dt + dd .body > ul > li a.menu_seating::before, #header dl.menu > dt + dd .body > ul > li a.menu_seating:hover::before { height: 24px; margin: 0; background-position: 0 -232px; } #header dl.menu > dt + dd .body > ul > li a.menu_news::before, #header dl.menu > dt + dd .body > ul > li a.menu_news:hover::before { background-position: 0 -265px; } #header dl.menu > dt + dd .body > .menuListBox { padding: 0 0 10px; border-top: 1px solid #cccccc; } #header dl.menu > dt + dd .body > .menuListBox dl { width: 100%; margin: 0; float: none; } #header dl.menu > dt + dd .body dl { padding: 0 0 10px; border-bottom: 1px solid #cccccc; } #header dl.menu > dt + dd .body dl:last-child { padding: 0; border-bottom: 0; } #header dl.menu > dt + dd .body dl dt { margin: 11px 0 0; padding: 0 12px; font-size: 12px; font-size: 1.2rem; cursor: pointer; position: relative; } #header dl.menu > dt + dd .body dl dt:after { content: ""; width: 23px; height: 14px; margin-top: -7px; overflow: hidden; display: block; position: absolute; right: 0; top: 50%; background: url(/toppage/images/sp_header_dt_icon.png) no-repeat; background-size: 23px auto; background-position: left top; } #header dl.menu > dt + dd .body dl dt.open:after { background-position: left bottom; } #header dl.menu > dt + dd .body dl dd { margin: 11px 0 0; display: none; } #header dl.menu > dt + dd .body dl dd.snsBox { display: block; } #header dl.menu > dt + dd .body dl dd ul { margin: 0; padding-left: 0; font-size: 10px; font-size: 1.0rem; } #header dl.menu > dt + dd .body dl dd ul li { margin: 0 0 1px; display: block; text-indent: 0; } #header dl.menu > dt + dd .body dl dd ul li .strong { padding: 11px 12px 10px; display: block; background: #eeeeee; } #header dl.menu > dt + dd .body dl dd ul ul { margin: 0 0 1px; background: #eeeeee; } #header dl.menu > dt + dd .body dl dd ul li a { padding: 11px 12px 10px 12px; background: #eeeeee; background-image: url(/toppage/images/arrow_middle_right_2.png); background-repeat: no-repeat; background-position: right center; background-size: 15px auto; display: block; } #header dl.menu > dt + dd .body dl dd ul li a:hover { text-decoration: none; } #header dl.menu > dt + dd .body dl dd ul li ul li { margin: 0; } #header dl.menu > dt + dd .body dl dd ul li ul li a { padding: 11px 12px 10px 48px; } #header dl.menu > dt + dd .body dl dd ul li a:before { display: none; } #header dl.menu > dt + dd .body dl dd ul.snsLink { display: flex; justify-content: space-between; } #header dl.menu > dt + dd .body dl dd ul.snsLink li { min-width: 32px; width: 25%; margin: 30px 0 10px; text-align: center; } #header dl.menu > dt + dd .body dl dd ul.snsLink li a { padding: 32px 0 0; display: inline-block; position: relative; background: none; text-align: center; } #header dl.menu > dt + dd .body dl dd ul.snsLink li a:before { content: ""; width: 32px; height: 32px; margin: 0 0 0 -16px; background: url(/toppage/images/sns_icon.png) no-repeat; background-size: 32px auto; display: block; position: absolute; top: 0; left: 50%; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.twitter a:before, #header dl.menu > dt + dd .body dl dd ul.snsLink li.twitter a:hover:before { background-position: 0 -201px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.line a:before, #header dl.menu > dt + dd .body dl dd ul.snsLink li.line a:hover:before { background-position: 0 -134px; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.instagram a:before, #header dl.menu > dt + dd .body dl dd ul.snsLink li.instagram a:hover:before { background-position: 0 0; } #header dl.menu > dt + dd .body dl dd ul.snsLink li.youtube a:before, #header dl.menu > dt + dd .body dl dd ul.snsLink li.youtube a:hover:before { background-position: 0 -67px; } } #header .selectArea { position:relative; } #header .selectArea .selectObj { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index: 100; font-size: 16px; cursor: pointer; } #header .selectArea:hover .selectTxt { color: #c3303c; } #applauseMore { width:100%; padding: 20px 0 23px; margin: 0; font-size: 14px; font-size: 1.4rem; cursor: pointer; text-align: center; font-weight: bold; } #applauseMore span { padding: 0 0 0 30px; } #applauseMore span.down { background: url(/toppage/images/arrow_more_down.png) left center no-repeat; background-size: 15px auto; } #applauseMore span.up { background: url(/toppage/images/arrow_more_up.png) left center no-repeat; background-size: 15px auto; } #applauseMore:hover { color: #c3303c; } #applauseMore:hover span.down { background-image: url(/toppage/images/arrow_more_down_hover.png); } #applauseMore:hover span.up { background-image: url(/toppage/images/arrow_more_up_hover.png); } @media screen and (max-width: 959px) { #header { background: #ffffff; position: fixed; z-index: 1000; } #header .body { margin: 0; padding: 0; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -js-display : flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; background-color: #ffffff; border-bottom: 1px solid #cccccc; } .jsHeaderSp { width: 100%; justify-content: space-between; position: relative; z-index: 999; } #header .logo { padding: 6px 0 7px 10px; margin: 0; position: static; top: auto; left: auto; float: left; } #header .logo img { width: auto; height: 27px; } #header ul.floatRight { padding: 5px 0; display: flex; -webkit-box-pack: justify; -webkit-justify-content: flex-end; -ms-flex-pack: justify; justify-content: flex-end; -webkit-flex-wrap: wrap; flex-wrap: wrap; float: none; } #header ul.nav.navType1.floatRight li { width: auto; padding: 0 9px; border-left: 1px dotted #cccccc; } #header .icon { padding: 25px 0 0; font-size: 8px; font-size: 0.8rem; background: none; } #header .icon:after { width: 24px; height: 24px; margin-left: -12px; background-image: url(/toppage/images/sp_header_icon.png); background-size: 24px auto; } #header .icon_tickets:after { background-position: 0 0; } #header .icon_schedule:after { background-position: 0 -33px; } #header .icon_door:after { background-position: 0 -66px; } #header .icon.icon_area { width: auto; height: 27px; padding: 2px 2px 0px 29px; line-height: 25px; } #header .icon_area:after { margin-left: 0; margin-top: -12px; background-position: 0 -99px; top: 50%; left: 0; } #header .icon_login:after { background-position: 0 -132px; } #header .icon.icon_search { width: 60px; height: 27px; padding: 2px 2px 0px 29px; line-height: 25px; } #header .icon_search:after, #header .icon:hover.icon_search:after { margin-left: 0; margin-top: -12px; line-height: 24px; background-position: 0 -165px; top: 50%; left: 0; } #header .icon_search.show:after, #header .icon:hover.icon_search.show:after { margin-top: -6px; height: 24px; background-image: url(/toppage/images/sp_icon_close.png); background-position: 0 0; background-size: 23px auto; } #header .icon.icon_lang { width: auto; height: 27px; padding: 2px 2px 0px 29px; line-height: 25px; } #header .icon.icon_lang:after { background-position: 0 -358px; margin-left: -40px; } #header .icon_loggingIn:after { background-position: 0 -296px; } #header .icon:hover.icon_tickets:after { background-position: 0 0; } #header .icon:hover.icon_schedule:after { background-position: 0 -33px; } #header .icon:hover.icon_door:after { background-position: 0 -66px; } #header .icon:hover.icon_area:after { background-position: 0 -99px; } #header .icon:hover.icon_login:after { background-position: 0 -132px; } #header .icon:hover.icon_loggingIn:after { background-position: 0 -296px; } #header dl.menu { width: 20%; padding: 5px; position: static; top: auto; left: auto; float: right; border-top: 1px solid #cccccc; } #header dl.menu > dt { padding: 25px 0 0; border-left: 1px dotted #cccccc; } #header dl.menu > dt:after { width: 24px; height: 23px; margin-left: -12px; background-image: url(/toppage/images/sp_header_icon.png); background-size: 24px auto; background-position: 0 -198px; } #header dl.menu > dt:hover:after { background-position: 0 -198px; } #header ul.nav.floatRight { width: auto; text-align: right; margin: 6px 0 7px; } #header .floatLeft { width: 80%; padding: 5px; border-top: 1px solid #cccccc; } #header ul.nav.navType1.floatLeft li { width: 25%; padding: 5px 0 0; } #header ul.nav.navType1.floatRight li, #header ul.nav.navType1.floatLeft li, #header ul.nav.navType1.floatLeft li:first-child { margin: 0; } #header dl.menu > dt + dd { padding: 5px; } #header dl.menu > dt + dd .body > ul, #header dl.menu > dt + dd .body > dl { width: 100%; } #header dl.menu > dt + dd .body > dl dl { width: 100%; float: none; } #header .selectArea { width: 100%; display: table; table-layout: fixed; *overflow:auto; } * #header .selectArea { position: relative; } *+html #header .selectArea { position: relative; } #header .selectTxt { display: table-cell; vertical-align: middle; *float:left; } #header .selectArea:hover .selectTxt { color: #000000; } #applauseMore { padding: 7px 0 12px; font-size: 12px; font-size: 1.2rem; } #applauseMore span { padding: 0 0 0 20px; } #applauseMore span.down { background: url(/toppage/images/arrow_more_down.png) left center no-repeat; background-size: 11px auto; } #applauseMore span.up { background: url(/toppage/images/arrow_more_up.png) left center no-repeat; background-size: 11px auto; } #applauseMore:hover { color: #000000; } p.importantNotices { padding: 8px 10px; font-size: 10px; font-size: 1rem; } .importantArea { padding: 10px; } .importantTitle { font-size: 16px; font-size: 1.6rem; padding: 12px 0; } ul.importantNotices { margin: 10px 10px 0 24px; } ul.importantNotices li { font-size: 12px; font-size: 1.2rem; margin: 10px 0; } p.COVID-19 { padding: 21px 15px 18px; } p.COVID-19 a { padding: 12px 15px 11px; font-size: 13px; } p.gray { padding: 14px 15px 12px; } p.gray a { padding: 9px 11px 8px; font-size: 11px; } } @media screen and (min-width: 375px) { .selectTxt__br { display: none; } } @media screen and (max-width: 374px) { #header .selectTxt { line-height: 1.2; } .selectTxt__colon { display: none; } } /* 作品紹介 -------------------------------------------------- */ .applause { width: 100%; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -js-display : flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .applause > section { position: relative; } .applause > section.table { width: 50%; position: relative; margin: 0 0 6px; padding: 0; } .applause > section.table .table-cell { height: 100%; } .applause > section.table .txt { width: 320px; padding: 0; background-color: #ed8700; background-image: url(/toppage/images/applause/bg_lionking.jpg); background-position: center top; background-repeat: no-repeat; background-size: 100% auto; vertical-align: top; position: relative; z-index: 10; } .applause > section.table .txt::before { content: ""; width: 18px; height: 35px; position: absolute; top: 43px; right: -18px; background-repeat: no-repeat; } .applause > section.table .txt .tit { text-align: center; } .applause > section.table .txt .tit img { width: 238px; height: auto; margin: 17px auto 12px; } .applause > section.table:first-child .txt .tit img { width: 100%; height: auto; margin: 0 auto -7px; } .applause > section.table .txt .titState { margin: 0 0 33px; text-align: center; font-size: 16px; font-size: 1.6rem; line-height: 1.625; color: #ffffff; font-weight: bold; } .applause > section.table .txt .infoBox { display: block; } .applause > section.table .txt .infoBox:hover { text-decoration: none; } .applause > section.table .txt .info { width: 100%; padding: 13px 15px 15px; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.3); color: #ffffff; } .applause > section.table:first-child .txt .info { padding: 21px 15px 15px; } .applause > section.table .txt .info:hover { text-decoration: none; } .applause > section.table .txt .info .recommendedTxt { margin: 0 6px 15px; } .applause > section.table:first-child .txt .info .recommendedTxt { margin: 0 6px 25px; } .applause > section.table .txt .info .recommendedTxt ul { margin: 7px 0 0; } .applause > section.table .txt .info .recommendedTxt ul li { margin: 0 0 7px; padding: 0 0 0 69px; text-indent: -69px; } .applause > section.table .txt .info .recommendedTxt p { margin: 0 0 12px; font-weight: bold; } .applause > section.table:first-child .txt .info .recommendedTxt p { margin: 0 0 16px; } .applause > section.table .txt .info .recommendedTxt ul li span.area { width: 65px; padding: 1px 0; margin: 0 12px 0 0; text-indent: 0; font-size: 13px; font-size: 1.3rem; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; display: inline-block; text-align: center; color: #ffffff; } .applause > section.table:first-child .txt .info .recommendedTxt ul li span.area { width: 80px; padding: 1px 0 2px; margin: 0 15px 0 0; font-size: 14px; font-size: 1.4rem; -webkit-border-radius: 13px 14px 14px 13px/13px 13px 14px 14px; -moz-border-radius: 13px 14px 14px 13px/13px 13px 14px 14px; border-radius: 13px 14px 14px 13px/13px 13px 14px 14px; } .applause > section.table .txt .info .recommendedTxt ul li span.area.tokyo { background-color: #c3303c; } .applause > section.table .txt .info .recommendedTxt ul li span.area.kyoto { background-color: #cf5010; } .applause > section.table .txt .info .recommendedTxt ul li span.area.sendai { background-color: #3a99bb; } .applause > section.table .txt .info .recommendedTxt ul li span.area.fukuoka { background-color: #d16290; } .applause > section.table .txt .info .recommendedTxt ul li span.area.osaka { background-color: #6a64c2; } .applause > section.table .txt .info .recommendedTxt ul li span.area.sapporo { background-color: #d16290; } .applause > section.table .txt .info .recommendedTxt ul li span.area.fukuoka { background-color: #cb8241; } .applause > section.table .txt .info .recommendedTxt ul li span.area.nagoya { background-color: #769d31; } .applause > section.table .txt .info .recommendedTxt ul li span.area.nationwide { background-color: #888888; } .applause > section.table .txt .info .recommendedTxt ul li span.area.yokohama { background-color: #50b9cc; } .applause > section.table .txt .info .recommendedTxt ul li span.area.hiroshima { background-color: #bd9d00; } .applause > section.table .txt .info .recommendedTxt ul li span.area.kaichu { background-color: #cc349f; } .applause > section.table .txt .info .recommendedTxt ul li span.area.maihama { background-color: #0050aa; } .applause > section.table .txt .info .recommendedTxt ul li span.area.shizuoka { background-color: #9d43b3; } .applause > section.table .txt .info p, .applause > section.table .txt .info ul li { font-size: 14px; font-size: 1.4rem; } .applause > section.table .txt .info ul { margin: 0; padding: 0; list-style: none; } .applause > section.table .txt .info ul.link li { margin: 0 0 10px; } .applause > section.table .txt .info ul.link li:last-child { margin: 0; } .applause > section.table .txt .info ul.link li.now { position: relative; } .applause > section.table .txt .info ul.link li.now::after { content: ""; width: 39px; height: 33px; position: absolute; top: -18px; left: -7px; background-image: url(/toppage/images/applause/now.png); background-size: 39px auto; } .applause > section.table .txt .info ul.link li span { padding: 10px 37px 11px 15px; color: #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: rgba(153,153,153,0); background-image: url(/toppage/images/arrow_middle_right_3.png); background-position: right center; background-repeat: no-repeat; border: solid 1px rgba(255,255,255,0.5); display: block; font-weight: bold; } .applause > section.table:nth-child(even) { width: 50%; border-right: 3px solid #ffffff; } .applause > section.table:nth-child(odd) { width: 50%; border-left: 3px solid #ffffff; } .applause > section.table:first-child { width: 100%; height: 515px; border-left: 0; } .applause > section.table:first-child .txt { width: 386px; padding: 0; } .applause > section.table:first-child .txt::before { content: ""; width: 21px; height: 41px; position: absolute; top: 55px; right: -21px; } .applause > section.table:first-child .txt .titState { margin: 0 0 26px; font-size: 20px; font-size: 2.0rem; line-height: 1.6; } .applause > section.table:first-child .txt .info p, .applause > section.table:first-child .txt .info ul li { font-size: 16px; font-size: 1.6rem; } .applause > section.table .img { position: relative; z-index: 1; width: 100%; } .bg-scale { height: 100%; display: block; position: relative; overflow: hidden; text-align: center; } .bg-scale:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } .applause > section.table .bg-scale:after { background-position: center center; background-repeat: no-repeat; background-size: cover; } .applause > section.table .bg-scale:before { position: absolute; margin-bottom: 0; bottom: 12px; right: 12px; font-size: 12px; font-size: 1.2rem; color: #ffffff; pointer-events: none; z-index: 1; text-decoration: none; } .applause > section.table:first-child .bg-scale:after { -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; } .bg-scale .inner { z-index: 1; position: relative; } .stage_loading { width: 100%; height: 100%; background-image: url( "/shared/images/loading_shiki.gif" ); background-position: center center; background-repeat: no-repeat; } .stage_loading_more { width: 100%; height: 470px; background-image: url( "/shared/images/loading_shiki.gif" ); background-position: center 200px; background-repeat: no-repeat; } .applause > section .loading { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1.0); z-index: 1100; } /* 最新CSSハック IE IE10・IE11・EDGE・Firefox -------------------------------------------------- */ @media screen and (min-width: 1104px) { /* IE10以下 */ .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px\9; } .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px\9; } .applause > section.table:first-child .frameHover { border-left-width: 6px\9; } /* IE10 */ @media all and (-ms-high-contrast:none) { .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px; } .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px; } .applause > section.table:first-child .frameHover { border-left-width: 6px; } } /* IE11 */ @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px; } *::-ms-backdrop, .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px; } *::-ms-backdrop, .applause > section.table:first-child .frameHover { border-left-width: 6px; } } /* Firefox */ @-moz-document url-prefix() { .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px; } .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px; } .applause > section.table:first-child .frameHover { border-left-width: 6px; } } } /* EDGE */ @supports (-ms-ime-align:auto) { .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px; } .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px; } .applause > section.table:first-child .frameHover { border-left-width: 6px; } } @supports (-ms-accelerator:true) { .applause > section.table:nth-child(even) .frameHover { border-right-width: 9px; } .applause > section.table:nth-child(odd) .frameHover { border-left-width: 9px; } .applause > section.table:first-child .frameHover { border-left-width: 6px; } } /* ホバー -------------------------------------------------- */ .applause > section.table .txt .info ul.link li span.hoverBtn, .applause > section.table .txt .info ul.link li span:hover, .applause > section.table .txt .info ul.link li.now a:hover { padding: 11px 38px 12px 16px; text-decoration: none; background-image: url(/toppage/images/arrow_middle_right_3_hover.png); background-color: rgba(255,255,255,0.25); border: none; } .hoverBtn { padding: 11px 38px 12px 16px; text-decoration: none; background-color: rgba(255,255,255,0.25); background-image: url(/toppage/images/arrow_middle_right_3_hover.png); border: 0; } .applauseHover { border: 6px #fff solid; box-sizing: border-box; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .applauseFrame { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; opacity: 0.7; border: 0 solid #fff; pointer-events: none; transition: border 0.2s ease-in-out; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; } .frameHover { border: 6px solid #ffffff; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .bg-scale-hover:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out; -ms-transition: all 3s ease-out; transition: all 3s ease-out; -moz-transform: scale(1.075); -webkit-transform: scale(1.075); -ms-transform: scale(1.075); transform: scale(1.075); } @media screen and (max-width: 959px) { .applause > section.table .txt .info ul.link li span.hoverBtn, .applause > section.table .txt .info ul.link li span:hover, .applause > section.table .txt .info ul.link li.now a:hover { padding: 10px 37px 11px 15px; background-image: url(/toppage/images/arrow_middle_right_3.png); background-color: rgba(153,153,153,0); border: solid 1px rgba(255,255,255,0.5); } } /* アイーダ -------------------------------------------------- 0001 */ /* 青い鳥 -------------------------------------------------- 0002 */ /* エイプリルフール企画 リアルマーメイド */ .applause > section.table.rid0002 .txt { background-color: #073687; background-image: url(/toppage/images/applause/bg_0073.jpg); } .applause > section.table.rid0002 .txt::before { background-image: url(/toppage/images/applause/comment_1_0073.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0002 .txt::before { background-image: url(/toppage/images/applause/comment_2_0073.png); background-size: 21px 41px; } .applause > section.table.rid0002 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0073.jpg); } .applause > section.table:first-child.rid0002 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0002.jpg); } /* 赤毛のアン -------------------------------------------------- 0003 */ /* アスぺクツ -------------------------------------------------- 0004 */ /* 嵐の中の子どもたち -------------------------------------------------- */ .applause > section.table.rid0005 .txt { background-color: #296023; background-image: url(/toppage/images/applause/bg_0005.png); } .applause > section.table.rid0005 .txt::before { background-image: url(/toppage/images/applause/comment_1_0005.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0005 .txt::before { background-image: url(/toppage/images/applause/comment_2_0005.png); background-size: 21px 41px; } .applause > section.table.rid0005 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0005.jpg); } .applause > section.table:first-child.rid0005 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0005.jpg); } .applause > section.table.rid0005 .bg-scale:before { content: ""; } /* アルデールまたは聖女 -------------------------------------------------- 0006 */ /* アンチゴーヌ -------------------------------------------------- 0007 */ /* アンデルセン --------------------------------------------------*/ .applause > section.table.rid0008 .txt { background-color: #0073a9; background-image: url(/toppage/images/applause/bg_0008.png); } .applause > section.table.rid0008 .txt::before { background-image: url(/toppage/images/applause/comment_1_0008.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0008 .txt::before { background-image: url(/toppage/images/applause/comment_2_0008.png); background-size: 21px 41px; } .applause > section.table.rid0008 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0008.jpg); } .applause > section.table:first-child.rid0008 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0008.jpg); } .applause > section.table.rid0008 .bg-scale:before { content: ""; } /* アンドロマック -------------------------------------------------- 0009 */ /* ミュージカル異国の丘 -------------------------------------------------- 0010 */ /* ウェストサイド物語 -------------------------------------------------- 0011 */ /* ヴェニスの商人 -------------------------------------------------- 0012 */ /* 永遠の処女テッサ -------------------------------------------------- 0013 */ /* エクウス(馬) -------------------------------------------------- 0014 */ /* エビータ -------------------------------------------------- 0015 */ .applause > section.table.rid0015 .txt { background-color: #885024; background-image: url(/toppage/images/applause/bg_0015.jpg); } .applause > section.table.rid0015 .txt::before { background-image: url(/toppage/images/applause/comment_1_0015.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0017 .txt::before { background-image: url(/toppage/images/applause/comment_2_0015.png); background-size: 21px 41px; } .applause > section.table.rid0015 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0015.jpg); } .applause > section.table:first-child.rid0015 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0015.jpg); } .applause > section.table.rid0015 .bg-scale:before { content: ""; } /* エルコスの祈り -------------------------------------------------- */ .applause > section.table.rid0016 .txt { background-color: #078ed8; background-image: url(/toppage/images/applause/bg_0016.png); } .applause > section.table.rid0016 .txt::before { background-image: url(/toppage/images/applause/comment_1_0016.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0016 .txt::before { background-image: url(/toppage/images/applause/comment_2_0016.png); background-size: 21px 41px; } .applause > section.table.rid0016 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0016.jpg); } .applause > section.table:first-child.rid0016 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0016.jpg); } .applause > section.table.rid0016 .txt .info { background: rgba(0, 0, 0, 0.1); } .applause > section.table.rid0016 .txt .titState, .applause > section.table.rid0016 .txt .info p, .applause > section.table.rid0016 .txt .info ul li, .applause > section.table.rid0016 .txt .info ul.link li span { color: #fff; } .applause > section.table.rid0016 .txt .info ul.link li span { border-color: rgba(255, 255, 255,0.2); background-image: url(/toppage/images/arrow_middle_right_3.png); } .applause > section.table.rid0016 .txt .info ul.link li span.hoverBtn, .applause > section.table.rid0016 .txt .info ul.link li span:hover { background-color: rgba(153,153,153,0.3); background-image: url(/toppage/images/arrow_middle_right_3_hover.png); } .applause > section.table.rid0016 .bg-scale:before { content: ""; } /* 王様の耳はロバの耳 -------------------------------------------------- */ .applause > section.table.rid0017 .txt { background-color: #1d3a30; background-image: url(/toppage/images/applause/bg_0017.jpg); } .applause > section.table.rid0017 .txt::before { background-image: url(/toppage/images/applause/comment_1_0017.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0017 .txt::before { background-image: url(/toppage/images/applause/comment_2_0017.png); background-size: 21px 41px; } .applause > section.table.rid0017 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0017.jpg); } .applause > section.table:first-child.rid0017 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0017.jpg); } .applause > section.table.rid0017 .bg-scale:before { content: ""; } /* 王子とこじき -------------------------------------------------- */ .applause > section.table.rid0018 .txt { background-color: #bf920f; background-image: url(/toppage/images/applause/bg_0018.png); } .applause > section.table.rid0018 .txt::before { background-image: url(/toppage/images/applause/comment_1_0018.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0018 .txt::before { background-image: url(/toppage/images/applause/comment_2_0018.png); background-size: 21px 41px; } .applause > section.table.rid0018 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0018.jpg); } .applause > section.table:first-child.rid0018 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0018.jpg); } .applause > section.table.rid0018 .bg-scale:before { content: ""; } /* オペラ座の怪人 -------------------------------------------------- */ .applause > section.table.rid0019 .txt { background-color: #010101; background-image: url(/toppage/images/applause/bg_0019.png); } .applause > section.table.rid0019 .txt::before { background-image: url(/toppage/images/applause/comment_1_0019.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0019 .txt::before { background-image: url(/toppage/images/applause/comment_2_0019.png); background-size: 21px 41px; } .applause > section.table.rid0019 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0019.jpg); } .applause > section.table:first-child.rid0019 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0019.jpg); } .applause > section.table.rid0019 .bg-scale:before { content: ""; } /* 思い出を売る男 -------------------------------------------------- 0020 */ /* オンディーヌ -------------------------------------------------- 0021 */ /* 壁抜け男 -------------------------------------------------- 0022 */ /* 間奏曲 -------------------------------------------------- 0023 */ /* キスへのプレリュード -------------------------------------------------- 0024 */ /* キャッツ -------------------------------------------------- */ .applause > section.table.rid0025 .txt { background-color: #101b2a; background-image: url(/toppage/images/applause/bg_0025.png); } .applause > section.table.rid0025 .txt::before { background-image: url(/toppage/images/applause/comment_1_0025.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0025 .txt::before { background-image: url(/toppage/images/applause/comment_2_0025.png); background-size: 21px 41px; } .applause > section.table.rid0025 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0025.jpg); } .applause > section.table:first-child.rid0025 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0025.jpg); } .applause > section.table.rid0025 .bg-scale:before { content: ""; } /* クレイジー・フォー・ユー -------------------------------------------------- */ .applause > section.table.rid0026 .txt { background-color: #101b2a; background-image: url(/toppage/images/applause/bg_0026.jpg); } .applause > section.table.rid0026 .txt::before { background-image: url(/toppage/images/applause/comment_1_0026.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0026 .txt::before { background-image: url(/toppage/images/applause/comment_2_0026.png); background-size: 21px 41px; } .applause > section.table.rid0026 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0026.jpg); } .applause > section.table:first-child.rid0026 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0026.jpg); } .applause > section.table.rid0026 .bg-scale:before { content: ""; } /* 九郎衛門 -------------------------------------------------- 0027 */ /* コーラスライン --------------------------------------------------*/ .applause > section.table.rid0028 .txt { background-color: #ffd247; background-image: url(/toppage/images/applause/bg_0028.jpg); } .applause > section.table.rid0028 .txt::before { background-image: url(/toppage/images/applause/comment_1_0028.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0028 .txt::before { background-image: url(/toppage/images/applause/comment_2_0028.png); background-size: 21px 41px; } .applause > section.table.rid0028 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0028.jpg); } .applause > section.table:first-child.rid0028 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0028.jpg); } .applause > section.table.rid0028 .bg-scale:before { content: ""; } /* この生命誰のもの -------------------------------------------------- 0029 */ /* コンタクチE -------------------------------------------------- 0030 */ /* 35ステップス -------------------------------------------------- 0031 */ /* ジーザス・クライスト=スーパースター(エルサレム) -------------------------------------------------- */ .applause > section.table.rid0032 .txt { background-color: #000000; background-image: url(/toppage/images/applause/bg_0032.png); } .applause > section.table.rid0032 .txt::before { background-image: url(/toppage/images/applause/comment_1_0032.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0032 .txt::before { background-image: url(/toppage/images/applause/comment_2_0032.png); background-size: 21px 41px; } .applause > section.table.rid0032 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0032.jpg); } .applause > section.table:first-child.rid0032 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0032.jpg); } .applause > section.table.rid0032 .bg-scale:before { content: ""; } /* シャドウランズ -------------------------------------------------- 0033 */ /* スルース -------------------------------------------------- 0034 */ /* ソング&ダンスⅠ -------------------------------------------------- 0035 */ /* ソング&ダンスⅡ -------------------------------------------------- 0036 */ /* ソング&ダンスⅢ -------------------------------------------------- 0037 */ /* ドリーミング -------------------------------------------------- 0038 */ /* 日曜はダメよ -------------------------------------------------- 0039 */ /* 女房学校 -------------------------------------------------- 0040 */ /* 人間になりたがった猫 -------------------------------------------------- 0041 */ .applause > section.table.rid0041 .txt { background-color: #fe9d96; background-image: url(/toppage/images/applause/bg_0041.jpg); } .applause > section.table.rid0041 .txt::before { background-image: url(/toppage/images/applause/comment_1_0041.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0041 .txt::before { background-image: url(/toppage/images/applause/comment_2_0041.png); background-size: 21px 41px; } .applause > section.table.rid0041 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0041.jpg); } .applause > section.table:first-child.rid0041 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0041.jpg); } .applause > section.table.rid0041 .bg-scale:before { content: ""; } /* はだかの王様 -------------------------------------------------- 0042 */ .applause > section.table.rid0042 .txt { background-color: #ac1823; background-image: url(/toppage/images/applause/bg_0042.jpg); } .applause > section.table.rid0042 .txt::before { background-image: url(/toppage/images/applause/comment_1_0042.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0042 .txt::before { background-image: url(/toppage/images/applause/comment_2_0042.png); background-size: 21px 41px; } .applause > section.table.rid0042 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0042.jpg); } .applause > section.table:first-child.rid0042 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0042.jpg); } .applause > section.table.rid0042 .bg-scale:before { content: ""; } /* ハムレット -------------------------------------------------- 0043 */ /* ひかりごけ -------------------------------------------------- 0044 */ /* 美女と野獣 -------------------------------------------------- */ .applause > section.table.rid0045 .txt { background-color: #5b0505; background-image: url(/toppage/images/applause/bg_0045.png); } .applause > section.table.rid0045 .txt::before { background-image: url(/toppage/images/applause/comment_1_0045.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0045 .txt::before { background-image: url(/toppage/images/applause/comment_2_0045.png); background-size: 21px 41px; } .applause > section.table.rid0045 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0045.jpg); } .applause > section.table:first-child.rid0045 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0045.jpg); } .applause > section.table.rid0045 .bg-scale:before { content: "\00a9 Disney"; } /* ひばり -------------------------------------------------- 0046 */ .applause > section.table.rid0046 .txt { background-color: #f7e08f; background-image: url(/toppage/images/applause/bg_0046.png); } .applause > section.table.rid0046 .txt::before { background-image: url(/toppage/images/applause/comment_1_0046.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0046 .txt::before { background-image: url(/toppage/images/applause/comment_2_0046.png); background-size: 21px 41px; } .applause > section.table.rid0046 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0046.jpg); } .applause > section.table:first-child.rid0046 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0046.jpg); } .applause > section.table.rid0046 .bg-scale:before { content: ""; } /* ふたりのロッテ -------------------------------------------------- 0047 */ .applause > section.table.rid0047 .txt { background-color: #e2d650; background-image: url(/toppage/images/applause/bg_0047.jpg); } .applause > section.table.rid0047 .txt::before { background-image: url(/toppage/images/applause/comment_1_0047.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0047 .txt::before { background-image: url(/toppage/images/applause/comment_2_0047.png); background-size: 21px 47px; } .applause > section.table.rid0047 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0047.jpg); } .applause > section.table:first-child.rid0047 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0047.jpg); } .applause > section.table.rid0047 .bg-scale:before { content: ""; } /* 冒険者たち -------------------------------------------------- 0048 */ /* 魔法をすてたマジョリン -------------------------------------------------- */ .applause > section.table.rid0049 .txt { background-color: #330474; background-image: url(/toppage/images/applause/bg_0049.png); } .applause > section.table.rid0049 .txt::before { background-image: url(/toppage/images/applause/comment_1_0049.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0049 .txt::before { background-image: url(/toppage/images/applause/comment_2_0049.png); background-size: 21px 41px; } .applause > section.table.rid0049 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0049.jpg); } .applause > section.table:first-child.rid0049 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0049.jpg); } .applause > section.table.rid0049 .bg-scale:before { content: ""; } /* マンマ・ミーア! -------------------------------------------------- */ .applause > section.table.rid0050 .txt { background-color: #ffffff; background-image: url(/toppage/images/applause/bg_0050.jpg); } .applause > section.table.rid0050 .txt::before { background-image: url(/toppage/images/applause/comment_1_0050.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0050 .txt::before { background-image: url(/toppage/images/applause/comment_2_0050.png); background-size: 21px 41px; } .applause > section.table.rid0050 .txt .info { background: rgba(0, 0, 0, 0.1); } .applause > section.table.rid0050 .txt .titState, .applause > section.table.rid0050 .txt .info p, .applause > section.table.rid0050 .txt .info ul li, .applause > section.table.rid0050 .txt .info ul.link li span { color: #000000; } .applause > section.table.rid0050 .txt .info ul.link li span { border-color: rgba(0, 0, 0,0.2); background-image: url(/toppage/images/arrow_middle_right_3_black.png); } .applause > section.table.rid0050 .txt .info ul.link li span.hoverBtn { background-color: rgba(153,153,153,0.3); background-image: url(/toppage/images/arrow_middle_right_3_black_hover.png); } .applause > section.table.rid0050 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0050.jpg); } .applause > section.table:first-child.rid0050 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0050.jpg); } .applause > section.table.rid0050 .bg-scale:before { content: ""; } /* ミュージカル南十字星 -------------------------------------------------- 0051 */ /* 桃次郎の冒険 -------------------------------------------------- 0052 */ /* 雪ん子 -------------------------------------------------- 0053 */ /* ユタと不思議な仲間たち -------------------------------------------------- 0054 */ /* 夢から醒めた夢 -------------------------------------------------- 0055 */ /* ユリディス -------------------------------------------------- 0056 */ /* ライオンキング -------------------------------------------------- */ .applause > section.table.rid0057 .txt { background-color: #ed8700; background-image: url(/toppage/images/applause/bg_0057.jpg); } .applause > section.table.rid0057 .txt::before { background-image: url(/toppage/images/applause/comment_1_0057.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0057 .txt::before { background-image: url(/toppage/images/applause/comment_2_0057.png); background-size: 21px 41px; } .applause > section.table.rid0057 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0057.jpg); } .applause > section.table:first-child.rid0057 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0057.jpg); } .applause > section.table.rid0057 .bg-scale:before { content: "\00a9 Disney"; } /* ライオンキング エイプリルフール -------------------------------------------------- */ .applause > section.table.rid0057.april .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0057april.jpg); } .applause > section.table:first-child.rid0057.april .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0057april.jpg); } .applause > section.table.rid0057.april .bg-scale:before { width: 194px; padding-top: 117px; background-image: url(/toppage/images/applause/content_0057april.png); background-repeat: no-repeat; text-align: right; background-size: 195px auto; } .applause > section.table:first-child.rid0057.april .bg-scale:before { width: 411px; padding-top: 246px; background-size: 411px auto; } /* ラ・ソヴァージュ -------------------------------------------------- 0058 */ /* ミュージカル李香蘭 -------------------------------------------------- 0059 */ /* ロミオとジュリエット -------------------------------------------------- 0061 */ /* 解ってたまるかのの -------------------------------------------------- 0060 */ /* 鹿鳴館 -------------------------------------------------- 0062 */ /* ブラックコメディ -------------------------------------------------- */ .applause > section.table.rid0063 .txt { background-color: #000000; background-image: url(/toppage/images/applause/bg_0063.png); } .applause > section.table.rid0063 .txt::before { background-image: url(/toppage/images/applause/comment_1_0063.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0063 .txt::before { background-image: url(/toppage/images/applause/comment_2_0063.png); background-size: 21px 41px; } .applause > section.table.rid0063 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0063.jpg); } /*.applause > section.table:first-child.rid0063 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0063.jpg); }*/ .applause > section.table.rid0063 .bg-scale:before { content: ""; } /* ジョン万次郎の夢 -------------------------------------------------- 0064 */ .applause > section.table.rid0064 .txt { background-color: #1b2a84; background-image: url(/toppage/images/applause/bg_0064.jpg); } .applause > section.table.rid0064 .txt::before { background-image: url(/toppage/images/applause/comment_1_0064.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0064 .txt::before { background-image: url(/toppage/images/applause/comment_2_0064.png); background-size: 21px 41px; } .applause > section.table.rid0064 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0064.jpg); } .applause > section.table:first-child.rid0064 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0064.jpg); } .applause > section.table.rid0064 .bg-scale:before { content: ""; } /* ウィキッド -------------------------------------------------- */ .applause > section.table.rid0065 .txt { background-color: #1c5417; background-image: url(/toppage/images/applause/bg_0065.jpg); } .applause > section.table.rid0065 .txt::before { background-image: url(/toppage/images/applause/comment_1_0065.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0065 .txt::before { background-image: url(/toppage/images/applause/comment_2_0065.png); background-size: 21px 41px; } .applause > section.table.rid0065 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0065.jpg); } .applause > section.table:first-child.rid0065 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0065.jpg); } .applause > section.table.rid0065 .bg-scale:before { content: ""; } /* むかしむかしゾウがきた -------------------------------------------------- 0066 */ /* トロイ戦争は起こらないだろう -------------------------------------------------- 0067 */ /* ソング&ダンス 35ステップス -------------------------------------------------- 0068 */ /* 春のめざめ -------------------------------------------------- 0069 */ /* サウンド・オブ・ミュージック -------------------------------------------------- */ .applause > section.table.rid0070 .txt { background-color: #e6b33c; background-image: url(/toppage/images/applause/bg_0070.jpg); } .applause > section.table.rid0070 .txt::before { background-image: url(/toppage/images/applause/comment_1_0070.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0070 .txt::before { background-image: url(/toppage/images/applause/comment_2_0070.png); background-size: 21px 41px; } .applause > section.table.rid0070 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0070.jpg); } .applause > section.table:first-child.rid0070 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0070.jpg); } .applause > section.table.rid0070 .bg-scale:before { content: ""; } /* ソング&ダンス The Spirit -------------------------------------------------- 0071 */ /* ガンバの大冒険 -------------------------------------------------- */ .applause > section.table.rid0072 .txt { background-color: #002256; background-image: url(/toppage/images/applause/bg_0072.png); } .applause > section.table.rid0072 .txt::before { background-image: url(/toppage/images/applause/comment_1_0072.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0072 .txt::before { background-image: url(/toppage/images/applause/comment_2_0072.png); background-size: 21px 41px; } .applause > section.table.rid0072 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0072.jpg); } .applause > section.table:first-child.rid0072 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0072.jpg); } .applause > section.table.rid0072 .bg-scale:before { content: ""; } /* リトルマーメイド -------------------------------------------------- */ .applause > section.table.rid0073 .txt { background-color: #073687; background-image: url(/toppage/images/applause/bg_0073.jpg); } .applause > section.table.rid0073 .txt::before { background-image: url(/toppage/images/applause/comment_1_0073.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0073 .txt::before { background-image: url(/toppage/images/applause/comment_2_0073.png); background-size: 21px 41px; } .applause > section.table.rid0073 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0073.jpg); } .applause > section.table:first-child.rid0073 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0073.jpg); } .applause > section.table.rid0073 .bg-scale:before { content: "\00a9 Disney"; } /* ソング&ダンス 60 -------------------------------------------------- 0074 */ /* ソング&ダンス 60 ようこそ劇場へ -------------------------------------------------- 0075 */ /* ジーザス・クライスト=スーパースター(ジャポネスク) -------------------------------------------------- 0076 */ .applause > section.table.rid0076 .txt { background-color: #333; background-image: url(/toppage/images/applause/bg_0076.jpg); } .applause > section.table.rid0076 .txt::before { background-image: url(/toppage/images/applause/comment_1_0076.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0076 .txt::before { background-image: url(/toppage/images/applause/comment_2_0076.png); background-size: 21px 41px; } .applause > section.table.rid0076 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0076.jpg); } .applause > section.table:first-child.rid0076 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0076.jpg); } .applause > section.table.rid0076 .bg-scale:before { content: ""; } /* アラジン -------------------------------------------------- */ .applause > section.table.rid0077 .txt { background-color: #040309; background-image: url(/toppage/images/applause/bg_0077.jpg); } .applause > section.table.rid0077 .txt::before { background-image: url(/toppage/images/applause/comment_1_0077.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0077 .txt::before { background-image: url(/toppage/images/applause/comment_2_0077.png); background-size: 21px 41px; } .applause > section.table.rid0077 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0077.jpg); } .applause > section.table:first-child.rid0077 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0077.jpg); } .applause > section.table.rid0077 .bg-scale:before { content: "\00a9 Disney"; } /* 劇団四季 FESTIVAL! 扉の向こうへ -------------------------------------------------- 0078 */ /* ノートルダムの鐘 -------------------------------------------------- */ .applause > section.table.rid0079 .txt { background-color: #000000; background-image: url(/toppage/images/applause/bg_0079.png); } .applause > section.table.rid0079 .txt::before { background-image: url(/toppage/images/applause/comment_1_0079.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0079 .txt::before { background-image: url(/toppage/images/applause/comment_2_0079.png); background-size: 21px 41px; } .applause > section.table.rid0079 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0079.jpg); } .applause > section.table:first-child.rid0079 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0079.jpg); } .applause > section.table.rid0079 .bg-scale:before { content: "\00a9 Disney"; } /* -------------------------------------------------- 0079 */ /* パリのアメリカ人 -------------------------------------------------- */ .applause > section.table.rid0080 .txt { background-color: #021550; background-image: url(/toppage/images/applause/bg_0080.jpg); } .applause > section.table.rid0080 .txt::before { background-image: url(/toppage/images/applause/comment_1_0080.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0080 .txt::before { background-image: url(/toppage/images/applause/comment_2_0080.png); background-size: 21px 41px; } .applause > section.table.rid0080 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0080.jpg); } .applause > section.table:first-child.rid0080 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0080.jpg); } .applause > section.table.rid0080 .bg-scale:before { content: ""; } /* -------------------------------------------------- 0080 */ /* ソング&ダンス65 -------------------------------------------------- */ .applause > section.table.rid0081 .txt { background-color: #f3d265; background-image: url(/toppage/images/applause/bg_0081.jpg); } .applause > section.table.rid0081 .txt::before { background-image: url(/toppage/images/applause/comment_1_0081.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0081 .txt::before { background-image: url(/toppage/images/applause/comment_2_0081.png); background-size: 21px 41px; } .applause > section.table.rid0081 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0081.jpg); } .applause > section.table:first-child.rid0081 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0081.jpg); } .applause > section.table.rid0081 .bg-scale:before { content: ""; } /* 恋におちたシェイクスピア -------------------------------------------------- 0082 */ .applause > section.table.rid0082 .txt { background-color: #79222b; background-image: url(/toppage/images/applause/bg_0082.png); } .applause > section.table.rid0082 .txt::before { background-image: url(/toppage/images/applause/comment_1_0082.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0082 .txt::before { background-image: url(/toppage/images/applause/comment_2_0082.png); background-size: 21px 41px; } .applause > section.table.rid0082 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0082.jpg); } .applause > section.table:first-child.rid0082 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0082.jpg); } .applause > section.table.rid0082 .bg-scale:before { content: ""; } /* カモメに飛ぶことを教えた猫 -------------------------------------------------- 0083 */ .applause > section.table.rid0083 .txt { background-color: #009781; background-image: url(/toppage/images/applause/bg_0083.png); } .applause > section.table.rid0083 .txt::before { background-image: url(/toppage/images/applause/comment_1_0083.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0083 .txt::before { background-image: url(/toppage/images/applause/comment_2_0083.png); background-size: 21px 41px; } .applause > section.table.rid0083 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0083.jpg); } .applause > section.table:first-child.rid0083 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0083.jpg); } .applause > section.table.rid0083 .bg-scale:before { content: ""; } /* アナと雪の女王 -------------------------------------------------- 0084 */ .applause > section.table.rid0084 .txt { background-color: #053ea9; background-image: url(/toppage/images/applause/bg_0084.jpg); } .applause > section.table.rid0084 .txt::before { background-image: url(/toppage/images/applause/comment_1_0084.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0084 .txt::before { background-image: url(/toppage/images/applause/comment_2_0084.png); background-size: 21px 41px; } .applause > section.table.rid0084 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0084.jpg); } .applause > section.table:first-child.rid0084 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0084.jpg); } .applause > section.table.rid0084 .bg-scale:before { content: "\00a9 Disney"; } /* ロボット・イン・ザ・ガーデン -------------------------------------------------- 0085 */ .applause > section.table.rid0085 .txt { background-color: #022e4f; background-image: url(/toppage/images/applause/bg_0085.jpg); } .applause > section.table.rid0085 .txt::before { background-image: url(/toppage/images/applause/comment_1_0085.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0085 .txt::before { background-image: url(/toppage/images/applause/comment_2_0085.png); background-size: 21px 41px; } .applause > section.table.rid0085 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0085.jpg); } .applause > section.table:first-child.rid0085 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0085.jpg); } .applause > section.table.rid0085 .bg-scale:before { content: ""; } /* 劇団四季 The Bridge ~歌の架け橋~ -------------------------------------------------- 0086 */ .applause > section.table.rid0086 .txt { background-color: #4eb5f1; background-image: url(/toppage/images/applause/bg_0086.jpg); } .applause > section.table.rid0086 .txt::before { background-image: url(/toppage/images/applause/comment_1_0086.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0086 .txt::before { background-image: url(/toppage/images/applause/comment_2_0086.png); background-size: 21px 41px; } .applause > section.table.rid0086 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0086.jpg); } .applause > section.table:first-child.rid0086 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0086.jpg); } .applause > section.table.rid0086 .bg-scale:before { content: ""; } /* はじまりの樹の神話~こそあどの森の物語~ -------------------------------------------------- 0087 */ .applause > section.table.rid0087 .txt { background-color: #406fb6; background-image: url(/toppage/images/applause/bg_0087.jpg); } .applause > section.table.rid0087 .txt::before { background-image: url(/toppage/images/applause/comment_1_0087.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0087 .txt::before { background-image: url(/toppage/images/applause/comment_2_0087.png); background-size: 21px 41px; } .applause > section.table.rid0087 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0087.jpg); } .applause > section.table:first-child.rid0087 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0087.jpg); } .applause > section.table.rid0087 .bg-scale:before { content: ""; } /* アンマスクド -------------------------------------------------- 0088 */ .applause > section.table.rid0088 .txt { background-color: #3058a6; background-image: url(/toppage/images/applause/bg_0088.jpg); } .applause > section.table.rid0088 .txt::before { background-image: url(/toppage/images/applause/comment_1_0088.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0088 .txt::before { background-image: url(/toppage/images/applause/comment_2_0088.png); background-size: 21px 41px; } .applause > section.table.rid0088 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0088.jpg); } .applause > section.table:first-child.rid0088 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0088.jpg); } .applause > section.table.rid0087 .bg-scale:before { content: ""; } /* バケモノの子 -------------------------------------------------- 0089 */ .applause > section.table.rid0089 .txt { background-color: #e6a30a; background-image: url(/toppage/images/applause/bg_0089.png); } .applause > section.table.rid0089 .txt::before { background-image: url(/toppage/images/applause/comment_1_0089.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0089 .txt::before { background-image: url(/toppage/images/applause/comment_2_0089.png); background-size: 21px 41px; } .applause > section.table.rid0089 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0089.jpg); } .applause > section.table:first-child.rid0089 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0089.jpg); } .applause > section.table.rid0089 .bg-scale:before { content: ""; } /* ゴースト&レディ -------------------------------------------------- 0091 */ .applause > section.table.rid0091 .txt { background-color: #f7e08f; background-image: url(/toppage/images/applause/bg_0091.png); } .applause > section.table.rid0091 .txt::before { background-image: url(/toppage/images/applause/comment_1_0091.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0091 .txt::before { background-image: url(/toppage/images/applause/comment_2_0091.png); background-size: 21px 41px; } .applause > section.table.rid0091 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0091.jpg); } .applause > section.table:first-child.rid0091 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0091.jpg); } .applause > section.table.rid0091 .bg-scale:before { content: ""; } /* バック・トゥ・ザ・フューチャー -------------------------------------------------- 0092 */ .applause > section.table.rid0092 .txt { background-color: #050656; background-image: url(/toppage/images/applause/bg_0092.jpg); } .applause > section.table.rid0092 .txt::before { background-image: url(/toppage/images/applause/comment_1_0092.png); background-size: 18px 35px; } .applause > section.table:first-child.rid0092 .txt::before { background-image: url(/toppage/images/applause/comment_2_0092.png); background-size: 21px 41px; } .applause > section.table.rid0092 .bg-scale:after { background-image: url(/toppage/images/applause/imgs_0092.jpg); } .applause > section.table:first-child.rid0092 .bg-scale:after { background-image: url(/toppage/images/applause/imgl_0092.jpg); } .applause > section.table.rid0092 .bg-scale:before { content: ""; } @media screen and (max-width: 1103px) { .applause > section.table { width: 100%; } .applause > section.table:nth-child(even), .applause > section.table:nth-child(odd) { width: 100%; border: 0; } } @media screen and (max-width: 1366px) { .applause > section.table { height: 426px; } .applause > section.table:first-child { height: 515px; } } @media screen and (max-width: 959px) { .bg-scale:after { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } .bg-scale-hover:after { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; -moz-transform: scale(1.0); -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); } .frameHover { border: none; transition: none; -webkit-transition: none; -o-transition: none; } } @media screen and (min-width: 641px) and (max-width: 959px) { .applause > section.table { padding: 220px 0 0; } .applause > section.table .img { height: 220px; } .applause > section.table:first-child { height: auto; padding: 340px 0 0; } .applause > section.table:first-child .img { height: 340px; } } @media screen and (max-width: 640px) { .applause > section.table { height: auto; padding: 220px 0 0; } .applause > section.table .img { height: 220px; } .applause > section.table:first-child { height: auto; padding: 340px 0 0; } .applause > section.table:first-child .img { height: 340px; } } @media screen and (max-width: 959px) { .applause > section.table { height: auto; display: block; position: relative; } .applause > section.table .txt, .applause > section.table:first-child .txt, .applause > section.table .img { width: 100%; display: block; } .applause > section.table:first-child .txt, .applause > section.table .txt { height: auto; } .applause > section.table .txt { padding: 0; z-index: 999; } .applause > section.table:first-child .txt { height: auto; padding: 0; } .applause > section.table .txt .info, .applause > section.table:first-child .txt .info { padding: 15px; } .applause > section.table .txt .info p, .applause > section.table:first-child .txt .info p, .applause > section.table .txt .info ul li, .applause > section.table:first-child .txt .info ul li { font-size: 14px; font-size: 1.4rem; } .applause > section.table .txt .info ul.link li { font-size: 14px; font-size: 1.4rem; } .applause > section.table .txt .info ul.link li.now::after { width: 31px; height: 27px; top: -15px; left: -5px; background-size: 31px auto; } .applause > section.table .img { text-align: center; position: absolute; top: 0; overflow: hidden; } .applause > section.table .txt::before, .applause > section.table:first-child .txt::before { content: ""; width: 33px; height: 14px; margin-left: -17px; position: absolute; top: -14px; right: auto; left: 50%; } .applause > section.table .txt .tit img, .applause > section.table:first-child .txt .tit img { width: 216px; height: auto; margin: 19px auto 16px; } .applause > section.table .txt .titState, .applause > section.table:first-child .txt .titState { margin: 0 0 24px; font-size: 18px; font-size: 1.8rem; line-height: 1.5; } /* アイーダ -------------------------------------------------- 0001 */ /* 青い鳥 -------------------------------------------------- 0002 */ /* エイプリルフール企画 リアルマーメイド */ .applause > section.table.rid0002 .txt::before, .applause > section.table:first-child.rid0002 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0073.png); background-size: 33px 14px; } /* 赤毛のアン -------------------------------------------------- 0003 */ /* アスぺクツ -------------------------------------------------- 0004 */ /* 嵐の中の子どもたち -------------------------------------------------- */ .applause > section.table.rid0005 .txt::before, .applause > section.table:first-child.rid0005 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0005.png); background-size: 33px 14px; } /* アルデールまたは聖女 -------------------------------------------------- 0006 */ /* アンチゴーヌ -------------------------------------------------- 0007 */ /* アンデルセン --------------------------------------------------*/ .applause > section.table.rid0008 .txt::before, .applause > section.table:first-child.rid0008 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0008.png); background-size: 33px 14px; } /* アンドロマック -------------------------------------------------- 0009 */ /* ミュージカル異国の丘 -------------------------------------------------- 0010 */ /* ウェストサイド物語 -------------------------------------------------- 0011 */ /* ヴェニスの商人 -------------------------------------------------- 0012 */ /* 永遠の処女テッサ -------------------------------------------------- 0013 */ /* エクウス(馬) -------------------------------------------------- 0014 */ /* エビータ -------------------------------------------------- 0015 */ .applause > section.table.rid0015 .txt::before, .applause > section.table:first-child.rid0015 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0015.png); background-size: 33px 14px; } /* エルコスの祈り -------------------------------------------------- */ .applause > section.table.rid0016 .txt::before, .applause > section.table:first-child.rid0016 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0016.png); background-size: 33px 14px; } /* 王様の耳はロバの耳 -------------------------------------------------- */ .applause > section.table.rid0017 .txt::before, .applause > section.table:first-child.rid0017 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0017.png); background-size: 33px 14px; } /* 王子とこじき -------------------------------------------------- */ .applause > section.table.rid0018 .txt::before, .applause > section.table:first-child.rid0018 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0018.png); background-size: 33px 14px; } /* オペラ座の怪人 -------------------------------------------------- */ .applause > section.table.rid0019 .txt::before, .applause > section.table:first-child.rid0019 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0019.png); background-size: 33px 14px; } /* 思い出を売る男 -------------------------------------------------- 0020 */ /* オンディーヌ -------------------------------------------------- 0021 */ /* 壁抜け男 -------------------------------------------------- 0022 */ /* 間奏曲 -------------------------------------------------- 0023 */ /* キスへのプレリュード -------------------------------------------------- 0024 */ /* キャッツ -------------------------------------------------- */ .applause > section.table.rid0025 .txt::before, .applause > section.table:first-child.rid0025 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0025.png); background-size: 33px 14px; } /* クレイジー・フォー・ユー -------------------------------------------------- */ .applause > section.table.rid0026 .txt::before, .applause > section.table:first-child.rid0026 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0026.png); background-size: 33px 14px; } /* 九郎衛門 -------------------------------------------------- 0027 */ /* コーラスライン -------------------------------------------------- */ .applause > section.table.rid0028 .txt::before, .applause > section.table:first-child.rid0028 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0028.png); background-size: 33px 14px; } /* この生命誰のもの -------------------------------------------------- 0029 */ /* コンタクチE -------------------------------------------------- 0030 */ /* 35ステップス -------------------------------------------------- 0031 */ /* ジーザス・クライスト=スーパースター(エルサレム) -------------------------------------------------- */ .applause > section.table.rid0032 .txt::before, .applause > section.table:first-child.rid0032 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0032.png); background-size: 33px 14px; } /* シャドウランズ -------------------------------------------------- 0033 */ /* スルース -------------------------------------------------- 0034 */ /* ソング&ダンスⅠ -------------------------------------------------- 0035 */ /* ソング&ダンスⅡ -------------------------------------------------- 0036 */ /* ソング&ダンスⅢ -------------------------------------------------- 0037 */ /* ドリーミング -------------------------------------------------- 0038 */ /* 日曜はダメよ -------------------------------------------------- 0039 */ /* 女房学校 -------------------------------------------------- 0040 */ /* 人間になりたがった猫 -------------------------------------------------- 0041 */ .applause > section.table.rid0041 .txt::before, .applause > section.table:first-child.rid0041 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0041.png); background-size: 33px 14px; } /* はだかの王様 -------------------------------------------------- 0042 */ .applause > section.table.rid0042 .txt::before, .applause > section.table:first-child.rid0042 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0042.png); background-size: 33px 14px; } /* ハムレット -------------------------------------------------- 0043 */ /* ひかりごけ -------------------------------------------------- 0044 */ /* 美女と野獣 -------------------------------------------------- */ .applause > section.table.rid0045 .txt::before, .applause > section.table:first-child.rid0045 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0045.png); background-size: 33px 14px; } /* ひばり -------------------------------------------------- 0046 */ .applause > section.table.rid0046 .txt::before, .applause > section.table:first-child.rid0046 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0046.png); background-size: 33px 14px; } /* ふたりのロッテ -------------------------------------------------- 0047 */ .applause > section.table.rid0047 .txt::before, .applause > section.table:first-child.rid0047 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0047.png); background-size: 33px 14px; } /* 冒険者たち -------------------------------------------------- 0048 */ /* 魔法をすてたマジョリン -------------------------------------------------- */ .applause > section.table.rid0049 .txt::before, .applause > section.table:first-child.rid0049 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0049.png); background-size: 33px 14px; } /* マンマ・ミーア! -------------------------------------------------- */ .applause > section.table.rid0050 .txt::before, .applause > section.table:first-child.rid0050 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0050.png); background-size: 33px 14px; } /* ミュージカル南十字星 -------------------------------------------------- 0051 */ /* 桃次郎の冒険 -------------------------------------------------- 0052 */ /* 雪ん子 -------------------------------------------------- 0053 */ /* ユタと不思議な仲間たち -------------------------------------------------- 0054 */ /* 夢から醒めた夢 -------------------------------------------------- 0055 */ /* ユリディス -------------------------------------------------- 0056 */ /* ライオンキング -------------------------------------------------- */ .applause > section.table.rid0057 .txt::before, .applause > section.table:first-child.rid0057 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0057.png); background-size: 33px 14px; } /* ライオンキング エイプリルフール -------------------------------------------------- */ .applause > section.table.rid0057.april .bg-scale:before, .applause > section.table:first-child.rid0057.april .bg-scale:before { width: 194px; padding-top: 117px; background-size: 195px auto; } /* ラ・ソヴァージュ -------------------------------------------------- 0058 */ /* ミュージカル李香蘭 -------------------------------------------------- 0059 */ /* ロミオとジュリエット -------------------------------------------------- 0061 */ /* 解ってたまるかのの -------------------------------------------------- 0060 */ /* 鹿鳴館 -------------------------------------------------- 0062 */ /* ブラックコメディ -------------------------------------------------- */ .applause > section.table.rid0063 .txt::before, .applause > section.table:first-child.rid0063 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0063.png); background-size: 33px 14px; } /* ジョン万次郎の夢 -------------------------------------------------- 0064 */ .applause > section.table.rid0064 .txt::before, .applause > section.table:first-child.rid0064 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0064.png); background-size: 33px 14px; } /* ウィキッド -------------------------------------------------- */ .applause > section.table.rid0065 .txt::before, .applause > section.table:first-child.rid0065 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0065.png); background-size: 33px 14px; } /* むかしむかしゾウがきた -------------------------------------------------- 0066 */ /* トロイ戦争は起こらないだろう -------------------------------------------------- 0067 */ /* ソング&ダンス 35ステップス -------------------------------------------------- 0068 */ /* 春のめざめ -------------------------------------------------- 0069 */ /* サウンド・オブ・ミュージック -------------------------------------------------- */ .applause > section.table.rid0070 .txt::before, .applause > section.table:first-child.rid0070 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0070.png); background-size: 33px 14px; } /* ソング&ダンス The Spirit -------------------------------------------------- 0071 */ /* ガンバの大冒険 -------------------------------------------------- */ .applause > section.table.rid0072 .txt::before, .applause > section.table:first-child.rid0072 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0072.png); background-size: 33px 14px; } /* リトルマーメイド -------------------------------------------------- */ .applause > section.table.rid0073 .txt::before, .applause > section.table:first-child.rid0073 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0073.png); background-size: 33px 14px; } /* ソング&ダンス 60 -------------------------------------------------- 0074 */ /* ソング&ダンス 60 ようこそ劇場へ -------------------------------------------------- 0075 */ /* ジーザス・クライスト=スーパースター(ジャポネスク) -------------------------------------------------- 0076 */ .applause > section.table.rid0076 .txt::before, .applause > section.table:first-child.rid0076 .txt::before { display: none; } /* アラジン -------------------------------------------------- */ .applause > section.table.rid0077 .txt::before, .applause > section.table:first-child.rid0077 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0077.png); background-size: 33px 14px; } /* 劇団四季 FESTIVAL! 扉の向こうへ -------------------------------------------------- 0078 */ /* ノートルダムの鐘 -------------------------------------------------- */ .applause > section.table.rid0079 .txt::before, .applause > section.table:first-child.rid0079 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0079.png); background-size: 33px 14px; } /* -------------------------------------------------- 0079 */ /* パリのアメリカ人 -------------------------------------------------- */ .applause > section.table.rid0080 .txt::before, .applause > section.table:first-child.rid0080 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0080.png); background-size: 33px 14px; } /* -------------------------------------------------- 0080 */ /* ソング&ダンス65 -------------------------------------------------- */ .applause > section.table.rid0081 .txt::before, .applause > section.table:first-child.rid0081 .txt::before { background-image: url(/toppage/images/applause/sp_comment_1_0081.png); background-size: 33px 14px; } /* 恋におちたシェイクスピア -------------------------------------------------- 0082 */ .applause > section.table.rid0082 .txt::before, .applause > section.table:first-child.rid0082 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0082.png ); background-size: 33px 14px; } /* カモメに飛ぶことを教えた猫 -------------------------------------------------- 0083 */ .applause > section.table.rid0083 .txt::before, .applause > section.table:first-child.rid0083 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0083.png ); background-size: 33px 14px; } /* アナと雪の女王 -------------------------------------------------- 0084 */ .applause > section.table.rid0084 .txt::before, .applause > section.table:first-child.rid0084 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0084.png ); background-size: 33px 14px; } /* RIG -------------------------------------------------- 0085 */ .applause > section.table.rid0085 .txt::before, .applause > section.table:first-child.rid0085 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0085.png ); background-size: 33px 14px; } /* bridge -------------------------------------------------- 0086 */ .applause > section.table.rid0086 .txt::before, .applause > section.table:first-child.rid0086 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0086.png ); background-size: 33px 14px; } /* はじまりの樹 -------------------------------------------------- 0087 */ .applause > section.table.rid0087 .txt::before, .applause > section.table:first-child.rid0087 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0087.png ); background-size: 33px 14px; } /* アンマスクド -------------------------------------------------- 0088 */ .applause > section.table.rid0088 .txt::before, .applause > section.table:first-child.rid0088 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0088.png ); background-size: 33px 14px; } /* バケモノの子 -------------------------------------------------- 0089 */ .applause > section.table.rid0089 .txt::before, .applause > section.table:first-child.rid0089 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0089.png ); background-size: 33px 14px; } /* ゴースト&レディ -------------------------------------------------- 0091 */ .applause > section.table.rid0091 .txt::before, .applause > section.table:first-child.rid0091 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0091.png ); background-size: 33px 14px; } /* バック・トゥ・ザ・フューチャー -------------------------------------------------- 0092 */ .applause > section.table.rid0092 .txt::before, .applause > section.table:first-child.rid0092 .txt::before { background-image: url( /toppage/images/applause/sp_comment_1_0092.png ); background-size: 33px 14px; } } /* display -------------------------------------------------- */ .hidden { display: none; } .pcBlock { display: block !important; } @media screen and (max-width: 959px) { .pcBlock { display: none !important; } } .spBlock { display: none !important; } @media screen and (max-width: 959px) { .spBlock { display: block !important; } } .pcInline { display: inline !important; } @media screen and (max-width: 959px) { .pcInline { display: none !important; } } .spInline { display: none !important; } @media screen and (max-width: 959px) { .spInline { display: inline !important; } } /* image Element -------------------------------------------------- */ img { vertical-align: bottom; line-height: 1; font-size: 1px; } @media screen and (max-width: 959px) { .image { margin: 0 0 14px; } } @media screen and (max-width: 959px) { .body { width: 100%; padding: 12px 10px 3px; } } p { margin: 0 0 27px; font-size: 18px; font-size: 1.8rem; line-height: 1.5; } @media screen and (max-width: 959px) { p { margin: 0 0 14px; font-size: 10px; font-size: 1rem; } } /* sectionType -------------------------------------------------- */ .sectionType { margin: 0; padding: 57px 40px 80px; } .sectionType1 { background: #eeeeee; } .sectionBody { max-width: 1220px; width: 100%; margin: 0 auto; } @media screen and (max-width: 1200px) { .sectionType { margin: 0; padding: 57px 20px 80px; } } /* title -------------------------------------------------- */ .titStyle1 { margin: 0 0 51px; font-size: 46px; font-size: 4.6rem; text-align: center; font-family: 'Hannari'; } @media screen and (max-width: 959px) { .titStyle1 { margin: 0 0 36px; font-size: 23px; font-size: 2.3rem; } } /* paragraph Element -------------------------------------------------- */ p.noPosting { margin: 51px 0 0; } @media screen and (max-width: 959px) { p.noPosting { margin: 36px 0 -20px; font-size: 12px; font-size: 1.2rem; } .contents + ul.btn2 { margin-top: 57px; } } .strongType_1 { font-weight: bold; } .smallType_1 { font-size: 80%; } .colorRed { color: #cc0000; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .floatLeft { float: left; } .floatRight { float: right; } /* list Element -------------------------------------------------- */ /* ul */ ul { margin: 0; list-style: none; } ul li { padding: 0; margin: 0; } /* ol */ ol { margin: 0; list-style: none; } ol li { padding: 0; margin: 0; } ul, ol { font-size: 18px; font-size: 1.8rem; } @media screen and (max-width: 959px) { ul, ol { font-size: 10px; font-size: 1rem; } } /* attention -------------------------------------------------- */ .attention { margin: 0 0; list-style: none; font-size: 12px; font-size: 1.2rem; color: #666; } .attention li { padding: 0 0 0 1em; margin: 0; text-indent: -1em; } .attention li.strong { color: #cc0000; } /* btn -------------------------------------------------- */ ul.btn { padding: 0; margin: 30px 0; text-align: center; list-style: none; } ul.btn li { width: 200px; padding: 15px 0 6px; margin: 0 15px; display: inline-block; } ul.btn li a { width: 100%; font-size: 14px; font-size: 1.4rem; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; display: block; } ul.btn li a:hover { opacity: 0.8; text-decoration: none; } ul.btn li.btnType1 a { padding: 11px 0 10px; color: #ffffff; background-color: #aaa; } ul.btn li.btnType2 a { padding: 10px 0 9px; color: #000000; background-color: #ffffff; border: solid 1px #ccc; } #newsEvent ul.btn { width: 100%; } #newsEvent ul.btn li { width: 20%; max-width: 200px; padding: 10px 0 9px; font-size: 14px; font-size: 1.4rem; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #000000; background-color: #eeeeee; border: solid 1px #ccc; cursor: pointer; font-weight: bold; } #newsEvent ul.btn li:hover { color: #c3303c; border: solid 1px #c3303c; } #newsEvent ul.btn li.btnType1 { padding: 11px 0 10px; color: #ffffff; background-color: #aaa; cursor: default; pointer-events: none; border: none; } ul.btn2 { padding: 0; margin: 54px 0 0; text-align: center; list-style: none; } ul.btn2 li { width: 260px; padding: 0; margin: 0 20px; display: inline-block; } ul.btn2 li a { width: 100%; padding: 12px 0; font-size: 14px; font-size: 1.4rem; font-weight: bold; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #ccc; display: block; } ul.btn2 li a:before { content: ""; width: 7px; height: 12px; margin: 0 13px 0 0; overflow: hidden; background: url(/toppage/images/arrow_middle_right_btn2.png) left top no-repeat; display: inline-block; } ul.btn2 li a:hover { border: solid 1px #c3303c; text-decoration: none; } ul.btn2 li a:hover:before { background-position: left bottom; } ul.btn li.btnTypeHome { width: 350px; } ul.btn li.btnTypeHome a { width: 350px; padding: 12px 0 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: solid 1px #ccc; font-size: 14px; font-size: 1.4rem; } ul.btn li.btnTypeHome a span { padding: 0 0 0 31px; line-height: 18px; font-weight: bold; display: inline-block; position: relative; } ul.btn li.btnTypeHome a span:before { content: ""; width: 21px; height: 19px; overflow: hidden; display: block; background: url(/toppage/images/icon_home.png) 0 0 no-repeat; background-size: 21px auto; position: absolute; top: 50%; left: 0px; margin-top: -11px; } ul.btn li.btnTypeHome a:hover { color: #c3303c; border-color: #c3303c; } ul.btn li.btnTypeHome a:hover span:before { background-position: bottom left; } @media screen and (max-width: 959px) { ul.btn { width: 100%; padding: 8px 5px; margin: 0; background: #f0f0f0; } ul.btn li { width: 33%; padding: 0 2.5px; margin: 0; } ul.btn li a { font-size: 9px; font-size: 0.9rem; } #newsEvent ul.btn { padding: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #newsEvent ul.btn li:hover { color: #000000; border: solid 1px #ccc; } #newsEvent ul.btn li.btnType1:hover { color: #ffffff; } #newsEvent ul.btn li, #newsEvent ul.btn li.btnType1 { width: 32%; height: 4rem; padding: 0; margin: 0 1%; font-size: 9px; font-size: 0.9rem; line-height: 1.222; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #newsEvent ul.btn li.btnType1 { border: none; } ul.btn2 { padding: 0; margin: 30px 0 -20px; } ul.btn2 li { width: 100%; margin: 0 0 10px; display: block; } ul.btn2 li:last-child { margin: 0; } ul.btn2 li a { width: 100%; padding: 10px 20px 9px 15px; font-size: 12px; font-size: 1.2rem; text-align: left; font-weight: bold; background-image: url(/toppage/images/arrow_middle_right_2.png); background-repeat: no-repeat; background-position: right center; background-size: 15px auto; } ul.btn2 li a:before { display: none; } ul.btn2 li a:hover { border: solid 1px #ccc; } ul.btn.btnHome, ul.btn li.btnTypeHome { width: 100%; padding: 0; background: none; } ul.btn li.btnTypeHome a { width: 100%; padding: 12px 0 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 12px; font-size: 1.2rem; } ul.btn li.btnTypeHome a span { padding: 0 0 0 27px; line-height: 16px; } ul.btn li.btnTypeHome a span:before { width: 17px; height: 16px; background-size: 17px auto; margin-top: -8px; } ul.btn li.btnTypeHome a:hover { color: #000000; border-color: #ccc; } ul.btn li.btnTypeHome a:hover span:before { background-position: 0 0; } } /* duringTheaterList -------------------------------------------------- */ .duringTheaterList { display: flex; justify-content: space-between; } .duringTheaterList li { width: 25%; max-width: 267px; } .duringTheaterList li:not(:first-child) { margin: 0 0 0 40px; } .duringTheaterList li a { width: 100%; padding: 116px 10px 25px; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; background-repeat: no-repeat; color: #000000; display: block; position: relative; } .duringTheaterList li:nth-child(5) a { color: #C3303C; /*padding: 110px 10px 19px;*/ background-color: #f9ebec; border: 6px #fff solid; } .duringTheaterList li a::after { width: 70px; height: 70px; content: ""; position: absolute; top: 30px; left: 50%; overflow: hidden; margin: 0 0 0 -35px; } .duringTheaterList li:nth-child(1) a::after { background-image: url(/toppage/images/during_theater_list_bg_1.png); background-position: 0 0; } .duringTheaterList li:nth-child(2) a::after { background-image: url(/toppage/images/during_theater_list_bg_2.png); background-position: 0 0; } .duringTheaterList li:nth-child(3) a::after { background-image: url(/toppage/images/during_theater_list_bg_3.png); background-position: 0 0; } .duringTheaterList li:nth-child(4) a::after { background-image: url(/toppage/images/during_theater_list_bg_5.png); background-position: 0 0; } .duringTheaterList li:nth-child(5) a::after { background-image: url(/toppage/images/during_theater_list_bg_4.png); background-position: 0 -70px; } .duringTheaterList li a:hover { text-decoration: none; } .duringTheaterList li:nth-child(5) a:hover { text-decoration: underline; } .duringTheaterList li a:hover::after { background-position: 0 -70px; } .duringTheaterList li .tit { margin: 0 0 7px; font-size: 16px; font-size: 1.6rem; font-weight: bold; display: block; } .duringTheaterList li .txt { font-size: 14px; font-size: 1.4rem; line-height: 1.5; display: block; } .duringTheaterList li a:hover .tit { color: #c3303c; } @media screen and (max-width: 959px) { .duringTheaterList li a:hover .tit { color: #000000; } } @media screen and (min-width: 768px) and (max-width: 1200px) { .duringTheaterList li:not(:first-child) { margin: 0 0 0 20px; } } @media screen and (max-width: 767px) { .duringTheaterList { display: block; } .duringTheaterList li { width: 100%; max-width: none; margin: 0 0 10px 0; } .duringTheaterList li:not(:first-child) { margin: 0 0 10px; } .duringTheaterList li:last-child { margin: 0; } .duringTheaterList li a { padding: 12px 27px 12px 64px; background-image: url(/toppage/images/arrow_middle_right_2.png); background-repeat: no-repeat; background-position: right center; background-size: 15px auto; position: relative; } .duringTheaterList li:nth-child(5) a { padding: 9px 24px 9px 61px; border: 3px #fff solid; } .duringTheaterList li a::after { width: 35px; height: 35px; top: 50%; left: 14px; margin: -17.5px 0 0; } .duringTheaterList li:nth-child(1) a::after { background-image: url(/toppage/images/during_theater_list_bg_1.png); background-size: 35px auto; } .duringTheaterList li:nth-child(2) a::after { background-image: url(/toppage/images/during_theater_list_bg_2.png); background-size: 35px auto; } .duringTheaterList li:nth-child(3) a::after { background-image: url(/toppage/images/during_theater_list_bg_3.png); background-size: 35px auto; } .duringTheaterList li:nth-child(4) a::after { background-image: url(/toppage/images/during_theater_list_bg_5.png); background-size: 35px auto; } .duringTheaterList li:nth-child(5) a::after { background-image: url(/toppage/images/during_theater_list_bg_4.png); background-size: 35px auto; background-position: bottom center; } .duringTheaterList li .tit { margin: 0 0 3px; font-size: 12px; font-size: 1.2rem; text-align: left; } .duringTheaterList li .txt { font-size: 11px; font-size: 1.1rem; line-height: 1.6; text-align: left; } .duringTheaterList li:nth-child(5) a .tit { color: #C3303C; } } /* select -------------------------------------------------- */ /*select, select option { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; box-shadow: none; } select { width: 100%; padding: 13px 39px 13px 13px; color: #000000; box-sizing: border-box; position: relative; z-index: 5; border-radius: 0; border: 0; background: #ffffff; background-image: url(/shared/images/select_1.png); background-position: right center; background-repeat: no-repeat; border: 2px solid #cccccc; font-size: 16px; font-size: 1.6rem; border-radius: 7px; } @media screen and (max-width: 959px) { select { padding: 11px 30px 10px 10px; color: #000000; background-image: url(/shared/images/select_1_sp.png); background-size: 20px auto; border: 1px solid #cccccc; font-size: 12px; font-size: 1.2rem; border-radius: 5px; } } select::-ms-expand { display: none; } .select-group { width: 100%; background-color: #ffffff; border-radius: 4px; border: 2px solid #cccccc; display: block; box-sizing: border-box; position: relative; } .select-group.error { border-color: #cc0000; } .select-group:after { content: ""; position: absolute; top: 50%; box-sizing: border-box; display: block; width: 10px; height: 10px; margin-top: -8px; border-left: 3px solid #cc0000; border-bottom: 3px solid #cc0000; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); right: 14px; z-index: 1; } */ /* input -------------------------------------------------- */ /*input[type="text"], input[type="email"], input[type="tel"], textarea { padding: 13px; border: 2px solid #cccccc; font-size: 16px; font-size: 1.6rem; border-radius: 7px; background-color: #ffffff; } input[type="text"].error, input[type="email"].error, input[type="tel"].error, textarea.error { background-color: #f4dede; border-color: #cc0000; } input[type="submit"] { width: 560px; margin: 0 auto; padding: 15px 26px 18px; font-size: 24px; font-size: 2.4rem; color: #ffffff; border-radius: 10px; background: #f94325; box-shadow: 0; border: 0; } input[type="submit"]:hover { opacity: 0.8; } input[type="button"] { margin: 0; padding: 15px 26px 18px; font-size: 24px; font-size: 2.4rem; color: #f94325; border-radius: 10px; background: #ffffff; border: 2px solid #f94325; box-shadow: 0; border: 0; } input[type="button"]:hover { opacity: 0.8; } .submit { margin: 0 auto 36px; } .submit:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; font-size: 0; } .submit input[type="button"] { margin: 0 2em 0 0; float: left; } .submit input[type="button"] + input[type="submit"] { float: left; } @media screen and (max-width: 959px) { input[type="text"], input[type="email"], input[type="tel"], textarea { padding: 11px 10px 10px; border: 1px solid #cccccc; font-size: 12px; font-size: 1.2rem; border-radius: 5px; } input[type="submit"] { width: 100%; padding: 8px 18px 9px; font-size: 12px; font-size: 1.2rem; font-weight: bold; border-radius: 5px; box-shadow: inset 0 -3px #f94325; border: solid 1px #f94325; } .submit input[type="button"] { display: none; } .submit { width: 100%; } } input[type="radio"] { display: inline-block; margin-right: 6px; } input[type="radio"] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; font-size: 1.4rem; cursor: pointer; vertical-align: middle; } @media screen and (max-width: 959px) { input[type="radio"] + label { margin-right: 12px; font-size: 12px; font-size: 1.2rem; line-height: 1.25; } } @media (min-width: 1px) { input[type="radio"] { display: none; margin: 0; } input[type="radio"]:checked + label::after { content: ""; position: absolute; top: 50%; box-sizing: border-box; display: block; } input[type="radio"] + label::before { content: ""; position: absolute; top: 50%; left: 0; box-sizing: border-box; display: block; background: #ffffff; } input[type="radio"] + label { padding: 0 10px 0 31px; line-height: 22px; } input[type="radio"] + label::before { width: 22px; height: 22px; margin-top: -11px; } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="radio"] + label { padding: 0 0 0 27px; line-height: 18px; } input[type="radio"] + label::before { width: 18px; height: 18px; margin-top: -9px; } } @media (min-width: 1px) { input[type="radio"][disabled] { cursor: default; } input[type="radio"] + label { background: none; } input[type="radio"][disabled] + label { color: #999999; cursor: default; } input[type="radio"] + label::before { border: 2px solid #cccccc; border-radius: 30px; } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="radio"] + label::before { border-width: 1px; } } @media (min-width: 1px) { input[type="radio"][disabled] + label::before { border-color: #999999; } input[type="radio"]:checked + label::before { border-color: #f94325; background-color: #fdece8; } input[type="radio"][disabled]:checked + label::before { border-color: #999999; background-color: #ffffff; } input[type="radio"]:checked + label::after { left: 8px; width: 6px; height: 6px; margin-top: -3px; background: #f94325; border-radius: 6px; } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="radio"]:checked + label::after { left: 6px; width: 5px; height: 5px; border-radius: 5px; } } @media (min-width: 1px) { input[type="radio"][disabled]:checked + label::after { background: #999999; } } input[type="checkbox"] { display: inline-block; margin-right: 6px; } input[type="checkbox"] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; font-size: 1.4rem; cursor: pointer; vertical-align: middle; } @media screen and (max-width: 959px) { input[type="checkbox"] + label { margin-right: 12px; font-size: 12px; font-size: 1.2rem; line-height: 1.25; } } @media (min-width: 1px) { input[type="checkbox"] { display: none; margin: 0; } input[type="checkbox"]:checked + label::after { content: ""; position: absolute; top: 50%; box-sizing: border-box; display: block; } input[type="checkbox"] + label::before { content: ""; position: absolute; top: 50%; left: 0; box-sizing: border-box; display: block; background: #ffffff; } input[type="checkbox"] + label { padding: 0 10px 0 32px; line-height: 22px; } input[type="checkbox"] + label::before { width: 22px; height: 22px; margin-top: -11px; } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="checkbox"] + label { padding: 0 10px 0 25px; line-height: 15px; } input[type="checkbox"] + label::before { width: 15px; height: 15px; margin-top: -7.5px; } } @media (min-width: 1px) { input[type="checkbox"] + label::before { border-radius: 4px; border: 2px solid #cccccc; } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="checkbox"] + label::before { border-radius: 2.5px; border-width: 1px; } } @media (min-width: 1px) { input[type="checkbox"]:checked + label::before { border-color: #f94325; background-color: #fdece8; } input[type="checkbox"]:checked + label::after { left: 6px; width: 10px; height: 6px; margin-top: -5px; border-left: 3px solid #f94325; border-bottom: 3px solid #f94325; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } } @media screen and (min-width: 1px) and (max-width: 959px) { input[type="checkbox"]:checked + label::after { left: 4px; width: 8px; height: 6px; margin-top: -4px; border-left-width: 2px; border-bottom-width: 2px; } } */ /* navType1 -------------------------------------------------- */ .navType1 { padding: 24px 0 0; -js-display : flex; display: flex; justify-content: space-between; } .sectionType .navType1 { max-width: 1220px; width: 100%; flex-wrap: wrap; justify-content: center; } .navType1 li { width: 275px; display: block; box-sizing: border-box; } .navType1 a { text-align: center; } .navType1 a:hover { text-decoration: none; } .navType1 .img { margin: 0 0 16px; display: block; } .navType1 .img img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #ffffff; } .navType1 a:hover .img img { opacity: 0.8; } .navType1 .tit { font-size: 14px; font-size: 1.4rem; display: block; font-weight: bold; } .sectionType .navType1 li { width: 25%; padding: 0 1px 0 0; } @media screen and (max-width: 1200px) and (min-width: 960px) { .sectionBody.navType1 { width: 100%; padding: 37px 0 50px; } .sectionBody.navType1.linkList { padding: 0; } .sectionType .navType1 li { padding: 0 1px 0 0; } .sectionType .navType1 .img { max-width: 100%; } .sectionType .navType1 .img img { width: 100%; height: auto; } .navType1 li:not(:last-child) { margin-right:20px; } } @media screen and (max-width: 959px) { .sectionBody.navType1 { width: 100%; padding: 0; margin: -6px 0 -29px; flex-flow: row wrap; } .sectionType .navType1:after { content: ' '; width: 50%; max-width: 959px; height: 0; display: block; } .sectionType .navType1 li { width: 50%; max-width: 959px; padding: 0 2.5px 5px 0; } .navType1 li:not(:last-child) { margin-right: 0; } .navType1 li:nth-child(2n) { padding: 0 0 5px 2.5px; } .navType1 a { width: 100%; display: table; table-layout: fixed; *overflow:auto; text-align: left; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff url(/toppage/images/arrow_middle_right_2.png) no-repeat scroll right center / 15px auto; } * .navType1 a { position: relative; } *+html .navType1 a { position: relative; } .sectionType .navType1 .img { width: 59px; padding: 10px 9px 10px 10px; margin: 0; display: table-cell; *float:left; } .sectionType .navType1 .img img { width: 40px; height: 25px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .sectionType .navType1 a:hover .img img { opacity: 1; } .navType1 .tit { font-size: 10px; font-size: 1.0rem; line-height: 1.4; font-weight: bold; display: table-cell; *float:left; vertical-align: middle; } } @media screen and (min-width: 960px) { .sectionType .navType1 li:nth-child(n + 5) { margin-top: 37px; } } /* pickupList -------------------------------------------------- */ .pickupList { max-width: 1220px; width: 100%; padding: 0; margin: 0 auto; } .pickupList li { padding: 0; margin: 0; display: block; float: left; position: relative; overflow: hidden; } .pickupList li a { width: 100%; display: block; color: #ffffff; background: #000000; position: relative; overflow: hidden; } .pickupList li span { display: block; } .pickupList li:hover { -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0.8; -webkit-font-smoothing: antialiased; } .pickupList li .img img { width: 100%; height: 100%; min-height: 100%; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } .pickupList li:hover .img img { -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out; -ms-transition: all 3s ease-out; transition: all 3s ease-out; -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .pickupList li .txtBox { width: 100%; padding: 11px 20px; display: block; background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background: -webkit-gradient(linear, center bottom, center top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); background: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background: -ms-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); background: linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); position: absolute; left: 0; bottom: 0; } .pickupList li .subTit { margin: 0 0 5px; font-size: 16px; font-size: 1.6rem; line-height: 1.3125; -webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; } .pickupList li .tit { font-size: 28px; font-size: 2.8rem; line-height: 1.4285714; -webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; } .pickupList li.pageDataNo1 { max-width: 464px; width: 38%; max-height: 486px; height: 100%; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; border-right: 1px solid #ffffff; } .pickupList li.pageDataNo1 .txtBox { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } .pickupList li.pageDataNo2 { width: 37%; height: 50%; max-height: 243px; border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; } .pickupList li.pageDataNo3 { width: 25%; height: 50%; max-height: 243px; -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; border-bottom: 1px solid #ffffff; } .pickupList li.pageDataNo4 { width: 25%; height: 50%; max-height: 243px; border-right: 1px solid #ffffff; } .pickupList li.pageDataNo5 { width: 37%; height: 50%; max-height: 243px; -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } .pickupList li.pageDataNo5 .txtBox { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } @media screen and (min-width: 768px) and (max-width: 1200px) { .pickupList { width: 100%; margin: 0 0 -22px; } .pickupList li.pageDataNo2, .pickupList li.pageDataNo5 { max-width: 37%; } .pickupList li.pageDataNo3, .pickupList li.pageDataNo4 { max-width: 25%; } .pickupList li .img { display: block; text-align: center; } .pickupList li .img img { min-height: 100%; height: 100% !important; height: 100%; display: inline; } .pickupList li .tit { font-size: 2.3rem; font-size: 23px; } .pickupList li .img { overflow: inherit; } } @media screen and (max-width: 767px) { .pickupList { width: 100%; margin: 0 0 -22px; } .pickupList li { width: 100%; overflow: hidden; background: #ffffff; border-bottom: 1px solid #ffffff; } * .pickupList li { position: relative; } *+html .pickupList li { position: relative; } .pickupList li .img img { min-height: auto; height: auto; width: 100%; overflow: inherit; } .pickupList li:hover { opacity: 1; } .pickupList li .img img { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } .pickupList li:hover .img img { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; transform: none; } .pickupList li .txtBox { padding: 11px 10px; } .pickupList li .subTit { margin: 0 0 3px; font-size: 10.315px; font-size: 1.0315rem; line-height: 1.5002423; } .pickupList li .tit { font-size: 17.685px; font-size: 1.7685rem; line-height: 1.4167373; } .pickupList li.pageDataNo1 { width: 100%; height: auto; max-width: none; max-height: none; -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; overflow: hidden; } .pickupList li.pageDataNo1 { border-right: 0; } .pickupList li.pageDataNo1 .img { height: auto; overflow: inherit; } .pickupList li.pageDataNo1 .txtBox { -webkit-border-radius: 0 0 0 0; -moz-border-radius: 0 0 0 0; border-radius: 0 0 0 0; } .pickupList li.pageDataNo2 { width: 100%; height: auto; max-height: none; border-bottom: 1px solid #ffffff; border-right: none; } .pickupList li.pageDataNo2 .img { height: auto; } .pickupList li.pageDataNo3, .pickupList li.pageDataNo4 { width: 50%; height: auto; max-height: none; border-bottom: 1px solid #ffffff; } .pickupList li.pageDataNo3 .img, .pickupList li.pageDataNo4 .img { height: auto; } .pickupList li.pageDataNo3 { max-height: none; -webkit-border-radius: 0 0 0 0; -moz-border-radius: 0 0 0 0; border-radius: 0 0 0 0; } .pickupList li.pageDataNo3 { border-right: 1px solid #ffffff; } .pickupList li.pageDataNo4 { border-right: none; } .pickupList li.pageDataNo5 { width: 100%; max-height: none; height: auto; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; border-bottom: none; } .pickupList li.pageDataNo5 .img { height: auto; } .pickupList li.pageDataNo5 .txtBox { -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .pickupList li:hover .img img { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; transform: none; } } /* newsEvent -------------------------------------------------- */ #newsEvent .content ul { max-width: 1220px; width: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -js-display : flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-start; } #newsEvent .content ul li { max-width: 212px; width: 20%; margin-right: 40px; } #newsEvent .content ul li:nth-child(5) { margin-right: 0; } #newsEvent .content ul li span { display: block; } #newsEvent .content ul li .img { max-width: 212px; width: 100%; position: relative; padding-top: 75%; margin: 0 0 19px; overflow: hidden; } #newsEvent .content ul li .img img { width: 100%; position: absolute; top: 0; left: 0; height: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #000; } #newsEvent .content ul li .category { max-width: 212px; width: 100%; height: 26px; margin: 0 0 10px; font-size: 12px; font-size: 1.2rem; line-height: 26px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; background-color: #ffffff; text-align: center; font-weight: bold; } #newsEvent .content ul li .category i { width: 21px; height: 26px; margin: 0 7px 0 0; overflow: hidden; background: url(/toppage/images/category.png) left center no-repeat; display: inline-block; vertical-align: middle; } #newsEvent .content ul li .category.campaign i { background-position: 0 -1px; } #newsEvent .content ul li .category.column i { width: 14px; background-position: -7px -27px; } #newsEvent .content ul li .category.notice i { width: 17px; background-position: -4px -53px; } #newsEvent .content ul li .category.event i { width: 14px; background-position: -7px -79px; } #newsEvent .content ul li .category.feature i { width: 18px; background-position: -5px -105px; } #newsEvent .content ul li time { font-size: 12px; font-size: 1.2rem; margin: 0 0 8px; color: #666666; } #newsEvent .content ul li .txt { font-size: 14px; font-size: 1.4rem; line-height: 1.6428571; color: #333333; } #newsEvent .content ul li a:hover { text-decoration: none; } #newsEvent .content ul li a:hover .img img { opacity: 0.8; } #newsEvent .content ul li a:hover .category { color: #000000; } #newsEvent .content ul li a:hover .txt { color: #c3303c; } @media screen and (max-width: 1200px) { #newsEvent .content ul li { margin-right: 20px; } } @media screen and (max-width: 959px) { #newsEvent .content ul { width: 100%; margin: 30px 0; border-top: 1px solid #cccccc; -js-display : flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #newsEvent .content ul li { width: 100%; max-width: 959px; padding: 15px 0; margin-right: 0; border-bottom: 1px solid #cccccc; } #newsEvent .content ul li a { width: 100%; display: table; table-layout: fixed; *overflow:auto; } #newsEvent .content ul li .img { width: 75px; height: 57px; padding-top: 0; margin: 0; display: table-cell; *float:left; } #newsEvent .content ul li .table-cell { padding: 0 0 0 15px; display: table-cell; *float:left; vertical-align: top; } #newsEvent .content ul li .category { width: 100px; height: 20px; margin: 0 8px 0 0; font-size: 9px; font-size: 0.9rem; line-height: 20px; -webkit-border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; -moz-border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; display: inline-block; } #newsEvent .content ul li .category i { width: 15px; height: 20px; margin: 0 6px 0 0; overflow: hidden; background-size: 15px auto; display: inline-block; vertical-align: middle; } #newsEvent .content ul li .category.campaign i { background-position: 0 -1px; } #newsEvent .content ul li .category.column i { width: 10px; background-position: -5px -19px; } #newsEvent .content ul li .category.notice i { width: 12px; background-position: -2px -38px; } #newsEvent .content ul li .category.event i { width: 10px; background-position: -5px -56px;/*0.7かけて、小数点以下繰り上げ*/ } #newsEvent .content ul li .category.feature i { width: 13px; background-position: -4px -74px; } #newsEvent .content ul li time { font-size: 11px; font-size: 1.1rem; margin: 0; } #newsEvent .content ul li .txt { margin: 9px 0 0; font-size: 12px; font-size: 1.2rem; } } /* mediaInfo -------------------------------------------------- */ #mediaInfo ul.areaList { width: 100%; margin: 30px 0 16px; border-top: 1px solid #cccccc; } #mediaInfo ul.areaList li { width: 100%; padding: 0; border-bottom: 1px solid #cccccc; } #mediaInfo ul.areaList li a { width: 100%; padding: 23px 0 19px; display: block; } #mediaInfo ul.areaList li .category { width: 145px; height: 26px; margin: 0 16px 0 0; font-size: 12px; font-size: 1.2rem; line-height: 26px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; background-color: #eeeeee; text-align: center; font-weight: bold; display: inline-block; } #mediaInfo ul.areaList li time { font-size: 12px; font-size: 1.2rem; color: #666666; } #mediaInfo ul.areaList li .txt { margin: 14px 0 0; font-size: 14px; font-size: 1.4rem; line-height: 1.6428571; color: #333333; display: block; } #mediaInfo ul.areaList li a:hover { text-decoration: none; } #mediaInfo ul.areaList li a:hover .img img { opacity: 0.2; } #mediaInfo ul.areaList li a:hover .category { color: #000000; } #mediaInfo ul.areaList li a:hover .txt { color: #c3303c; text-decoration: underline; } #mediaInfo ul.areaList li.fix .category { color: #ffffff; background-color: #c3303c; } #mediaInfo ul.areaList li.fix time { color: #c3303c; font-weight: bold; } #mediaInfo ul.areaList li.fix .txt { color: #c3303c; font-weight: bold; } #mediaInfo ul.areaList li.fix a:hover .category { color: #ffffff; } @media screen and (max-width: 959px) { #mediaInfo ul.areaList { margin: 30px 0; } #mediaInfo ul.areaList li a { padding: 15px 0; } #mediaInfo ul.areaList li .category { width: 100px; height: 20px; margin: 0 8px 0 0; font-size: 9px; font-size: 0.9rem; line-height: 20px; -webkit-border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; -moz-border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; border-radius: 19px 20px 20px 19px/19px 19px 20px 20px; } #mediaInfo ul.areaList li time { font-size: 11px; font-size: 1.1rem; margin: 0; } #mediaInfo ul.areaList li .txt { margin: 9px 0 0; font-size: 12px; font-size: 1.2rem; } #mediaInfo ul.areaList li.fix a:hover .category { color: #ffffff; } #mediaInfo ul.areaList li a:hover .txt { color: #000000; text-decoration: none; } } /* linkBlock -------------------------------------------------- */ .linkBlock .linkList li .img img { width: 100%; } .linkBlock { padding: 80px 40px; } .linkList { padding: 0; } @media screen and (max-width: 959px) { .linkBlock { padding: 30px 20px; } .sectionBody.navType1.linkList { margin: 0; } } /* snsList -------------------------------------------------- */ .snsList { margin: 100px 0 93px; text-align: center; } .snsList > li { margin: 0 30px; font-size: 14px; font-size: 1.4rem; display: inline-block; } .snsList > li .iconSns { margin: 0 auto 12px; } .snsList > li a { display: inline-block; } .snsList > li a:hover { text-decoration: none; } .snsList > li.instagram { width: 100%; margin: 0; text-align: center; display: block; } .snsList > li.instagram .iconSns { margin: 0 auto 16px; } @media screen and (max-width: 959px) { .snsList { margin: 50px 0 37px; } .snsList > li { margin: 0 17.5px; font-size: 10px; font-size: 1.0rem; } .snsList > li .iconSns { margin: 0 auto 7px; } .snsList > li.instagram .iconSns { margin: 0 auto 6px; } } /* iconSns -------------------------------------------------- */ .iconSns { width: 64px; height: 64px; background: url(/toppage/images/sns_icon.png) no-repeat; display: block; overflow: hidden; } .iconSns.instagram { background-position: 0 0; } .iconSns.twitter { background-position: 0 -402px; } .iconSns.line { background-position: 0 -268px; } .iconSns.youtube { background-position: 0 -134px; } .iconSns.facebook { background: url(/toppage/images/ico_sns_facebook.png) no-repeat; } a:hover .iconSns.instagram { background-position: 0 -536px; } a:hover .iconSns.twitter { background-position: 0 -938px; } a:hover .iconSns.line { background-position: 0 -804px; } a:hover .iconSns.youtube { background-position: 0 -670px; } a:hover .iconSns.facebook { opacity: 0.6; } @media screen and (max-width: 959px) { .iconSns { width: 32px; height: 32px; background: url(/toppage/images/sns_icon.png) no-repeat; background-size: 32px auto; } .iconSns.instagram, a:hover .iconSns.instagram { background-position: 0 0; } .iconSns.twitter, a:hover .iconSns.twitter { background-position: 0 -201px; } .iconSns.line, a:hover .iconSns.line { background-position: 0 -134px; } .iconSns.youtube, a:hover .iconSns.youtube { background-position: 0 -67px; } .iconSns.facebook { background: url(/group/audition/images/top/ico_sns_facebook.png) center / 32px auto no-repeat; } /* a:hover .iconSns.instagram { background-position: 0 -268px; } a:hover .iconSns.twitter { background-position: 0 -469px; } a:hover .iconSns.line { background-position: 0 -402px; } a:hover .iconSns.youtube { background-position: 0 -335px; } */} /* instagramPhotoList -------------------------------------------------- */ .instagramPhotoList { width: 100%; margin: 24px 0 101px; display: flex; justify-content: center; } .instagramPhotoList.isLoading { justify-content: space-around; } .instagramPhotoList li { width: 12.5%; display: block; position: relative; overflow: hidden; } .instagramPhotoList li.loading { margin: 0 auto; } .instagramPhotoList li.loading:before { display: block; content: ""; width: 100%; padding-top: 100%; background-image: url( "/shared/images/loading_shiki.gif" ); background-position: center center; background-repeat: no-repeat; } .instagramPhotoList li a { width: 100%; padding-bottom: 100%; display: block; overflow: hidden; background-color: #000000; } .instagramPhotoList li a .textWrapper { position: absolute; display: block; width: 100%; height: 100%; opacity: 0; -moz-transition: opacity 0.17s ease-in-out; -o-transition: opacity 0.17s ease-in-out; -webkit-transition: opacity 0.17s ease-in-out; transition: opacity 0.17s ease-in-out; padding: 20px; overflow: hidden; box-sizing: border-box; background-color: rgba( 255, 255, 255, 0.6 ); } .instagramPhotoList li a .image { position: absolute; width: 100%; padding-bottom: 100%; display: block; background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%; } @media screen and (min-width: 959px) { .instagramPhotoList li:hover a .image { filter: blur( 5px ); } .instagramPhotoList li:hover a .textWrapper { opacity: 1; } } .instagramPhotoList li a .textBlock { margin: 0; height: 100%; width: 100%; color: #000; display: flex; align-items: center; font-size: 14px; font-size: 1.4rem; text-decoration: none; font-feature-settings: "palt"; } .instagramPhotoList li a .textContent { width: 100%; max-height: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } .instagramPhotoList li.photoNone { width: 100%; text-align: center; } @media screen and (max-width: 959px) { .instagramPhotoList { margin: 12px 0 40px; flex-flow: row wrap; } .instagramPhotoList li { width: 25%; } .instagramPhotoList li.photoNone { width: 100%; } } @media screen and (min-width: 960px) and (max-width: 1199px) { .instagramPhotoList li { width: 20%; } .instagramPhotoList li:nth-child(n+7):nth-child(-n+9) { display: none; } } @media screen and (min-width: 1200px) and (max-width: 1439px) { .instagramPhotoList li { width: 16.666%; } .instagramPhotoList li:nth-child(n+8):nth-child(-n+9) { display: none; } } @media screen and (min-width: 1440px) and (max-width: 1659px) { .instagramPhotoList li { width: 14.28%; } .instagramPhotoList li:first-child:last-child { display: block; } .instagramPhotoList li:last-child { display: none; } } /* pageTop -------------------------------------------------- */ .popupPageTop { position: absolute; right: 0; z-index: 1; } @media screen and (min-width: 960px) { .popupBoxBody > .popupPageTop { display: none; bottom: 20px; } .popupPageTop { width: 47px; height: 47px; } .popupPageTop a { width: 47px; height: 47px; text-indent: -100px; display: block; overflow: hidden; position: relative; } .popupPageTop a:after { content: ''; width: 47px; height: 94px; background: url(/toppage/images/pc_popup_pagetop_1.png) no-repeat; position: absolute; top: 0; left: 0; } .popupPageTop a:hover:after { top: -47px; } } @media screen and (max-width: 959px) { .popupBoxBody > .popupPageTop { display: none; bottom: 10px; } .popupPageTop { width: 35px; height: 35px; } .popupPageTop a { width: 35px; height: 35px; text-indent: -70px; display: block; overflow: hidden; background: url(/toppage/images/sp_popup_pagetop_1.png) no-repeat; background-size: 35px 35px; } } .footerpageTop { padding: 0; margin: 0; border-top: 1px solid #cccccc; } .footerpageTop a { width: 100%; padding: 52px 0 13px; font-size: 10px; font-size: 1rem; color: #000000; text-align: center; display: block; background: url(/toppage/images/btn_pagetop_1.png) center 23px no-repeat; } .footerpageTop a:hover { color: #c3303c; text-decoration: none; background: #f3dddf url(/toppage/images/btn_pagetop_1_hover.png) center 23px no-repeat; } @media screen and (max-width: 959px) { .footerpageTop { padding: 0; margin: 0; border-top: 1px solid #cccccc; } .footerpageTop a, .footerpageTop a:hover { padding: 27px 0 6px; font-size: 10px; font-size: 1.0rem; color: #000000; background: url(/toppage/images/btn_pagetop_1.png) center 12px no-repeat; background-size: auto 9px; } } /* footer -------------------------------------------------- */ #footer { width: 100%; background: #eeeeee; } #footer .footerBody { width: 1216px; max-width: 100%; margin: 0 auto; padding: 21px 0; } #footer .footerBody ul { text-align: center; } #footer .footerBody ul li { font-size: 14px; font-size: 1.4rem; line-height: 2; display: inline-block; } #footer .footerBody ul li::after { content: "I"; color: #cccccc; padding: 0 1em; } #footer .footerBody ul li:last-child::after { display: none; } #footer .copyright { max-width: 100%; padding: 16px 0 18px; text-align: center; border-top: 1px solid #dddddd; } #footer .copyright p { font-size: 12px; font-size: 1.2rem; margin: 0 auto; } #footer .copyright .copyrightBlock { width: 1216px; max-width: 100%; margin: 0 auto; } @media screen and (max-width: 959px) { #footer { width: 100%; background: #ffffff; } #footer .footerBody { padding: 30px 10px; background: #eeeeee; } #footer .footerBody ul { width: 100%; border-left: 1px solid #cccccc; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #footer .footerBody ul:nth-child(1) { border-top: 1px solid #cccccc; } #footer .footerBody ul li { width: 50%; font-size: 11px; font-size: 1.1rem; line-height: 1.4; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; box-sizing: border-box; } #footer .footerBody ul li::after { content: ""; display: none; } #footer .footerBody ul li a { width: 100%; height: 100%; padding: 14px 0 15px 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: left; background: url(/toppage/images/arrow_middle_right_2.png) center right no-repeat; background-size: 15px auto; } #footer .footerBody ul li a:hover { text-decoration: none; } #footer .copyright { padding: 18px 0; border-top: 0; } #footer .copyright p { font-size: 10px; font-size: 1.0rem; } } /* table -------------------------------------------------- */ .table { width: 100%; display: table; table-layout: fixed; *overflow:auto; } .table .table-cell { display: table-cell; *float:left; vertical-align: middle; text-align: left; } .table .table-cell.top { vertical-align: top; } .table .table-cell.bottom { vertical-align: bottom; } .table .table-cell.right { text-align: right; } /* Change Margin -------------------------------------------------- */ body .changeMargin0 { margin: 0 !important; } body .changeMarginSide0 { margin-left: 0 !important; margin-right: 0 !important; } body .changeMarginTop0 { margin-top: 0 !important; } body .changeMarginTop10 { margin-top: 10px !important; } body .changeMarginBottom0 { margin-bottom: 0 !important; } /* clearfix -------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; } .clearfix { display:inline-block; } /*\*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /**/ /* clear -------------------------------------------------- */ .clear { clear: both; }