@charset "UTF-8"; #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt, #str-contents .contentsWrapper .blueButton, #str-contents .contentsWrapper ul .selected, #contents-body .contentsWrapper .blueButton, #contents-body .contentsWrapper ul .selected { border-radius: 16px; } #str-contents .contentsWrapper .anchorNavigation, #contents-body .contentsWrapper .anchorNavigation, #str-contents .contentsWrapper .caseHeading, #contents-body .contentsWrapper .caseHeading, #str-contents .contentsWrapper .operationMethodArea, #contents-body .contentsWrapper .operationMethodArea, #str-contents .contentsWrapper .subPageNavi, #str-contents .contentsWrapper *[class^=subPageNavi], #contents-body .contentsWrapper .subPageNavi, #contents-body .contentsWrapper *[class^=subPageNavi], #str-contents .contentsWrapper .bgGray, #contents-body .contentsWrapper .bgGray { margin: 0 -20px; } @media screen and (max-width: 520px) { input[type=search]::-moz-placeholder { position: relative; top: 0.3em; } input[type=search]::placeholder { position: relative; top: 0.3em; } } #str-contents, #contents-body { padding-right: 20px; padding-left: 20px; overflow: hidden; } @media screen and (max-width: 520px) { #str-contents, #contents-body { padding-right: 0; padding-left: 0; } } #str-contents .flexJcc, #contents-body .flexJcc { display: flex; justify-content: center; /*12345 */ } #str-contents .spHide, #contents-body .spHide { display: none; } @media screen and (max-width: 520px) { #str-contents .spHide, #contents-body .spHide { display: block; } } @media screen and (max-width: 520px) { #str-contents .spHide, #contents-body .spHide { display: none; } } #str-contents .fixedParent .subPageNavi, #str-contents .fixedParent .header-2019, #str-contents .fixedParent .commonSearchBox, #contents-body .fixedParent .subPageNavi, #contents-body .fixedParent .header-2019, #contents-body .fixedParent .commonSearchBox { width: 100%; position: fixed; top: 0; z-index: 100; } #str-contents input[type=search], #contents-body input[type=search] { -webkit-appearance: none; background-color: #fff; border-radius: 8px; vertical-align: middle; } #str-contents input[type=search]::-webkit-search-cancel-button, #str-contents input[type=search]::-webkit-search-results-button, #str-contents input[type=search]::-webkit-search-results-decoration, #contents-body input[type=search]::-webkit-search-cancel-button, #contents-body input[type=search]::-webkit-search-results-button, #contents-body input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } #str-contents .contentsWrapper .subPageNavi, #contents-body .contentsWrapper .subPageNavi { height: initial; } #str-contents .contentsWrapper *:not(.ulizahtml5, .ulizahtml5 *), #contents-body .contentsWrapper *:not(.ulizahtml5, .ulizahtml5 *) { box-sizing: border-box; font-size: 16px; font-weight: bold; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; margin: 0; padding: 0; /* font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; */ /* 「BIZ UDPゴシック」をWindowsで指定 */ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; /* @media screen\0 { * { font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; } }*/ } @media screen and (max-width: 520px) { #str-contents .contentsWrapper *:not(.ulizahtml5, .ulizahtml5 *), #contents-body .contentsWrapper *:not(.ulizahtml5, .ulizahtml5 *) { text-align: initial; } } #str-contents .contentsWrapper a, #contents-body .contentsWrapper a { cursor: pointer; text-decoration: none; } #str-contents .contentsWrapper a:visited, #contents-body .contentsWrapper a:visited { color: inherit; } #str-contents .contentsWrapper .center, #str-contents .contentsWrapper .center *, #contents-body .contentsWrapper .center, #contents-body .contentsWrapper .center * { text-align: center; } #str-contents .contentsWrapper .thin, #str-contents .contentsWrapper .thin *, #contents-body .contentsWrapper .thin, #contents-body .contentsWrapper .thin * { font-weight: 300; } #str-contents .contentsWrapper .larger, #str-contents .contentsWrapper .larger *, #contents-body .contentsWrapper .larger, #contents-body .contentsWrapper .larger * { font-size: 24px; } #str-contents .contentsWrapper .large, #str-contents .contentsWrapper .large *, #contents-body .contentsWrapper .large, #contents-body .contentsWrapper .large * { font-size: 20px; } #str-contents .contentsWrapper .middle_l, #str-contents .contentsWrapper .middle_l *, #contents-body .contentsWrapper .middle_l, #contents-body .contentsWrapper .middle_l * { font-size: 18px; } #str-contents .contentsWrapper .middle, #str-contents .contentsWrapper .middle *, #contents-body .contentsWrapper .middle, #contents-body .contentsWrapper .middle * { font-size: 16px; } #str-contents .contentsWrapper .small, #str-contents .contentsWrapper .small *, #contents-body .contentsWrapper .small, #contents-body .contentsWrapper .small * { font-size: 14px; } #str-contents .contentsWrapper .smaller, #str-contents .contentsWrapper .smaller *, #contents-body .contentsWrapper .smaller, #contents-body .contentsWrapper .smaller * { font-size: 12px; } #str-contents .contentsWrapper .smallest, #str-contents .contentsWrapper .smallest *, #contents-body .contentsWrapper .smallest, #contents-body .contentsWrapper .smallest * { font-size: 10px; } #str-contents .contentsWrapper .right, #str-contents .contentsWrapper .right *, #contents-body .contentsWrapper .right, #contents-body .contentsWrapper .right * { text-align: right; } #str-contents .contentsWrapper .ib, #contents-body .contentsWrapper .ib { display: inline-block !important; font-size: inherit; text-indent: 0; } #str-contents .contentsWrapper .sba-page, #contents-body .contentsWrapper .sba-page { display: flex; align-items: center; } #str-contents .contentsWrapper .sba-page.center, #contents-body .contentsWrapper .sba-page.center { display: block; } #str-contents .contentsWrapper .subHead, #contents-body .contentsWrapper .subHead { border-bottom: 3px solid #0C67C6; padding-bottom: 8px; margin-top: 50px; padding-left: 50px; font-size: 30px; margin-bottom: 30px; margin-right: 15px; margin-left: 15px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .subHead, #contents-body .contentsWrapper .subHead { font-size: 30px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subHead, #contents-body .contentsWrapper .subHead { margin-left: 15px; padding-left: 0; font-size: 18px; border-bottom: 4px solid #0C67C6; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subHead img, #contents-body .contentsWrapper .subHead img { margin-right: 4px; } } #str-contents .contentsWrapper .bgGray, #contents-body .contentsWrapper .bgGray { background-color: #ECECEC; padding: 40px 20px; } #str-contents .contentsWrapper .buttonToPrev, #str-contents .contentsWrapper .nextStepButton, #contents-body .contentsWrapper .buttonToPrev, #contents-body .contentsWrapper .nextStepButton { border-radius: 1000px; border: 3px solid #0C67C6; box-shadow: 0 3px 0 #c1c1c1; background-color: white; background-repeat: no-repeat, repeat; background-position: left 17px center, top left; background-size: auto, 150px; margin: 0 20px; /* 2025-06 svg→webp */ background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_white-button.webp"), url("/mobile/set/data/special/support-channel/img/shared/bg_icontile.webp"); } #str-contents .contentsWrapper .buttonToPrev:not(last-child), #str-contents .contentsWrapper .nextStepButton:not(last-child), #contents-body .contentsWrapper .buttonToPrev:not(last-child), #contents-body .contentsWrapper .nextStepButton:not(last-child) { margin-bottom: 30px; } #str-contents .contentsWrapper .buttonToPrev a, #str-contents .contentsWrapper .nextStepButton a, #contents-body .contentsWrapper .buttonToPrev a, #contents-body .contentsWrapper .nextStepButton a { display: block; font-size: 20px; color: #0C67C6; padding: 10px 30px; } #str-contents .contentsWrapper .buttonToPrev span, #str-contents .contentsWrapper .nextStepButton span, #contents-body .contentsWrapper .buttonToPrev span, #contents-body .contentsWrapper .nextStepButton span { display: block; } #str-contents .contentsWrapper .anchorNavigation a, #str-contents .contentsWrapper .blueButton, #str-contents .contentsWrapper .buttonToPrev, #str-contents .contentsWrapper .nextStepButton, #str-contents .contentsWrapper .buttonHover, #str-contents .contentsWrapper .moreUseful li:not(.current) a, #str-contents .contentsWrapper #questionnaire_box li, #str-contents .contentsWrapper .stepList a, #str-contents .contentsWrapper .subPageNavi a span, #str-contents .contentsWrapper *[class^=subPageNavi] a span, #str-contents .contentsWrapper .anotherMovieListArea a, #str-contents .contentsWrapper .customSelectBox:not(.disabled) li:hover, #str-contents .contentsWrapper .buttonToPrev, #str-contents .contentsWrapper .nextStepButton, #str-contents .contentsWrapper #contentsList li a, #contents-body .contentsWrapper .anchorNavigation a, #contents-body .contentsWrapper .blueButton, #contents-body .contentsWrapper .buttonToPrev, #contents-body .contentsWrapper .nextStepButton, #contents-body .contentsWrapper .buttonHover, #contents-body .contentsWrapper .moreUseful li:not(.current) a, #contents-body .contentsWrapper #questionnaire_box li, #contents-body .contentsWrapper .stepList a, #contents-body .contentsWrapper .subPageNavi a span, #contents-body .contentsWrapper *[class^=subPageNavi] a span, #contents-body .contentsWrapper .anotherMovieListArea a, #contents-body .contentsWrapper .customSelectBox:not(.disabled) li:hover, #contents-body .contentsWrapper .buttonToPrev, #contents-body .contentsWrapper .nextStepButton, #contents-body .contentsWrapper #contentsList li a { text-decoration: none; transition: 0.3s; } #str-contents .contentsWrapper .anchorNavigation a:hover, #str-contents .contentsWrapper .blueButton:hover, #str-contents .contentsWrapper .buttonToPrev:hover, #str-contents .contentsWrapper .nextStepButton:hover, #str-contents .contentsWrapper .buttonHover:hover, #str-contents .contentsWrapper .moreUseful li:not(.current) a:hover, #str-contents .contentsWrapper #questionnaire_box li:hover, #str-contents .contentsWrapper .stepList a:hover, #str-contents .contentsWrapper .subPageNavi a span:hover, #str-contents .contentsWrapper *[class^=subPageNavi] a span:hover, #str-contents .contentsWrapper .anotherMovieListArea a:hover, #str-contents .contentsWrapper .customSelectBox:not(.disabled) li:hover:hover, #str-contents .contentsWrapper .buttonToPrev:hover, #str-contents .contentsWrapper .nextStepButton:hover, #str-contents .contentsWrapper #contentsList li a:hover, #contents-body .contentsWrapper .anchorNavigation a:hover, #contents-body .contentsWrapper .blueButton:hover, #contents-body .contentsWrapper .buttonToPrev:hover, #contents-body .contentsWrapper .nextStepButton:hover, #contents-body .contentsWrapper .buttonHover:hover, #contents-body .contentsWrapper .moreUseful li:not(.current) a:hover, #contents-body .contentsWrapper #questionnaire_box li:hover, #contents-body .contentsWrapper .stepList a:hover, #contents-body .contentsWrapper .subPageNavi a span:hover, #contents-body .contentsWrapper *[class^=subPageNavi] a span:hover, #contents-body .contentsWrapper .anotherMovieListArea a:hover, #contents-body .contentsWrapper .customSelectBox:not(.disabled) li:hover:hover, #contents-body .contentsWrapper .buttonToPrev:hover, #contents-body .contentsWrapper .nextStepButton:hover, #contents-body .contentsWrapper #contentsList li a:hover { opacity: 0.7; } #str-contents .contentsWrapper .anchorNavigation a *, #str-contents .contentsWrapper .blueButton *, #str-contents .contentsWrapper .buttonToPrev *, #str-contents .contentsWrapper .nextStepButton *, #str-contents .contentsWrapper .buttonHover *, #str-contents .contentsWrapper .moreUseful li:not(.current) a *, #str-contents .contentsWrapper #questionnaire_box li *, #str-contents .contentsWrapper .stepList a *, #str-contents .contentsWrapper .subPageNavi a span *, #str-contents .contentsWrapper *[class^=subPageNavi] a span *, #str-contents .contentsWrapper .anotherMovieListArea a *, #str-contents .contentsWrapper .customSelectBox:not(.disabled) li:hover *, #str-contents .contentsWrapper .buttonToPrev *, #str-contents .contentsWrapper .nextStepButton *, #str-contents .contentsWrapper #contentsList li a *, #contents-body .contentsWrapper .anchorNavigation a *, #contents-body .contentsWrapper .blueButton *, #contents-body .contentsWrapper .buttonToPrev *, #contents-body .contentsWrapper .nextStepButton *, #contents-body .contentsWrapper .buttonHover *, #contents-body .contentsWrapper .moreUseful li:not(.current) a *, #contents-body .contentsWrapper #questionnaire_box li *, #contents-body .contentsWrapper .stepList a *, #contents-body .contentsWrapper .subPageNavi a span *, #contents-body .contentsWrapper *[class^=subPageNavi] a span *, #contents-body .contentsWrapper .anotherMovieListArea a *, #contents-body .contentsWrapper .customSelectBox:not(.disabled) li:hover *, #contents-body .contentsWrapper .buttonToPrev *, #contents-body .contentsWrapper .nextStepButton *, #contents-body .contentsWrapper #contentsList li a * { text-decoration: inherit; } #str-contents .contentsWrapper #questionnaire_box + .buttonList, #contents-body .contentsWrapper #questionnaire_box + .buttonList { margin: 120px auto; display: none; } #str-contents .contentsWrapper .nextStepButton, #contents-body .contentsWrapper .nextStepButton { margin-top: 100px; margin-right: 0; margin-left: 0; background: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_white-button-r.svg") no-repeat right 17px center; background-size: 12px 20px; } #str-contents .contentsWrapper .bulletList > li, #str-contents .contentsWrapper .normalText, #contents-body .contentsWrapper .bulletList > li, #contents-body .contentsWrapper .normalText { line-height: 30px; } #str-contents .contentsWrapper .carouselWrap.col3LayoutWrap .bulletList:not(:first-child), #str-contents .contentsWrapper .numList:not(:first-child), #contents-body .contentsWrapper .carouselWrap.col3LayoutWrap .bulletList:not(:first-child), #contents-body .contentsWrapper .numList:not(:first-child) { margin-top: 0.5em; } #str-contents .contentsWrapper .carouselWrap.col3LayoutWrap .bulletList li, #str-contents .contentsWrapper .numList li, #contents-body .contentsWrapper .carouselWrap.col3LayoutWrap .bulletList li, #contents-body .contentsWrapper .numList li { padding-left: 1em; text-indent: -1em; } #str-contents .contentsWrapper .bulletList, #contents-body .contentsWrapper .bulletList { margin-top: 0.5em; } #str-contents .contentsWrapper .bulletList li::before, #contents-body .contentsWrapper .bulletList li::before { content: "・"; font-feature-settings: initial; } #str-contents .contentsWrapper .inline_icon, #contents-body .contentsWrapper .inline_icon { max-height: 16px; vertical-align: -0.1em; margin: 0 3px; } #str-contents .contentsWrapper .bulletList li, #contents-body .contentsWrapper .bulletList li { padding-left: 1em; text-indent: -1em; } #str-contents .contentsWrapper .numList li, #contents-body .contentsWrapper .numList li { list-style: none; text-indent: -1em; padding-left: 1em; } #str-contents .contentsWrapper .noticeList, #contents-body .contentsWrapper .noticeList { margin-top: 0.5em; } #str-contents .contentsWrapper .noticeList li, #contents-body .contentsWrapper .noticeList li { padding-left: 1em; text-indent: -1em; line-height: 1.7; } #str-contents .contentsWrapper .noticeList li::before, #contents-body .contentsWrapper .noticeList li::before { content: "※"; } #str-contents .contentsWrapper .noticeList li a, #contents-body .contentsWrapper .noticeList li a { color: #0C67C6; text-decoration: underline; } #str-contents .contentsWrapper .noticeList li a:hover, #contents-body .contentsWrapper .noticeList li a:hover { text-decoration: none; } #str-contents .contentsWrapper .bulletList + .noticeList, #str-contents .contentsWrapper .noticeList + .noticeList, #contents-body .contentsWrapper .bulletList + .noticeList, #contents-body .contentsWrapper .noticeList + .noticeList { padding-left: 1em; } #str-contents .contentsWrapper .blueButton, #str-contents .contentsWrapper ul .selected, #contents-body .contentsWrapper .blueButton, #contents-body .contentsWrapper ul .selected { display: block; min-height: 108px; margin-bottom: 20px; font-size: 24px; line-height: 40px; color: white; box-shadow: 0 4px 0 #074B91; background-color: #0C67C6; background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_blue-button.svg"); background-repeat: no-repeat; background-position: right 20px center; cursor: pointer; padding: 0; padding: 20px 55px 20px 25px; } #str-contents .contentsWrapper .blueButton:last-child, #str-contents .contentsWrapper ul .selected:last-child, #contents-body .contentsWrapper .blueButton:last-child, #contents-body .contentsWrapper ul .selected:last-child { margin-bottom: 0; } #str-contents .contentsWrapper .blueButton p, #str-contents .contentsWrapper ul .selected p, #contents-body .contentsWrapper .blueButton p, #contents-body .contentsWrapper ul .selected p { margin-top: 14px; font-feature-settings: initial; } #str-contents .contentsWrapper .blueButton.notSelected, #str-contents .contentsWrapper ul .selected.notSelected, #contents-body .contentsWrapper .blueButton.notSelected, #contents-body .contentsWrapper ul .selected.notSelected { box-shadow: none; background-color: #c1c1c1; } #str-contents .contentsWrapper ul .selected, #contents-body .contentsWrapper ul .selected { line-height: 1.3; } #str-contents .contentsWrapper .indexSelect, #contents-body .contentsWrapper .indexSelect { display: flex; flex-wrap: wrap; } #str-contents .contentsWrapper .indexSelect .blueButton, #contents-body .contentsWrapper .indexSelect .blueButton { display: table; width: 100%; min-height: 120px; align-items: center; padding: 0; } #str-contents .contentsWrapper .indexSelect .blueButton a, #contents-body .contentsWrapper .indexSelect .blueButton a { display: table-cell; font-size: 22px; vertical-align: middle; color: white; padding: 20px 55px 20px 25px; } #str-contents .contentsWrapper .buttonList, #contents-body .contentsWrapper .buttonList { margin: 0 auto 120px auto; } #str-contents .contentsWrapper #selectPurpose, #contents-body .contentsWrapper #selectPurpose { width: calc(100% - 36px); margin-right: 16px; margin-left: 16px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir], #contents-body .contentsWrapper #selectPurpose[data-modeldir] { width: 100%; margin: 0; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 20px; /*[data-modeldir] PayPay割り込み*/ } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper { display: inherit; display: flex; flex-direction: column; grid-row-gap: initial; margin: 0 12px 24px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(5), #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(5) { order: 6; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(6), #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(6) { order: 7; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(7), #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(7) { order: 8; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(8), #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(8) { order: 9; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9), #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9) { order: 5; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9) > div > picture > img, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9) > div > picture > img { /*PayPayアイコン(表示は5番目)*/ /*transform: scale(0.7);*/ } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9) > div > picture > img, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li:nth-of-type(9) > div > picture > img { /*transform: scale(0.6); transform: scale(1); height: 44px;*/ } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] { position: relative; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList { display: none; width: 100%; height: -moz-fit-content; height: fit-content; margin: 0; padding: 7px 7px 15px; background-color: #bfcfe0; border: 2px solid #0c67c6; border-top-width: 0; position: absolute; z-index: 11; overflow: hidden; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList { position: relative; z-index: initial; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 37px; margin: 0; border: 2px solid #0c67c6; border-radius: 2em; background-color: #ffffff; font-size: 16px; color: #0c67c6; font-weight: 700; text-align: center; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 12px; right: 0; width: 16px; height: 8px; transform-origin: center; transform: rotateZ(-45deg); font-size: 12px; font-weight: 700; color: #0c67c6; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels { width: 100%; border-top-width: 0; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels h4, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels h4, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels h4, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels h4 { background-color: #519ef0; border: 2px solid #0c67c6; border-bottom: 1px dotted #0c67c6; text-align: center; color: #ffffff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels h4, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels h4, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels h4, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels h4 { font-size: 18px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul { display: block; margin: 0; border: 2px solid #0c67c6; border-top: none; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li { background-color: #ffffff; padding: 10px 0; font-size: 16px; text-indent: 4em; color: #0c67c6; border-bottom: 1px dotted #0c67c6; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li .smallest, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li .smallest, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li .smallest, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li .smallest { font-size: 12px; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li:last-of-type, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li:last-of-type, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li:last-of-type, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li:last-of-type { border: none; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li[data-selected], #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li[data-selected], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li[data-selected], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li[data-selected] { background-color: #fcf3cb; position: relative; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li[data-selected]::after, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li[data-selected]::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels ul li[data-selected]::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels ul li[data-selected]::after { display: block; width: 20px; height: 16px; content: ""; background-image: url("/mobile/set/data/special/support-channel/img/shared/inline-icon/selected.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; top: 48%; left: 2.5em; transform-origin: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels[data-checked]::after, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels[data-checked]::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .beforeModels[data-checked]::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels[data-checked]::after { display: block; content: "▼"; margin: 2px auto; text-align: center; color: #0c67c6; line-height: 1; transform: scaleX(3); } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted { display: none; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels[data-selectable], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .afterModels[data-selectable] { /*display: list-item;*/ } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted[data-selectable], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] .modelsList .selCompleted[data-selectable] { /*display: flex;*/ } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] .modelsList, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] .modelsList { /*display: block;*/ } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist], #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] { background-image: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist], #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist], #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] { margin-bottom: 10px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div { display: flex; padding: 10px; background-image: initial; background-color: #ffffff; border: 2px solid #0c67c6; border-radius: initial; box-shadow: initial; color: #0c67c6; position: relative; cursor: pointer; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div { min-height: 75px; padding: 9px 12px 9px 0; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div picture, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div picture, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div picture, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div picture { display: flex; justify-content: center; align-items: center; width: 50px; margin-right: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div picture, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div picture, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div picture, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div picture { width: 60px; height: 55px; margin-right: 5px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div h3, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div h3, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div h3, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div h3 { font-size: 24px; font-weight: 700; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div h3, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div h3, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div h3, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div h3 { font-size: 22px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div p, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div p { margin: 0; font-size: 16px; font-weight: 700; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div p, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div p { font-size: 14px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div::after, #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist] > div::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div::after { display: flex; justify-content: center; align-items: center; content: "╋"; font-size: 24px; font-weight: 400; color: #0c67c6; position: absolute; right: 15px; top: 50%; transform-origin: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-nolist] > div::after { display: flex; justify-content: center; align-items: center; content: "┛"; font-size: 29px; font-weight: 400; right: 5px; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div { background-color: #0c67c6; color: #ffffff; } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div picture img, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div picture img { filter: brightness(0) invert(1); } #str-contents .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div::after, #contents-body .contentsWrapper #selectPurpose[data-modeldir] #purposeWrapper li[data-islist][data-sel] > div::after { content: "━"; color: #ffffff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea { width: 100%; margin: 20px 0 10px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt { min-height: initial; margin-bottom: 20px; background-color: #083b71; border-radius: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt { margin-bottom: inherit; padding: 7px 0; font-size: 19px; } } #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt p { font-size: 26px; color: #fff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt p, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt p { font-size: inherit; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt .large, #contents-body .contentsWrapper #selectPurpose[data-modeldir] .operatorMsgArea .operatorMsgArea_txt .large { font-size: inherit; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #selectPurpose ul, #str-contents .contentsWrapper .moreUseful, #str-contents .contentsWrapper .switchThirdPage, #contents-body .contentsWrapper #selectPurpose ul, #contents-body .contentsWrapper .moreUseful, #contents-body .contentsWrapper .switchThirdPage { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper #selectPurpose ul .tType01, #str-contents .contentsWrapper .moreUseful .tType01, #str-contents .contentsWrapper .switchThirdPage .tType01, #contents-body .contentsWrapper #selectPurpose ul .tType01, #contents-body .contentsWrapper .moreUseful .tType01, #contents-body .contentsWrapper .switchThirdPage .tType01 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_config.svg"); background-position: right 10px top 5px, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType01.caseHeading, #str-contents .contentsWrapper .moreUseful .tType01.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType01.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType01.caseHeading, #contents-body .contentsWrapper .moreUseful .tType01.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType01.caseHeading { background-position: right 10px top 5px, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType02, #str-contents .contentsWrapper .moreUseful .tType02, #str-contents .contentsWrapper .switchThirdPage .tType02, #contents-body .contentsWrapper #selectPurpose ul .tType02, #contents-body .contentsWrapper .moreUseful .tType02, #contents-body .contentsWrapper .switchThirdPage .tType02 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_contract.svg"); background-position: right 5px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType02.caseHeading, #str-contents .contentsWrapper .moreUseful .tType02.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType02.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType02.caseHeading, #contents-body .contentsWrapper .moreUseful .tType02.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType02.caseHeading { background-position: right 5px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType03, #str-contents .contentsWrapper .moreUseful .tType03, #str-contents .contentsWrapper .switchThirdPage .tType03, #contents-body .contentsWrapper #selectPurpose ul .tType03, #contents-body .contentsWrapper .moreUseful .tType03, #contents-body .contentsWrapper .switchThirdPage .tType03 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_mailsetting.svg"); background-position: right 30px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType03.caseHeading, #str-contents .contentsWrapper .moreUseful .tType03.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType03.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType03.caseHeading, #contents-body .contentsWrapper .moreUseful .tType03.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType03.caseHeading { background-position: right 30px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType04, #str-contents .contentsWrapper .moreUseful .tType04, #str-contents .contentsWrapper .switchThirdPage .tType04, #contents-body .contentsWrapper #selectPurpose ul .tType04, #contents-body .contentsWrapper .moreUseful .tType04, #contents-body .contentsWrapper .switchThirdPage .tType04 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_talk.svg"); background-position: right 30px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType04.caseHeading, #str-contents .contentsWrapper .moreUseful .tType04.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType04.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType04.caseHeading, #contents-body .contentsWrapper .moreUseful .tType04.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType04.caseHeading { background-position: right 30px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType05, #str-contents .contentsWrapper .moreUseful .tType05, #str-contents .contentsWrapper .switchThirdPage .tType05, #contents-body .contentsWrapper #selectPurpose ul .tType05, #contents-body .contentsWrapper .moreUseful .tType05, #contents-body .contentsWrapper .switchThirdPage .tType05 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_filtering.svg"); background-position: right 40px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType05.caseHeading, #str-contents .contentsWrapper .moreUseful .tType05.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType05.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType05.caseHeading, #contents-body .contentsWrapper .moreUseful .tType05.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType05.caseHeading { background-position: right 40px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType06, #str-contents .contentsWrapper .moreUseful .tType06, #str-contents .contentsWrapper .switchThirdPage .tType06, #contents-body .contentsWrapper #selectPurpose ul .tType06, #contents-body .contentsWrapper .moreUseful .tType06, #contents-body .contentsWrapper .switchThirdPage .tType06 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_data-transfer.svg"); background-position: right 30px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType06.caseHeading, #str-contents .contentsWrapper .moreUseful .tType06.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType06.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType06.caseHeading, #contents-body .contentsWrapper .moreUseful .tType06.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType06.caseHeading { background-position: right 30px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType07, #str-contents .contentsWrapper .moreUseful .tType07, #str-contents .contentsWrapper .switchThirdPage .tType07, #contents-body .contentsWrapper #selectPurpose ul .tType07, #contents-body .contentsWrapper .moreUseful .tType07, #contents-body .contentsWrapper .switchThirdPage .tType07 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_softbank-hikari.svg"); background-position: right 30px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType07.caseHeading, #str-contents .contentsWrapper .moreUseful .tType07.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType07.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType07.caseHeading, #contents-body .contentsWrapper .moreUseful .tType07.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType07.caseHeading { background-position: right 0px center, right 9999px; } #str-contents .contentsWrapper #selectPurpose ul .tType08, #str-contents .contentsWrapper .moreUseful .tType08, #str-contents .contentsWrapper .switchThirdPage .tType08, #contents-body .contentsWrapper #selectPurpose ul .tType08, #contents-body .contentsWrapper .moreUseful .tType08, #contents-body .contentsWrapper .switchThirdPage .tType08 { background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_config.svg"); background-position: right 30px center, right 20px center; } #str-contents .contentsWrapper #selectPurpose ul .tType08.caseHeading, #str-contents .contentsWrapper .moreUseful .tType08.caseHeading, #str-contents .contentsWrapper .switchThirdPage .tType08.caseHeading, #contents-body .contentsWrapper #selectPurpose ul .tType08.caseHeading, #contents-body .contentsWrapper .moreUseful .tType08.caseHeading, #contents-body .contentsWrapper .switchThirdPage .tType08.caseHeading { background-position: right 0px center, right 9999px; } #str-contents .contentsWrapper .moreUseful .tType03, #str-contents .contentsWrapper .moreUseful .tType04, #contents-body .contentsWrapper .moreUseful .tType03, #contents-body .contentsWrapper .moreUseful .tType04 { background-size: 90px; } #str-contents .contentsWrapper .switchThirdPage, #contents-body .contentsWrapper .switchThirdPage { margin-top: 80px; margin-bottom: 120px; } #str-contents .contentsWrapper .commonSearchBox, #contents-body .contentsWrapper .commonSearchBox { display: grid; grid-template-columns: 0.9fr 2.7fr 0.8fr; /* grid-gap: 20px;*/ grid-column-gap: 20px; background-color: #0C67C6; padding-left: 130px; padding-right: 130px; margin-bottom: 20px; height: 70px; align-items: center; z-index: 11; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .commonSearchBox, #contents-body .contentsWrapper .commonSearchBox { padding-left: 30px; padding-right: 30px; } } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .commonSearchBox, #contents-body .contentsWrapper .commonSearchBox { grid-template-columns: 0.9fr 2.7fr 0.8fr; } } #str-contents .contentsWrapper .commonSearchBox .toTop, #contents-body .contentsWrapper .commonSearchBox .toTop { display: flex; justify-content: center; align-items: center; max-width: 136px; height: 45px; background-color: #fff; border-radius: 8px; font-size: 24px; white-space: nowrap; margin-right: 10px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .commonSearchBox .toTop, #contents-body .contentsWrapper .commonSearchBox .toTop { font-size: 20px; } } #str-contents .contentsWrapper .commonSearchBox h1, #contents-body .contentsWrapper .commonSearchBox h1 { font-size: 40px; color: #FFF; white-space: nowrap; margin-right: 10px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .commonSearchBox h1, #contents-body .contentsWrapper .commonSearchBox h1 { font-size: 28px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox h1, #contents-body .contentsWrapper .commonSearchBox h1 { color: #2d2d2d; } } #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap { display: flex; flex-direction: column; padding-right: 8px; padding-left: 8px; width: 100%; background-color: #fff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap .clearAll { margin-left: auto; font-size: 16px; margin-top: 12px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount { font-size: 16px; margin-bottom: 15px; } } #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span { font-size: 32px; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span { font-size: 28px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .commonSearchBox .searchResultH2Wrap .movieCount span { font-size: 20px; margin-bottom: 10px; } } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap { max-width: 940px; width: 100%; height: 45px; position: relative; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox .searchInputWrap, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap { height: 53px; } } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap input, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap input { width: 100%; height: 100%; border-radius: 8px; border: 0px; padding-left: 70px; font-size: 22px; padding-right: 100px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .commonSearchBox .searchInputWrap input, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap input { padding-left: 40px; font-size: 22px; } } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap button, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap button { width: 88px; height: 41px; position: absolute; right: 3px; top: 2px; text-align: center; background-color: #2357BA; color: #FFF; font-size: 24px; border: none; border-radius: 8px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .commonSearchBox .searchInputWrap button, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap button { right: 22px; } } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap img, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap img { position: absolute; left: 12px; top: 10px; width: 26px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .commonSearchBox .searchInputWrap img, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap img { width: 20px; } } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap + ul, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap + ul { display: flex; align-items: stretch; } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap + ul li, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap + ul li { height: 40px; display: flex; justify-content: center; align-items: center; } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap + ul li a, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap + ul li a { display: flex; justify-content: center; align-items: center; width: 13em; height: 100%; position: relative; justify-content: center; background-color: #ffffff; border-radius: 2em; color: #777777; } #str-contents .contentsWrapper .commonSearchBox .searchInputWrap + ul li a::after, #contents-body .contentsWrapper .commonSearchBox .searchInputWrap + ul li a::after { display: flex; justify-content: center; align-items: center; content: "┛"; width: 1.333em; height: 0.667em; font-size: 16px; font-weight: 700; color: #777777; position: absolute; top: 50%; right: -0.25em; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); } #str-contents .contentsWrapper .commonSearchBox .textWrap, #contents-body .contentsWrapper .commonSearchBox .textWrap { padding-right: 17px; padding-left: 17px; padding-top: 15px; padding-bottom: 15px; width: 100%; background-color: #fff; } #str-contents .contentsWrapper .commonSearchBox .textWrap p, #contents-body .contentsWrapper .commonSearchBox .textWrap p { font-size: 14px; text-align: center; } #str-contents .contentsWrapper .subPageNavi, #str-contents .contentsWrapper *[class^=subPageNavi], #contents-body .contentsWrapper .subPageNavi, #contents-body .contentsWrapper *[class^=subPageNavi] { background-color: #ecf0f4; margin-right: 0px; margin-left: 0px; } #str-contents .contentsWrapper .subPageNavi div, #str-contents .contentsWrapper *[class^=subPageNavi] div, #contents-body .contentsWrapper .subPageNavi div, #contents-body .contentsWrapper *[class^=subPageNavi] div { display: flex; height: 100%; background-repeat: no-repeat; background-position: left 20px bottom; padding: 5px 20px 5px 20px; align-items: center; max-width: 950px; margin: 0 auto; } #str-contents .contentsWrapper .subPageNavi div h1, #str-contents .contentsWrapper *[class^=subPageNavi] div h1, #contents-body .contentsWrapper .subPageNavi div h1, #contents-body .contentsWrapper *[class^=subPageNavi] div h1 { min-width: 4.5em; font-size: 16px; color: #333; border: none; margin: 0; padding: 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi div h1, #str-contents .contentsWrapper *[class^=subPageNavi] div h1, #contents-body .contentsWrapper .subPageNavi div h1, #contents-body .contentsWrapper *[class^=subPageNavi] div h1 { margin-right: auto; margin-left: auto; } } #str-contents .contentsWrapper .subPageNavi div ul, #str-contents .contentsWrapper *[class^=subPageNavi] div ul, #contents-body .contentsWrapper .subPageNavi div ul, #contents-body .contentsWrapper *[class^=subPageNavi] div ul { display: flex; margin-left: auto; align-items: stretch; } #str-contents .contentsWrapper .subPageNavi div ul li, #str-contents .contentsWrapper *[class^=subPageNavi] div ul li, #contents-body .contentsWrapper .subPageNavi div ul li, #contents-body .contentsWrapper *[class^=subPageNavi] div ul li { min-width: 9.5em; margin-left: 8px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi div ul li, #str-contents .contentsWrapper *[class^=subPageNavi] div ul li, #contents-body .contentsWrapper .subPageNavi div ul li, #contents-body .contentsWrapper *[class^=subPageNavi] div ul li { min-width: 4.5em; } } #str-contents .contentsWrapper .subPageNavi div ul li:first-child, #str-contents .contentsWrapper *[class^=subPageNavi] div ul li:first-child, #contents-body .contentsWrapper .subPageNavi div ul li:first-child, #contents-body .contentsWrapper *[class^=subPageNavi] div ul li:first-child { margin: 0; } #str-contents .contentsWrapper .subPageNavi div ul li a, #str-contents .contentsWrapper *[class^=subPageNavi] div ul li a, #contents-body .contentsWrapper .subPageNavi div ul li a, #contents-body .contentsWrapper *[class^=subPageNavi] div ul li a { display: flex; height: 100%; border-radius: 6px; text-decoration: none; color: inherit; background-color: white; align-items: center; padding: 2px 9px; } #str-contents .contentsWrapper .subPageNavi div ul li a span, #str-contents .contentsWrapper *[class^=subPageNavi] div ul li a span, #contents-body .contentsWrapper .subPageNavi div ul li a span, #contents-body .contentsWrapper *[class^=subPageNavi] div ul li a span { width: 100%; font-size: 13px; line-height: 18px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] h1, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] h1, #contents-body .contentsWrapper .subPageNavi[data-newnavi] h1, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 { margin: 0; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] h1 img, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 img, #contents-body .contentsWrapper .subPageNavi[data-newnavi] h1 img, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 img { width: 48px; margin-right: 1em; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] h1 img, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 img, #contents-body .contentsWrapper .subPageNavi[data-newnavi] h1 img, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 img { width: 36px; margin-right: 0.333em; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] h1 span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] h1 span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 span { font-size: 34px; color: #0c67c6; font-weight: 700; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] h1 span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] h1 span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] h1 span { font-size: 28px; line-height: 1; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] > div, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] > div, #contents-body .contentsWrapper .subPageNavi[data-newnavi] > div, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] > div { height: initial; padding: 5px 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] > div, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] > div, #contents-body .contentsWrapper .subPageNavi[data-newnavi] > div, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] > div { padding: 0; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] > div, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] > div, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul, #contents-body .contentsWrapper .subPageNavi[data-newnavi] > div, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] > div, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul { padding: 10px; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] li a, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a { width: 13em; position: relative; justify-content: center; border-radius: 2em; color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] li a, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a { width: 150px; padding: 4px 8px; font-size: 13px; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] li a span, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li a span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li a span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li a span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span { font-size: inherit; text-align: center; margin-right: 0.3em; white-space: nowrap; } #str-contents .contentsWrapper .subPageNavi[data-newnavi] li a::after, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a::after, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li a::after, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a::after, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li a::after, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a::after, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li a::after, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a::after { display: flex; justify-content: center; align-items: center; content: "┛"; width: 1.333em; height: 0.667em; font-size: 16px; font-weight: 700; color: #777777; position: absolute; top: 50%; right: 1.5%; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] li a::after, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a::after, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li a::after, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a::after, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li a::after, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a::after, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li a::after, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a::after { font-size: 12px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] li, #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] li, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul, #contents-body .contentsWrapper .subPageNavi[data-newnavi] li, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] li, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul { width: -moz-fit-content; width: fit-content; margin-left: auto; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul { margin-top: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul { margin-top: inherit; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li { height: 60px; max-width: 950px; margin: 0 auto; padding: 0 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li { height: inherit; max-width: initial; margin: inherit; padding: 0; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a { display: flex; height: 2.5em; margin-left: auto; text-decoration: none; color: #777777; background-color: #ecf0f4; align-items: center; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a { height: 100%; margin-left: inherit; padding: 2px 9px; } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span { color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a span, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a span { transform: translateX(-4.5px); } } #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a img, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a img, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a img, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a img { width: 30px; transform: translateX(-5px); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .subPageNavi[data-newnavi] + ul li a img, #str-contents .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a img, #contents-body .contentsWrapper .subPageNavi[data-newnavi] + ul li a img, #contents-body .contentsWrapper *[class^=subPageNavi][data-newnavi] + ul li a img { width: auto; } } #str-contents .contentsWrapper .mainTitleArea.bgNone, #contents-body .contentsWrapper .mainTitleArea.bgNone { background-color: unset; border-radius: unset; } #str-contents .contentsWrapper .mainTitleArea.model, #contents-body .contentsWrapper .mainTitleArea.model { max-width: 820px; color: #0C67C6; } #str-contents .contentsWrapper .mainTitleArea, #contents-body .contentsWrapper .mainTitleArea { max-width: 1200px; width: calc(100% - 120px); margin-right: 25px; margin-left: 25px; background-color: #F0F0F0; border-radius: 16px 16px 16px 16px; padding: 0; margin-bottom: 40px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea, #contents-body .contentsWrapper .mainTitleArea { width: 100%; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; border-radius: 0px; background-color: unset; } } #str-contents .contentsWrapper .mainTitleArea .titleWrap, #contents-body .contentsWrapper .mainTitleArea .titleWrap { height: 70px; border-radius: 16px 16px 0px 0px; background-color: #0C67C6; display: flex; justify-content: center; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap, #contents-body .contentsWrapper .mainTitleArea .titleWrap { font-size: 30px; height: 60px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap, #contents-body .contentsWrapper .mainTitleArea .titleWrap { height: 82px; border-radius: 0px; background-color: #fff; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap img.h1LogoImg, #contents-body .contentsWrapper .mainTitleArea .titleWrap img.h1LogoImg { width: 50px; margin: 0; margin-right: 10px; } } #str-contents .contentsWrapper .mainTitleArea .titleWrap .h1Wrap, #contents-body .contentsWrapper .mainTitleArea .titleWrap .h1Wrap { display: flex; flex-wrap: wrap; white-space: nowrap; align-items: center; color: #FFF; font-size: 36px; line-height: 1; padding: 0 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap .h1Wrap, #contents-body .contentsWrapper .mainTitleArea .titleWrap .h1Wrap { color: #2357BA; } } #str-contents .contentsWrapper .mainTitleArea .titleWrap .h1Wrap img, #contents-body .contentsWrapper .mainTitleArea .titleWrap .h1Wrap img { width: 115px; height: 82px; } #str-contents .contentsWrapper .mainTitleArea .titleWrap .h1Wrap span, #contents-body .contentsWrapper .mainTitleArea .titleWrap .h1Wrap span { color: #E8706C; font-size: 16px; margin-right: 20px; margin-bottom: 5px; flex-basis: 100%; } #str-contents .contentsWrapper .mainTitleArea .titleWrap h1, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 { display: flex; justify-content: center; align-items: center; font-size: 30px; height: 100%; font-size: 50px; line-height: 54px; color: #FFF; border: none; padding: 0 24px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap h1, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 { font-size: 30px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap h1, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 { margin-bottom: 0; } } #str-contents .contentsWrapper .mainTitleArea .titleWrap h1 img, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 img { display: block; margin: 0 auto 0 auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap h1 img, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 img { width: 40px; margin: auto; } } #str-contents .contentsWrapper .mainTitleArea .titleWrap h1 span, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 span { color: #F0CC69; font-size: 20px; margin-right: 10px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .titleWrap h1 span, #contents-body .contentsWrapper .mainTitleArea .titleWrap h1 span { font-size: 20px; } } #str-contents .contentsWrapper .mainTitleArea figure, #contents-body .contentsWrapper .mainTitleArea figure { min-height: 60px; margin-top: 30px; background: url("/mobile/set/data/special/support-channel/img/shared/loader.gif") no-repeat center center; background-size: 60px 60px; } #str-contents .contentsWrapper .mainTitleArea .mainHeaderDescription, #contents-body .contentsWrapper .mainTitleArea .mainHeaderDescription { margin-bottom: 10px; font-size: 18px; line-height: 32px; } #str-contents .contentsWrapper .mainTitleArea .searchBox, #contents-body .contentsWrapper .mainTitleArea .searchBox { position: relative; margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox, #contents-body .contentsWrapper .mainTitleArea .searchBox { margin-top: 0; width: 100%; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap { position: relative; max-width: 1184px; width: calc(100% - 50px); height: 65px; margin-top: 20px; border-radius: 4px; margin-left: 25px; margin-right: 25px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap { height: 60px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap { background: #0C67C6; margin-top: 0px; display: flex; justify-content: center; align-items: center; margin-right: 0px; width: 100%; margin-left: 0px; padding-right: 15px; padding-left: 15px; order: 0; border-radius: 0px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img { position: absolute; top: 14px; left: 20px; width: 37px; height: 37px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img { top: 12px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap img { width: 20px; height: 20px; top: 20px; left: 23px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input { text-align: left; width: 100%; height: 100%; box-sizing: border-box; padding-left: 85px; font-size: 24px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input { height: 34px; font-size: 16px; border-radius: 8px; padding-left: 36px; } } @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input[type=search]::-webkit-input-placeholder, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap input[type=search]::-webkit-input-placeholder { transform: translateY(-20%); line-height: 2; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button { position: absolute; right: 0; top: 0; width: 132px; height: 100%; background-color: #2357BA; color: #FFF; font-size: 25px; border: 0px; border-radius: 4px; text-align: center; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button { font-size: 22px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button, #contents-body .contentsWrapper .mainTitleArea .searchBox .searchInputWrap button { height: 30px; width: 60px; border-radius: 6px; top: 15px; right: 17px; font-size: 16px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap { display: flex; align-items: center; margin-top: 28px; width: calc(100% - 50px); max-width: 1184px; margin-right: 25px; margin-left: 25px; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap { flex-wrap: wrap; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap { /*order: 2;*/ margin-top: 10px; margin-bottom: 10px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title { margin-right: 25px; flex-shrink: 0; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title { margin-bottom: 10px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p { color: #0C67C6; font-size: 24px; font-weight: bold; margin: 0; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .title p { font-size: 16px; color: #333; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer { display: flex; align-items: center; flex-wrap: wrap; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer { margin-bottom: 10px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer span, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer span { cursor: pointer; color: #424242; padding: 0.05em 1em; border-radius: 2em; margin: 4px 7px 4px 0; font-size: 16px; font-weight: 700; background-color: #ffffff; background-color: #ecf0f4; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer span, #contents-body .contentsWrapper .mainTitleArea .searchBox .frequentWordWrap .tagContainer span { background-color: #ecf0f4; margin-bottom: 8px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea { background-color: #88AFEA; border-radius: 0px 0px 16px 16px; color: #FFF; margin-top: 12px; flex-wrap: wrap; margin-top: 33px; height: 50px; width: 100%; overflow-y: hidden; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea { order: 1; margin-top: 8.5px; border-radius: 0px; height: 46px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton { display: flex; justify-content: center; align-items: center; cursor: pointer; padding-top: 5px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton { padding-top: 12px; padding-bottom: 12px; margin-bottom: 14px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p { margin: 0; font-size: 20px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton p { font-size: 16px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a { color: inherit; text-decoration: none; font-size: 24px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a { font-size: 18px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a:visited, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton a:visited { color: #FFF !important; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton img, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .toggleButton img { margin-left: 5px; width: 16px; height: 16px; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap { flex-basis: 100%; display: flex; margin-left: 130px; margin-right: 130px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap { margin-right: 8px; margin-left: 8px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a { display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; color: #FFF; width: 100%; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a { width: 100%; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img { margin-right: 5px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img { width: 51px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img.toggle_arrow, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a img.toggle_arrow { margin-left: auto; margin-right: 8px; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a:visited, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap a:visited { color: #FFF !important; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap:not(:last-child), #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea .linkWrap:not(:last-child) { border-bottom: 1px solid #9CBAFD; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea #toggle_plus, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea #toggle_plus { display: block; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea #toggle_minus, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea #toggle_minus { display: none; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea.active, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea.active { height: 240px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea.active, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea.active { height: 172px; } } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea.active #toggle_plus, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea.active #toggle_plus { display: none; } #str-contents .contentsWrapper .mainTitleArea .searchBox .toggleArea.active #toggle_minus, #contents-body .contentsWrapper .mainTitleArea .searchBox .toggleArea.active #toggle_minus { display: block; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea.commonSearchBox, #contents-body .contentsWrapper .mainTitleArea.commonSearchBox { display: flex; flex-wrap: wrap; height: auto; } } #str-contents .contentsWrapper .mainTitleArea + .listContainer, #contents-body .contentsWrapper .mainTitleArea + .listContainer { margin: 30px auto; display: table; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea + .listContainer, #contents-body .contentsWrapper .mainTitleArea + .listContainer { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .mainTitleArea + .listContainer *, #contents-body .contentsWrapper .mainTitleArea + .listContainer * { text-align: justify; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .mainTitleArea + .listContainer *, #contents-body .contentsWrapper .mainTitleArea + .listContainer * { text-align: initial; } } #str-contents .contentsWrapper .mainTitleArea + .listContainer a, #contents-body .contentsWrapper .mainTitleArea + .listContainer a { font-size: inherit; } #str-contents .contentsWrapper .mainTitleArea + .listContainer ul + p, #str-contents .contentsWrapper .mainTitleArea + .listContainer ol + p, #contents-body .contentsWrapper .mainTitleArea + .listContainer ul + p, #contents-body .contentsWrapper .mainTitleArea + .listContainer ol + p { margin-top: 30px; } #str-contents .contentsWrapper .titleWrapCommonSp, #contents-body .contentsWrapper .titleWrapCommonSp { width: 100%; height: 50px; background-color: #e9e9e9; display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 50px; place-items: center; } #str-contents .contentsWrapper .titleWrapCommonSp h1, #contents-body .contentsWrapper .titleWrapCommonSp h1 { font-size: 18px; margin: 0; padding: 0; border-bottom: 0px; grid-row: 1; } #str-contents .contentsWrapper .titleWrapCommonSp .h1LogoImg, #contents-body .contentsWrapper .titleWrapCommonSp .h1LogoImg { width: 40px; grid-row: 1; } #str-contents .contentsWrapper .titleWrapCommonSp .flex, #contents-body .contentsWrapper .titleWrapCommonSp .flex { display: flex; align-items: center; grid-row: 1; } #str-contents .contentsWrapper .titleWrapCommonSp .flex a, #contents-body .contentsWrapper .titleWrapCommonSp .flex a { width: 73px; height: 40px; background-color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-align: center; } #str-contents .contentsWrapper .titleWrapCommonSp .flex a:first-child, #contents-body .contentsWrapper .titleWrapCommonSp .flex a:first-child { margin-right: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #mainHeading.main, #contents-body .contentsWrapper #mainHeading.main { font-size: 25px; color: #0C67C6; margin-bottom: 17px; margin-top: 20px; } } #str-contents .contentsWrapper #mainHeading.fdCol, #contents-body .contentsWrapper #mainHeading.fdCol { display: flex; align-items: center; flex-direction: column; } #str-contents .contentsWrapper #mainHeading.sub, #contents-body .contentsWrapper #mainHeading.sub { margin-bottom: 5px; font-size: 26px; line-height: 40px; word-break: break-all; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #mainHeading.sub, #contents-body .contentsWrapper #mainHeading.sub { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper #mainHeading.sub span, #contents-body .contentsWrapper #mainHeading.sub span { display: table; border-radius: 1000px; line-height: 18px; color: white; background-color: #0C67C6; margin: 0 auto 10px auto; padding: 7px 15px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #mainHeading.sub span, #contents-body .contentsWrapper #mainHeading.sub span { margin-left: 0px; border-radius: 5px; } } #str-contents .contentsWrapper #mainHeading .iPhoneTitle, #contents-body .contentsWrapper #mainHeading .iPhoneTitle { margin-bottom: 15px; } #str-contents .contentsWrapper #mainHeading img.h1LogoImg, #contents-body .contentsWrapper #mainHeading img.h1LogoImg { width: 40px; } #str-contents .contentsWrapper #mainHeading + .switchBox, #contents-body .contentsWrapper #mainHeading + .switchBox { margin: 0 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #mainHeading + .switchBox, #contents-body .contentsWrapper #mainHeading + .switchBox { margin-bottom: 10px; } } #str-contents .contentsWrapper #mainHeading + .switchBox li, #contents-body .contentsWrapper #mainHeading + .switchBox li { font-size: 18px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper #mainHeading + .switchBox li, #contents-body .contentsWrapper #mainHeading + .switchBox li { font-size: 14px; } } #str-contents .contentsWrapper #mainHeading + .switchBox li a, #contents-body .contentsWrapper #mainHeading + .switchBox li a { font-size: inherit; color: #2378a3; } #str-contents .contentsWrapper .blueSection, #contents-body .contentsWrapper .blueSection { background-color: #0C67C6; height: 438px; padding-top: 105px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .blueSection, #contents-body .contentsWrapper .blueSection { height: 186px; padding-top: 38px; padding-bottom: 38px; box-sizing: content-box; } } #str-contents .contentsWrapper .blueSection .radiusBtn, #contents-body .contentsWrapper .blueSection .radiusBtn { border-radius: 78px; max-width: 1194px; width: calc(100% - 50px); margin-right: 25px; margin-left: 25px; height: 153px; margin-bottom: 50px; background-color: #FFF; border: 5px solid #c5c5c5; position: relative; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .blueSection .radiusBtn, #contents-body .contentsWrapper .blueSection .radiusBtn { height: 80px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .blueSection .radiusBtn, #contents-body .contentsWrapper .blueSection .radiusBtn { height: 94px; margin-bottom: 40px; } } #str-contents .contentsWrapper .blueSection .radiusBtn a, #contents-body .contentsWrapper .blueSection .radiusBtn a { font-size: 36px; font-weight: bold; display: flex; align-items: center; justify-content: center; height: 100%; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .blueSection .radiusBtn a, #contents-body .contentsWrapper .blueSection .radiusBtn a { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .blueSection .radiusBtn a, #contents-body .contentsWrapper .blueSection .radiusBtn a { font-size: 17px; } } #str-contents .contentsWrapper .blueSection .radiusBtn svg, #contents-body .contentsWrapper .blueSection .radiusBtn svg { position: absolute; right: 60px; width: 50px; height: 50px; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .blueSection .radiusBtn svg, #contents-body .contentsWrapper .blueSection .radiusBtn svg { right: 10px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .blueSection .radiusBtn svg, #contents-body .contentsWrapper .blueSection .radiusBtn svg { right: 10px; width: 30px; height: 30px; } } #str-contents .contentsWrapper .blueSection p, #contents-body .contentsWrapper .blueSection p { color: #FFF; font-size: 29px; width: calc(100% - 50px); } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .blueSection p, #contents-body .contentsWrapper .blueSection p { font-size: 18px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .blueSection p, #contents-body .contentsWrapper .blueSection p { margin-right: 25px; margin-left: 25px; font-size: 4vw; } } #str-contents .contentsWrapper .operatorMsgArea, #contents-body .contentsWrapper .operatorMsgArea { display: flex; margin-bottom: 30px; align-items: flex-end; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .operatorMsgArea, #contents-body .contentsWrapper .operatorMsgArea { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt { display: flex; width: 100%; min-height: 80px; position: relative; background-color: #FCF6CA; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px 20px; color: #424242; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt { background-color: #67C7D4; color: #FFF; } } #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p { width: 100%; z-index: 5; } #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p + p, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p + p { margin-top: 1em; } #str-contents .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p.indent, #contents-body .contentsWrapper .operatorMsgArea .operatorMsgArea_txt p.indent { margin-left: 1em; text-indent: -1em; } @media all and (-ms-high-contrast: none) { #str-contents .contentsWrapper .operatorMsgArea .contentsWrapper:not(.guidePage) .operatorMsgArea_txt, #contents-body .contentsWrapper .operatorMsgArea .contentsWrapper:not(.guidePage) .operatorMsgArea_txt { min-height: auto; height: 80px; } } #str-contents .contentsWrapper .operatorMsgArea.verticalArea, #contents-body .contentsWrapper .operatorMsgArea.verticalArea { display: block; position: relative; padding-right: 30px; margin: 0 0 50px 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .operatorMsgArea.verticalArea, #contents-body .contentsWrapper .operatorMsgArea.verticalArea { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt, #contents-body .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt { width: 100%; padding: 20px; } #str-contents .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt p, #contents-body .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt p { position: relative; line-height: 30px; } #str-contents .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt::after, #contents-body .contentsWrapper .operatorMsgArea.verticalArea .operatorMsgArea_txt::after { top: auto; right: 130px; bottom: -42px; border-width: 25px; border-color: transparent #FCF6CA transparent transparent; } #str-contents .contentsWrapper .operatorMsgArea.verticalArea img:not(.inline_icon), #contents-body .contentsWrapper .operatorMsgArea.verticalArea img:not(.inline_icon) { position: absolute; right: 0; bottom: -50px; } #str-contents .contentsWrapper #questionnaire_box, #contents-body .contentsWrapper #questionnaire_box { display: none; margin-top: 80px; padding: 60px 20px; } #str-contents .contentsWrapper #questionnaire_box p, #contents-body .contentsWrapper #questionnaire_box p { font-size: 22px; } #str-contents .contentsWrapper #questionnaire_box ul, #contents-body .contentsWrapper #questionnaire_box ul { display: flex; margin-top: 30px; justify-content: center; } #str-contents .contentsWrapper #questionnaire_box ul li, #contents-body .contentsWrapper #questionnaire_box ul li { display: table; width: 120px; height: 40px; } #str-contents .contentsWrapper #questionnaire_box ul li a, #contents-body .contentsWrapper #questionnaire_box ul li a { display: table-cell; font-size: 18px; text-align: center; vertical-align: middle; } #str-contents .contentsWrapper #questionnaire_box ul li:first-child, #contents-body .contentsWrapper #questionnaire_box ul li:first-child { margin-right: 30px; background-color: #0C67C6; } #str-contents .contentsWrapper #questionnaire_box ul li:first-child a, #contents-body .contentsWrapper #questionnaire_box ul li:first-child a { color: white; } #str-contents .contentsWrapper #questionnaire_box ul li + li, #contents-body .contentsWrapper #questionnaire_box ul li + li { border: 2px solid #0C67C6; background-color: white; } #str-contents .contentsWrapper #questionnaire_box ul li + li a, #contents-body .contentsWrapper #questionnaire_box ul li + li a { color: #0C67C6; } #str-contents .contentsWrapper .operationMethodArea, #contents-body .contentsWrapper .operationMethodArea { margin-bottom: 80px; background-color: #FCF6CA; background-image: url("/mobile/set/data/special/support-channel/img/shared/operator/operator_02.svg"); background-repeat: no-repeat; background-position: right 20px bottom 0; padding: 40px 20px 20px 20px; } #str-contents .contentsWrapper .operationMethodArea h2, #contents-body .contentsWrapper .operationMethodArea h2 { border-radius: 100px; background-color: white; } #str-contents .contentsWrapper .operationMethodArea h2 a, #contents-body .contentsWrapper .operationMethodArea h2 a { display: block; border-radius: 100px; text-decoration: none; color: inherit; border: #555 solid 3px; box-shadow: 0 4px 0 #c1c1c1; background-image: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_gray-arrow.svg"); background-repeat: no-repeat; background-position: right 15px center; padding: 10px 25px; } #str-contents .contentsWrapper .operationMethodArea p, #contents-body .contentsWrapper .operationMethodArea p { min-height: 72px; margin: 20px 130px 0 0; } #str-contents .contentsWrapper .selected + .hideArea, #contents-body .contentsWrapper .selected + .hideArea { max-height: 1000px; overflow: visible; } #str-contents .contentsWrapper .hideArea, #contents-body .contentsWrapper .hideArea { height: auto; margin-bottom: 120px; max-height: 0px; overflow: hidden; transition: all 0.5s ease-out; } #str-contents .contentsWrapper .hideArea::before, #contents-body .contentsWrapper .hideArea::before { display: block; width: 0; height: 0; border-top: 24px solid #0C67C6; border-right: 45px solid transparent; border-bottom: 24px solid transparent; border-left: 45px solid transparent; content: ""; margin: 45px auto 8px auto; } #str-contents .contentsWrapper .hideArea .customSelect, #contents-body .contentsWrapper .hideArea .customSelect { position: relative; z-index: 10; padding-bottom: 90px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .hideArea .customSelect, #contents-body .contentsWrapper .hideArea .customSelect { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .hideArea .customSelect h2, #contents-body .contentsWrapper .hideArea .customSelect h2 { color: #555; } #str-contents .contentsWrapper .hideArea .customSelect:last-child, #contents-body .contentsWrapper .hideArea .customSelect:last-child { padding-bottom: 40px; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox { width: 100%; max-height: 52px; border-radius: 8px; position: absolute; top: 40px; left: 0; z-index: 0; box-shadow: 0 4px 0 #074B91; background-color: white; overflow: hidden; transition: all 0.5s ease-out; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox.disabled, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox.disabled { box-shadow: none; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox.disabled li:first-child, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox.disabled li:first-child { background-color: #c1c1c1; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox li, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox li { display: flex; min-height: 54px; position: relative; color: #0C67C6; border-bottom: 2px solid #EAEAEA; background-color: white; padding: 12px; align-items: baseline; justify-content: center; flex-wrap: wrap; transition: 0.3s; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox li:first-child, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox li:first-child { color: white; border-bottom: none; background-color: #0C67C6; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox li:first-child::before, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox li:first-child::before { display: block; position: absolute; top: 50%; right: 18px; line-height: 1; content: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_blue-button.svg"); transform: rotate(90deg) translateY(-50%); transform-origin: center top; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox li:last-child, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox li:last-child { border-bottom: none; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox.focus, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox.focus { max-height: 300px; box-shadow: 0 2px 0 #c1c1c1; } #str-contents .contentsWrapper .hideArea .customSelect .customSelectBox.focus li:first-child::before, #contents-body .contentsWrapper .hideArea .customSelect .customSelectBox.focus li:first-child::before { transform: rotate(-90deg) translateY(-50%); } #str-contents .contentsWrapper .hideArea .customSelect + .customSelect, #contents-body .contentsWrapper .hideArea .customSelect + .customSelect { z-index: 5; } #str-contents .contentsWrapper *[id^=anotherMovieList], #contents-body .contentsWrapper *[id^=anotherMovieList] { display: flex; flex-wrap: nowrap; max-height: 454px; height: 100%; width: 100%; max-width: 1280px; margin-right: auto; margin-left: auto; margin-bottom: 105px; position: relative; overflow: inherit; font-size: 10px; justify-content: center; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper *[id^=anotherMovieList], #contents-body .contentsWrapper *[id^=anotherMovieList] { height: auto; margin-bottom: 30px; } } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-track, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-track { height: 100%; } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-arrow, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-arrow { width: 62px; height: 62px; } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-prev, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-prev { position: absolute; left: -29px; top: 130px; border: 0px; z-index: 10; } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-next, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-next { position: absolute; right: -29px; top: 130px; border: 0px; z-index: 10; } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-slide, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-slide { margin: 0 12.5px; } #str-contents .contentsWrapper *[id^=anotherMovieList] .slick-list, #contents-body .contentsWrapper *[id^=anotherMovieList] .slick-list { margin: 0 -12.5px; } #str-contents .contentsWrapper *[id^=anotherMovieList] li, #contents-body .contentsWrapper *[id^=anotherMovieList] li { max-width: 526px; max-width: 372px; max-width: 346px; width: 100%; max-height: 448px; max-height: 210px; margin-right: 25px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); box-sizing: content-box; } #str-contents .contentsWrapper *[id^=anotherMovieList] li:nth-last-child(2), #contents-body .contentsWrapper *[id^=anotherMovieList] li:nth-last-child(2) { border-bottom: 2px solid #EAEAEA; } @media screen and (max-width: 1320px) { #str-contents .contentsWrapper *[id^=anotherMovieList] li, #contents-body .contentsWrapper *[id^=anotherMovieList] li { max-width: 300px; } } #str-contents .contentsWrapper *[id^=anotherMovieList] li a, #contents-body .contentsWrapper *[id^=anotherMovieList] li a { text-decoration: none; max-width: 526px; height: 100%; color: #333; } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .imageWrap, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .imageWrap { max-height: 296px; width: 100%; overflow: hidden; text-align: left; border-radius: 0; border: 1px solid #c1c1c1; border: none; } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .imageWrap img, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .imageWrap img { max-height: 301px; width: 100%; -o-object-fit: cover; object-fit: cover; } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .imageWrap + div h3, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .imageWrap + div h3 { font-size: 20px; margin-bottom: 1em; font-weight: 600; line-height: 26px; } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .imageWrap + div h3 span, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .imageWrap + div h3 span { font-size: inherit; margin-bottom: 5px; } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap { width: 100%; max-height: 156px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap { height: 130px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap { height: auto; max-height: 105px; overflow: hidden; } } #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap p, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap p { display: -webkit-box; font-size: 1.4vw; padding: 10px 21px; height: 156px; word-break: break-all; line-height: 1.4; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap p, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap p { font-size: 20px; padding: 1.2vh 21px; height: 130px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper *[id^=anotherMovieList] li a .textWrap p, #contents-body .contentsWrapper *[id^=anotherMovieList] li a .textWrap p { font-size: 14px; padding: 1.2vh 11px; } } #str-contents .contentsWrapper .movieCategory, #contents-body .contentsWrapper .movieCategory { font-size: 24px; max-width: 1300px; margin-right: auto; margin-left: auto; width: calc(100% - 20px); margin-bottom: 10px; } #str-contents .contentsWrapper .movieListContainer, #contents-body .contentsWrapper .movieListContainer { margin-bottom: 221px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer, #contents-body .contentsWrapper .movieListContainer { margin-bottom: 92px; } } #str-contents .contentsWrapper .movieListContainer #h2logo, #contents-body .contentsWrapper .movieListContainer #h2logo { width: 50px; margin-right: 10px; } #str-contents .contentsWrapper .movieListContainer .newwindowicon, #contents-body .contentsWrapper .movieListContainer .newwindowicon { display: none; } #str-contents .contentsWrapper .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper .movieListContainer .h3TitleOtherVideos { font-size: 32px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer .movieCategory, #contents-body .contentsWrapper .movieListContainer .movieCategory { margin-left: 24px; margin-right: 24px; margin-top: 30px; margin-bottom: 12px; font-size: 18px; } } #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap, #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap { padding-right: 0px; padding-left: 0px; } #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 25px; grid-row-gap: 25px; max-height: unset; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] { grid-template-columns: 1fr; grid-template-columns: 1fr 1fr; -moz-column-gap: 2%; column-gap: 2%; row-gap: 2.5%; } } #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li, #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li { max-width: unset; width: auto; margin-right: 0px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a, #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a { display: grid; grid-template-columns: 183px 1fr; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a .textWrap p, #contents-body .contentsWrapper .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a .textWrap p { height: auto; } } #str-contents .contentsWrapper .movieListContainer .carouselWrap, #contents-body .contentsWrapper .movieListContainer .carouselWrap { padding-right: 50px; padding-left: 50px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer .carouselWrap, #contents-body .contentsWrapper .movieListContainer .carouselWrap { padding-right: 15px; padding-left: 16px; } } #str-contents .contentsWrapper .movieListContainer .carouselWrap .carousel li a, #contents-body .contentsWrapper .movieListContainer .carouselWrap .carousel li a { height: 232px; background: none; padding-right: 0; } #str-contents .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap, #contents-body .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap { min-width: 108px; } #str-contents .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap.landscapeThumbnail, #contents-body .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap.landscapeThumbnail { width: 45%; max-width: -moz-fit-content; max-width: fit-content; overflow: inherit; align-self: center; } #str-contents .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap.landscapeThumbnail img, #contents-body .contentsWrapper .movieListContainer .carouselWrap .carousel li a .imageWrap.landscapeThumbnail img { width: 100%; height: auto; margin: 0; } #str-contents .contentsWrapper .caseHeading, #contents-body .contentsWrapper .caseHeading { display: flex; min-height: 60px; font-size: 20px; color: white; background-color: #0C67C6; background-repeat: no-repeat; background-position: right 20px center; padding: 15px 20px; align-items: center; justify-content: center; } #str-contents .contentsWrapper .caseHeading span, #contents-body .contentsWrapper .caseHeading span { font-size: inherit; } #str-contents .contentsWrapper .firstStep li, #contents-body .contentsWrapper .firstStep li { border-radius: 16px; margin-bottom: 20px; box-shadow: 0 4px 0 #c1c1c1; background-color: white; overflow: hidden; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .firstStep li, #contents-body .contentsWrapper .firstStep li { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .firstStep li a, #contents-body .contentsWrapper .firstStep li a { display: block; background-color: white; background-repeat: no-repeat; background-position: center left 15px; background-size: 64px; } #str-contents .contentsWrapper .firstStep li a h3, #contents-body .contentsWrapper .firstStep li a h3 { display: flex; min-height: 96px; font-size: 20px; line-height: 1.7; color: #0C67C6; background: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_white-button-r.svg") no-repeat center right 15px; background-size: 12px; align-items: center; padding: 20px 50px 20px 90px; } #str-contents .contentsWrapper .firstStep li:last-child, #contents-body .contentsWrapper .firstStep li:last-child { margin-bottom: 0; } #str-contents .contentsWrapper .firstStep[data-index_new], #contents-body .contentsWrapper .firstStep[data-index_new] { margin-bottom: 30px; } #str-contents .contentsWrapper .moreUseful h3, #contents-body .contentsWrapper .moreUseful h3 { font-size: 20px; margin: 70px auto 20px auto; } #str-contents .contentsWrapper .moreUseful + .bgGray, #contents-body .contentsWrapper .moreUseful + .bgGray { margin-top: 80px; } #str-contents .contentsWrapper .moreUseful ul, #contents-body .contentsWrapper .moreUseful ul { margin-bottom: 30px; margin-right: 10px; margin-left: 10px; } #str-contents .contentsWrapper .moreUseful ul li, #contents-body .contentsWrapper .moreUseful ul li { display: table; width: 100%; min-height: 88px; border-bottom: 2px solid #eaeaea; } #str-contents .contentsWrapper .moreUseful ul li.current, #contents-body .contentsWrapper .moreUseful ul li.current { filter: grayscale(100%); } @media screen\0 { #str-contents .contentsWrapper .moreUseful ul li.current, #contents-body .contentsWrapper .moreUseful ul li.current { color: #999; } } #str-contents .contentsWrapper .moreUseful ul li a, #contents-body .contentsWrapper .moreUseful ul li a { display: table-cell; position: relative; font-size: 18px; text-decoration: none; vertical-align: middle; color: #0C67C6; background: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_white-arrow.svg") no-repeat right 5px center; background-size: 24px 24px; padding: 5px 40px 5px 5px; } #str-contents .contentsWrapper .moreUseful h2 + ul li:first-child, #contents-body .contentsWrapper .moreUseful h2 + ul li:first-child { border-top: none; } #str-contents .contentsWrapper #stepNumber, #contents-body .contentsWrapper #stepNumber { display: flex; align-items: center; justify-content: center; margin: 30px auto; } #str-contents .contentsWrapper #stepNumber li, #contents-body .contentsWrapper #stepNumber li { width: 40px; height: 40px; border-radius: 200px; position: relative; font-size: 18px; line-height: 20px; text-align: center; color: white; background: #5AABFF; padding: 10px; list-style: none; } #str-contents .contentsWrapper #stepNumber li:not(:last-child), #contents-body .contentsWrapper #stepNumber li:not(:last-child) { margin-right: 25px; } #str-contents .contentsWrapper #stepNumber li:not(:last-child)::after, #contents-body .contentsWrapper #stepNumber li:not(:last-child)::after { display: block; position: absolute; top: 50%; right: -25px; border-top: 6px solid transparent; border-right: 8px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #5AABFF; content: ""; transform: translateY(-50%); } #str-contents .contentsWrapper #stepNumber li.pic, #contents-body .contentsWrapper #stepNumber li.pic { width: 66px; height: 66px; font-size: 32px; line-height: 32px; background-color: #0C67C6; } #str-contents .contentsWrapper #stepNumber li.pic span, #contents-body .contentsWrapper #stepNumber li.pic span { display: block; font-size: 12px; line-height: 1.4; text-align: center; } #str-contents .contentsWrapper #stepNumber li.pic:not(:last-child)::after, #contents-body .contentsWrapper #stepNumber li.pic:not(:last-child)::after { border-left-color: #0C67C6; } #str-contents .contentsWrapper .anchorNavigation, #contents-body .contentsWrapper .anchorNavigation { display: block; background-color: #ECECEC; padding: 10px 30px; margin-bottom: 20px; } #str-contents .contentsWrapper .anchorNavigation a, #contents-body .contentsWrapper .anchorNavigation a { display: inline-flex; font-size: 18px; text-decoration: none; vertical-align: middle; color: inherit; align-items: center; padding: 5px; } #str-contents .contentsWrapper .anchorNavigation a::before, #contents-body .contentsWrapper .anchorNavigation a::before { display: block; width: 0; height: 0; border-top: 9px solid transparent; border-right: 12px solid transparent; border-bottom: 9px solid transparent; border-left: 12px solid #0C67C6; content: ""; } #str-contents .contentsWrapper .movieContents, #contents-body .contentsWrapper .movieContents { margin-bottom: 100px; } #str-contents .contentsWrapper .movieContents .littleHeading, #contents-body .contentsWrapper .movieContents .littleHeading { font-size: 20px; line-height: 32px; margin: 40px auto; } #str-contents .contentsWrapper .movieContents .movieWrapper, #contents-body .contentsWrapper .movieContents .movieWrapper { border-bottom: 2px solid #7A7b7d; } #str-contents .contentsWrapper .movieContents .movieWrapper:last-of-type, #contents-body .contentsWrapper .movieContents .movieWrapper:last-of-type { border-bottom: none; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer { max-width: 360px; margin-top: 40px; margin: 0 auto; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer { height: 0; position: relative; padding-bottom: 177.7%; border: 5px solid #d0d1d2; border: none; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer iframe, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5 { border: 5px solid #d0d1d2; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5 video, #str-contents .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5 .uliza-poster-area, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5 video, #contents-body .contentsWrapper .movieContents .movieWrapper .movieContainer .moviePlayer .ulizahtml5 .uliza-poster-area { transform-origin: center; transform: scale(1.013); } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink { display: table; margin: 80px auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink { margin: 30px auto; } } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink a, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink a { position: relative; line-height: 20px; font-weight: bold; text-decoration: underline; color: #0C67C6; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink a .newwindowicon, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink a .newwindowicon { display: none; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink a:hover, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink a:hover { text-decoration: none; } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink a::after, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink a::after { margin-left: 0.3em; vertical-align: bottom; content: url("/mobile/set/data/special/support-channel/img/shared/icon/icon_newwindow.svg"); } #str-contents .contentsWrapper .movieContents .movieWrapper .movieLink span, #contents-body .contentsWrapper .movieContents .movieWrapper .movieLink span { display: block; margin-top: 0.5em; } #str-contents .contentsWrapper .movieContents .postDate, #contents-body .contentsWrapper .movieContents .postDate { margin-top: 10px; } #str-contents .contentsWrapper .movieContents .gifList, #contents-body .contentsWrapper .movieContents .gifList { padding-bottom: 30px; border-bottom: 0; } #str-contents .contentsWrapper .movieContents .gifList:last-child, #contents-body .contentsWrapper .movieContents .gifList:last-child { padding-bottom: 0 !important; border: none; } #str-contents .contentsWrapper .movieContents .gifList li, #contents-body .contentsWrapper .movieContents .gifList li { list-style: none; } #str-contents .contentsWrapper .movieContents .gifList .listContainer, #str-contents .contentsWrapper .movieContents .gifList figure, #contents-body .contentsWrapper .movieContents .gifList .listContainer, #contents-body .contentsWrapper .movieContents .gifList figure { margin-right: auto; margin-left: auto; text-align: center; } #str-contents .contentsWrapper .movieContents .gifList figure div, #contents-body .contentsWrapper .movieContents .gifList figure div { position: relative; } #str-contents .contentsWrapper .movieContents .gifList figure div::before, #contents-body .contentsWrapper .movieContents .gifList figure div::before { display: block; padding-top: 177.7%; content: ""; } #str-contents .contentsWrapper .movieContents .gifList figure div img, #contents-body .contentsWrapper .movieContents .gifList figure div img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #str-contents .contentsWrapper .movieContents .gifList figure div img.lazyload, #str-contents .contentsWrapper .movieContents .gifList figure div img.lazyloading, #contents-body .contentsWrapper .movieContents .gifList figure div img.lazyload, #contents-body .contentsWrapper .movieContents .gifList figure div img.lazyloading { width: 60px; height: 60px; } #str-contents .contentsWrapper .movieContents .gifList .listContainer, #contents-body .contentsWrapper .movieContents .gifList .listContainer { margin-bottom: 50px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents .gifList .listContainer, #contents-body .contentsWrapper .movieContents .gifList .listContainer { margin-right: 10px; margin-left: 10px; } } #str-contents .contentsWrapper .movieContents .gifList .listContainer strong, #contents-body .contentsWrapper .movieContents .gifList .listContainer strong { color: inherit; font-size: 125%; line-height: 0; } #str-contents .contentsWrapper .movieContents .gifList figure, #contents-body .contentsWrapper .movieContents .gifList figure { width: 100%; max-width: 360px; margin-top: 40px; margin-bottom: 25px; } #str-contents .contentsWrapper .movieContents .gifList ul + h3, #contents-body .contentsWrapper .movieContents .gifList ul + h3 { margin-top: 50px; } #str-contents .contentsWrapper .movieContents .gifList ul + p, #str-contents .contentsWrapper .movieContents .gifList ol + p, #contents-body .contentsWrapper .movieContents .gifList ul + p, #contents-body .contentsWrapper .movieContents .gifList ol + p { margin-top: 30px; } #str-contents .contentsWrapper .movieContents .moreUseful .caseHeading, #contents-body .contentsWrapper .movieContents .moreUseful .caseHeading { height: 100px; } #str-contents .contentsWrapper .movieContents.searchResult.noMargin, #contents-body .contentsWrapper .movieContents.searchResult.noMargin { margin-bottom: 0; border-bottom: unset; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieListContainer, #contents-body .contentsWrapper .movieListContainer { margin-right: 8px; margin-left: 8px; width: calc(100% - 16px); } } #str-contents .contentsWrapper .movieContents.searchResult, #contents-body .contentsWrapper .movieContents.searchResult { border-bottom: 6px solid #ececec; margin-bottom: 120px; } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer { margin-right: auto; margin-left: auto; margin-bottom: 0px; max-width: 1280px; width: calc(100% - 260px); } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer { margin-right: 30px; margin-left: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer { margin-right: 8px; margin-left: 8px; width: calc(100% - 16px); } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap { display: flex; justify-content: space-between; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap { flex-wrap: wrap; padding-top: 20px; } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount { font-size: 24px; margin-bottom: 54px; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount { font-size: 16px; margin-bottom: 15px; } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span { font-size: 32px; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span { font-size: 28px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span { font-size: 20px; margin-bottom: 10px; } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { font-size: 24px; cursor: pointer; } @media screen and (max-width: 768px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { font-size: 20px; } } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { margin-left: auto; font-size: 16px; } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos { font-size: 32px; margin-bottom: 32px; margin-right: 10px; margin-left: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos { font-size: 18px; color: #333; margin-bottom: 10px; margin-top: 38px; } } #str-contents .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3, #contents-body .contentsWrapper .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3 { font-size: 32px; } #str-contents .contentsWrapper.guidePage .operatorMsgArea_txt, #contents-body .contentsWrapper.guidePage .operatorMsgArea_txt { justify-content: flex-start; } #str-contents .contentsWrapper.guidePage .gifList, #contents-body .contentsWrapper.guidePage .gifList { padding-bottom: 0; border-bottom: none; } #str-contents .contentsWrapper .movieWrapper .movieContainer.notVertical, #contents-body .contentsWrapper .movieWrapper .movieContainer.notVertical { width: 100%; max-width: 640px; margin-bottom: 2em; } #str-contents .contentsWrapper .movieWrapper .movieContainer.notVertical .moviePlayer, #contents-body .contentsWrapper .movieWrapper .movieContainer.notVertical .moviePlayer { padding-bottom: 56.25%; } #str-contents .contentsWrapper .movieWrapper .snsWrap, #contents-body .contentsWrapper .movieWrapper .snsWrap { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper .movieWrapper .snsWrap, #contents-body .contentsWrapper .movieWrapper .snsWrap { margin-bottom: 30px; margin-right: 10px; } } #str-contents .contentsWrapper .movieWrapper .snsWrap *, #contents-body .contentsWrapper .movieWrapper .snsWrap * { margin-left: 10px; } #str-contents .contentsWrapper .gifFlex figure, #contents-body .contentsWrapper .gifFlex figure { width: 100%; max-width: 640px; } #str-contents .contentsWrapper .gifFlex figure div::before, #contents-body .contentsWrapper .gifFlex figure div::before { padding-top: 56.25%; } #str-contents .contentsWrapper .gifFlex.notVertical > figure > div::before, #contents-body .contentsWrapper .gifFlex.notVertical > figure > div::before { padding-top: 56.25%; } #str-contents .contentsWrapper.guidePage .movieWrapper:last-child, #contents-body .contentsWrapper.guidePage .movieWrapper:last-child { border-bottom: 2px solid #7a7b7d; } #str-contents .contentsWrapper #modal_wrapper, #contents-body .contentsWrapper #modal_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.667); z-index: 100; display: none; } #str-contents .contentsWrapper #modal_wrapper .modal_container, #str-contents .contentsWrapper #modal_wrapper .fixed_container, #contents-body .contentsWrapper #modal_wrapper .modal_container, #contents-body .contentsWrapper #modal_wrapper .fixed_container { width: 90%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: rgb(255, 255, 255); overflow-y: auto; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container, #str-contents .contentsWrapper #modal_wrapper .fixed_container, #contents-body .contentsWrapper #modal_wrapper .modal_container, #contents-body .contentsWrapper #modal_wrapper .fixed_container { max-width: 960px; max-height: 640px; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure, #contents-body .contentsWrapper #modal_wrapper .modal_container figure, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure { width: 95%; margin: 2.5em auto 1em; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure, #contents-body .contentsWrapper #modal_wrapper .modal_container figure, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure { height: 95%; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin: 1em 0 0; justify-content: space-around; } } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure > div, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure > div, #contents-body .contentsWrapper #modal_wrapper .modal_container figure > div, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure > div { width: 47.5%; display: flex; flex-direction: column; } } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure > div > p:nth-of-type(2), #str-contents .contentsWrapper #modal_wrapper .fixed_container figure > div > p:nth-of-type(2), #contents-body .contentsWrapper #modal_wrapper .modal_container figure > div > p:nth-of-type(2), #contents-body .contentsWrapper #modal_wrapper .fixed_container figure > div > p:nth-of-type(2) { /*margin-top: auto;*/ } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure > div:first-of-type, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure > div:first-of-type, #contents-body .contentsWrapper #modal_wrapper .modal_container figure > div:first-of-type, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure > div:first-of-type { margin-bottom: 3em; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure > div:first-of-type, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure > div:first-of-type, #contents-body .contentsWrapper #modal_wrapper .modal_container figure > div:first-of-type, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure > div:first-of-type { margin-bottom: 0; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4, #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture { width: 95%; margin: 0 auto 5px; display: flex; align-items: center; } #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 img, #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture img { height: 100%; } #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 { justify-content: center; } #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 img { width: 30%; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 img { width: 16.67%; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 span, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 span { display: block; width: -moz-fit-content; width: fit-content; text-align: initial; font-size: 1.4em; font-weight: 700; text-indent: 0.5em; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 span, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 span { font-size: 1.65em; text-indent: 0.9em; } } @media screen and (max-width: 320px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure h4 span, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .modal_container figure h4 span, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure h4 span { font-size: 1.2em; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture { margin-bottom: 30px; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture { display: flex; justify-content: center; align-items: center; height: 320px; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture img { width: 100%; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure picture img, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .modal_container figure picture img, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure picture img { width: auto; height: 100%; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure p, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure p, #contents-body .contentsWrapper #modal_wrapper .modal_container figure p, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure p { width: 95%; margin: 0 auto 1em; text-align: justify; word-break: break-all; font-size: 1.2em; line-height: 1.5; } @media screen and (min-width: 1024px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure p, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure p, #contents-body .contentsWrapper #modal_wrapper .modal_container figure p, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure p { width: 90%; } } @media screen and (max-width: 320px) { #str-contents .contentsWrapper #modal_wrapper .modal_container figure p, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure p, #contents-body .contentsWrapper #modal_wrapper .modal_container figure p, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure p { font-size: 1em; } } #str-contents .contentsWrapper #modal_wrapper .modal_container figure p a, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure p a, #contents-body .contentsWrapper #modal_wrapper .modal_container figure p a, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure p a { font-size: inherit; color: inherit; text-align: inherit; word-break: inherit; } #str-contents .contentsWrapper #modal_wrapper .modal_container figure p a > span, #str-contents .contentsWrapper #modal_wrapper .fixed_container figure p a > span, #contents-body .contentsWrapper #modal_wrapper .modal_container figure p a > span, #contents-body .contentsWrapper #modal_wrapper .fixed_container figure p a > span { display: inline-block; text-align: inherit; word-break: inherit; vertical-align: super; color: inherit; line-height: 1.3; } #str-contents .contentsWrapper #modal_wrapper .fixed_container, #contents-body .contentsWrapper #modal_wrapper .fixed_container { background-color: transparent; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; justify-content: flex-end; align-items: flex-start; overflow-y: hidden; } #str-contents .contentsWrapper #modal_wrapper .fixed_container button[name=modal_close], #contents-body .contentsWrapper #modal_wrapper .fixed_container button[name=modal_close] { color: #444; font-size: 3.5em; font-weight: 700; border: none; outline: none; background-color: inherit; display: flex; justify-content: center; align-items: center; margin-right: 1.5%; line-height: 1; pointer-events: initial; -webkit-user-select: initial; -moz-user-select: initial; user-select: initial; } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-sp] *[class^=subPageNavi][data-newnavi] > div, #contents-body .contentsWrapper[data-sp] *[class^=subPageNavi][data-newnavi] > div { padding-left: 0; padding-right: 0; } #str-contents .contentsWrapper[data-sp] *[class^=subPageNavi][data-newnavi] li a, #contents-body .contentsWrapper[data-sp] *[class^=subPageNavi][data-newnavi] li a { height: 2.5em; } #str-contents .contentsWrapper[data-sp] .mainTitleArea, #contents-body .contentsWrapper[data-sp] .mainTitleArea { width: 100%; margin-bottom: 16px; margin-left: 0; margin-right: 0; } #str-contents .contentsWrapper[data-sp] .mainTitleArea #mainHeading, #contents-body .contentsWrapper[data-sp] .mainTitleArea #mainHeading { font-size: 28px; } #str-contents .contentsWrapper[data-sp] #selectPurpose > .textWrap, #contents-body .contentsWrapper[data-sp] #selectPurpose > .textWrap { margin-bottom: 16px; } } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .carouselWrap, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .carouselWrap { padding: 0; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .carouselWrap > a, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .carouselWrap > a { right: 0; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .movieCategory, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer#topMovieSection .movieCategory { margin-left: 0; margin-right: 0; } } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] { width: 100%; margin-bottom: 24px; justify-content: flex-start; overflow-x: scroll; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li { min-width: 32%; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 { position: absolute; bottom: 1px; left: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(74.8% - 1px); height: calc(80% - 1px); text-align: center; line-height: 1.5; opacity: 1; font-size: 21px; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; padding: 0 0.3em; text-align: center; font-size: inherit; white-space: nowrap; line-height: 1.3; transform-origin: center top; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext { margin-top: 1em; padding: 0; font-size: 0.7em; color: #005394; line-height: 1.25; transform-origin: center top; } } @media screen and (min-width: 521px) and (max-width: 767px) { #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext { margin-top: 0.5em; } } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_init, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_init { background-color: #dae3f2; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_conf, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_conf { background-color: #eef1f1; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_mail, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_mail { background-color: #fef5e7; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_line, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_line { background-color: #e3e5cf; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_filter, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_filter { background-color: #dce1ec; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_data, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_data { background-color: #e9e3de; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_fixed, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_fixed { background-color: #fef8d9; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_other, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_other { background-color: #f1f1f1; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.tag2rows, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.tag2rows { height: calc(62% - 1px); } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 { width: 66%; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .dummy, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .dummy { display: block; width: calc(100% + 10px); height: 100%; position: absolute; top: 0; left: 0; background-color: inherit; z-index: 1; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .title, #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .subtext, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .title, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .subtext { position: relative; z-index: 2; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .subtext::after, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.pat1 > .subtext::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1.5em); background-color: inherit; z-index: -1; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.br_len3, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.br_len3 { transform-origin: center; transform: scale(0.8); } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > .title, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > .title { margin-top: 0; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all { min-width: 15%; margin-right: 0; } #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all a span, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all a span { font-size: 16px; } } @media screen and (min-width: 521px) and (max-width: 767px) { #str-contents .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all a span, #contents-body .contentsWrapper[data-topdir][data-sp] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all a span { font-size: 12px; } } #str-contents .contentsWrapper[data-topdir] nav, #contents-body .contentsWrapper[data-topdir] nav { max-width: 1320px; width: calc(100% - 120px); width: 100%; margin: 0 auto; padding: 10px; background-color: #ecf0f4; border-radius: 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] nav, #contents-body .contentsWrapper[data-topdir] nav { margin: 0; width: 100%; margin: 0; padding: 10px 8px; max-width: inherit; } } #str-contents .contentsWrapper[data-topdir] nav ul, #contents-body .contentsWrapper[data-topdir] nav ul { display: flex; -moz-column-gap: 2%; column-gap: 2%; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] nav ul, #contents-body .contentsWrapper[data-topdir] nav ul { display: inherit; } } #str-contents .contentsWrapper[data-topdir] nav ul li, #contents-body .contentsWrapper[data-topdir] nav ul li { position: relative; width: 50%; height: 2.2em; margin: 0 5px 10px; border: 2px solid #0c67c6; border-radius: 2em; background-color: #ffffff; font-size: 20px; color: #0c67c6; font-weight: 700; text-align: center; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] nav ul li, #contents-body .contentsWrapper[data-topdir] nav ul li { width: calc(100% - 10px); margin: 0 5px 10px; height: 37px; font-size: 16px; } } #str-contents .contentsWrapper[data-topdir] nav ul li a, #contents-body .contentsWrapper[data-topdir] nav ul li a { display: inline-flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: inherit; } #str-contents .contentsWrapper[data-topdir] nav ul li::after, #contents-body .contentsWrapper[data-topdir] nav ul li::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 50%; right: 1%; width: 24px; height: 12px; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); font-size: 18px; font-weight: 700; color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] nav ul li::after, #contents-body .contentsWrapper[data-topdir] nav ul li::after { width: 16px; height: 8px; font-size: 12px; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea, #contents-body .contentsWrapper[data-topdir] .mainTitleArea { max-width: 1320px; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; border-radius: 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea, #contents-body .contentsWrapper[data-topdir] .mainTitleArea { border-radius: initial; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap { background-color: #ecf0f4; border-radius: 0; height: auto; padding: 24px 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap { height: 76px; padding: 0; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading { margin-bottom: 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading { width: 100%; justify-content: space-evenly; padding: 0; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading img.h1LogoImg, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading img.h1LogoImg { width: 60px; margin-right: 15px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading img.h1LogoImg, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading img.h1LogoImg { width: 40px; margin-right: 0; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap { flex-wrap: initial; padding: 0 5px 0 0; font-size: 48px; font-weight: 700; font-feature-settings: "palt"; color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap { font-size: 33px; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap span, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap span { font-size: 20px; margin-bottom: 0; font-feature-settings: initial; color: #424242; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap span, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .titleWrap #mainHeading .h1Wrap span { font-size: 16px; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox { width: 100%; margin: 0; justify-content: flex-start; background-color: #0c67c6; } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap { margin-left: auto; margin-right: auto; margin-bottom: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap { margin-bottom: 0; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap input, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap input { border: none; } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap button { height: calc(100% - 4px); margin: 2px; border-radius: 6px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .searchInputWrap button { height: 30px; width: 60px; top: 13px; right: 15px; font-size: 16px; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap { width: 100%; max-width: 100%; margin: 0; padding: 10px; background-color: #ffffff; justify-content: flex-start; flex-wrap: wrap; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap { padding: 10px 10px 0; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .subHead, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .subHead { width: 100%; } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer { margin: 0 10px 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer { margin: 0 0 10px; } } #str-contents .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer span, #contents-body .contentsWrapper[data-topdir] .mainTitleArea .searchBox .frequentWordWrap .tagContainer span { margin-top: 2px; font-weight: 500; } #str-contents .contentsWrapper[data-topdir] .subHead, #contents-body .contentsWrapper[data-topdir] .subHead { border: none; width: -moz-fit-content; width: fit-content; margin: 0 20px 0 0; text-indent: 0.3em; font-size: 24px; white-space: nowrap; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .subHead, #contents-body .contentsWrapper[data-topdir] .subHead { width: 100%; margin: 0 0 0 10px; font-size: 18px; } } #str-contents .contentsWrapper[data-topdir] .subHead img, #contents-body .contentsWrapper[data-topdir] .subHead img { width: 30px; height: 25px; -o-object-fit: contain; object-fit: contain; -o-object-position: center left; object-position: center left; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer#topMovieSection, #contents-body .contentsWrapper[data-topdir] .movieListContainer#topMovieSection { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; } #str-contents .contentsWrapper[data-topdir] .movieListContainer#topMovieSection .carouselWrap, #contents-body .contentsWrapper[data-topdir] .movieListContainer#topMovieSection .carouselWrap { margin-bottom: 20px; } #str-contents .contentsWrapper[data-topdir] .movieListContainer#topMovieSection .carouselWrap a, #contents-body .contentsWrapper[data-topdir] .movieListContainer#topMovieSection .carouselWrap a { right: 0; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer, #contents-body .contentsWrapper[data-topdir] .movieListContainer { width: 100%; max-width: 1320px; margin-bottom: 32px; margin-left: auto; margin-right: auto; padding-top: 30px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer, #contents-body .contentsWrapper[data-topdir] .movieListContainer { max-width: initial; margin-left: 12px; margin-right: 0; padding-top: 21px; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .subHead, #contents-body .contentsWrapper[data-topdir] .movieListContainer .subHead { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 12px; padding: 5px 0 5px 10px; border-bottom: 3px solid #0c67c6; font-size: 24px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .subHead, #contents-body .contentsWrapper[data-topdir] .movieListContainer .subHead { width: -moz-fit-content; width: fit-content; margin-bottom: 10px; margin-left: 10px; margin-right: 20px; padding: 0 0 14px; border: none; font-size: 18px; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .movieCategory, #contents-body .contentsWrapper[data-topdir] .movieListContainer .movieCategory { margin: 0 0 0.3em 0.9em; font-size: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .movieCategory, #contents-body .contentsWrapper[data-topdir] .movieListContainer .movieCategory { margin: 0 0 5px 8px; font-size: 16px; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap { position: relative; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap { padding: 0; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a { display: inline-flex; justify-content: flex-end; align-items: center; height: -moz-fit-content; height: fit-content; position: absolute; top: -2em; right: 1.5em; font-size: 17px; color: #006699; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a { font-size: 13px; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a span, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a span { font-size: inherit; padding-right: 0.333em; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a::after, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a::after { display: inline-flex; justify-content: center; align-items: center; content: "┛"; width: 1.4em; height: 0.7em; transform-origin: center; transform: rotateZ(-45deg); font-size: 16px; font-weight: 700; color: inherit; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a::after, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap > a::after { font-size: 11px; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList].carousel li a, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList].carousel li a { position: relative; display: block; width: 100%; height: 100%; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] { position: relative; margin-bottom: 40px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] { /*height: auto;*/ width: 100%; margin-bottom: 0px; justify-content: flex-start; /*data-sp*/ overflow-x: scroll; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li { min-width: 63%; margin: 0 0 0 17.5px; margin: 0 0 0 4.5%; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a { /* position: relative; display: block; width: 100%; height: 100%;*/ } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 { position: absolute; bottom: 1px; left: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(74.8% - 1px); height: calc(80% - 1px); text-align: center; line-height: 1.5; opacity: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; padding: 0 0.3em; text-align: center; font-size: inherit; white-space: nowrap; line-height: 1.3; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext { margin-top: 0.5em; padding: 0; font-size: 0.75em; color: #005394; line-height: 1.25; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext small, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 > span.subtext small { font-size: 0.8em; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 small, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3 small { font-size: 0.7em; line-height: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_init, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_init { background-color: #dae3f2; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_conf, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_conf { background-color: #eef1f1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_mail, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_mail { background-color: #fef5e7; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_line, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_line { background-color: #e3e5cf; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_filter, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_filter { background-color: #dce1ec; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_fixed, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_fixed { background-color: #fef8d9; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_data, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_data { background-color: #e9e3de; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_other, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.t_other { background-color: #f1f1f1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.tag2rows, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.tag2rows { height: calc(62% - 1px); } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 { width: 66%; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .dummy, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .dummy { display: block; width: calc(100% + 10px); height: 100%; position: absolute; top: 0; left: 0; background-color: inherit; z-index: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .title, #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .subtext, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .title, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .subtext { position: relative; z-index: 2; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .subtext::after, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3.pat1 > .subtext::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1.5em); background-color: inherit; z-index: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3 > .title, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li > h3 > .title { margin-top: 0; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.br_len3, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a > h3.br_len3 { transform-origin: center; transform: scale(0.85); } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a span, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a span { font-size: 0.8em; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a::before, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li a::before { /*margin-top: -0.5em; margin-left: 0.25em;*/ } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] > li:first-of-type, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] > li:first-of-type { margin-left: 0; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li.to_all { min-height: initial; min-width: 32%; margin-right: 0; } } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-arrow, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-arrow { width: 45px; height: 45px; top: 50%; right: -3%; transform-origin: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); opacity: 0.75; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-prev, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-prev { left: -3%; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li:nth-last-child(2), #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] li:nth-last-child(2) { border-bottom: none; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all), #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) { /*padding-bottom: 12.5px;*/ } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a { position: relative; display: block; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 { position: absolute; bottom: 1px; left: 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(74.8% - 1px); height: calc(80% - 1px); font-size: 26px; text-align: center; line-height: 1.5; opacity: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; padding: 0 0.3em; text-align: center; font-size: inherit; white-space: nowrap; line-height: 1.3; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span.subtext, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span.subtext { margin-top: 0.5em; padding: 0 0.4em; font-size: 0.7em; color: #005394; line-height: 1.25; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span.subtext small, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > span.subtext small { font-size: 0.8em; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 small, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 small { font-size: 0.7em; line-height: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_init, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_init { background-color: #dae3f2; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_conf, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_conf { background-color: #eef1f1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_mail, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_mail { background-color: #fef5e7; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_line, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_line { background-color: #e3e5cf; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_filter, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_filter { background-color: #dce1ec; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_data, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_data { background-color: #e9e3de; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_fixed, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_fixed { background-color: #fef8d9; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_other, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.t_other { background-color: #f1f1f1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.tag2rows, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.tag2rows { height: calc(62% - 1px); } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 { width: 66%; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .dummy, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .dummy { display: block; width: calc(100% + 10px); height: 100%; position: absolute; top: 0; left: 0; background-color: inherit; z-index: 1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .title, #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .subtext, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .title, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .subtext { position: relative; z-index: 2; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .subtext::after, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.pat1 > .subtext::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1.5em); background-color: inherit; z-index: -1; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > .title, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3 > .title { margin-top: 0; } #str-contents .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.br_len3, #contents-body .contentsWrapper[data-topdir] .movieListContainer .carouselWrap ul[id^=anotherMovieList] .slick-slide:not(.to_all) a > h3.br_len3 { transform-origin: center; transform: scale(0.85); } #str-contents .contentsWrapper[data-topdir] section .blueSection, #contents-body .contentsWrapper[data-topdir] section .blueSection { height: -moz-fit-content; height: fit-content; padding: 14px 0 16px; box-sizing: border-box; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection, #contents-body .contentsWrapper[data-topdir] section .blueSection { height: 167px; } } #str-contents .contentsWrapper[data-topdir] section .blueSection > p, #contents-body .contentsWrapper[data-topdir] section .blueSection > p { margin-bottom: 10px; font-size: 24px; line-height: 1.4; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection > p, #contents-body .contentsWrapper[data-topdir] section .blueSection > p { font-size: 14px; } } #str-contents .contentsWrapper[data-topdir] section .blueSection > div a, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a { display: flex; align-items: center; width: 100%; margin: 0 auto; max-width: 640px; background-color: #ecf0f4; padding: 2px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection > div a, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a { max-width: 365px; } } #str-contents .contentsWrapper[data-topdir] section .blueSection > div a img, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a img { width: 41%; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection > div a img, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a img { max-width: 150px; } } #str-contents .contentsWrapper[data-topdir] section .blueSection > div a span, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a span { width: 55%; font-size: 24px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection > div a span, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a span { max-width: 195px; font-size: 16px; } } #str-contents .contentsWrapper[data-topdir] section .blueSection > div a svg, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a svg { width: 3.5%; margin-right: auto; filter: invert(0.6); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-topdir] section .blueSection > div a svg, #contents-body .contentsWrapper[data-topdir] section .blueSection > div a svg { max-width: 15px; } } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList], #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] { margin-bottom: 20px; /*data sp*/ } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li { margin: 0 17.5px 0 0; box-shadow: none; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li a .imageWrap, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li a .imageWrap { border: 1px solid #bbbbbb; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all { max-width: 154px; max-height: 195.5px; border: solid 2px #006699; box-sizing: border-box; /*border-radius: 16px;*/ } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.3em; color: #006699; position: relative; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a span, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a span { width: 100%; height: 100%; padding-top: 20%; display: flex; justify-content: center; align-items: center; position: absolute; font-size: inherit; font-weight: bold; color: inherit; top: 0; left: 0; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a .imageWrap, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a .imageWrap { width: 100%; height: 100%; border-color: transparent; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a .imageWrap img, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a .imageWrap img { display: none; } #str-contents .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a::before, #contents-body .contentsWrapper[data-topdir] [id^=anotherMovieList] li.to_all a::before { display: flex; justify-content: center; align-items: center; width: 1.25em; height: 1.75em; margin: 0; content: ""; font-size: 2.25em; color: inherit; /*transform: rotateZ(-45deg);*/ position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-image: url("/mobile/set/data/special/support-channel/img/shared/bg_to_all.png"); background-image: url("/mobile/set/data/special/support-channel/img/shared/bg_to_all.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; } #str-contents .contentsWrapper.guidePage .movieContents, #contents-body .contentsWrapper.guidePage .movieContents { margin-bottom: 20px; } #str-contents .contentsWrapper.guidePage .movieContents .movieWrapper, #contents-body .contentsWrapper.guidePage .movieContents .movieWrapper { border-bottom: none; } #str-contents #modelPage.contentsWrapper[data-modeldir], #contents-body #modelPage.contentsWrapper[data-modeldir] { overflow-y: inherit; overflow-x: hidden; margin-bottom: 20px; } @media screen and (max-width: 520px) { #str-contents #modelPage.contentsWrapper[data-modeldir], #contents-body #modelPage.contentsWrapper[data-modeldir] { margin-bottom: inherit; overflow-y: inherit; overflow-x: inherit; } } #str-contents #modelPage.contentsWrapper[data-modeldir] > nav.subPageNavi, #contents-body #modelPage.contentsWrapper[data-modeldir] > nav.subPageNavi { height: auto; padding: 10px; } @media screen and (max-width: 520px) { #str-contents #modelPage.contentsWrapper[data-modeldir] > nav.subPageNavi, #contents-body #modelPage.contentsWrapper[data-modeldir] > nav.subPageNavi { padding: 0; } } #str-contents #modelPage.contentsWrapper[data-modeldir] .mainTitleArea, #contents-body #modelPage.contentsWrapper[data-modeldir] .mainTitleArea { background-color: transparent; } @media screen and (max-width: 520px) { #str-contents #modelPage.contentsWrapper[data-modeldir] .mainTitleArea, #contents-body #modelPage.contentsWrapper[data-modeldir] .mainTitleArea { background-color: inherit; } } #str-contents .contentsWrapper[data-listdir] > nav.subPageNavi, #contents-body .contentsWrapper[data-listdir] > nav.subPageNavi { height: auto; padding: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] > nav.subPageNavi, #contents-body .contentsWrapper[data-listdir] > nav.subPageNavi { padding: 0; } } #str-contents .contentsWrapper[data-listdir] ul.subMenu, #contents-body .contentsWrapper[data-listdir] ul.subMenu { margin-top: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] ul.subMenu, #contents-body .contentsWrapper[data-listdir] ul.subMenu { padding: 10px; } } #str-contents .contentsWrapper[data-listdir] ul.subMenu li:nth-of-type(1), #contents-body .contentsWrapper[data-listdir] ul.subMenu li:nth-of-type(1) { display: none; } #str-contents .contentsWrapper[data-listdir] ul.subMenu li, #contents-body .contentsWrapper[data-listdir] ul.subMenu li { height: 60px; max-width: 950px; margin: 0 auto; padding: 0 10px; } #str-contents .contentsWrapper[data-listdir] ul.subMenu li a, #contents-body .contentsWrapper[data-listdir] ul.subMenu li a { display: flex; width: 13em; height: 2.5em; margin-left: auto; text-decoration: none; background-color: #ecf0f4; align-items: center; position: relative; justify-content: center; border-radius: 2em; color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] ul.subMenu li a, #contents-body .contentsWrapper[data-listdir] ul.subMenu li a { width: 150px; padding: 4px 8px; font-size: 13px; } } #str-contents .contentsWrapper[data-listdir] ul.subMenu li a span, #contents-body .contentsWrapper[data-listdir] ul.subMenu li a span { font-size: inherit; text-align: center; margin-right: 0.3em; white-space: nowrap; } #str-contents .contentsWrapper[data-listdir] ul.subMenu li a::after, #contents-body .contentsWrapper[data-listdir] ul.subMenu li a::after { display: flex; justify-content: center; align-items: center; content: "┛"; width: 1.333em; height: 0.667em; font-size: 16px; font-weight: 700; color: #777777; position: absolute; top: 50%; right: 1.5%; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] ul.subMenu li a::after, #contents-body .contentsWrapper[data-listdir] ul.subMenu li a::after { font-size: 12px; } } #str-contents .contentsWrapper[data-listdir] .mainTitleArea, #contents-body .contentsWrapper[data-listdir] .mainTitleArea { background-color: transparent; } #str-contents .contentsWrapper[data-listdir] .mainTitleArea #mainHeading, #contents-body .contentsWrapper[data-listdir] .mainTitleArea #mainHeading { color: #424242; margin-bottom: 8px; } #str-contents .contentsWrapper[data-listdir] .moreUseful, #contents-body .contentsWrapper[data-listdir] .moreUseful { max-width: 1320px; margin: 0 auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .moreUseful, #contents-body .contentsWrapper[data-listdir] .moreUseful { margin: 0 0 10px; } } #str-contents .contentsWrapper[data-listdir] .moreUseful .caseHeading, #contents-body .contentsWrapper[data-listdir] .moreUseful .caseHeading { max-width: 1320px; min-height: initial; margin: 0 auto; padding: 8px 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .moreUseful .caseHeading, #contents-body .contentsWrapper[data-listdir] .moreUseful .caseHeading { margin: 0; } } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea, #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea { padding: 0 36px 20px; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea .operatorMsgArea_txt, #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea .operatorMsgArea_txt { min-height: initial; padding: 0; background: none; color: inherit; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea .operatorMsgArea_txt p, #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea .operatorMsgArea_txt p { font-size: 14px; line-height: initial; text-align: center; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea img:not(.inline_icon), #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea img:not(.inline_icon) { width: 55px; right: 5px; bottom: 0; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc], #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] { display: flex; justify-content: center; height: -moz-fit-content; height: fit-content; max-width: 960px; margin: 0 auto; padding: 0; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] .operatorMsgArea_txt, #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] .operatorMsgArea_txt { margin: 0; padding: 0 0 20px; font-size: 20px; } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] .operatorMsgArea_txt p, #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] .operatorMsgArea_txt p { font-size: inherit; width: -moz-fit-content; width: fit-content; /*margin-left: auto;*/ } #str-contents .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] img:not(.inline_icon), #contents-body .contentsWrapper[data-listdir] .moreUseful .operatorMsgArea.verticalArea[data-pc] img:not(.inline_icon) { width: 150px; right: -150px; margin: 0; } #str-contents .contentsWrapper[data-listdir] .moreUseful > div, #contents-body .contentsWrapper[data-listdir] .moreUseful > div { margin: 0px; padding: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .moreUseful > div, #contents-body .contentsWrapper[data-listdir] .moreUseful > div { padding: 10px; } } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > h3, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > h3 { max-width: 1320px; margin: 0 auto 20px; padding: 5px; background-color: #509ef0; text-align: center; font-size: 24px; color: #ffffff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .moreUseful > div > h3, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > h3 { margin: 0 0 10px; padding: 5px 0; font-size: 14px; } } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul { width: 100%; max-width: initial; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; -moz-column-gap: 20px; column-gap: 20px; row-gap: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul { margin: 0 0 5px; grid-template-columns: 1fr 1fr; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul li, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul li { display: flex; justify-content: center; align-items: center; height: auto; min-height: initial; border: none; } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul li a, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul li a { padding: 0; border: none; background: none; } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul li a .imageWrap, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul li a .imageWrap { width: 100%; } #str-contents .contentsWrapper[data-listdir] .moreUseful > div > ul li a .imageWrap img, #contents-body .contentsWrapper[data-listdir] .moreUseful > div > ul li a .imageWrap img { width: 100%; border: 1px solid #999999; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } #str-contents .contentsWrapper[data-listdir] .buttonList, #contents-body .contentsWrapper[data-listdir] .buttonList { display: flex; justify-content: center; align-items: center; margin: 0; padding: 30px 10px; background-color: #bfcfe0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .buttonList, #contents-body .contentsWrapper[data-listdir] .buttonList { margin: 0; padding: 30px 10px; } } #str-contents .contentsWrapper[data-listdir] .buttonList li, #contents-body .contentsWrapper[data-listdir] .buttonList li { position: relative; width: 20em; height: auto; min-height: initial; margin: 0 5px 0; border: 2px solid #0c67c6; border-radius: 2em; background-color: #ffffff; font-size: 24px; color: #0c67c6; font-weight: 700; text-align: center; box-shadow: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .buttonList li, #contents-body .contentsWrapper[data-listdir] .buttonList li { width: 100%; height: 37px; margin: 0 5px 0; font-size: 16px; } } #str-contents .contentsWrapper[data-listdir] .buttonList li a, #contents-body .contentsWrapper[data-listdir] .buttonList li a { display: flex; width: 100%; min-height: initial; height: 100%; justify-content: center; align-items: center; font-size: inherit; } #str-contents .contentsWrapper[data-listdir] .buttonList li a span, #contents-body .contentsWrapper[data-listdir] .buttonList li a span { line-height: 1; } #str-contents .contentsWrapper[data-listdir] .buttonList li > a::after, #contents-body .contentsWrapper[data-listdir] .buttonList li > a::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 50%; left: 5%; width: 1.333em; height: 0.667em; transform-origin: center; transform: translateY(-50%) rotateZ(-225deg); -webkit-transform: translateY(-50%) rotateZ(-225deg); -ms-transform: translateY(-50%) rotateZ(-225deg); font-size: 18px; font-weight: 700; color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .buttonList li > a::after, #contents-body .contentsWrapper[data-listdir] .buttonList li > a::after { font-size: 12px; } } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-listdir][data-sp] .commonSearchBox, #contents-body .contentsWrapper[data-listdir][data-sp] .commonSearchBox { display: flex; } #str-contents .contentsWrapper[data-listdir][data-sp] .commonSearchBox .subPageNavi2 > div > h1, #contents-body .contentsWrapper[data-listdir][data-sp] .commonSearchBox .subPageNavi2 > div > h1 { margin-left: 16px; } #str-contents .contentsWrapper[data-listdir][data-sp] .commonSearchBox .subPageNavi2 > div > ul, #contents-body .contentsWrapper[data-listdir][data-sp] .commonSearchBox .subPageNavi2 > div > ul { margin-right: 16px; } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu li:nth-of-type(2) > a, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu li:nth-of-type(2) > a { margin-bottom: 10px; height: 2.5em; margin-right: 16px; padding-right: 0; } } #str-contents .contentsWrapper[data-listdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2, #contents-body .contentsWrapper[data-listdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2 { width: 100%; } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu { margin: 0 0 0 auto; } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu li, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu li { height: inherit; width: -moz-fit-content; width: fit-content; max-width: initial; margin: inherit; padding: 0; } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu li a, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu li a { height: 100%; margin-left: inherit; padding: 2px 9px; } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu li a img, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu li a img { transform: translateX(-5px); } #str-contents .contentsWrapper[data-listdir][data-sp] .subMenu li a span, #contents-body .contentsWrapper[data-listdir][data-sp] .subMenu li a span { transform: translateX(-4.5px); } #str-contents .contentsWrapper[data-searchdir] *[class^=subPageNavi], #contents-body .contentsWrapper[data-searchdir] *[class^=subPageNavi] { width: 100%; } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult { margin: 0 0 20px; border: none; } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer { width: calc(100% - 40px); max-width: 1240px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer { margin-right: 10px; margin-left: 10px; width: calc(100% - 20px); } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] { width: 100%; margin: 0 0 40px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList], #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] { margin: 0 0 20px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li { box-shadow: initial; border: 1px solid #bbbbbb; max-height: initial; } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .carouselWrap.col3LayoutWrap ul[id^=anotherMovieList] li a { display: flex; justify-content: center; align-items: center; } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap { line-height: initial; margin-bottom: 30px; color: #424242; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap { margin-bottom: 15px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount { display: flex; align-items: self-end; margin-bottom: 0; font-size: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount { align-items: center; font-size: 12px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span { margin-bottom: 0; font-size: 1.333em; font-weight: 700; transform: translateY(0.15em); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .movieCount span { transform: translateY(-0.05em); } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { display: flex; justify-content: center; position: relative; align-items: center; padding: 7px 37px 7px 29px; border-radius: 2em; font-size: 16px; height: 100%; text-decoration: none; color: #777777; background-color: #ecf0f4; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { padding: 7px 18px 7px 10px; font-size: 12px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll::after, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; width: 1.333em; height: 0.667em; right: 1.5%; top: 50%; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); font-size: 16px; font-weight: 700; color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll::after, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll::after { font-size: 12px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos { margin-left: 0; margin-top: 0px; margin-bottom: 16px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos { margin-bottom: 8px; } } #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3 { font-size: 24px; color: #424242; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3, #contents-body .contentsWrapper[data-searchdir] .movieContents.searchResult .movieListContainer .h3TitleOtherVideos h3 { font-size: 20px; } } #str-contents .contentsWrapper[data-topdir] .movieContents .gifList .listContainer strong, #str-contents .contentsWrapper[data-contentsdir] .movieContents .gifList .listContainer strong, #contents-body .contentsWrapper[data-topdir] .movieContents .gifList .listContainer strong, #contents-body .contentsWrapper[data-contentsdir] .movieContents .gifList .listContainer strong { font-size: 100%; } @media screen and (min-width: 521px) { #str-contents .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox, #str-contents .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox, #contents-body .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox, #contents-body .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox { display: block; height: -moz-fit-content; height: fit-content; border-radius: 0; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2[data-newnavi] > div, #str-contents .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2[data-newnavi] > div, #contents-body .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2[data-newnavi] > div, #contents-body .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .subPageNavi2[data-newnavi] > div { padding: 12px 16px; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox, #str-contents .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox, #contents-body .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox, #contents-body .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox { margin-top: 0; background-color: #2357ba; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap, #str-contents .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap { margin: 10px 16px; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap button, #str-contents .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-contentsdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-searchdir][data-sp] .mainTitleArea.commonSearchBox .searchBox .searchInputWrap button { height: calc(100% - 4px); margin-right: 2px; margin-top: 2px; border-radius: 6px; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .movieContents > ul, #str-contents .contentsWrapper[data-searchdir][data-sp] .movieContents > ul, #contents-body .contentsWrapper[data-contentsdir][data-sp] .movieContents > ul, #contents-body .contentsWrapper[data-searchdir][data-sp] .movieContents > ul { padding-right: 16px; } #str-contents .contentsWrapper[data-contentsdir][data-sp] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #str-contents .contentsWrapper[data-searchdir][data-sp] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper[data-contentsdir][data-sp] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll, #contents-body .contentsWrapper[data-searchdir][data-sp] .movieContents.searchResult .movieListContainer .searchResultH2Wrap .clearAll { height: 2em; } } #str-contents .contentsWrapper[data-searchdir] #movie1 a, #str-contents .contentsWrapper[data-searchdir] #movie1 a:visited, #str-contents .contentsWrapper[data-contentsdir] #movie1 a, #str-contents .contentsWrapper[data-contentsdir] #movie1 a:visited, #str-contents .contentsWrapper[data-listdir] #movie1 a, #str-contents .contentsWrapper[data-listdir] #movie1 a:visited, #contents-body .contentsWrapper[data-searchdir] #movie1 a, #contents-body .contentsWrapper[data-searchdir] #movie1 a:visited, #contents-body .contentsWrapper[data-contentsdir] #movie1 a, #contents-body .contentsWrapper[data-contentsdir] #movie1 a:visited, #contents-body .contentsWrapper[data-listdir] #movie1 a, #contents-body .contentsWrapper[data-listdir] #movie1 a:visited { color: #006699; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc], #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc], #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc], #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc], #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc], #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] { height: initial; width: 100%; max-width: initial; border-radius: 0; margin-left: 0; margin-bottom: 20px; display: block; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .subPageNavi2, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .subPageNavi2, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .subPageNavi2, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .subPageNavi2, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .subPageNavi2, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .subPageNavi2 { width: 100%; padding: 10px 0; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .subPageNavi2 > div, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .subPageNavi2 > div, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .subPageNavi2 > div, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .subPageNavi2 > div, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .subPageNavi2 > div, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .subPageNavi2 > div { width: 100%; max-width: 950px; padding: 5px 10px; align-items: center; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] h1 + ul, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] h1 + ul, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] h1 + ul, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] h1 + ul, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] h1 + ul, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] h1 + ul { height: 40px; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox { margin-top: 0; background-color: #0C67C6; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap { max-width: 950px; /*height: initial;*/ border-radius: 0; margin: 0 auto; padding: 10px; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap img { width: 28px; height: 28px; top: 50%; transform-origin: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap input { padding: 2px 0 2px 85px; } #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button { width: 88px; height: 41px; position: absolute; right: 12px; top: 12px; text-align: center; background-color: #0c67c6; color: #FFF; font-size: 24px; border: none; border-radius: 8px; } @media screen and (max-width: 1050px) { #str-contents .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #str-contents .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #str-contents .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-searchdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-contentsdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button, #contents-body .contentsWrapper[data-listdir] .commonSearchBox[data-pc] .searchBox .searchInputWrap button { height: 32px; font-size: 18px; } } #str-contents .contentsWrapper[data-searchdir] .h1LogoImg + a, #str-contents .contentsWrapper[data-contentsdir] .h1LogoImg + a, #str-contents .contentsWrapper[data-listdir] .h1LogoImg + a, #contents-body .contentsWrapper[data-searchdir] .h1LogoImg + a, #contents-body .contentsWrapper[data-contentsdir] .h1LogoImg + a, #contents-body .contentsWrapper[data-listdir] .h1LogoImg + a { display: inline-flex; } #str-contents .contentsWrapper[data-listdir] .subMenu > li a img, #contents-body .contentsWrapper[data-listdir] .subMenu > li a img { width: 30px; transform: translateX(-5px); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir] .subMenu > li a img, #contents-body .contentsWrapper[data-listdir] .subMenu > li a img { width: auto; } } #str-contents .contentsWrapper[data-listdir] .searchBox, #contents-body .contentsWrapper[data-listdir] .searchBox { display: none; } #str-contents .contentsWrapper[data-listdir][data-listall] .searchBox, #contents-body .contentsWrapper[data-listdir][data-listall] .searchBox { display: flex; } #str-contents .contentsWrapper[data-listdir][data-listall] .subMenu, #contents-body .contentsWrapper[data-listdir][data-listall] .subMenu { display: flex; justify-content: space-between; align-items: center; margin-left: 0; } #str-contents .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1), #contents-body .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) { display: block; } #str-contents .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount, #contents-body .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount { display: flex; align-items: self-end; margin-bottom: 0; font-size: 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount, #contents-body .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount { font-size: 12px; white-space: nowrap; } } #str-contents .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount span, #contents-body .contentsWrapper[data-listdir][data-listall] .subMenu li:nth-of-type(1) h2.movieCount span { margin-bottom: 0; font-size: 1.333em; font-weight: 700; transform: translateY(0.15em); } #str-contents .contentsWrapper[data-contentsdir], #contents-body .contentsWrapper[data-contentsdir] { color: #424242; } #str-contents .contentsWrapper[data-contentsdir] .subPageNavi2, #contents-body .contentsWrapper[data-contentsdir] .subPageNavi2 { width: 100%; } #str-contents .contentsWrapper[data-contentsdir] .h1LogoImg + a, #contents-body .contentsWrapper[data-contentsdir] .h1LogoImg + a { display: inline-flex; } #str-contents .contentsWrapper[data-contentsdir] .movieContents, #contents-body .contentsWrapper[data-contentsdir] .movieContents { margin-bottom: 60px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents, #contents-body .contentsWrapper[data-contentsdir] .movieContents { margin-bottom: 30px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > .textWrap, #contents-body .contentsWrapper[data-contentsdir] .movieContents > .textWrap { margin-bottom: 12px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents > .textWrap p, #contents-body .contentsWrapper[data-contentsdir] .movieContents > .textWrap p { text-align: center; font-size: 12px; line-height: 1.4; } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul { /* display: grid; grid-template-columns: 0.9fr 2.7fr 0.8fr; grid-column-gap: 20px;*/ max-width: 950px; width: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px 0 0; position: relative; margin: 0 auto 20px; /* @include mq(lg){ padding-left: 30px; padding-right: 30px; } @include mq(tb){ grid-template-columns: 0.9fr 2.7fr 0.8fr; }*/ } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul { display: inherit; margin: 14px 0 8px; padding-left: inherit; padding-right: inherit; align-items: inherit; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li.dummy, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li.dummy { display: block; width: 100%; margin-right: 10px; max-width: 940px; display: none; } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li { position: relative; height: 40px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li { height: inherit; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a { display: flex; width: 13em; height: 100%; text-decoration: none; color: inherit; background-color: #ecf0f4; align-items: center; margin: 0; padding: 4px 9px; border-radius: 2em; position: relative; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a { width: 150px; margin: 0 10px 0 auto; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a img, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a img { width: 2em; margin-left: 0.5em; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a img, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a img { width: auto; margin-left: -1%; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a span, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a span { text-indent: 0.5em; padding-right: 0.5em; font-size: 16px; text-align: center; line-height: 1; color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a span, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a span { font-size: 13px; text-indent: inherit; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a::after, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 50%; right: 1.5%; width: 1.333em; height: 0.667em; transform-origin: center; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); font-size: 18px; font-weight: 700; color: #777777; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul li a::after, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul li a::after { font-size: 12px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul::before, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul::before { display: block; content: "動画サポート"; font-size: 28px; visibility: hidden; display: none; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents > ul::before, #contents-body .contentsWrapper[data-contentsdir] .movieContents > ul::before { display: none; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .listTitleArea, #contents-body .contentsWrapper[data-contentsdir] .movieContents .listTitleArea { width: 100%; max-width: 950px; margin: 0 auto; padding: 5px 0; background-color: #0c67c6; text-align: center; font-size: 24px; color: #ffffff; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .listTitleArea, #contents-body .contentsWrapper[data-contentsdir] .movieContents .listTitleArea { max-width: initial; font-size: 18px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea { width: 100%; max-width: 950px; margin: 0 auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea { max-width: initial; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub { margin: 0; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:first-of-type, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:first-of-type { width: 100%; background-color: #598cc1; margin: 0 0 20px; padding: 10px 0; font-size: 24px; text-align: center; border-radius: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:first-of-type, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:first-of-type { margin: 0 0 16px; font-size: 16px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:last-of-type, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:last-of-type { width: 100%; margin: 0 0 20px; padding: 0 10px; background-color: transparent; font-size: 32px; text-align: center; color: #424242; line-height: 1.4; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:last-of-type, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading.sub span:last-of-type { margin: 0 0 10px; font-size: 22px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox { font-size: 14px; margin: 0 0 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox { margin: 0 10px 8px; padding-left: 6px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox li, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox li { width: -moz-fit-content; width: fit-content; margin: 0 auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox li, #contents-body .contentsWrapper[data-contentsdir] .movieContents .mainTitleArea #mainHeading + .switchBox li { text-align: initial; margin: 0; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex { margin-bottom: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex { margin-bottom: 0; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex .movieContainer.notVertical, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .movieFlex .movieContainer.notVertical { margin-bottom: 10px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer { margin-bottom: 10px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .normalText, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .normalText { margin-bottom: 16px; line-height: 1.4; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .normalText.paBgGray, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .normalText.paBgGray { width: calc(100% + 20px); margin-bottom: 12px; padding: 10px; background-color: #ecf0f4; transform: translateX(-10px); } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .bulletList, #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .noticeList, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .bulletList, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .noticeList { margin-top: 0; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .numList, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .numList { margin-top: 8px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .numList li, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .listContainer .numList li { margin-bottom: 8px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .newwindowicon, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .newwindowicon { margin-left: 0.2em; transform: translateY(0em); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .newwindowicon, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .newwindowicon { transform: translateY(0.333em); } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .bulletList .newwindowicon, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .bulletList .newwindowicon { transform: translateY(0em); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .bulletList .newwindowicon, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex .bulletList .newwindowicon { transform: translateY(0.6em); } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex a, #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex a:visited, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex a, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] li .gifFlex a:visited { color: #006699; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] ul + p, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper .gifList[data-1giflist] ul + p { margin-top: 20px; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box { margin-top: 0; padding: 15px 0 25px; background-color: #bfcfe0; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box p, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box p { margin-bottom: 1em; font-size: 22px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box p, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box p { font-size: 15px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul { margin-top: 0; width: 100%; justify-content: space-evenly; padding: 0; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn { display: flex; width: 33%; height: 2.3em; margin: 0; justify-content: space-evenly; align-items: center; background-color: #ffffff; border: 2px solid #0c67c6; border-radius: 2em; color: #0c67c6; font-size: 24px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn { width: 44%; font-size: 16px; } } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a { display: flex; justify-content: center; align-items: center; width: 100%; font-size: inherit; line-height: 1; color: inherit; position: relative; } #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a img, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a img { position: absolute; width: 17px; right: 14px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a img, #contents-body .contentsWrapper[data-contentsdir] .movieContents .movieWrapper #questionnaire_box ul .ynBtn a img { width: 12px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer { width: 100%; margin: 0; max-width: 950px; margin: 0 auto; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer { width: 100%; margin: 0; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos { width: 100%; margin-bottom: 20px; padding: 0.5em 0; background-color: #ecf0f4; font-size: 22px; text-indent: 0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos { margin-bottom: 10px; font-size: 15px; text-indent: 1em; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos h3, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos h3 { display: flex; font-size: inherit; justify-content: center; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos h3, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .h3TitleOtherVideos h3 { justify-content: flex-start; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap { margin: 0 20px 20px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap { margin: 0 10px 10px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList { -moz-column-gap: 20px; column-gap: 20px; row-gap: 20px; margin-bottom: 60px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList { -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; margin-bottom: 30px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li { box-shadow: initial; max-height: initial; } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li a, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li a { display: flex; justify-content: center; align-items: center; } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li a .imageWrap, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer .carouselWrap.col3LayoutWrap #anotherMovieList li a .imageWrap { border: 1px solid #bbbbbb; } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper { margin: 0 20px 60px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper { margin: 0 12px 30px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div { display: flex; min-height: 75px; max-width: 540px; margin: 0 auto; padding: 9px 12px 9px 0; background-image: initial; background-color: #ffffff; border: 2px solid #0c67c6; border-radius: initial; box-shadow: initial; color: #0c67c6; position: relative; cursor: pointer; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div { max-width: initial; margin: 0; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture { display: flex; justify-content: center; align-items: center; width: 90px; margin-right: 5px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture { width: 60px; margin-right: 5px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture img, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture img { width: 48%; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture img, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div picture img { width: initial; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div h3, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div h3 { font-size: 32px; font-weight: 700; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div h3, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div h3 { font-size: 22px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div p, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div p { margin: 0; font-size: 21px; font-weight: 700; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div p, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div p { font-size: 14px; } } #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div::after, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div::after { display: flex; justify-content: center; align-items: center; content: "┛"; font-size: 43px; font-weight: 400; color: #0c67c6; position: absolute; right: 5px; top: 50%; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); -ms-transform: translateY(-50%) rotateZ(-45deg); } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div::after, #contents-body .contentsWrapper[data-contentsdir] > .movieListContainer #purposeWrapper li[data-nolist] > div::after { font-size: 29px; } } #str-contents .contentsWrapper[data-contentsdir] .buttonList, #contents-body .contentsWrapper[data-contentsdir] .buttonList { display: flex; justify-content: center; align-items: center; margin: 0; padding: 30px 10px; background-color: #bfcfe0; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .buttonList, #contents-body .contentsWrapper[data-contentsdir] .buttonList { margin: 0; padding: 30px 10px; } } #str-contents .contentsWrapper[data-contentsdir] .buttonList li, #contents-body .contentsWrapper[data-contentsdir] .buttonList li { position: relative; width: 20em; height: auto; min-height: initial; margin: 0 5px 0; border: 2px solid #0c67c6; border-radius: 2em; background-color: #ffffff; font-size: 24px; color: #0c67c6; font-weight: 700; text-align: center; box-shadow: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .buttonList li, #contents-body .contentsWrapper[data-contentsdir] .buttonList li { width: 100%; height: 37px; margin: 0 5px 0; font-size: 16px; } } #str-contents .contentsWrapper[data-contentsdir] .buttonList li a, #contents-body .contentsWrapper[data-contentsdir] .buttonList li a { display: flex; width: 100%; min-height: initial; height: 100%; justify-content: center; align-items: center; font-size: inherit; } #str-contents .contentsWrapper[data-contentsdir] .buttonList li a span, #contents-body .contentsWrapper[data-contentsdir] .buttonList li a span { line-height: 1; } #str-contents .contentsWrapper[data-contentsdir] .buttonList li > a::after, #contents-body .contentsWrapper[data-contentsdir] .buttonList li > a::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 50%; left: 5%; width: 1.333em; height: 0.667em; transform-origin: center; transform: translateY(-50%) rotateZ(-225deg); -webkit-transform: translateY(-50%) rotateZ(-225deg); -ms-transform: translateY(-50%) rotateZ(-225deg); font-size: 18px; font-weight: 700; color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-contentsdir] .buttonList li > a::after, #contents-body .contentsWrapper[data-contentsdir] .buttonList li > a::after { font-size: 12px; } } #str-contents .contentsWrapper[data-guidedir] > nav.subPageNavi, #contents-body .contentsWrapper[data-guidedir] > nav.subPageNavi { height: auto; padding: 10px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-guidedir] > nav.subPageNavi, #contents-body .contentsWrapper[data-guidedir] > nav.subPageNavi { padding: 0; } } #str-contents .contentsWrapper[data-guidedir] .subPageNavi + ul, #contents-body .contentsWrapper[data-guidedir] .subPageNavi + ul { display: none; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-guidedir] .subPageNavi + ul, #contents-body .contentsWrapper[data-guidedir] .subPageNavi + ul { display: block; visibility: hidden; margin-bottom: -25px; } } #str-contents .contentsWrapper[data-guidedir] .mainTitleArea, #contents-body .contentsWrapper[data-guidedir] .mainTitleArea { background-color: transparent; } #str-contents .contentsWrapper[data-guidedir] .mainTitleArea #mainHeading .iPhoneTitle, #contents-body .contentsWrapper[data-guidedir] .mainTitleArea #mainHeading .iPhoneTitle { width: 240px; margin: 15px auto 5px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-guidedir] .mainTitleArea #mainHeading .iPhoneTitle, #contents-body .contentsWrapper[data-guidedir] .mainTitleArea #mainHeading .iPhoneTitle { width: 160px; } } #str-contents .contentsWrapper[data-guidedir] .buttonList, #contents-body .contentsWrapper[data-guidedir] .buttonList { display: flex; justify-content: center; align-items: center; margin: 0; padding: 30px 10px; background-color: #bfcfe0; } #str-contents .contentsWrapper[data-guidedir] .buttonList li, #contents-body .contentsWrapper[data-guidedir] .buttonList li { position: relative; width: 20em; height: auto; min-height: initial; margin: 0 5px 0; border: 2px solid #0c67c6; border-radius: 2em; background-color: #ffffff; font-size: 24px; color: #0c67c6; font-weight: 700; text-align: center; box-shadow: initial; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-guidedir] .buttonList li, #contents-body .contentsWrapper[data-guidedir] .buttonList li { width: 100%; height: 37px; margin: 0 5px 0; font-size: 16px; } } #str-contents .contentsWrapper[data-guidedir] .buttonList li a, #contents-body .contentsWrapper[data-guidedir] .buttonList li a { display: flex; width: 100%; min-height: initial; height: 100%; justify-content: center; align-items: center; font-size: inherit; } #str-contents .contentsWrapper[data-guidedir] .buttonList li a span, #contents-body .contentsWrapper[data-guidedir] .buttonList li a span { line-height: 1; } #str-contents .contentsWrapper[data-guidedir] .buttonList li > a::after, #contents-body .contentsWrapper[data-guidedir] .buttonList li > a::after { display: flex; justify-content: center; align-items: center; content: "┛"; position: absolute; top: 50%; left: 5%; width: 1.333em; height: 0.667em; transform-origin: center; transform: translateY(-50%) rotateZ(-225deg); -webkit-transform: translateY(-50%) rotateZ(-225deg); -ms-transform: translateY(-50%) rotateZ(-225deg); font-size: 18px; font-weight: 700; color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper[data-guidedir] .buttonList li > a::after, #contents-body .contentsWrapper[data-guidedir] .buttonList li > a::after { font-size: 12px; } } #str-contents #modelPage.contentsWrapper.sticky:not(#topPage), #contents-body #modelPage.contentsWrapper.sticky:not(#topPage) { padding-top: 70px; } @media screen and (max-width: 520px) { #str-contents #modelPage.contentsWrapper.sticky:not(#topPage), #contents-body #modelPage.contentsWrapper.sticky:not(#topPage) { padding-top: 70px; } } #str-contents .contentsWrapper.sticky:not(#topPage) .commonSearchBox, #contents-body .contentsWrapper.sticky:not(#topPage) .commonSearchBox { position: fixed; top: 0; width: 100%; } #str-contents .contentsWrapper.sticky:not(#topPage) .searchResult, #contents-body .contentsWrapper.sticky:not(#topPage) .searchResult { padding-top: 90px; } @media screen and (max-width: 520px) { #str-contents .contentsWrapper.sticky:not(#topPage) .noPadding, #contents-body .contentsWrapper.sticky:not(#topPage) .noPadding { padding-top: 0px; } } #str-contents .suggestWordWrap, #contents-body .suggestWordWrap { width: 100%; background-color: #fff; position: absolute; z-index: 99; cursor: pointer; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow: hidden; } #str-contents .suggestWordWrap .suggest_btn, #contents-body .suggestWordWrap .suggest_btn { display: flex; align-items: center; height: px; border-left: 4px solid transparent; font-size: 24px; font-weight: initial; text-indent: 12px; } #str-contents .suggestWordWrap .suggest_btn:hover, #contents-body .suggestWordWrap .suggest_btn:hover { background: #ddd; border-left-color: #0c67c6; } @media screen and (max-width: 520px) { #str-contents .suggestWordWrap, #contents-body .suggestWordWrap { width: calc(100% - 30px); top: 46px; } #str-contents .suggestWordWrap .suggest_btn, #contents-body .suggestWordWrap .suggest_btn { height: 28px; border-left-width: 2px; font-size: 16px; text-indent: 6px; white-space: nowrap; overflow: hidden; } } #str-contents .buttonList .buttonToPrev, #contents-body .buttonList .buttonToPrev { background-image: none; } @media screen and (max-width: 520px) { #str-contents #modelPage .mainTitleArea, #contents-body #modelPage .mainTitleArea { margin-bottom: 5px; } } @media screen and (max-width: 520px) { #str-contents #modelPage .mainTitleArea #mainHeading.main, #contents-body #modelPage .mainTitleArea #mainHeading.main { margin: 0; font-size: 22px; color: #424242; font-weight: 700; } } #str-contents #modelPage #selectPurpose > div > p, #contents-body #modelPage #selectPurpose > div > p { font-size: 14px; } .contentsWrapper[data-topdir], .contentsWrapper[data-modeldir], .contentsWrapper[data-listdir], .contentsWrapper[data-contentsdir], .contentsWrapper[data-searchdir], .contentsWrapper[data-guidedir] { /* 「BIZ UDPゴシック」をWindowsで指定 */ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; color: #424242; } @media screen and (max-width: 520px) { .contentsWrapper[data-topdir] br[data-pc], .contentsWrapper[data-modeldir] br[data-pc], .contentsWrapper[data-listdir] br[data-pc], .contentsWrapper[data-contentsdir] br[data-pc], .contentsWrapper[data-searchdir] br[data-pc], .contentsWrapper[data-guidedir] br[data-pc] { display: none; } } .contentsWrapper[data-topdir] br[data-sp], .contentsWrapper[data-modeldir] br[data-sp], .contentsWrapper[data-listdir] br[data-sp], .contentsWrapper[data-contentsdir] br[data-sp], .contentsWrapper[data-searchdir] br[data-sp], .contentsWrapper[data-guidedir] br[data-sp] { display: none; } @media screen and (max-width: 520px) { .contentsWrapper[data-topdir] br[data-sp], .contentsWrapper[data-modeldir] br[data-sp], .contentsWrapper[data-listdir] br[data-sp], .contentsWrapper[data-contentsdir] br[data-sp], .contentsWrapper[data-searchdir] br[data-sp], .contentsWrapper[data-guidedir] br[data-sp] { display: initial; } } .header-2019 { min-width: unset; } .footer-breadcrumbs-2019 { min-width: unset; } .footer-breadcrumbs-2019_inner { min-width: unset; } .footer-2019_contents-inner { width: auto; max-width: 950px; } .footer-2019 { min-width: unset; } body #str-contents { padding: 0; } #contents-body { padding: 0; } #nav-top-area #nav-top a#nav-top-btn:before { border-top-width: 4px; border-right-width: 4px; }