@charset "UTF-8"; /** === layout styles === */ @import url(utility.css); @media screen and (max-width: 640px) { html { overflow-x: hidden; } } body { min-width: 950px; } @media screen and (max-width: 640px) { body { min-width: 100%; } } body.full { width: 696px; } @media screen and (max-width: 640px) { img { max-width: 100%; height: auto; } } img[width~="1"], img[height~="1"] { display: none; } .wrapper { width: 100%; margin: auto 0; text-align: center; line-height: 1.5; } @media screen and (max-width: 640px) { .wrapper { width: 100%; background-image: none; } } .wrapper.show { background-position: 50% 0; } .wrapper .wrapperInner { max-width: 980px; position: relative; z-index: 1; margin: 10px auto 0; *zoom: 1; } .wrapper .wrapperInner .subNaviService { display: block; } @media screen and (max-width: 640px) { .wrapper .wrapperInner .subNaviService { display: none; } } @media screen and (max-width: 640px) { .wrapper .wrapperInner { width: 100%; } } .wrapper .wrapperInner:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } /** element */ .element { margin: 0 auto; } @media screen and (max-width: 640px) { .elementSubNavi { -webkit-order: 1; order: 1; } } @media screen and (max-width: 640px) { .elementMainContents { -webkit-order: 2; order: 2; } } @media screen and (max-width: 640px) { .elementFunctions { -webkit-order: 3; order: 3; } } @media screen and (max-width: 640px) { .elementFunctionsSpecial { -webkit-order: 4; order: 4; } } @media screen and (max-width: 640px) { .elementFunctionsSupport { -webkit-order: 5; order: 5; } } @media screen and (max-width: 640px) { .elementFunctionsAfter { -webkit-order: 6; order: 6; } } @media screen and (max-width: 640px) { .elementSupplementLinks { -webkit-order: 7; order: 7; } } /** === decoration styles === */ ::-moz-selection { background: #3399ff; } ::selection { background: #3399ff; } body { font-family: 'メイリオ', 'meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Verdana', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', sans-serif; /*font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-size: 75%; /*font-feature-settings:"palt";*/ /*letter-spacing: 1px;*/ } p { margin: 20px 0 0 0; line-height: 1.37; } a { color: #4a7ab2; text-decoration: underline; } a:hover, a:active { color: #4a7ab2; text-decoration: none; } a:visited { color: #4a7ab2; } a.link { display: inline-block; background-repeat: no-repeat; background-position: 0% 0%; text-indent: 0 !important; } a.link.normal { padding-left: 18px; background-image: url(/common/images/icon-link.gif); } a.link.outside { padding-left: 18px; background-image: url(/common/images/icon-outside.png); background-size: 15px auto; } a.link.pdf { padding-left: 18px; background-image: url(/common/images/icon-pdf.gif); } a.link.attention { padding-left: 18px; background-image: url(/common/images/icon-attention.gif); } a.link.anch { padding-left: 18px; background-image: url(/common/images/icon-anchor.gif); } li a.link { padding-left: 25px; background-image: url(/common/images/icon-link.gif); background-position: left center; } .linklist a { margin-left: -18px; background-position: 0% 50%; } a:hover img.hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .hoverImg a:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } ul { margin-top: 20px; padding: 0; list-style: none; } ul.list li { margin-top: 8px; padding-left: 23px; background: url(/common/images/maincontents/icon-list-large.gif) no-repeat 10px 0.5em; } ul.list.small li { margin-top: 2px; background: url(/common/images/maincontents/icon-list-small.gif) no-repeat 11px 0.5em; font-size: 100%; } ol { margin-top: 20px; margin-left: 8px; padding-left: 18px; list-style: decimal; } ol.list li { margin-top: 8px; } ol.list.small li { margin-top: 2px; font-size: 100%; } .linklist { padding-left: 18px; } .linklist li { margin: 10px 0 0 0; } .linklist li > a { margin-top: -5px; padding-top: 5px; margin-bottom: -5px; padding-bottom: 5px; } .linklist li > span { margin-left: -26px; padding-left: 23px; background: url(/common/images/maincontents/icon-list-large.gif) no-repeat 12px 0.4em; } .emphasis { font-weight: bold; color: #000; } .url { word-break: break-all; } .note { padding-left: 1em; text-indent: -1em; color: #666; font-size: 100%; } .note.indent { text-indent: -2em; padding-left: 2em; color: #666; } .note.noteP { padding-left: 1.5em; text-indent: 0; position: relative; } .note.noteP .head { display: block; left: 0; position: absolute; } .note.noteP.indent { padding-left: 2em; } .noteColor { color: #f00; } .noteFlow { margin-top: 10px; } .noteFlow .noteFlowColumn { display: block; margin-top: 10px; text-indent: 0; } .pagetop { width: 85px; height: 30px; margin: 30px 0 -30px auto; text-align: right; } .pagetop a span { padding-left: 13px; background: url(/common/images/maincontents/icon-pagetop.gif) no-repeat 0 0.4em; } .nomargin { margin-top: 20px; } .nomargin * { margin: 0; } @media screen and (max-width: 640px) { .fitImage { width: 100%; height: auto; } } .mainImage { margin-top: 50px; } .iframe { border: 0; } .fontColorPurple { color: #da00d1 !important; } .fontColorIndigo { color: #2B00B3 !important; } .fontColorBlue { color: #00f !important; } .fontColorGreen { color: #07b600 !important; } .fontColorOrange { color: #F88B00 !important; } .fontColorRed { color: #f00 !important; } .fontColorPink { color: #ff0071 !important; } .spView { display: none; } @media screen and (max-width: 640px) { .spView { display: block; } .pcView { display: none; } } /** === elementHeader === */ #labelHikari { background: #666; text-align: center; } #labelHikari .inner { width: 950px; margin: 0 auto; position: relative; font-size: 14px; } @media screen and (max-width: 640px) { #labelHikari .inner { width: 100%; } } #labelHikari a { color: #fff; display: block; padding: 10px 0; text-decoration: none; } #labelHikari a p { line-height: 1.75em; margin: 0 0 0 20px; display: inline-block; font-size: 85%; border-radius: 3px; padding: 3px 10px 1px 15px; background: #fff; color: #000; } @media screen and (max-width: 640px) { #labelHikari a p { position: static; margin-top: 5px; display: inline-block; } } #labelHikari a p span { background: url(/common/images/bg-button-arrow-rb.png) no-repeat right center; background-size: 5px 7px; padding-right: 15px; } #labelHikari a:hover p { opacity: 0.8; } .elementHeader { width: 100%; height: 70px; z-index: 2; /*----------------------------------- switch ----------------------------------*/ /*----------------------------------- headTel ----------------------------------*/ /*----------------------------------- support ----------------------------------*/ /*----------------------------------- globalSubNavi ----------------------------------*/ /*----------------------------- mansion ------------------------------*/ /*----------------------------- hikari ------------------------------*/ /*----------------------------- top ------------------------------*/ /*----------------------------- index ------------------------------*/ } @media screen and (max-width: 950px) { .elementHeader { width: 950px; } } .elementHeader .sony-banner { height: 36px; background: #000; } .elementHeader .sony-banner .inner { position: relative; margin: 0 auto; } .elementHeader .sony-banner .inner span { position: absolute; top: 2px; right: 10px; display: block; width: 82px; height: 33px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(/common/images/header/sony_logo.png) no-repeat 0 0; } .elementHeader .headerInner { width: 100%; height: 70px; position: fixed; z-index: 999999; background: #000; } @media screen and (max-width: 950px) { .elementHeader .headerInner { position: static; } } .elementHeader .headerInner.shadow { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); } .elementHeader.elementHeaderHikari .headerInner { width: 100%; position: fixed; z-index: 999998; background: #000; } @media screen and (max-width: 950px) { .elementHeader.elementHeaderHikari .headerInner { position: static; } } .elementHeader.elementHeaderHikari .headerInner.shadow { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); } @media screen and (max-width: 640px) { .elementHeader { display: none; } } .elementHeader .switch { position: absolute; top: 0; left: 0; width: 130px; height: 0px; z-index: 10; } @media screen and (max-width: 950px) { .elementHeader .switch { position: static; float: left; } } .elementHeader .switch .globalMainNavi ul { position: relative; z-index: 100; } .elementHeader .switch .globalMainNavi li { position: absolute; left: 0; top: 0; transition: all 200ms ease; } .elementHeader .switch .globalMainNavi li a { display: block; } .elementHeader .switch .globalMainNavi li a .label { background: url(/common/images/header/nuro_menu.png) no-repeat; width: 130px; height: 70px; display: block; text-indent: -999em; } .elementHeader .switch .globalMainNavi .hikariMansion { background: #FFA500; } .elementHeader .switch .globalMainNavi .hikariMansion a .label { background-position: 0 0; } .elementHeader .switch .globalMainNavi .hikari, .elementHeader .switch .globalMainNavi .elementCategoryTopBlock.hikariPhone { background: #A3D839; } .elementHeader .switch .globalMainNavi .hikari a .label, .elementHeader .switch .globalMainNavi .elementCategoryTopBlock.hikariPhone a .label { background-position: 0 -70px; } .elementHeader .switch .globalMainNavi .tengTop { background: #999; } .elementHeader .switch .globalMainNavi .tengTop a { color: #fff; } .elementHeader .switch .globalMainNavi .tengTop a .label { background-position: 0 -280px; } .elementHeader .switch .globalMainNavi .supportTop { background: #000; } .elementHeader .switch .globalMainNavi .supportTop a .label { background-position: 0 -140px; } .elementHeader .switch .globalMainNavi .splanTop { background: #00558b; } .elementHeader .switch .globalMainNavi .splanTop a { color: #fff; } .elementHeader .switch .globalMainNavi .splanTop a .label { background-position: 0 -350px; } .elementHeader .switch .globalMainNavi .nuroTop { background: #000; } .elementHeader .switch .globalMainNavi .nuroTop a .label { background-position: 0 -210px; } .elementHeader .headTel { width: 188px; padding: 5px 0; position: absolute; top: 10px; right: 8px; } @media screen and (max-width: 950px) { .elementHeader .headTel { width: 193px; float: left; margin: 0; position: static; padding: 15px 0 0 20px; text-align: center; } } @media screen and (max-width: 640px) { .elementHeader .headTel { display: none; } } @media screen and (max-width: 950px) { .elementHeader.headerSimple .headTel { float: none; position: absolute; padding: 8px 0 !important; } } .elementHeader .support { width: 36px; position: absolute; top: 17px; right: 5px; } @media screen and (max-width: 950px) { .elementHeader .support { float: right; position: static; padding-top: 17px; margin-left: 10px; } } .elementHeader .support a { display: block; text-indent: -9999px; background: url(/common/images/header/201507/label-globalMenu-Support.png) no-repeat 0 0; height: 35px; background-size: 30px auto; } .elementHeader .support a:hover { opacity: 0.8; } .elementHeader .globalSubNavi { width: 100%; } @media screen and (max-width: 950px) { .elementHeader .globalSubNavi { width: 581px; float: left; } } .elementHeader .globalSubNavi .inner { margin-right: 194px; margin-left: 130px; } @media screen and (max-width: 950px) { .elementHeader .globalSubNavi .inner { margin: 0; } } .elementHeader .globalSubNavi .inner > ul { display: inline-block; margin: 0 auto; padding: 10px 0; } .elementHeader .globalSubNavi .inner > ul li { width: auto; float: left; margin: 0 15px; } .elementHeader .globalSubNavi .inner > ul li a { display: block; padding: 15px 0 14px; font-size: 14px; color: #fff; text-decoration: none; } .elementHeader .globalSubNavi .inner > ul li a .label { display: block; } .elementHeader .globalSubNavi .inner > ul li span.op { display: block; padding: 15px 0 14px; font-size: 14px; color: #fff; text-decoration: none; cursor: pointer; } .elementHeader .globalSubNavi .inner > ul li span.op .label { display: block; } .elementHeader .globalSubNavi .inner > ul li span.op:hover { color: #99cc33; } .elementHeader .globalSubNavi .inner > ul li.hikari a.active, .elementHeader .globalSubNavi .inner > ul li.elementCategoryTopBlock.hikariPhone a.active, .elementHeader .globalSubNavi .inner > ul li.hikari a:hover, .elementHeader .globalSubNavi .inner > ul li.elementCategoryTopBlock.hikariPhone a:hover { color: #99cc33; } .elementHeader .globalSubNavi .inner > ul li.hikariMansion a.active, .elementHeader .globalSubNavi .inner > ul li.hikariMansion a:hover { color: #FFA500; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.hikariMansion { z-index: 999; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.hikariMansion a.active { top: 0; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.hikariMansion a .label { background-position: -130px 0; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.hikari.active, .elementHeader.elementHeadermansion .switch .globalMainNavi li.active.elementCategoryTopBlock.hikariPhone { top: 70px; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.tengTop.active { top: 140px; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.splanTop.active { top: 210px; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.supportTop.active { top: 280px; } .elementHeader.elementHeadermansion .switch .globalMainNavi li.nuroTop.active { top: 350px; } @media screen and (max-width: 950px) { .elementHeader.elementHeadermansion .globalSubNavi { width: 627px; } } .elementHeader.elementHeadermansion .globalSubNavi .inner { margin-right: 196px; padding-left: 160px; } @media screen and (max-width: 950px) { .elementHeader.elementHeadermansion .globalSubNavi .inner { margin: 0; } } .elementHeader.elementHeadermansion .globalSubNavi .inner ul { width: 776px; } @media screen and (max-width: 1110px) { .elementHeader.elementHeadermansion .globalSubNavi .inner ul { width: 602px; margin: 0 auto; } } @media screen and (max-width: 1110px) { .elementHeader.elementHeadermansion .globalSubNavi .inner ul li { margin: 0 3px; } } @media screen and (max-width: 1110px) { .elementHeader.elementHeadermansion .globalSubNavi .inner ul li a { font-size: 13px; } } .elementHeader.elementHeadermansion .globalSubNavi .inner ul li a.active, .elementHeader.elementHeadermansion .globalSubNavi .inner ul li a:hover { color: #FFA500; } .elementHeader .headerLink { background: #666; text-align: center; padding: 8px 8px 0; box-sizing: border-box; height: 46px; color: #fff; } .elementHeader .headerLink p { display: inline-block; vertical-align: middle; line-height: 100%; margin: 0; padding-right: 25px; font-weight: bold; font-size: 14px; } .elementHeader .headerLink a { display: inline-block; line-height: 100%; border-radius: 4px; background: #fff url(/common/images/bg-button-arrow-rb.png) no-repeat right 10px center; padding: 8px 30px 8px 15px; font-size: 12px; text-decoration: none; color: #222; border: 1px solid #d1d1d1; } .elementHeader .headerLink a:hover { opacity: 0.8; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.hikari, .elementHeader.elementHeaderHikari .switch .globalMainNavi li.elementCategoryTopBlock.hikariPhone { z-index: 999; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.hikari a.active, .elementHeader.elementHeaderHikari .switch .globalMainNavi li.elementCategoryTopBlock.hikariPhone a.active { top: 0; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.hikari a .label, .elementHeader.elementHeaderHikari .switch .globalMainNavi li.elementCategoryTopBlock.hikariPhone a .label { background-position: -130px -70px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.hikariMansion.active { top: 70px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.tengTop.active { top: 140px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.tengTop.active { top: 140px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.splanTop.active { top: 210px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.supportTop.active { top: 280px; } .elementHeader.elementHeaderHikari .switch .globalMainNavi li.nuroTop.active { top: 350px; } @media screen and (max-width: 950px) { .elementHeader.elementHeaderHikari .globalSubNavi { width: 627px; } } .elementHeader.elementHeaderHikari .globalSubNavi .inner { margin-right: 196px; } @media screen and (max-width: 950px) { .elementHeader.elementHeaderHikari .globalSubNavi .inner { margin: 0 0 0 140px; } } .elementHeader.elementHeaderHikari .globalSubNavi .inner ul { width: 677px; } @media screen and (max-width: 1081px) { .elementHeader.elementHeaderHikari .globalSubNavi .inner ul { width: 540px; padding-left: 10px; } } @media screen and (max-width: 1081px) { .elementHeader.elementHeaderHikari .globalSubNavi .inner ul li { margin: 0 5px; } } .elementHeader.elementHeaderHikari .globalSubNavi .inner ul li a.active, .elementHeader.elementHeaderHikari .globalSubNavi .inner ul li a:hover { color: #99cc33; } @media screen and (max-width: 1081px) { .elementHeader.elementHeaderHikari .globalSubNavi .inner ul li a { font-size: 13px; } } .elementHeader.elementHeaderHikari .globalSubNavi .menuOption { position: relative; } .elementHeader.elementHeaderHikari .globalSubNavi .menuOption .menuOptionSb { top: 50px; position: absolute; z-index: 999999; width: 200px; display: none; } .elementHeader.elementHeaderHikari .globalSubNavi .menuOption .menuOptionSb li { display: block; margin: 0; width: 200px; } .elementHeader.elementHeaderHikari .globalSubNavi .menuOption .menuOptionSb li a { display: block; box-sizing: border-box; padding: 10px 30px; background: #444; border-bottom: 1px solid #aaa; color: #fff !important; } .elementHeader.elementHeaderHikari .globalSubNavi .menuOption .menuOptionSb li a:hover { color: #99cc33 !important; } .elementHeader.elementHeadertop .switch .globalMainNavi li.nuroTop a .label { background: url(/common/images/header/201501/label-globalLogo.png) no-repeat center 12px; background-size: 90px auto; } .elementHeader.elementHeadertop .headTel { right: 65px; } .elementHeader.simpleHeader { background: #000; } @media screen and (max-width: 640px) { .elementHeader.simpleHeader { display: block; } } .elementHeader.simpleHeader h1 { height: 50px; margin: 0; } @media screen and (max-width: 950px) { .elementHeader.simpleHeader h1 { height: 38px; } } .elementHeader.simpleHeader .top { display: none; } .elementHeader.simpleHeader .nurotop .label { background: url(/common/images/header/201501/label-globalLogo.png) no-repeat center 12px; background-size: 90px auto; height: 70px; text-indent: -999em; width: 130px; display: block; } .elementHeader.simpleHeader .switch.open { display: none; } .elementHeader.simpleHeader .closer { width: 99px; height: 43px; position: absolute; right: 20px; top: 6px; z-index: 10; } .elementHeader.simpleHeader .closer .close { display: block; margin: 9px 0 0 42px; height: 16px; width: 57px; text-indent: -999em; background: url(/common/images/header/button-close.png) no-repeat 0 0; } @media screen and (max-width: 640px) { .elementHeader.simpleHeader .closer { display: none; } } .elementHeader.headerIndex .headerInner { position: relative; background: #fff; border-bottom: 1px solid #333333; } .elementHeader.headerIndex .headerInner.shadow { box-shadow: none; } .elementHeader.headerIndex .headerInner .switch .globalMainNavi li.nuroTop { background: #fff; } .elementHeader.headerIndex .headerInner .switch .globalMainNavi li.nuroTop a .label { background: url(/common/images/header/index_img_set.png) no-repeat 0 0; background-position: 20px -48px; } .elementHeader.headerIndex .headerInner .headTel { padding: 2px 0; right: 65px; } @media screen and (max-width: 950px) { .elementHeader.headerIndex .headerInner .headTel { padding: 18px 0; } } .elementHeader.headerIndex .headerInner .support { top: 16px; } .elementHeader.headerIndex .headerInner .support a { height: 38px; background: url(/common/images/header/index_img_set.png) no-repeat 0 0; background-position: 0 -142px; } .elementHeader.simpleHeader { background: #000; height: 70px; } @media screen and (max-width: 640px) { .elementHeader.simpleHeader { display: block; } } .elementHeader.simpleHeader h1 { height: 50px; margin: 0; } @media screen and (max-width: 950px) { .elementHeader.simpleHeader h1 { height: 38px; } } .elementHeader.simpleHeader .top { display: none; } .elementHeader.simpleHeader .nurotop .label { background: url(/common/images/header/201501/label-globalLogo.png) no-repeat center 12px; background-size: 90px auto; height: 70px; text-indent: -999em; width: 130px; display: block; } .elementHeader.simpleHeader .switch.open { display: none; } .elementHeader.simpleHeader .closer { width: 99px; height: 43px; position: absolute; right: 20px; top: 6px; z-index: 10; } .elementHeader.simpleHeader .closer .close { display: block; margin: 9px 0 0 42px; height: 16px; width: 57px; text-indent: -999em; background: url(/common/images/header/button-close.png) no-repeat 0 0; } @media screen and (max-width: 640px) { .elementHeader.simpleHeader .closer { display: none; } } /** === elementFunctionsSpecial === */ .elementFunctionsSpecial #entryCampaign { border-bottom: none; } .elementFunctionsSpecial #entryCampaign .campaignTtl { background-image: url(/common/images/sidemenu_campaign_01.png); background-repeat: no-repeat; background-color: #000; padding: 30px; text-indent: -9999px; background-position: 50%; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; margin: 0; } .elementFunctionsSpecial #entryCampaign .campaignInner { border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; background-color: #fff; padding: 10px; text-align: center; } .elementFunctionsSpecial #entryCampaign .campaignInner .campaignActive { display: none; } .elementFunctionsSpecial #entryCampaign .campaignInner a { text-indent: 0; margin-top: 10px; } @media screen and (max-width: 640px) { .elementFunctionsSpecial #entryCampaign .campaignInner a { height: auto; } } .elementFunctionsSpecial .document { border: 1px solid #000; padding: 10px; text-align: center; margin-bottom: 20px; font-size: 150%; } .elementFunctionsSpecial .document a.link.outside { background-position: left center; } .elementFunctionsSpecial .campaignAttention { display: none; border-bottom: none; text-align: center; margin-top: 5px; } .elementFunctionsSpecial .campaignAttention a { color: #4a7ab2; padding: 3px 0 3px 25px; background: url(/common/images/maincontents/icon-attention.gif) no-repeat 0 center; background-size: auto 17px; } /** === elementBreadcrumbs === */ .elementBreadcrumbs { width: 950px; margin-top: 20px; font-size: 14px; min-height: 0; } @media screen and (max-width: 640px) { .elementBreadcrumbs { display: none; } } .elementBreadcrumbs > .inner { width: 700px; margin: 0 auto 0 0; padding: 0; text-align: left; line-height: 1.2; } .elementBreadcrumbs li { display: inline; } .elementBreadcrumbs li + li { padding: 0 0 0 20px; background: url(data:image/gif;base64,R0lGODlhDgAOAPABALu7u////yH/C1hNUCBEYXRhWE1QST94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHhGMTFFMjkxQkMAIfkEBQAAAQAsAAAAAA4ADgAAAhGMj6nL7d8AgEFS63CctPuPFAA7) no-repeat 3px 50%; } .elementBreadcrumbs li a, .elementBreadcrumbs li a:hover, .elementBreadcrumbs li a:active, .elementBreadcrumbs li a:visited { color: #333; font-style: normal; } .elementBreadcrumbs li span { color: #666; font-style: normal; } /** === elementMainContents === */ .elementMainContents { width: 696px; min-height: 1500px; float: left; margin: 0; padding: 0; background: url(/common/images/maincontents/bg-maincontents.png) no-repeat 0 0; text-align: left; } @media screen and (max-width: 640px) { .elementMainContents { width: 100%; min-height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: none; margin-right: 0; margin-left: 0; padding-right: 10px; padding-left: 10px; background: none; } } .elementMainContents.singleColumn { width: 100%; } .elementMainContents.singleColumn .elementOptionList li { width: 298px; } @media screen and (max-width: 640px) { .elementMainContents.singleColumn .elementOptionList li { width: 100%; float: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 640px) { .elementMainContents.singleColumn .elementSimpleTable dl { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; margin-top: 0; } } @media screen and (max-width: 640px) { .elementMainContents.singleColumn .elementSimpleTable dl dt { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 0; } } .elementMainContents.singleColumn .elementSimpleTable dl dd { width: 667px; } @media screen and (max-width: 640px) { .elementMainContents.singleColumn .elementSimpleTable dl dd { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; } } .elementMainContents .attention { padding: 15px 0; } .elementMainContents h1 { margin: 0; padding: 14px 30px 11px 30px; background: #6c6c6c; border-top: 3px solid #c8c8c9; color: #fff; font-size: 150%; font-style: normal; line-height: 1.1; } @media screen and (max-width: 640px) { .elementMainContents h1 { margin-top: 10px; padding: 10px; } } .elementMainContents.hikari h1, .elementMainContents.elementCategoryTopBlock.hikariPhone h1 { border-top: 3px solid #89da16; background: #333; } .elementMainContents.lte h1 { border-top: 3px solid #6497dc; background: #333; } .elementMainContents.whatsNuro h1 { border-top: 3px solid #6497dc; background: #333; } .elementMainContents > .inner, .elementMainContents > div .inner { margin: 0 0 -1px 30px; padding-bottom: 1px; } @media screen and (max-width: 640px) { .elementMainContents > .inner, .elementMainContents > div .inner { margin-left: 0; } } .elementMainContents h2 { margin: 50px 0 30px 0; padding: 12px 10px 12px 10px; background: #111 url(data:image/gif;base64,R0lGODdhAQAEAPEAAJ+fn4yMjKamppaWliH/C1hNUCBEYXRhWE1QjT94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHhBMTU4QTc2Qzc2REEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2t0IGVuZD0iciI/PgAsAAAAAAEABAAAAgMUFgUAOw==) repeat-x 0 100%; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; color: #fff; font-size: 133%; font-style: normal; line-height: 1.1; } .elementMainContents h3 { margin: 40px 0 25px 0; padding: 10px 20px; background: #e3e3e3; color: #333; font-size: 117%; font-style: normal; line-height: 1.1; } .elementMainContents h4 { margin: 25px 0 0 0; padding: 3px 20px 3px 14px; border-left: 4px solid #272727; color: #333; font-size: 117%; font-style: normal; line-height: 1.1; } .elementMainContents .titlePeriod { overflow: hidden; } .elementMainContents .titlePeriod .main, .elementMainContents .titlePeriod .sub { display: block; } .elementMainContents .titlePeriod .main { float: left; width: 80%; } .elementMainContents .titlePeriod .sub { float: right; font-weight: normal; text-align: right; width: 20%; } @media screen and (max-width: 640px) { .elementMainContents .titlePeriod .main { float: none; width: auto; } .elementMainContents .titlePeriod .sub { float: none; margin-top: 5px; text-align: left; width: auto; } } .elementMainContents .deviceName { vertical-align: middle; } .elementMainContents .deviceName .modelNumber { display: inline-block; margin-right: 20px; width: 130px; } .elementMainContents .deviceName .deviceUser { display: inline-block; *display: inline; *zoom: 1; } @media screen and (max-width: 640px) { .elementMainContents .deviceName .deviceUser { display: block; } } .elementMainContents .deviceNameNote { font-size: 0.8em; overflow: hidden; } .elementMainContents .deviceNameNote p:first-child { margin-top: 0; } .elementMainContents .softwareVer { margin-top: 10px; margin-bottom: 30px; overflow: hidden; } /* === elementMainContentsFull === */ .elementMainContentsFull { width: 100%; min-height: 800px; float: left; margin: -10px 0 0 -10px; padding: 10px 0 0 10px; background: url(/common/images/maincontents/bg-maincontents.png) no-repeat 0 0; text-align: left; } .elementMainContentsFull > .inner { margin: 0 0 -1px 30px; padding-bottom: 1px; } @media screen and (max-width: 640px) { .elementMainContentsFull > .inner { margin-left: 0; } } @media screen and (max-width: 640px) { .elementMainContentsFull { width: 100%; min-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none; margin-right: 0; margin-left: 0; padding-right: 10px; padding-left: 10px; background: none; } } .spDisplay { display: none; } @media screen and (max-width: 640px) { .spDisplay { display: block; position: relative; z-index: 100; } } /** === gooddesign === */ .gooddesignNote { width: 950px; margin: 80px auto 0; } @media screen and (max-width: 640px) { .gooddesignNote { width: 100%; padding: 0 10px; box-sizing: border-box; margin: 40px 0 0; } } .gooddesignNote li { position: relative; padding-left: 1.2em; font-size: 0.8em; text-align: left; } .gooddesignNote li span { position: absolute; top: 0; left: 0; } .gooddesign { margin: 20px auto 0; left: 1px; text-align: left; width: 950px; } @media screen and (max-width: 640px) { .gooddesign { width: 100%; } } .gooddesign ul { text-align: center; } .gooddesign li { display: inline-block; margin-right: 18px; text-align: center; } @media screen and (max-width: 640px) { .gooddesign li { width: 100%; margin: 16px 0 0; } } /** === elementFooter === */ .tabWrap { margin-top: 50px; } .tabWrap .tabBtn { width: 950px; text-align: left; margin: 0 auto; } .tabWrap .tabBtn li { display: inline-block; margin-right: 10px; padding: 10px 15px 10px; border-radius: 8px 8px 0 0; background: #606060; cursor: pointer; } .tabWrap .tabBtn li p { text-align: center; margin: 0 0 10px; font-size: 12px; color: #fff; line-height: 100%; } .tabWrap .tabBtn li:hover { opacity: 0.8; } .tabWrap .tabBtn li.select { background: #262626; } @media screen and (max-width: 640px) { .tabWrap { width: 100%; box-sizing: border-box; padding: 0 80px 0 10px; } .tabWrap .tabBtn { width: 100%; } .tabWrap .tabBtn li { margin-right: 0; width: 49%; box-sizing: border-box; } .tabWrap .tabBtn li img { width: 100%; } .tabWrap .tabBtn li:first-child { margin-right: 2%; } } .tabCont { min-height: 620px; } .tabCont.hide { display: none; } .footer_cpno1 { display: table; background: url(/common/images/footer/201403/border_copyright.png) no-repeat center top; padding-top: 20px; margin: 20px 0; width: 100%; } @media screen and (max-width: 640px) { .footer_cpno1 { padding: 20px 10px 0; } } .footer_cpno1 div { display: table-cell; text-align: left; vertical-align: middle; width: 120px; } .footer_cpno1 p { display: table-cell; text-align: left; vertical-align: middle; color: #fff; } .elementFooter { background-color: #262626; margin: auto 0; width: 100%; color: #ccc; position: relative; } @media screen and (max-width: 640px) { .elementFooter { margin-top: 0px; } } .elementFooter .pagetop { margin: 0; height: 35px; width: 35px; right: 20px; display: none; position: fixed; top: auto; bottom: 20px; background: #262626; } .elementFooter .pagetop.active { position: absolute; top: -35px; } .elementFooter .pagetop a { text-decoration: none; } .elementFooter .pagetop a:hover { opacity: 0.8; } .elementFooter .pagetop a span { display: block; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; height: 35px; width: 35px; background: url(../images/pagetop.png) no-repeat 0 0; background-size: 100%; } .elementFooter > .inner { margin: 0 auto; padding: 0; position: relative; width: 950px; } @media screen and (max-width: 640px) { .elementFooter > .inner { height: auto; width: 100%; } } .elementFooter ul { margin: 0; } .elementFooter .sitemap { padding-top: 20px; margin-left: -15px; overflow: hidden; padding-bottom: 3px; text-align: left; } @media screen and (max-width: 640px) { .elementFooter .sitemap { background: none; margin: 0; } } .elementFooter .sitemap a { color: #ccc; display: block; font-size: 16px; padding-left: 6px; text-decoration: none; } .elementFooter .sitemap a.pdf { padding-left: 18px; } .elementFooter .sitemap a:hover { text-decoration: underline; } .elementFooter .sitemap a.outside span:after { background: url(/common/images/footer/201403/icon-footerSitemap.png) no-repeat -12px 0; content: ''; display: inline-block; height: 12px; margin-left: 2px; vertical-align: middle; width: 12px; } .elementFooter .sitemap a.pc span:after { background: url(/common/images/icon_pc.png) no-repeat 0 0; content: ''; display: inline-block; height: 12px; margin-left: 4px; vertical-align: middle; width: 15px; } .elementFooter .sitemap a.pdf span:after { background-position: -24px 0; } .elementFooter .sitemap .footerBread { padding: 15px 20px 5px; overflow: hidden; } .elementFooter .sitemap .footerBread ul li { display: inline; } .elementFooter .sitemap .footerBread ul li + li { padding: 0 0 0 20px; background: url(data:image/gif;base64,R0lGODlhDgAOAPABALu7u////yH/C1hNUCBEYXRhWE1QST94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHhGMTFFMjkxQkMAIfkEBQAAAQAsAAAAAA4ADgAAAhGMj6nL7d8AgEFS63CctPuPFAA7) no-repeat 3px 50%; } .elementFooter .sitemap .footerBread ul li a { background: none; display: inline; font-size: 14px; padding-left: 0; } .elementFooter .sitemap .category > .categoryTop { float: left; font-weight: bold; margin-left: 16px; width: 225px; } @media screen and (max-width: 640px) { .elementFooter .sitemap .category > .categoryTop { padding: 10px 10px 10px; box-sizing: border-box; margin: 0; overflow: hidden; width: 100%; } } .elementFooter .sitemap .category > .categoryTop .title { border-bottom: 2px solid #8a8a8a; margin: 0; padding: 10px 0 3px 0; font-size: 16px; /*&.active { background-color: #000; color: #fff; }*/ } @media screen and (max-width: 640px) { .elementFooter .sitemap .category > .categoryTop .title { padding-left: 0; } } .elementFooter .sitemap .category .hikari .title, .elementFooter .sitemap .category .elementCategoryTopBlock.hikariPhone .title { border-color: #a4d939; } .elementFooter .sitemap .category .hikari .title.active, .elementFooter .sitemap .category .elementCategoryTopBlock.hikariPhone .title.active { color: #a4d939; } .elementFooter .sitemap .category .hikariMansion .title { border-color: #ff812d; /* &.active { color: #ff812d; } */ } .elementFooter .sitemap .part { font-weight: normal; } .elementFooter .sitemap .part a { font-size: 14px; } .elementFooter .sitemap .part .item { border-top: 1px dotted #555; margin: 0 0 7px; padding-top: 7px; } .elementFooter .sitemap .part .item:first-child { border: none; } @media screen and (max-width: 640px) { .elementFooter .sitemap .part { -moz-transition-property: height; -o-transition-property: height; -webkit-transition-property: height; transition-property: height; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .elementFooter .sitemap .part.open { height: auto; } .elementFooter .sitemap .part.close { height: 0 !important; } } .elementFooter .sitemap .subItem .item { border: none; margin: 0 0 0 6px; padding-top: 0; } .elementFooter .sitemap .subItem .item a { background-position: 2px 4px; padding-left: 12px; } .elementFooter .sitemap .item.inline { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; } .elementFooter .sitemap .item.inline a { padding-left: 6px; background-position: -4px 4px; } .elementFooter .sitemap .item.inline:first-child a { background-position: 2px 4px; padding-left: 12px; } .elementFooter .search { height: 21px; padding: 0; z-index: 13; } @media screen and (max-width: 640px) { .elementFooter .search { width: 100%; height: 67px; position: static; padding: 0; } } .elementFooter .search form { width: 100%; position: relative; } @media screen and (max-width: 640px) { .elementFooter .search form { width: 100%; height: 67px; position: static; } } .elementFooter .search .text { width: 170px; height: 21px; display: block; position: absolute; left: 0; top: 0; padding: 0 9px 0 5px; background: url(/common/images/header/bg-search_black.png) no-repeat 0 50%; } @media screen and (max-width: 640px) { .elementFooter .search .text { width: auto; height: auto; position: static; padding: 0 0 0 11px; -webkit-order: 1; order: 1; -webkit-flex: 1; flex: 1; background: none; } } .elementFooter .search .text input { width: 180px; height: 18px; margin-top: 3px; padding: 0; background: transparent; border: 0; outline: 0; color: #222; } @media screen and (max-width: 640px) { .elementFooter .search .text input { width: 100%; height: 28px; margin-top: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; background: #aeaeae; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYWVhZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeaeae), color-stop(100%, #f8f8f8)); background: -moz-linear-gradient(top, #aeaeae, #f8f8f8); background: -webkit-linear-gradient(top, #aeaeae, #f8f8f8); background: linear-gradient(to bottom, #aeaeae, #f8f8f8); border: 1px solid #000; -moz-border-radius: 14px / 14px; -webkit-border-radius: 14px 14px; border-radius: 14px / 14px; color: #000; } } .elementFooter .search .submit { width: 40px; height: 21px; position: absolute; right: 0; top: 0; display: block; } @media screen and (max-width: 640px) { .elementFooter .search .submit { width: 66px; height: 67px; position: relative; -webkit-order: 2; order: 2; } } .elementFooter .search .submit input { width: 40px; height: 21px; display: block; color: #fff; } @media screen and (max-width: 640px) { .elementFooter .search .submit input { visibility: hidden; z-index: 1; } } .elementFooter .search .submit input.button-submit { background: url(/common/images/header/button-search_black.png) no-repeat 0 0; border: none; padding: 0; text-indent: -999em; } .elementFooter .search .submit input.button-submit:hover { background-position: 0 -21px; } .elementFooter .search .submit label { display: none; } @media screen and (max-width: 640px) { .elementFooter .search .submit label { width: 66px; height: 67px; position: absolute; left: 0; top: 0; display: block; background: url(/common/images/header/button-search-sp.png) no-repeat 21px 22px; z-index: 2; } } .elementFooter .relation { background: url(/common/images/footer/201403/border_copyright.png) no-repeat center top; clear: both; overflow: hidden; float: none; width: 100%; } .elementFooter .relation .category { float: left; width: 750px; text-align: left; } .elementFooter .relation .pcDisplay { padding: 20px 0 0; } .elementFooter .relation .pcDisplay .title { display: none; } .elementFooter .relation .pcDisplay .part .item { border-right: 1px solid #ccc; text-align: left; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; border-top: none; margin: 0; } .elementFooter .relation .pcDisplay .part .item a { color: #ccc; display: block; padding: 0 6px; font-size: 14px; text-decoration: none; } .elementFooter .relation .pcDisplay .part .item a:hover { text-decoration: underline; } @media screen and (max-width: 640px) { .elementFooter .relation { clear: none; float: none; } .elementFooter .relation .category { width: 100%; float: none; padding: 10px; box-sizing: border-box; } .elementFooter .relation .pcDisplay { text-align: left; padding-top: 0; } .elementFooter .relation .pcDisplay .title { display: block; } .elementFooter .relation .pcDisplay .part .item { display: block; border: none; border-top: 1px dotted #555; margin: 0 0 7px; padding: 7px 0 0; } .elementFooter .relation .pcDisplay .part .item a { background: url(/common/images/footer/icon-link.gif) no-repeat -4px 4px; color: #ccc; display: block; padding-left: 6px; text-decoration: none; } } .elementFooter .certifications { width: 195px; margin-top: 10px; float: right; } @media screen and (max-width: 640px) { .elementFooter .certifications { background: #262626; border-bottom: 1px solid #444; margin: 0; float: none; width: 100%; } } .elementFooter .certifications .inner { height: 61px; width: 193px; } @media screen and (max-width: 640px) { .elementFooter .certifications .inner { margin: 0 auto; padding: 15px 0; position: static; } } .elementFooter .certifications p { float: left; height: 61px; margin: 0 0 0 5px; width: 61px; } .elementFooter .certifications .anab_bsi_isms { margin-left: 0; } .elementFooter .copyright { clear: both; height: 14px; margin: 0; padding: 14px 0 16px 0; width: 100%; } .elementFooter .copyright p { text-align: left; margin: 0; height: 14px; font-size: 12px; } @media screen and (max-width: 640px) { .elementFooter .copyright { background-image: none; color: #868686; font-size: 100%; line-height: 1.0; padding: 8px 0; position: static; text-indent: 0; } .elementFooter .copyright p { background-image: none; height: auto; text-align: center; } } /** === elementSupport === */ .elementSupport { width: 950px; position: relative; z-index: 1; margin: 0 auto; background: none; min-height: 0; } @media screen and (max-width: 640px) { .elementSupport { width: 100%; min-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none; margin-right: 0; margin-left: 0; padding-right: 10px; padding-left: 10px; background: none; } } .elementSupport > section.inner { margin: 0; } .elementSupport > section.inner h1 { background: #6c6c6c; border-top: 3px solid #c8c8c9; height: auto; padding: 14px 30px 11px 30px; text-indent: 0; } .elementSupport > section.inner .navigation { margin-top: 20px; } .elementSupport > section.inner .navigation a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .elementSupport > section.inner .navigation ul { overflow: hidden; font-size: 130%; margin-top: 0; } .elementSupport > section.inner .navigation ul li { float: left; width: 468px; border: 1px solid #626262; text-align: center; min-height: 390px; } .elementSupport > section.inner .navigation ul li p { text-align: left; width: 77%; margin: 40px auto; } .elementSupport > section.inner .navigation ul li h2 { border-radius: 0; padding: 20px 0; margin: 0; text-indent: -999em; } .elementSupport > section.inner .navigation ul li h2 span { display: block; height: 68px; } .elementSupport > section.inner .navigation ul li a.linkBtn { display: block; width: 70%; border-radius: 5px; margin: 0 auto 20px; text-align: center; padding: 17px; text-indent: -999em; } .elementSupport > section.inner .navigation ul li a.linkBtn span { display: block; } .elementSupport > section.inner .navigation ul li.hikari h2, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone h2 { background: #a5d747; } .elementSupport > section.inner .navigation ul li.hikari h2 span, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone h2 span { background: url(/common/images/support/title_h2_support_hikari.png) no-repeat center center; } @media screen and (max-width: 640px) { .elementSupport > section.inner .navigation ul li.hikari h2, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone h2 { padding: 0; } .elementSupport > section.inner .navigation ul li.hikari h2 span, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone h2 span { background-size: 250px auto; } } .elementSupport > section.inner .navigation ul li.hikari a.linkBtn, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone a.linkBtn { background: #a5d747; } .elementSupport > section.inner .navigation ul li.hikari a.linkBtn span, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone a.linkBtn span { background: url(/common/images/support/linkBtn_hikari.png) no-repeat center center; } .elementSupport > section.inner .navigation ul li.hikari a.linkBtn.mypage span, .elementSupport > section.inner .navigation ul li.elementCategoryTopBlock.hikariPhone a.linkBtn.mypage span { background: url(/common/images/support/linkBtn_hikariMypage.png) no-repeat center center; } .elementSupport > section.inner .navigation ul li.hikariMansion { margin-left: 10px; } .elementSupport > section.inner .navigation ul li.hikariMansion h2 { background: #ff812d; } .elementSupport > section.inner .navigation ul li.hikariMansion h2 span { background: url(/common/images/support/title_h2_support_mansion.png) no-repeat center center; } @media screen and (max-width: 640px) { .elementSupport > section.inner .navigation ul li.hikariMansion h2 { padding: 0; } .elementSupport > section.inner .navigation ul li.hikariMansion h2 span { background-size: 250px auto; } } .elementSupport > section.inner .navigation ul li.hikariMansion a.linkBtn { background: #ff812d; } .elementSupport > section.inner .navigation ul li.hikariMansion a.linkBtn span { background: url(/common/images/support/linkBtn_hikariforMansion.png) no-repeat center center; } .elementSupport > section.inner .navigation ul li.hikariMansion a.linkBtn.mypage span { background: url(/common/images/support/linkBtn_Mypage.png) no-repeat center center; } .elementSupport > section.inner .navigation .forbiz a { display: block; background: url(/common/images/index/linkBtn_forbiz.png) no-repeat center center; text-indent: -999em; width: 950px; height: 120px; } @media screen and (max-width: 640px) { .elementSupport > section.inner .navigation ul li { float: none; width: 100%; margin-bottom: 10px; box-sizing: border-box; min-height: 0; } .elementSupport > section.inner .navigation ul li p { padding: 0 10px; text-align: left; font-size: 88%; } .elementSupport > section.inner .navigation ul li a.linkBtn { width: 80%; padding: 10px 17px; } .elementSupport > section.inner .navigation ul li a.linkBtn span { background-size: auto 14px !important; } .elementSupport > section.inner .navigation ul li.hikariMansion { margin: 0; } .elementSupport > section.inner .navigation .forbiz a { width: 100%; box-sizing: border-box; border: 1px solid #98a6b0; } } /** === elementlegal === */ .elementlegal { width: 950px; position: relative; z-index: 1; margin: 0 auto; background: url(/common/images/maincontents/bg-maincontents.png) no-repeat 0 0; min-height: 0; } .elementlegal h1 { border-top: 3px solid #ff812d !important; height: auto; background: #333; padding: 14px 30px 11px 30px; text-indent: 0; } @media screen and (max-width: 640px) { .elementlegal { width: 100%; min-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none; margin-right: 0; margin-left: 0; padding-right: 10px; padding-left: 10px; background: none; } } .elementlegal > section.inner { margin: 0 0 -1px 30px; } .elementlegal > section.inner ul { padding: 15px; border: 1px solid #a0a0a0; } .elementlegal > section.inner ul li { margin-bottom: 5px; } .elementlegal > section.inner ul li.title { font-weight: bold; font-size: 110%; margin-bottom: 15px; } .elementlegal > section.inner ul.legalMansion { width: 423px; float: left; } .elementlegal > section.inner ul.legalHikariPhone { width: 423px; float: left; margin-left: 10px; } .elementlegal > section.inner ul.legalOption { clear: both; } @media screen and (max-width: 640px) { .elementlegal > section.inner { margin-left: 0; } .elementlegal > section.inner ul { box-sizing: border-box; float: none; width: 100%; } .elementlegal > section.inner ul.legalMansion, .elementlegal > section.inner ul.legalHikariPhone { box-sizing: border-box; float: none; width: 100%; margin-left: 0; } } /** === elementEntry === */ .elementEntry { min-height: 0; } .elementEntry h1 { border-top: 3px solid #89da16 !important; height: auto; background: #333; padding: 14px 30px 11px 30px; text-indent: 0; } .elementEntry.entryMansion { width: 950px; } .elementEntry.entryMansion h1 { border-top: 3px solid #FF812D !important; } @media screen and (max-width: 640px) { .elementEntry.entryMansion { width: 100%; } } .elementEntry .legalArea { height: 300px; overflow-y: scroll; border: 1px solid #626262; padding: 15px; margin: 20px; } .elementEntry .entryButtonArea { margin: 50px; text-align: center; font-size: 120%; } /** === elementFAQ === */ .elementFAQ { min-height: 0; } .elementFAQ h1 { border-top: 3px solid #89da16 !important; height: auto; background: #333; padding: 14px 30px 11px 30px; text-indent: 0; } .elementFAQ.mansionFAQ { width: 950px; } .elementFAQ.mansionFAQ h1 { border-top: 3px solid #FF812D !important; } /** === elementNewsList === */ .elementNewsList { margin-top: 30px; padding: 0 0 0 11px; } @media screen and (max-width: 640px) { .elementNewsList { width: auto; float: none; padding-left: 0; -webkit-order: 5; order: 5; } } .elementNewsList .head { border-bottom: 2px dotted #ccc; height: 22px; padding-left: 6px; } .elementNewsList .head .title { border: none; float: left; height: 17px; margin: 0; padding: 0; text-indent: -999em; width: 175px; } .elementNewsList .head .more { float: right; margin-top: 4px; } .elementNewsList .head.information .title { background: url(/images/label-informationTitle.png) no-repeat 0 0; } .elementNewsList .head.customer .title { background: url(/images/label-informationTitle.png) no-repeat 0 -17px; } .elementNewsList .head.emerge .title { background: url(/images/label-informationTitle.png) no-repeat 0 -34px; } .elementNewsList .body ul { margin: 0; padding: 0 0 26px 0; } .elementNewsList .body li { background: url(data:image/gif;base64,R0lGODlhAwABAPABANbW1v///yH/C1hNUCBEYXRhWE1QST94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHhEMTFFMjkxQkMAIfkEBQAAAQAsAAAAAAMAAQAAAgJEUgA7) repeat-x 0 0; } .elementNewsList .body li:first-child { background-image: none; } .elementNewsList .body dl { *zoom: 1; margin: 0; padding: 10px 0; } .elementNewsList .body dl:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementNewsList .body dt { width: 86px; float: left; margin: 0 0 0 12px; padding: 0; } .elementNewsList .body dt .category { width: 78px; height: 14px; float: left; display: block; text-indent: -999em; } .elementNewsList .body dt .category.campaign { background: url(/images/category-campaign.gif); } .elementNewsList .body dt .category.release { background: url(/images/category-release.gif); } .elementNewsList .body dt .date { display: block; } .elementNewsList .body dd { width: 780px; float: right; margin: 0; padding: 0 12px 0 0; } @media screen and (max-width: 640px) { .elementNewsList .body dd { width: 100%; padding: 0; } } .elementNewsList .body p { margin: 0; } @media screen and (max-width: 640px) { .elementNewsList .body p { padding-left: 10px; } } .elementNewsList .body.emerge p { padding: 10px 12px; } .elementNewsList p.attention { margin-left: 6px; font-weight: bold; } /** === elementMansionFlow === */ .elementMansionFlow h1 { border-top: 3px solid #ff812d !important; height: auto; background: #333; padding: 14px 30px 11px 30px; text-indent: 0; } .elementMansionFlow h3 { margin: 0; padding: 0; background: none; } /** === elementoption === */ .elementoption { width: 950px; position: relative; z-index: 1; margin: 0 auto; background: none; min-height: 0; } .elementoption h1 { border-top: 3px solid #ff812d !important; height: auto; background: #333; padding: 14px 30px 11px 30px; text-indent: 0; } .elementoption table.border1 { margin-top: 15px; } .elementoption table.border1 td { border: 1px solid #e5e5e5; padding: 5px; } .elementoption table.border1 td.bg1 { background: #555555; color: #fff; text-align: center; font-weight: bold; } @media screen and (max-width: 640px) { .elementoption { width: 100%; min-height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none; margin-right: 0; margin-left: 0; padding-right: 10px; padding-left: 10px; background: none; } } .elementoption > section.inner { margin: 0; padding: 0 15px; } .elementoption > section.inner ul.notis { list-style: disc; margin-left: 20px; border: 0; padding: 0; color: #666; } .elementoption > section.inner ul.notis li p { margin-top: 5px; } .elementoption > section.inner ul li { margin-bottom: 5px; } .elementoption > section.inner ul li.title { font-weight: bold; font-size: 110%; margin-bottom: 15px; } .elementoption > section.inner ul.legalMansion { width: 423px; float: left; } .elementoption > section.inner ul.legalHikariPhone { width: 423px; float: left; margin-left: 10px; } .elementoption > section.inner ul.legalOption { clear: both; } @media screen and (max-width: 640px) { .elementoption > section.inner { padding: 0; margin-left: 0; } .elementoption > section.inner ul { box-sizing: border-box; float: none; width: 100%; } .elementoption > section.inner ul.legalMansion, .elementoption > section.inner ul.legalHikariPhone { box-sizing: border-box; float: none; width: 100%; margin-left: 0; } } /** === maintenance === */ .maintenance { width: 950px; border: 2px solid #ccc; margin: 20px auto -20px; } .maintenance .maintenanceTitle { background: #ccc; font-weight: bold; padding: 10px; } .maintenance .maintenanceText { padding: 10px; } @media screen and (max-width: 640px) { .maintenance { width: 100%; box-sizing: border-box; } } /** === bodyPrice === */ .bodyPrice .headLead { background: #fff !important; padding: 0; } .bodyPrice .headLead .areaSearch { border: 1px solid #ccc; margin: 20px 0; } .bodyPrice h3 { font-size: 140%; } .bodyPrice table { border: 1px solid #393939; width: 100% !important; font-size: 130%; } .bodyPrice table.left { font-size: 110%; } .bodyPrice table.left td { border: 1px solid #393939; padding: 10px 5px; } .bodyPrice table.left td.noneL { border-left: none; } .bodyPrice table.left td.noneR { border-right: none; } .bodyPrice table.center th { text-align: center; background: #b9b9b9; border: 1px solid #393939; padding: 15px 0; } .bodyPrice table.center th.bgwhite { background: #fff; } .bodyPrice table.center td { vertical-align: middle; text-align: center; border: 1px solid #393939; padding: 20px 0; } @media screen and (max-width: 640px) { .bodyPrice table.center td { padding: 5px; } .bodyPrice table.center td a.button { padding: 5px; font-size: 80%; } .bodyPrice table.center td a.button .text { padding-right: 15px; } } .bodyPrice dl { overflow: hidden; } .bodyPrice dl dt { float: left; width: 120px; font-size: 130%; font-weight: bold; } @media screen and (max-width: 640px) { .bodyPrice dl dt { width: 100px; } } .bodyPrice dl dd { font-size: 110%; margin-left: 130px; margin-bottom: 25px; padding: 3px 0; } @media screen and (max-width: 640px) { .bodyPrice dl dd { margin-left: 110px; } } .bodyPrice h4, .campaignPage h4 { border: none; border-bottom: 1px solid #333333; padding: 15px 0; margin-bottom: 30px; font-weight: normal; } .bodyPrice ul.campaignBanner li, .campaignPage ul.campaignBanner li { display: inline-block; } @media screen and (max-width: 640px) { .bodyPrice ul.campaignBanner li, .campaignPage ul.campaignBanner li { width: 100%; text-align: center; margin-bottom: 10px; } } .bodyPrice .conversion, .campaignPage .conversion { background: url(/common/images/conversion_bg.gif) no-repeat 0 0; height: 180px; margin: 0; position: relative; } @media screen and (max-width: 640px) { .bodyPrice .conversion, .campaignPage .conversion { background: #000; height: auto; position: static; text-align: center; padding: 10px; } } .bodyPrice .conversion img, .campaignPage .conversion img { display: block; } @media screen and (max-width: 640px) { .bodyPrice .conversion img, .campaignPage .conversion img { display: inline-block; } } .bodyPrice .conversion .ttl, .campaignPage .conversion .ttl { padding: 13px 0 0 20px; } @media screen and (max-width: 640px) { .bodyPrice .conversion .ttl, .campaignPage .conversion .ttl { padding: 0; margin: 0; } } .bodyPrice .conversion .inner, .campaignPage .conversion .inner { padding: 0; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner, .campaignPage .conversion .inner { background: #484848; padding: 10px 0; margin-top: 10px; } } .bodyPrice .conversion .inner .area, .campaignPage .conversion .inner .area { float: left; padding: 39px 0 0; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .area, .campaignPage .conversion .inner .area { display: none; } } .bodyPrice .conversion .inner .area dt, .campaignPage .conversion .inner .area dt { width: auto; float: none; } .bodyPrice .conversion .inner .area dd, .campaignPage .conversion .inner .area dd { padding: 7px 0 0; margin: 0; } .bodyPrice .conversion .inner .btnArea, .campaignPage .conversion .inner .btnArea { right: 15px; position: absolute; top: 14px; } .bodyPrice .conversion .inner .btnArea p.txt, .campaignPage .conversion .inner .btnArea p.txt { margin-top: 0; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .btnArea, .campaignPage .conversion .inner .btnArea { position: static; } .bodyPrice .conversion .inner .btnArea .txt, .campaignPage .conversion .inner .btnArea .txt { display: none; } } .bodyPrice .conversion .inner .btn, .campaignPage .conversion .inner .btn { margin: 7px 0 0 50px; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .btn, .campaignPage .conversion .inner .btn { margin: 7px 0 0; } } .bodyPrice .conversion .inner .btn a, .campaignPage .conversion .inner .btn a { display: block; overflow: hidden; text-indent: -9999px; background: url(/common/images/conversion_btnNew.png) no-repeat 0 0; width: 234px; height: 60px; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .btn a, .campaignPage .conversion .inner .btn a { width: 234px; display: inline-block; } } .bodyPrice .conversion .inner .btn a:hover, .campaignPage .conversion .inner .btn a:hover { background-position: 0 -60px; } .bodyPrice .conversion .inner .btnChange, .campaignPage .conversion .inner .btnChange { margin: 5px 0 0 50px; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .btnChange, .campaignPage .conversion .inner .btnChange { margin: 5px 0 0; } } .bodyPrice .conversion .inner .btnChange a, .campaignPage .conversion .inner .btnChange a { display: block; overflow: hidden; text-indent: -9999px; background: url(/common/images/conversion_btnChange.png) no-repeat 0 0; width: 234px; height: 60px; } @media screen and (max-width: 640px) { .bodyPrice .conversion .inner .btnChange a, .campaignPage .conversion .inner .btnChange a { width: 234px; display: inline-block; } } .bodyPrice .conversion .inner .btnChange a:hover, .campaignPage .conversion .inner .btnChange a:hover { background-position: 0 -60px; } .bodyPrice .conversionTel, .campaignPage .conversionTel { padding: 10px; margin: 0 0 50px; border: 1px solid #8b8b8b; } .bodyPrice .conversionTel img.pc, .campaignPage .conversionTel img.pc { display: inline-block; } @media screen and (max-width: 640px) { .bodyPrice .conversionTel img.pc, .campaignPage .conversionTel img.pc { display: none; } } .bodyPrice .conversionTel dl, .campaignPage .conversionTel dl { margin: 0; } .bodyPrice .conversionTel dl dt, .campaignPage .conversionTel dl dt { width: 250px; font-size: 100%; font-weight: normal; } @media screen and (max-width: 640px) { .bodyPrice .conversionTel dl dt, .campaignPage .conversionTel dl dt { width: auto; float: none; } .bodyPrice .conversionTel dl dt a, .campaignPage .conversionTel dl dt a { display: none; } } .bodyPrice .conversionTel dl dt img, .campaignPage .conversionTel dl dt img { margin-bottom: 5px; } .bodyPrice .conversionTel dl dd, .campaignPage .conversionTel dl dd { margin: 0 0 0 250px; } @media screen and (max-width: 640px) { .bodyPrice .conversionTel dl dd, .campaignPage .conversionTel dl dd { margin: 10px 0 0; } } /** === monthCampaignTable === */ .monthCampaignTable { width: 100%; } .monthCampaignTable th { background: #EDEDED; border: 1px solid #ccc; padding: 10px; } .monthCampaignTable th.none { border: none; background: none; } .monthCampaignTable th.month { width: 23%; } @media screen and (max-width: 640px) { .monthCampaignTable th { padding: 3px; font-size: 90%; } } .monthCampaignTable td { border: 1px solid #ccc; text-align: center; vertical-align: middle; } @media screen and (max-width: 640px) { .monthCampaignTable td { font-size: 90%; } } .monthCampaignTable .waribiki th { font-size: 120%; text-align: center; } @media screen and (max-width: 640px) { .monthCampaignTable .waribiki th { font-size: 90%; } } .monthCampaignTable .waribiki td { font-size: 120%; font-weight: bold; } @media screen and (max-width: 640px) { .monthCampaignTable .waribiki td { font-size: 90%; } } .monthCampaignTable .fukidashi td { border: none; padding: 5px; vertical-align: top; } .monthCampaignTable .fukidashi td p { background: #fff; border: 2px solid #D23633; border-radius: 5px; padding: 10px 5px; position: relative; display: inline-block; margin-top: 5px; text-align: left; min-height: 70px; } .monthCampaignTable .fukidashi td p:before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -9px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 9px 9px 9px; border-color: transparent transparent #fff transparent; z-index: 0; } .monthCampaignTable .fukidashi td p:after { content: ""; position: absolute; top: -12px; left: 50%; margin-left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #D23633 transparent; z-index: -1; } @media screen and (max-width: 640px) { .monthCampaignTable .fukidashi td p { font-size: 90%; } } .monthCampaignTable .big th { font-size: 120%; color: #D23633; text-align: center; } @media screen and (max-width: 640px) { .monthCampaignTable .big th { font-size: 90%; } } .monthCampaignTable .big td { font-size: 120%; font-weight: bold; color: #D23633; } .monthCampaignTable .big td span { font-size: 130%; } @media screen and (max-width: 640px) { .monthCampaignTable .big td { font-size: 90%; } .monthCampaignTable .big td span { font-size: 90%; } } @media screen and (max-width: 640px) { .headerLink { background: #666; text-align: center; padding: 8px 8px; box-sizing: border-box; color: #fff; } .headerLink p { display: inline-block; vertical-align: middle; line-height: 100%; margin: 0; font-weight: bold; font-size: 14px; padding-bottom: 5px; } .headerLink a { display: inline-block; line-height: 100%; border-radius: 4px; background: #fff url(/common/images/bg-button-arrow-rb.png) no-repeat right 10px center; padding: 8px 30px 8px 15px; font-size: 12px; text-decoration: none; color: #222; border: 1px solid #d1d1d1; } .headerLink a:hover { opacity: 0.8; } } .alertArea { border: 2px solid #f51c21; padding: 15px; margin-bottom: 30px; background: #fff; color: #333; text-align: left; } .alertArea p { font-size: 14px !important; line-height: 160%; margin: 0; } .alertArea .alertTtl { text-align: center; font-weight: bold; margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid #ccc; } .topInfo { background: #fff; padding: 10px 10px; text-align: center; box-sizing: border-box; } @media screen and (min-width: 641px) { .topInfo { padding: 15px 60px; } } .topInfo p { border: 2px solid #fe616c; display: inline-block; text-align: center; background: #f9d2b3; padding: 10px; font-size: 14px; margin: 0; box-sizing: border-box; } @media screen and (min-width: 641px) { .topInfo p { width: 950px; box-sizing: border-box; } } @media screen and (min-width: 941px) { .topInfo p { width: 90%; box-sizing: border-box; } } .topInfo p a { color: #333; font-weight: bold; } @media screen and (max-width: 640px) { .topInfo.topInfoArea { margin-top: -20px; background: #000; } } @media screen and (max-width: 950px) { img { max-width: 100%; } } .movieIframe { position: relative; padding-top: 56.25%; width: 100%; } .movieIframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (min-width: 640px) { .movieWrap { margin: 0 auto; width: 560px; } } /** === some element === */ .elementImage .body { margin-top: 10px; padding-top: 40px; } .elementImage .body img { margin-bottom: 20px; } .elementImage .body.line { border-top: 1px solid #e4e4e4; } .elementComplexTable .table td { vertical-align: middle; } .elementComplexTable .table .price { margin: 0; font-size: 180%; font-weight: bold; text-align: right; } .elementComplexTable .table table th.headCell { background: #aebabe; } .elementBanner { margin-top: 50px; text-align: center; } .elementFigure { margin-top: 30px; } .elementAttentionBlock .body .note { color: #666; } .elementSimpleTable .accent { background: #eaeaea; } .elementSimpleTable .accent .term { font-weight: bold; } /** === gizmo === */ h1 + .lead { padding: 0 30px; margin-bottom: -30px; } @media screen and (max-width: 640px) { h1 + .lead { padding: 0; } } span.sup { font-size: 85%; vertical-align: bottom; } .fontR { font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Verdana", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", sans-serif; } /** === elementSimpleTable, elementPriceBlock === */ .elementSimpleTable, .elementPriceBlock { margin-top: 20px; text-align: left; } @media screen and (max-width: 640px) { .elementSimpleTable, .elementPriceBlock { margin-top: 40px; } } .elementSimpleTable dl, .elementPriceBlock dl { *zoom: 1; margin: 1px auto 0 auto; padding: 0; background: url(/common/images/maincontents/bg-table-210px.gif) repeat-y 0 0; line-height: 1.7; } .elementSimpleTable dl:after, .elementPriceBlock dl:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementSimpleTable dl, .elementPriceBlock dl { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; margin: 4px 0 0 0; background: none; } } .elementSimpleTable dl dt, .elementPriceBlock dl dt { width: 170px; float: left; position: relative; margin: 0; padding: 20px; border-right: 1px solid #fff; color: #000; font-weight: bold; } @media screen and (max-width: 640px) { .elementSimpleTable dl dt, .elementPriceBlock dl dt { width: 100%; float: none; background: #aebabe; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 0; } } .elementSimpleTable dl dt:after, .elementPriceBlock dl dt:after { width: 208px; height: 1px; content: ""; position: absolute; left: 0; top: 1px; border-top: 1px solid #cdd6d9; } @media screen and (max-width: 640px) { .elementSimpleTable dl dt:after, .elementPriceBlock dl dt:after { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 640px) { .elementSimpleTable dl dt, .elementPriceBlock dl dt { width: 100%; display: block; } } .elementSimpleTable dl dd, .elementPriceBlock dl dd { width: 413px; position: static; margin: 0 0 1px 211px; padding: 20px; border: 1px solid #dadada; color: #333; } @media screen and (max-width: 640px) { .elementSimpleTable dl dd, .elementPriceBlock dl dd { width: 100%; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; border-top: none; } } .elementSimpleTable dl dd .term, .elementPriceBlock dl dd .term { float: left; text-align: left; } .elementSimpleTable dl dd .description, .elementPriceBlock dl dd .description { width: 100%; display: block; text-align: right; } .elementSimpleTable dl dd .description p, .elementPriceBlock dl dd .description p { font-style: normal; line-height: 1.0; } .elementSimpleTable dl dd .description .price, .elementPriceBlock dl dd .description .price { margin: 0; font-size: 180%; font-weight: bold; } .elementSimpleTable dl dd .description .detail, .elementPriceBlock dl dd .description .detail { margin: 5px 0 0 0; font-size: 100%; font-weight: bold; } /** === elementComplexTable === */ .elementComplexTable { position: relative; margin-top: 20px; } @media screen and (max-width: 640px) { .elementComplexTable { min-height: 180px; overflow: hidden; } .elementComplexTable.full { width: 696px; height: 100%; min-height: 100%; overflow: auto; } .elementComplexTable.full .table { height: 100%; min-height: 100%; overflow: auto; position: static; } } .elementComplexTable .table { width: 100%; max-width: 100%; overflow: hidden; } @media screen and (max-width: 640px) { .elementComplexTable .table { width: 696px; height: 150px; position: absolute; left: 0; top: 0; overflow: scroll; } } .elementComplexTable .table table { width: 100%; border: 1px solid #000; } .elementComplexTable .table table tr.head th { background: #aebabe; } .elementComplexTable .table table th { padding: 20px; background: #f9f9f9; border: 1px solid #dadada; color: #000; font-weight: bold; text-align: center; } .elementComplexTable .table table td { padding: 20px; background: #fff; border: 1px solid #cdd6d9; color: #333; text-align: left; } .elementComplexTable .tableWrapper { display: none; } @media screen and (max-width: 640px) { .elementComplexTable .tableWrapper { width: 100%; height: 150px; position: absolute; left: 0; top: 0; display: block; background: rgba(0, 0, 0, 0.7) url(/common/images/maincontents/icon-fulltable.png) no-repeat 50% 50%; overflow: hidden; } } .elementComplexTable .fullsize { display: none; } @media screen and (max-width: 640px) { .elementComplexTable .fullsize { position: absolute; left: 0; bottom: 0; display: block; margin: 0; } } /** === elementCampaignBlock === depend on elementSimpleTable */ .elementCampaignBlock h2 { margin-top: 0; margin-bottom: 0; } .elementCampaignBlock .elementSimpleTable { margin-top: 0; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable { margin-top: 40px; } } .elementCampaignBlock .elementSimpleTable dl { background: url(/common/images/maincontents/bg-table-80px.gif) repeat-y 0 0; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable dl { background: none; } } .elementCampaignBlock .elementSimpleTable dl dt { width: 60px; padding-right: 10px; padding-left: 10px; text-align: center; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable dl dt { width: 100%; padding-right: 20px; padding-left: 20px; text-align: left; } } .elementCampaignBlock .elementSimpleTable dl dt:after { width: 78px; text-align: left; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable dl dt:after { width: 100%; } } .elementCampaignBlock .elementSimpleTable dl dt.widen { padding-right: 5px; padding-left: 15px; letter-spacing: 1em; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable dl dt.widen { width: 100%; padding-right: 20px; padding-left: 20px; letter-spacing: 0; } } .elementCampaignBlock .elementSimpleTable dl dd { width: 543px; margin: 0 0 1px 81px; } @media screen and (max-width: 640px) { .elementCampaignBlock .elementSimpleTable dl dd { width: 100%; margin: 0; } } .elementCampaignBlock .campaignImage { margin-top: -29px; } @media screen and (max-width: 640px) { .elementCampaignBlock .campaignImage { width: 100%; } } /** === elementTextImageBlock === */ .elementTextImageBlock { margin-top: 50px; margin-bottom: 50px; } @media screen and (max-width: 640px) { .elementTextImageBlock { margin-top: 60px; margin-bottom: 60px; } } .elementTextImageBlock .image { width: 250px; display: block; float: right; margin: 0 0 20px 20px; } @media screen and (max-width: 640px) { .elementTextImageBlock .image { float: none; margin: 30px auto; -webkit-order: 2; order: 2; } } .elementTextImageBlock .title { margin: 0; padding: 0; background: none; border: none; color: #000; } @media screen and (max-width: 640px) { .elementTextImageBlock .title { -webkit-order: 1; order: 1; } } @media screen and (max-width: 640px) { .elementTextImageBlock .body { -webkit-order: 3; order: 3; } } .elementTextImageBlock .topLike .body p { line-height: 1.8; } .elementTextImageBlock .topLike .body a.link { padding-left: 15px; background: url(data:image/gif;base64,R0lGODlhCgALAPMMAA8PD2ZmZtjY2Orq6pOTkxISEvz8/O3t7c/Pz5mZmWNjYwAAAP///wAAAAAAAAAAACH/C1hNUCBEYXRhWE1QST94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHgwMTFFMjkxQkMAIfkEBQAADAAsAAAAAAoACwBABByQyUmnqBQsQExF2KQVSWieEqAMobYsSgUEB0pFADs=) no-repeat 0 0.4em; color: #333; } .elementTextImageBlock .topLike .body a.link:hover, .elementTextImageBlock .topLike .body a.link:active, .elementTextImageBlock .topLike .body a.link:visited { color: #333; } .elementTextImageBlock .size320 { *zoom: 1; } .elementTextImageBlock .size320:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementTextImageBlock .size320 .image { width: 320px; } .elementTextImageBlock + .elementTextImageBlock { padding-top: 50px; margin-top: 0; border-top: 1px solid #ddd; } .elementTextImageBlock.reverse .image { float: left; margin: 0 20px 20px 0; } @media screen and (max-width: 640px) { .elementTextImageBlock.reverse .image { float: none; margin: 30px auto; } } /** === elementAttentionBlock === */ .elementAttentionBlock { margin-top: 80px; } @media screen and (max-width: 640px) { .elementAttentionBlock { margin-top: 40px; } } .elementAttentionBlock .title { margin: 0 0 10px 0; padding: 3px 0 3px 30px; background: url(/common/images/maincontents/icon-attention.gif) no-repeat 0 0; color: #000; font-style: normal; } .elementAttentionBlock .body { padding: 40px; border: 3px solid #e4e4e4; } @media screen and (max-width: 640px) { .elementAttentionBlock .body { padding: 15px; } } .elementAttentionBlock .body > :first-child, .elementAttentionBlock .body .agree :first-child { margin-top: 0; } .elementAttentionBlock .body h4 { margin-top: 30px; padding: 0; border: 0; color: #333; font-style: normal; } .elementAttentionBlock .body p { margin-top: 15px; color: #333; } .elementAttentionBlock .body .agree { padding-bottom: 5px; } .elementAttentionBlock .body .agree .agreeItem { margin: 5px 0 0; overflow: hidden; } .elementAttentionBlock .body .agree .agreeItem li { float: left; padding-left: 20px; } /** === elementOptionList === */ .elementOptionList ul { margin-top: 10px; margin-left: -10px; *zoom: 1; } .elementOptionList ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementOptionList ul { width: 100%; } } .elementOptionList li { width: 326px; position: relative; float: left; margin-top: 10px; margin-left: 10px; border: 1px solid #dedede; } @media screen and (max-width: 640px) { .elementOptionList li { width: 100%; float: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 640px) { .elementOptionList li.sameHeight { height: auto !important; } } .elementOptionList li > a { display: block; padding-bottom: 20px; text-decoration: none; } .elementOptionList li .title { margin: 0; padding-left: 32px; border-bottom: 1px solid #dedede; background: url(/common/images/icon-link.gif) no-repeat 12px 50%, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(/common/images/icon-link.gif) no-repeat 12px 50%, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7)); background: url(/common/images/icon-link.gif) no-repeat 12px 50%, -moz-linear-gradient(top, #ffffff, #f7f7f7); background: url(/common/images/icon-link.gif) no-repeat 12px 50%, -webkit-linear-gradient(top, #ffffff, #f7f7f7); background: url(/common/images/icon-link.gif) no-repeat 12px 50%, linear-gradient(to bottom, #ffffff, #f7f7f7); color: #4a7ab2; font-style: normal; font-size: 117%; text-decoration: underline; } .elementOptionList li .title:hover, .elementOptionList li .title:active { text-decoration: none; } .elementOptionList li .image { width: 100%; display: block; margin-top: 15px; text-align: center; } .elementOptionList li .body { margin: 15px 20px 0 20px; color: #333; } .elementOptionList li .three li { width: 213px; } @media screen and (max-width: 640px) { .elementOptionList li .three li { width: 100%; } } /** === elementLocalNavi === */ .elementLocalNavi { width: 100%; margin-top: 30px; margin-bottom: 50px; } @media screen and (max-width: 640px) { .elementLocalNavi { height: 56px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0; padding: 16px 10px 14px 60px; background: url(/common/images/maincontents/label-service_select-sp.png) no-repeat 10px 16px, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: url(/common/images/maincontents/label-service_select-sp.png) no-repeat 10px 16px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dbdbdb)); background: url(/common/images/maincontents/label-service_select-sp.png) no-repeat 10px 16px, -moz-linear-gradient(top, #f9f9f9, #dbdbdb); background: url(/common/images/maincontents/label-service_select-sp.png) no-repeat 10px 16px, -webkit-linear-gradient(top, #f9f9f9, #dbdbdb); background: url(/common/images/maincontents/label-service_select-sp.png) no-repeat 10px 16px, linear-gradient(to bottom, #f9f9f9, #dbdbdb); border-bottom: 1px solid #bababa; } } .elementLocalNavi ul { width: 100%; margin: -10px -10px 0 -10px; } @media screen and (max-width: 640px) { .elementLocalNavi ul { height: 24px; position: relative; margin: 0; background: #fff; border: 1px solid #c7c7c7; } } @media screen and (max-width: 640px) { .elementLocalNavi ul:after { width: 21px; height: 26px; content: ""; position: absolute; right: 0; top: -1px; background: url(/common/images/maincontents/button-select-sp.png) no-repeat 0 0; } } .elementLocalNavi li { width: auto; display: inline; display: inline-block; margin: 10px 25px 0 25px; } @media screen and (max-width: 640px) { .elementLocalNavi li { width: 100%; position: absolute; left: 0; top: 0; margin: 3px 0 3px 3px; } } .elementLocalNavi li a { display: block; padding: 8px 0 12px 0; color: #89da16; font-weight: bold; font-style: normal; text-decoration: none; } @media screen and (max-width: 640px) { .elementLocalNavi li a { display: none; } } .elementLocalNavi li.active a { padding: 8px 0 8px 0; border-bottom: 4px solid #89da16; } @media screen and (max-width: 640px) { .elementLocalNavi li.active a { width: 100%; display: block; padding: 0; border: 0; } } @media screen and (max-width: 640px) { .elementLocalNavi.open li { height: 26px; display: block; position: relative; left: 0; top: 0; margin: 0; background: #fff; } } @media screen and (max-width: 640px) { .elementLocalNavi.open a { display: block; padding: 0; line-height: 26px; } } /** === elementFaqList === */ .elementFaqList > ul { margin: 0; padding: 0; list-style: none; } .elementFaqList > ul > li { margin: 30px 0; padding-top: 30px; border-top: 1px solid #ccc; overflow: hidden; *zoom: 1; } @media screen and (max-width: 640px) { .elementFaqList > ul > li { padding-top: 20px; } } .elementFaqList > ul > li:first-child { border-top: none; margin-top: 0; padding-top: 0; } @media screen and (max-width: 640px) { .elementFaqList > ul > li:first-child { margin: 20px 0; } } .elementFaqList > ul > li > dl { margin: 0; } .elementFaqList > ul > li > dl > dt { min-height: 24px; margin: 0 0 30px; padding: 0 0 0 32px; background: url(/common/images/maincontents/icon-question.gif) no-repeat 0 0; } .elementFaqList > ul > li > dl > dt > .inner { min-height: 24px; padding: 0 0 0 20px; border-left: 4px solid #809ca5; font-weight: bold; } .elementFaqList > ul > li > dl > dt > .inner p:first-child { margin-top: 0; } .elementFaqList > ul > li > dl > dd { min-height: 24px; margin: 30px 0 0 0; padding: 0 0 0 32px; background: url(/common/images/maincontents/icon-answer.gif) no-repeat 0 0; } @media screen and (max-width: 640px) { .elementFaqList > ul > li > dl > dd { margin: 25px 0 0 0; } } .elementFaqList > ul > li > dl > dd > .inner { min-height: 24px; padding: 0 0 0 20px; border-left: 4px solid #a67676; } .elementFaqList > ul > li > dl > dd > .inner p:first-child { margin-top: 0; } .elementFaqList > ul > li .pagetop { margin-top: 20px; margin-bottom: -30px; } /** === elementSitemapList === */ .elementSitemapList { margin-top: 50px; } .elementSitemapList > ul { *zoom: 1; margin: -10px 0 0 -10px; } .elementSitemapList > ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementSitemapList > ul h4 { border-left: none; margin-top: 0; padding: 0; } .elementSitemapList > ul > li { margin: 10px 0 0 10px; border: 1px solid #ccc; border-top: none; } @media screen and (max-width: 640px) { .elementSitemapList > ul > li { width: auto; height: auto !important; float: none; } } .elementSitemapList > ul > li > .title { margin: 0 -1px; padding: 8px 20px 5px; color: #fff; font-size: 133%; font-style: normal; font-weight: normal; background: #333; border-top: 3px solid #c8c8c9; } .elementSitemapList > ul > li > .body { margin: 0; padding: 15px; overflow: hidden; *zoom: 1; } .elementSitemapList > ul > li > .body ul { margin: 0; padding: 0; } .elementSitemapList > ul > li > .body > ul { margin-top: -15px; } .elementSitemapList > ul > li > .body li { margin-top: 15px; } .elementSitemapList > ul > li > .body .column { width: 317px; float: left; } .elementSitemapList > ul > li.hikari > .title, .elementSitemapList > ul > li.elementCategoryTopBlock.hikariPhone > .title { border-top: 3px solid #89da16; } .elementSitemapList > ul > li.WhatsNuro > .title { border-top: 3px solid #6497dc; } .elementSitemapList > ul > li.other { width: 664px; } .elementSitemapList > ul > li.other .body { *zoom: 1; } .elementSitemapList > ul > li.other .body:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementSitemapList > ul > li.other ul { float: left; width: 317px; } .elementSitemapList > ul > li.other ul.side { width: 296px; } @media screen and (max-width: 640px) { .elementSitemapList > ul > li.other { width: auto; } .elementSitemapList > ul > li.other ul { float: none; width: auto; } .elementSitemapList > ul > li.other ul.side { margin-top: 15px; width: 100%; } } .elementSitemapList > ul > li.other > .title { background: #777777; } /** === elementBoxList === */ .elementBoxList { margin-top: 30px; border-top: 1px solid #ccc; } .elementBoxList .catch { margin-top: 37px; font-size: 166%; line-height: 1.1; } .elementBoxList ul { *zoom: 1; margin: 0 0 0 -20px; } .elementBoxList ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementBoxList ul .block { float: left; margin: 20px 0 0 20px; width: 321px; border: 1px solid #ccc; } .elementBoxList ul .block .inner { padding: 16px; *zoom: 1; } .elementBoxList ul .block .inner:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementBoxList ul .block h2, .elementBoxList ul .block h3 { margin: 0 0 10px; padding: 0; background: none; border: none; color: #000; } .elementBoxList ul .block h2 { margin-bottom: 20px; } .elementBoxList ul .block .scentImage { float: right; margin: 0 0 10px 10px; padding: 0; } .elementBoxList ul .block p { float: left; margin: 0; width: 144px; } .elementBoxList ul .block p.note, .elementBoxList ul .block p.lead { margin-top: 10px; float: none; clear: both; width: auto; } .elementBoxList ul .block p.lead { margin-bottom: 10px; } .elementBoxList ul .block ul { float: left; margin: 0 0 10px; width: 144px; } @media screen and (max-width: 640px) { .elementBoxList ul .block { float: none; width: auto; min-height: auto; } .elementBoxList ul .block p { width: auto; float: none; } .elementBoxList ul .block p.link { clear: both; } } /** === elementAreaList === */ .elementAreaList ul { *zoom: 1; margin: 0 0 0 -20px; } .elementAreaList ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementAreaList ul .block { float: left; margin: 20px 0 0 20px; padding: 20px 14px 14px; width: 293px; min-height: 115px; border: 1px solid #ccc; *zoom: 1; } .elementAreaList ul .block:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementAreaList ul .block h3 { margin: 0 0 20px; padding: 0; background: none; } .elementAreaList ul .block .areaImage { float: right; margin: 0; padding: 0; } @media screen and (max-width: 640px) { .elementAreaList ul .block { float: none; width: auto; } .elementAreaList ul .block .areaImage { display: block; float: none; margin: 0 auto 10px; width: auto; text-align: center; } } .elementAreaImage { margin: 10px 0; } /** === elementCategoryTopBlock === */ .elementCategoryTopBlock h1 { width: auto; height: 100px; padding: 0; text-indent: -999em; border-top: none !important; } @media screen and (max-width: 640px) { .elementCategoryTopBlock h1 { height: 86px; } } .elementCategoryTopBlock .mainvisual { padding-bottom: 12px; font-style: normal; } .elementCategoryTopBlock .mainvisual p { margin-top: 15px; font-size: 100%; line-height: 1.8; } .elementCategoryTopBlock .mainvisual p.catch { margin-top: 37px; font-size: 150%; line-height: 1.1; } .elementCategoryTopBlock .mainvisual p.lead { margin-bottom: 15px; font-size: 117%; } .elementCategoryTopBlock .mainvisual p.note { margin-top: 0; font-size: 100%; } .elementCategoryTopBlock .mainvisual p a { line-height: 1.3; } .elementCategoryTopBlock .block { margin-top: 30px; border-top: 1px solid #ccc; *zoom: 1; } .elementCategoryTopBlock .block.sectionTopBlock { margin-top: 0; border-top: none; } .elementCategoryTopBlock .block:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementCategoryTopBlock .block .title { width: 333px; float: left; -moz-border-radius: none; -webkit-border-radius: none; border-radius: none; margin: 45px 0 0 0; padding: 0; background: none; color: #000; font-size: 150%; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block .title { width: auto; float: none; margin-top: 30px; } } .elementCategoryTopBlock .block.reverse .title { float: right; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block.reverse .title { float: none; } } .elementCategoryTopBlock .block.oneCol .title { float: none; width: auto; } .elementCategoryTopBlock .block .image { display: block; float: right; padding: 20px 10px 0 0; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block .image { width: 100%; max-width: 300px; float: none; margin: 20px auto 0 auto; padding: 0; } } .elementCategoryTopBlock .block.reverse .image { float: left; padding: 20px 0 0 10px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block.reverse .image { float: none; padding: 0; } } .elementCategoryTopBlock .block.oneCol .image { float: none; } .elementCategoryTopBlock .block .body { width: 333px; float: left; font-style: normal; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block .body { width: auto; float: none; } } .elementCategoryTopBlock .block .body p { line-height: 1.5; } .elementCategoryTopBlock .block .body p:first-child { margin-top: 0; } .elementCategoryTopBlock .block .body a.link { line-height: 1.3; } .elementCategoryTopBlock .block.reverse .body { float: right; } @media screen and (max-width: 640px) { .elementCategoryTopBlock .block.reverse .body { float: none; } } .elementCategoryTopBlock .block.oneCol .body { float: none; width: auto; } .elementCategoryTopBlock.hikari h1, .elementCategoryTopBlock.hikariPhone h1 { border-top: 3px solid #89da16 !important; height: auto; padding: 14px 30px 11px 30px; text-indent: 0; } .elementCategoryTopBlock.hikari .elementCommonButton h1, .elementCategoryTopBlock.hikariPhone .elementCommonButton h1 { border-top: none !important; padding: 12px 10px 12px 10px !important; } .elementCategoryTopBlock.lte h1 { background: url(/lte/images/mainvisual.jpg) no-repeat 0 0; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.lte h1 { background-image: url(/lte/images/mainvisual-sp.jpg); } } .elementCategoryTopBlock.whatsNuro h1 { background-image: none; background-color: #333; border-top: 3px solid #6497de !important; height: auto; padding: 14px 30px 11px 30px; text-indent: 0; } .elementCategoryTopBlock.elementMainContentsFull h1 { background: url(/lte/images/h1_title.png) no-repeat 0 0; margin: 0; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull h1 { margin-top: 10px; padding: 10px; background-size: 510px; height: 45px; } } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementSocialButtons { margin: 0; } } .elementCategoryTopBlock.elementMainContentsFull .block .image { padding: 45px 0 0 10px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .block .image { width: auto; float: none; margin-top: 30px; padding: 0; } } .elementCategoryTopBlock.elementMainContentsFull .block .title, .elementCategoryTopBlock.elementMainContentsFull .block .body { width: 520px; padding: 0 20px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .block .title, .elementCategoryTopBlock.elementMainContentsFull .block .body { width: auto; float: none; margin-top: 30px; padding: 0; } } .elementCategoryTopBlock.elementMainContentsFull .block .lead { font-size: 117%; line-height: 1.8; } .elementCategoryTopBlock.elementMainContentsFull .elementAreaList ul:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .elementCategoryTopBlock.elementMainContentsFull .elementAreaList ul .block { width: 420px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementAreaList ul .block { width: auto; } } .elementCategoryTopBlock.elementMainContentsFull .elementAreaList ul .block h3 { font-size: 150%; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea { border: none; border-bottom: 1px dotted #ccc; padding: 0 0 40px; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft { margin-left: 60px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft { width: auto; float: none; margin: 0; } } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft p { margin-bottom: 10px; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft a { background: url(/lte/images/btn_sonetLTE.png) no-repeat 0 -74px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 351px; height: 74px; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft a:hover { background-position: 0 0; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideLeft a { width: auto; height: 60px; background-size: 282px; background-position: 0 -60px; } } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight { margin-right: 60px; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight { width: auto; float: none; margin: 0; } } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight p { margin-bottom: 10px; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight a { background: url(/lte/images/btn_nuromobile.png) no-repeat 0 -74px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 351px; height: 74px; } .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight a:hover { background-position: 0 0; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementButtonArea .sideRight a { width: auto; height: 60px; background-size: 282px; background-position: 0 -60px; } } .elementCategoryTopBlock.elementMainContentsFull .elementAttentionBlock { margin: 30px 0 80px; } .elementCategoryTopBlock.elementMainContentsFull .elementCommonButton { width: 665px; margin: 0 auto; } @media screen and (max-width: 640px) { .elementCategoryTopBlock.elementMainContentsFull .elementCommonButton { width: auto; } } /** === elementCategorySubTopBlock === */ .elementCategorySubTopBlock .mainvisual { padding-bottom: 12px; font-style: normal; } .elementCategorySubTopBlock .mainvisual p { margin-top: 15px; } .elementCategorySubTopBlock .mainvisual p.catch { margin-top: 37px; font-size: 166%; line-height: 1.1; } .elementCategorySubTopBlock .mainvisual p.note { font-size: 117%; line-height: 1.8; } .elementCategorySubTopBlock .mainvisual h2 { background: none; background-color: #111; margin: 20px 0 0 0; padding-bottom: 8px; } .elementCategorySubTopBlock .mainvisual .image { margin: 0; padding: 0; text-align: center; } .elementCategorySubTopBlock .block { margin-top: 30px; border-top: 1px solid #ccc; *zoom: 1; } .elementCategorySubTopBlock .block:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementCategorySubTopBlock .block .title { width: 333px; float: left; -moz-border-radius: none; -webkit-border-radius: none; border-radius: none; margin: 45px 0 0 0; padding: 0; background: none; color: #000; font-size: 150%; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block .title { width: auto; float: none; margin-top: 30px; } } .elementCategorySubTopBlock .block.reverse .title { float: right; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block.reverse .title { float: none; } } .elementCategorySubTopBlock .block.oneCol .title { float: none; width: auto; } .elementCategorySubTopBlock .block .image { display: block; float: right; padding: 20px 10px 0 0; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block .image { width: 100%; max-width: 300px; float: none; margin: 20px auto 0 auto; padding: 0; } } .elementCategorySubTopBlock .block.reverse .image { float: left; padding: 20px 0 0 10px; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block.reverse .image { width: 100%; max-width: 300px; float: none; margin: 20px auto 0 auto; padding: 0; } } .elementCategorySubTopBlock .block.oneCol .image { float: none; } .elementCategorySubTopBlock .block .body { width: 333px; float: left; font-style: normal; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block .body { width: auto; float: none; } } .elementCategorySubTopBlock .block .body p { line-height: 1.8; } .elementCategorySubTopBlock .block .body a.link { line-height: 1.3; } .elementCategorySubTopBlock .block.reverse .body { float: right; } @media screen and (max-width: 640px) { .elementCategorySubTopBlock .block.reverse .body { float: none; } } .elementCategorySubTopBlock .block.oneCol .body { float: none; width: auto; } /** === elementTwoBlock === */ .elementTwoBlock { *zoom: 1; margin: 20px 0 0 -15px; } .elementTwoBlock:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementTwoBlock .block { *zoom: 1; float: left; margin: 0 0 25px 15px; width: 450px; border: 1px solid #dedede; } .elementTwoBlock .block:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementTwoBlock .block h3 { margin: 0; border: none; color: #000; border-bottom: 1px solid #dedede; background: none; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); background: -moz-linear-gradient(top, #ffffff, #f5f5f5); background: -webkit-linear-gradient(top, #ffffff, #f5f5f5); background: linear-gradient(to bottom, #ffffff, #f5f5f5); } .elementTwoBlock .block .body { padding: 0 15px 15px; } .elementTwoBlock .block h4 { clear: both; } .elementTwoBlock .block p.lead { margin-top: 10px; padding: 0 18px; } .elementTwoBlock .block div.img { margin: 10px auto; text-align: center; } .elementTwoBlock .block dl { *zoom: 1; width: auto; } .elementTwoBlock .block dl:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementTwoBlock .block dl dt { margin-bottom: 5px; } .elementTwoBlock .block dl dd { margin: 0; } .elementTwoBlock .block dl dd.img { float: left; margin-right: 20px; } .elementTwoBlock .block dl dd .link { margin: 5px 0; } .elementTwoBlock .block .innerBlock { margin-top: 15px; padding: 30px 30px 10px; min-height: 65px; border: 1px solid #dedede; background: #f0f0f0; } .elementTwoBlock .block .innerBlock a.link { margin-bottom: 20px; } .elementTwoBlock .block .innerBlock p { margin: 0 0 20px; } @media screen and (max-width: 640px) { .elementTwoBlock { float: none; margin: 0; } .elementTwoBlock h3 { margin: 30px 0 25px; } .elementTwoBlock .block { float: none; margin: 25px 0 0; width: auto; height: auto !important; } .elementTwoBlock .block .innerBlock { padding: 20px 20px 0; } } /** === elementTowBanner === */ .elementTowBanner { overflow: hidden; *zoom: 1; } .elementTowBanner .bannerBox { float: left; width: 50%; } .elementTowBanner .bannerBox .title { padding-bottom: 25px; } .elementTowBanner .bannerBox a { text-decoration: none; } .elementTowBanner .bannerBox .image, .elementTowBanner .bannerBox .text { display: block; } .elementTowBanner .bannerBox .text { padding-top: 10px; color: #000; } @media screen and (max-width: 640px) { .elementTowBanner .bannerBox { float: none; width: 100%; } .elementTowBanner .bannerBox .image, .elementTowBanner .bannerBox .text { margin: 0 auto; } } /** === elementContact === */ .elementContact a, .elementContact span { display: block; } .elementContact a { position: relative; height: 156px; background: #f0f0f0; border: 1px solid #dfdfdf; } .elementContact span { position: absolute; } .elementContact .text1 { top: 0px; left: 81px; } .elementContact .text2 { top: 43px; left: 89px; } .elementContact .text3 { top: 43px; left: 464px; } @media screen and (max-width: 640px) { .elementContact { text-align: center; } .elementContact a, .elementContact span { position: static; } .elementContact a { height: auto; } .elementContact span { margin: 0 auto; } } /** === elementSpeed === */ .elementSpeed { *zoom: 1; } .elementSpeed:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementSpeed p { float: left; } .elementSpeed p.left { margin-left: 20px; width: 125px; } .elementSpeed p.center { margin-left: 67px; width: 230px; } .elementSpeed p.right { margin-left: 30px; width: 186px; } @media screen and (max-width: 640px) { .elementSpeed p.left, .elementSpeed p.center, .elementSpeed p.right { margin: 10px 0 0 0; width: auto; } } /* ================================================================== button ==================================================================*/ .elementInnerButtonArea ul { text-align: center; *zoom: 1; } .elementInnerButtonArea ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementInnerButtonArea ul li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0 10px; width: 240px; } .elementInnerButtonArea ul li .button { display: table-cell; width: 240px; height: 50px; vertical-align: middle; text-decoration: none; font-size: 92%; color: #fff; *zoom: 1; background: url(/common/images/bg-button-m.jpg) 0px 0px no-repeat; } .elementInnerButtonArea ul li .button:hover { background-position: 0px -50px; } .elementInnerButtonArea ul li .button > span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; vertical-align: middle; width: 210px; background: url(/common/images/bg-button-arrow-r.png) right 50% no-repeat; } .elementInnerButtonArea ul li .button > span > span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; width: 100%; background: none; } .elementInnerButtonArea ul li .button.outside span span { background: url(/common/images/bg-button-blank.png) left 50% no-repeat; } .elementInnerButtonArea ul li .button span.vm { display: inline; visibility: hidden; height: 50px; margin: 0; width: 1px; zoom: 1; } .elementInnerButtonArea ul li.large { margin: 0; width: 300px; } .elementInnerButtonArea ul li.large .button { width: 300px; height: 50px; font-size: 120%; background: url(/common/images/bg-button-ll.jpg) 0px 0px no-repeat; } .elementInnerButtonArea ul li.large .button:hover { background-position: 0px -50px; } .elementInnerButtonArea ul li.large .button > span { width: 280px; } @media screen and (max-width: 640px) { .elementInnerButtonArea ul li.large { display: table; margin: 10px 0 0; width: 100%; } .elementInnerButtonArea ul li.large .button { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5MjkyOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #292929)); background: -moz-linear-gradient(top, #5c5c5c, #292929); background: -webkit-linear-gradient(top, #5c5c5c, #292929); background: linear-gradient(to bottom, #5c5c5c, #292929); } .elementInnerButtonArea ul li.large .button > span { width: 90%; } } @media screen and (max-width: 640px) { .elementInnerButtonArea ul li { display: table; margin: 10px 0 0; width: 100%; } .elementInnerButtonArea ul li .button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; margin-top: 10px; width: 100%; color: #fff; font-size: 100%; background-color: #5c5c5c; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5MjkyOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #292929)); background: -moz-linear-gradient(top, #5c5c5c, #292929); background: -webkit-linear-gradient(top, #5c5c5c, #292929); background: linear-gradient(to bottom, #5c5c5c, #292929); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .elementInnerButtonArea ul li .button > span { width: 90%; } .elementInnerButtonArea ul li .button:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #5c5c5c)); background: -moz-linear-gradient(top, #000000, #5c5c5c); background: -webkit-linear-gradient(top, #000000, #5c5c5c); background: linear-gradient(to bottom, #000000, #5c5c5c); } } .elementMiniButton .button { display: table-cell; width: 200px; height: 40px; vertical-align: middle; text-decoration: none; font-size: 100%; font-weight: bold; color: #fff; text-align: center; *zoom: 1; background: url(/common/images/bg-button-s.jpg) 0px 0px no-repeat; } .elementMiniButton .button:hover { background-position: 0px -40px; } .elementMiniButton .button > span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; vertical-align: middle; width: 180px; background: url(/common/images/bg-button-arrow-r.png) right 50% no-repeat; } .elementMiniButton .button > span > span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; width: 100%; background: none; } .elementMiniButton .button.outside span span { background: url(/common/images/bg-button-blank.png) left 50% no-repeat; } .elementMiniButton .button.white { width: 240px; height: 60px; color: #000; font-size: 100%; background: url(/common/images/bg-button-l-l.jpg) 0px 0px no-repeat; } .elementMiniButton .button.white > span { width: 220px; background: url(/common/images/bg-button-arrow-rb.png) right 50% no-repeat; } .elementMiniButton .button.white:hover { color: #fff; background-position: 0px -60px; } .elementMiniButton .button.white:hover > span { background: url(/common/images/bg-button-arrow-rw.png) right 50% no-repeat; } .elementMiniButton .button.white span.vm { height: 60px; } .elementMiniButton .button span.vm { display: inline; visibility: hidden; height: 40px; margin: 0; width: 1px; zoom: 1; } @media screen and (max-width: 640px) { .elementMiniButton { display: table; margin: 0 0 10px; width: 100%; } .elementMiniButton .button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; margin-top: 10px; width: 100%; color: #fff; font-size: 100%; background-color: #5c5c5c; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5MjkyOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #292929)); background: -moz-linear-gradient(top, #5c5c5c, #292929); background: -webkit-linear-gradient(top, #5c5c5c, #292929); background: linear-gradient(to bottom, #5c5c5c, #292929); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .elementMiniButton .button > span { width: 90%; } .elementMiniButton .button:hover { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #5c5c5c)); background: -moz-linear-gradient(top, #000000, #5c5c5c); background: -webkit-linear-gradient(top, #000000, #5c5c5c); background: linear-gradient(to bottom, #000000, #5c5c5c); } } .elementMiniButton p { width: 240px; margin: 20px auto; } /** === pageing === */ .elementButtonArea { margin-top: 40px; padding-top: 25px; border-top: 1px dotted #ccc; } .elementButtonArea .sideLeft { margin-left: 20px; float: left; } .elementButtonArea .sideRight { margin-right: 20px; float: right; } @media screen and (max-width: 640px) { .elementButtonArea .sideLeft, .elementButtonArea .sideRight { float: none; margin: 0; } } .elementButtonArea ul { margin: 0; width: 100%; overflow: auto; } .elementButtonArea ul li .button { display: block; padding-top: 20px; width: 241px; height: 40px; overflow: hidden; background: #fff; text-decoration: none; text-align: center; font-size: 120%; letter-spacing: 2px; } .elementButtonArea ul li .button.twoLine { padding-top: 12px; height: 48px; line-height: 1.4; } .elementButtonArea ul li .button.twoLine.pageBack span { padding-left: 20px; width: 180px; } .elementButtonArea ul li .button > span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0 15px; width: 200px; } .elementButtonArea ul li .button.pageBack { background: url(/common/images/bg-button-l-l.jpg) no-repeat 0px 0px; color: #000; } .elementButtonArea ul li .button.pageBack > span { padding-left: 10px; background: url(/common/images/bg-button-arrow-lb.png) left 50% no-repeat; } .elementButtonArea ul li .button.pageBack:hover { color: #fff; } .elementButtonArea ul li .button.pageBack:hover > span { background: url(/common/images/bg-button-arrow-lw.png) left 50% no-repeat; } .elementButtonArea ul li .button.pageNext { background: url(/common/images/bg-button-l-r.jpg) no-repeat 0px 0px; color: #fff; } .elementButtonArea ul li .button.pageNext > span { padding-right: 10px; background: url(/common/images/bg-button-arrow-r.png) right 50% no-repeat; } .elementButtonArea ul li .button:hover { background-position: 0px -60px; } @media screen and (max-width: 640px) { .elementButtonArea ul li { width: 100%; } .elementButtonArea ul li .button { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; margin-top: 10px; width: 100%; height: 60px; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .elementButtonArea ul li .button.twoLine { height: 60px; text-align: center; } .elementButtonArea ul li .button.twoLine.pageBack span { padding: 0; width: 90%; } .elementButtonArea ul li .button.pageBack { border: 1px solid #c2c2c2; background: #fafafa; } .elementButtonArea ul li .button.pageBack span { padding: 0; } .elementButtonArea ul li .button.pageNext { padding-right: 1px; padding-left: 1px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5MjkyOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #292929)); background: -moz-linear-gradient(top, #5c5c5c, #292929); background: -webkit-linear-gradient(top, #5c5c5c, #292929); background: linear-gradient(to bottom, #5c5c5c, #292929); } .elementButtonArea ul li .button.pageNext span { padding: 0; } .elementButtonArea ul li .button span { margin: 0 auto; width: 90%; } .elementButtonArea ul li .button:hover { border: none; padding-right: 1px; padding-left: 1px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #5c5c5c)); background: -moz-linear-gradient(top, #000000, #5c5c5c); background: -webkit-linear-gradient(top, #000000, #5c5c5c); background: linear-gradient(to bottom, #000000, #5c5c5c); } } /** === elementServiceButton === */ .elementServiceButton ul { *zoom: 1; padding: 3px 0; background: #000; } .elementServiceButton ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementServiceButton ul { padding: 1px 0; width: auto; } } .elementServiceButton ul li { float: left; margin-left: 3px; text-align: center; } .elementServiceButton ul li.sv3 { margin-top: 4px; } @media screen and (max-width: 640px) { .elementServiceButton ul li.sv3 { margin: 3px; } } @media screen and (max-width: 640px) { .elementServiceButton ul li { float: none; margin: 3px; text-align: center; } } @media screen and (max-width: 320px) { .elementServiceButton ul li img { width: 100%; } } .elementServiceButton.noBg ul { background: none; padding: 0; } .elementServiceButton.noBg ul li { margin: 0 12px 0 0; } .elementServiceButton.noBg ul li.sideLeft { float: left; margin: 0; } .elementServiceButton.noBg ul li.sideRight { float: right; margin: 0; } @media screen and (max-width: 640px) { .elementServiceButton.noBg ul { margin: 0; } .elementServiceButton.noBg ul li.sideLeft, .elementServiceButton.noBg ul li.sideRight { float: none; margin-bottom: 10px; } } /** === elementCommonButton === */ .elementCommonButton { margin-top: 60px; } @media screen and (max-width: 640px) { .elementCommonButton { margin-top: 40px; } } .elementCommonButton h1 { background: #111 !important; border-top: none !important; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; color: #fff; display: block !important; font-size: 133%; font-style: normal; line-height: 1.1; margin: 20px 0 0 0; padding: 12px 10px 8px 10px; } .elementCommonButton .body { border: 2px solid #000; border-top: none; } .elementCommonButton .apply { *zoom: 1; margin: 0; padding: 0; } .elementCommonButton .apply:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementCommonButton .apply { padding: 1px 0; width: auto; } } .elementCommonButton .apply li { float: right; text-align: center; width: 331px; } @media screen and (max-width: 640px) { .elementCommonButton .apply li { float: none; margin: 10px; width: auto; } } .elementCommonButton .apply li .replace { display: block; margin: 0 auto; height: 0; overflow: hidden; } .elementCommonButton .apply li .replace .inner, .elementCommonButton .apply li .replace .text { z-index: -1; } .elementCommonButton .apply .web a { background: url(/common/images/201311/button-common-applyWeb.png) no-repeat 0 0; margin-top: 20px; margin-bottom: 20px; padding-top: 86px; width: 302px; } .elementCommonButton .apply .web a:hover { background-position: 0 -86px; } @media screen and (max-width: 640px) { .elementCommonButton .apply .web a { background: none; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1MjUyNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #252525)); background-image: -moz-linear-gradient(#5c5c5c, #252525); background-image: -webkit-linear-gradient(#5c5c5c, #252525); background-image: linear-gradient(#5c5c5c, #252525); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; height: auto; margin: 20px 0 10px; padding-top: 0; width: auto; } .elementCommonButton .apply .web a:hover { background-position: 0 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1MDUwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUxNTE1MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #050505), color-stop(100%, #515151)); background-image: -moz-linear-gradient(#050505, #515151); background-image: -webkit-linear-gradient(#050505, #515151); background-image: linear-gradient(#050505, #515151); } .elementCommonButton .apply .web a .inner { background: url(/common/images/201311/button-common-applyWeb_x2.png) no-repeat center center; background-size: 210px auto; display: block; height: 0; margin: 10px 5px 10px 35px; padding-top: 40px; overflow: hidden; z-index: auto; } } .elementCommonButton .apply .call .title { background: url(/common/images/201311/button-common-applyCall.png) no-repeat 0 0; margin-top: 20px; padding-top: 22px; width: 214px; } @media screen and (max-width: 640px) { .elementCommonButton .apply .call .title { background: url(/common/images/201311/button-common-applyCallTitle_x2.png) no-repeat center center; background-size: 214px auto; margin-top: 10px; } } .elementCommonButton .apply .call .calling { background: url(/common/images/201311/button-common-applyCall.png) no-repeat 0 -22px; padding-top: 42px; width: 214px; } .elementCommonButton .apply .call .calling:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } @media screen and (max-width: 640px) { .elementCommonButton .apply .call .calling { background: url(/common/images/201311/button-common-applyCalling_x2.png) no-repeat center center; background-size: 214px auto; margin-top: 5px; } } .elementCommonButton .apply .entry { margin-top: 10px; } .exCommonButton .elementCommonButton { margin-top: 0; } /** === elementGeneralButton === */ .elementGeneralButton { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; } .elementGeneralButton .button { background-color: #5c5c5c; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNWM1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1MjUyNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5c5c5c), color-stop(100%, #252525)); background-image: -moz-linear-gradient(#5c5c5c, #252525); background-image: -webkit-linear-gradient(#5c5c5c, #252525); background-image: linear-gradient(#5c5c5c, #252525); -pie-background: linear-gradient(#5c5c5c, #252525); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #fff; display: block; font-weight: bold; padding: 10px 15px 10px 20px; position: relative; text-decoration: none; text-align: center; } .elementGeneralButton .button:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1MDUwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUxNTE1MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #050505), color-stop(100%, #515151)); background-image: -moz-linear-gradient(#050505, #515151); background-image: -webkit-linear-gradient(#050505, #515151); background-image: linear-gradient(#050505, #515151); -pie-background: linear-gradient(#050505, #515151); } .elementGeneralButton .button.green { color: #fff; padding: 10px; background-color: #208311; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ4YmUzNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI2N2IxNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #48be37), color-stop(100%, #267b17)); background-image: -moz-linear-gradient(#48be37, #267b17); background-image: -webkit-linear-gradient(#48be37, #267b17); background-image: linear-gradient(#48be37, #267b17); -pie-background: linear-gradient(#48be37, #267b17); border: 1px solid #208311; } .elementGeneralButton .button.green:hover { background-color: #48BE37; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2N2IxNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ4YmUzNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #267b17), color-stop(100%, #48be37)); background-image: -moz-linear-gradient(#267b17, #48be37); background-image: -webkit-linear-gradient(#267b17, #48be37); background-image: linear-gradient(#267b17, #48be37); -pie-background: linear-gradient(#267b17, #48be37); } .elementGeneralButton .button.green .text { background: none; padding: 0; } .elementGeneralButton .button.outside { padding-left: 15px; } .elementGeneralButton .button.outside .outside { background: url(/common/images/icon-outside_white.png) left 50% no-repeat; background-size: 18px 18px; display: block; padding-left: 25px; } .elementGeneralButton .button .text { background: url(/common/images/bg-button-arrow-r.png) right 50% no-repeat; display: block; padding-right: 25px; } /** === social === */ .socialButton ul { width: auto; text-align: right; } .socialButton ul li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin: 0 0 0 5px; vertical-align: top; } .socialButton.bottom ul { text-align: left; } .socialButton.bottom ul li { margin: 0 5px 0 0; } /* ================================================================== step ==================================================================*/ .elementStep { margin: 30px 0 -20px; width: 666px; } .elementStep a { text-decoration: none; } @media screen and (max-width: 640px) { .elementStep { width: auto; height: auto; } .elementStep .current, .elementStep.step1 li:nth-of-type(1), .elementStep.step2 li:nth-of-type(2), .elementStep.step3 li:nth-of-type(3), .elementStep.step4 li:nth-of-type(4) { background: #000; color: #fff; } .elementStep .current a, .elementStep.step1 li:nth-of-type(1) a, .elementStep.step2 li:nth-of-type(2) a, .elementStep.step3 li:nth-of-type(3) a, .elementStep.step4 li:nth-of-type(4) a { color: #fff; } } .elementStep ol { list-style-type: none; margin-left: 0; overflow: hidden; padding: 0; } .elementStep ol li { float: left; } .elementStep ol li a { display: block; height: 0; margin: 0 26px 0 10px; overflow: hidden; padding-top: 60px; width: 130px; } .elementStep ol li a dl { z-index: -1; } @media screen and (max-width: 640px) { .elementStep ol { background: none !important; border-bottom: 1px solid #ccc; } .elementStep ol li { border: 1px solid #ccc; border-bottom: none; background: #fafafa; float: none; font-size: 120%; } .elementStep ol li a { height: auto; margin: 0; padding-top: 0; width: 100%; } .elementStep ol li a dl { margin: 0; padding: 10px; z-index: auto; *zoom: 1; } .elementStep ol li a dl:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementStep ol li a dl dt { float: left; font-weight: bold; } .elementStep ol li a dl dd { margin: 0; text-indent: 1em; } } .elementStep.step1 ol { background: url(/hikari/images/image-step1.gif) no-repeat 0px 0px; } .elementStep.step2 ol { background: url(/hikari/images/image-step2.gif) no-repeat 0px 0px; } .elementStep.step3 ol { background: url(/hikari/images/image-step3.gif) no-repeat 0px 0px; } .elementStep.step4 ol { background: url(/hikari/images/image-step4.gif) no-repeat 0px 0px; } .elementBorderBlockInline { margin-top: 5px; border: 1px solid #ccc; padding: 20px; } .elementBorderBlock { margin-top: 30px; border: 1px solid #ccc; } .elementBorderBlock h3 { margin: -1px -1px 0; background: #89da16; } .elementBorderBlock .body { padding: 20px; } .elementBorderBlock .body p { margin: 0 0 20px; } .elementStepSearch ul { margin-left: -18px; *zoom: 1; } .elementStepSearch ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementStepSearch ul { margin-left: 0; } } .elementStepSearch ul li { position: relative; float: left; margin-left: 18px; } @media screen and (max-width: 640px) { .elementStepSearch ul li { float: none; margin-left: 0; } } .elementStepSearch ul li .arrow { position: absolute; top: 110px; left: 215px; width: 11px; height: 14px; background: url(/common/images/maincontents/icon-arrow-lg.gif) 0px 0px no-repeat; } @media screen and (max-width: 640px) { .elementStepSearch ul li .arrow { position: static; margin: 5px auto; width: 14px; height: 11px; background: url(/common/images/maincontents/icon-arrow-lg2.gif) 0px 0px no-repeat; } } .elementStepSearch ul li dl { margin: 0; padding: 0; width: 208px; border: 1px solid #e4e4e4; } @media screen and (max-width: 640px) { .elementStepSearch ul li dl { width: 100%; } } .elementStepSearch ul li dl dt { padding: 10px; } .elementStepSearch ul li dl dd { min-height: 110px; margin: 0; padding: 15px; } @media screen and (max-width: 640px) { .elementStepSearch ul li dl dd { min-height: inherit; } } .elementStepSearch ul li dl dd.image { padding: 0; } .elementStepSearch ul li dl dd.image img { display: block; margin: 0 auto; } .elementStepFlow ul { margin: 20px 10px; width: auto; } .elementStepFlow ul li { *zoom: 1; } .elementStepFlow ul li:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementStepFlow ul li .tgt { float: left; } .elementStepFlow ul li .arrow { clear: both; padding-left: 135px; margin: 15px 0; } @media screen and (max-width: 640px) { .elementStepFlow ul li .arrow { padding: 0; text-align: center; } } .elementStepFlow ul li dl { margin: 0 0 0 77px; } .elementStepFlow ul li dl dt { font-weight: bold; } .elementStepFlow ul li dl dt.mid { padding-top: 25px; } @media screen and (max-width: 640px) { .elementStepFlow ul li dl dt { padding-top: 0; } } .elementStepFlow ul li dl dd { margin: 5px 0 0; } .elementStepFlow ul li dl dd .note { margin-top: 0; } .elementStepFlow ul li dl dd .note .link { text-indent: 0; } .elementStepFlow ul li .oneText { font-weight: bold; margin: 0 0 0 77px; padding-top: 25px; } .elementStepFlow ul li .leadText { margin: 0 0 5px 77px; } .elementStepFlow.arrowStep { margin-top: 30px; } .elementStepFlow.arrowStep ul { margin: 0; padding: 20px 0 40px 95px; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep ul { padding-left: 28px; } } .elementStepFlow.arrowStep ul li .tgt { text-align: center; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep ul li .tgt { text-align: left; margin-bottom: 10px; } } .elementStepFlow.arrowStep ul li .tgt.oneIcon { text-align: center; width: 130px; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep ul li .tgt { float: none; } } .elementStepFlow.arrowStep ul li .arrow { margin: 10px 0; padding-left: 180px; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep ul li .arrow { padding-left: 60px; text-align: left; } } .elementStepFlow.arrowStep ul li dl { margin-left: 148px; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep ul li dl { margin-left: 0; } } .elementStepFlow.arrowStep .flow { background: url(/common/images/201312/step_arrow_body.png) repeat-y 42px 0; margin-bottom: 1px; } .elementStepFlow.arrowStep .flow .flowBody { background: url(/common/images/201312/step_arrow_triangle.png) no-repeat 42px bottom; min-height: 120px; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep .flow .flowBody { background-position: 4px bottom; } } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep .flow { background-position: 4px 0; } } .elementStepFlow.arrowStep .flow.last { background-image: none; } .elementStepFlow.arrowStep .flow.last .flowBody { background-image: none; } .elementStepFlow.arrowStep .flow.last ul { padding-bottom: 0; } .elementStepFlow.arrowStep .flow .flowTitle { background-color: #fff; background-image: none; font-size: 120%; height: 0; line-height: 2; margin: 0; padding: 40px 0 0; overflow: hidden; } .elementStepFlow.arrowStep .flow .flowTitle .text { z-index: -1; } @media screen and (max-width: 640px) { .elementStepFlow.arrowStep .flow .flowTitle { background: none !important; color: #000; height: auto; padding: 5px !important; background-color: #fff !important; border: 3px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .elementStepFlow.arrowStep .flow .flowTitle .text { display: block; overflow: hidden; z-index: auto; } .elementStepFlow.arrowStep .flow .flowTitle .text .elapsed { background-color: #000; color: #fff; display: inline-block; font-size: 80%; margin-right: 1em; padding: 3px; text-align: center; vertical-align: middle; } .elementStepFlow.arrowStep .flow .flowTitle .text .elapsed .ofDay { display: block; font-size: 80%; vertical-align: middle; } .elementStepFlow.arrowStep .flow .flowTitle .text .action { display: inline-block; } } .elementStepFlow.arrowStep .flow.apply .flowTitle { background: url(/common/images/201312/step_flowTitle_apply.png) no-repeat 0 0; } .elementStepFlow.arrowStep .flow.fixed .flowTitle { background: url(/common/images/201312/step_flowTitle_fixed.png) no-repeat 0 0; } .elementStepFlow.arrowStep .flow.firstBuild .flowTitle { background: url(/common/images/201312/step_flowTitle_firstBuild.png) no-repeat 0 0; } .elementStepFlow.arrowStep .flow.secondBuild .flowTitle { background: url(/common/images/201312/step_flowTitle_secondBuild.png) no-repeat 0 0; } .elementStepLink ul, .elementStepLinkInner ul { margin-top: 50px; margin-left: -10px; *zoom: 1; } .elementStepLink ul:after, .elementStepLinkInner ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } @media screen and (max-width: 640px) { .elementStepLink ul, .elementStepLinkInner ul { display: none; margin-left: 0; } } .elementStepLink ul li, .elementStepLinkInner ul li { position: relative; float: left; margin-left: 10px; } .elementStepLinkInner ul { margin-top: 20px; } @media screen and (max-width: 640px) { .elementStepLinkInner ul { display: block; } } @media screen and (max-width: 640px) { .elementStepLinkInner ul li { float: none; margin: 0 auto 10px; text-align: center; } } /* ================================================================== anchor ==================================================================*/ /** === elementAnchor === */ .elementAnchor { margin: 40px 0 -10px; padding: 10px; background: #fafafa; border: 1px solid #e4e4e4; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .elementAnchor ul { margin: 0; } .elementAnchor ul li { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin-right: 25px; } /** === elementAnchorBlock === */ .elementAnchorBlock ul { *zoom: 1; } .elementAnchorBlock ul:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .elementAnchorBlock ul li { float: left; min-height: 36px; border-left: 1px solid #fff; border-right: 1px solid #fff; text-align: center; } .elementAnchorBlock ul li a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; color: #fff; background: url(/common/images/bg-button-anchor.jpg) 0px 0px repeat-x; text-decoration: none; line-height: 1.3; } .elementAnchorBlock ul li a span { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; display: table-cell; vertical-align: middle; padding-bottom: 5px; width: 164px; height: 65px; cursor: pointer; *padding-top: 15px; *height: 55px; background: url(/common/images/bg-button-arrow-b.png) 50% 59px no-repeat; font-weight: bold; } .elementAnchorBlock ul li a:hover { background-position: 0px -70px; } @media screen and (max-width: 640px) { .elementAnchorBlock ul li { float: none; border: none; margin: 1px 0; min-height: 20px; } .elementAnchorBlock ul li a { display: table; width: 100%; } .elementAnchorBlock ul li a span { width: 100% !important; height: 60px; background-position: 50% 49px; } } .elementAnchorBlock.two ul li { border-left: 2px solid #fff; } .elementAnchorBlock.two ul li a span { font-size: 120%; width: 330px; } .elementAnchorBlock.two ul li a:hover { background-position: 0px -70px; } .elementAnchorBlock.five ul li a span { width: 131px; } @media screen and (max-width: 640px) { .elementAnchorBlock.five ul li a span { width: auto; } } .hikariPhone .elementAnchorBlock ul li a span { font-size: 80%; } @media screen and (max-width: 640px) { .hikariPhone .elementAnchorBlock ul li a span { width: auto; font-size: 100%; } } /* ================================================================== sonet ==================================================================*/ /** === Search === */ .most { float: right; display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 1px 3px 0; margin-left: 3px; background: #c96666; color: #fff; font-size: 83%; font-weight: normal; } .complement { padding-top: 10px; margin-top: 10px; border-top: 1px dotted #000; } .complement p { margin: 0 0 10px; } .form.tel input, .form.zip input { width: 80px; display: inline; padding: 2px 5px; border: 1px solid #cdcdcd; font-size: 83%; line-height: 1.0; vertical-align: top; } @media screen and (max-width: 640px) { .form.tel input, .form.zip input { width: 40px; } } .form .example { padding: 0 0 0 10px; } @media screen and (max-width: 640px) { .form .example { padding: 5px 0 0; display: block; } } /** === select === */ .elementSelectArea dl { margin: 20px auto 0 auto; padding: 0; line-height: 1.7; } @media screen and (max-width: 640px) { .elementSelectArea dl { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; } } .elementSelectArea dl dt { padding: 10px 20px; margin: 0; background: #aebabe; font-weight: bold; color: #000; } .elementSelectArea dl dd { padding: 10px 20px; margin: 1px 0 0; border: 1px solid #dadada; } .elementSelectArea dl dd.NA { margin-top: 6px; background: #e3e3e4; } .elementSelectArea dl dd label { padding-left: 5px; } /** === SearchResult === */ .elementSearchResultList .fontM { font-size: 16px; } .elementSearchResultList .fontB { font-weight: bold; } .elementSearchResultList .searchInputBox { margin-top: 38px; padding: 10px; width: 898px; background: #fafafa; border: 1px solid #e4e4e4; } @media screen and (max-width: 640px) { .elementSearchResultList .searchInputBox { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } .elementSearchResultList .searchInputBox p { margin-top: 0; vertical-align: middle; } .elementSearchResultList .searchInputBox .txtinput { padding: 3px 10px; width: 278px; border: 1px solid #cdcdcd; line-height: 1.4; } @media screen and (max-width: 640px) { .elementSearchResultList .searchInputBox .txtinput { width: 47%; } } .elementSearchResultList .searchInputBox select { line-height: 1.4; border: 1px solid #cdcdcd; height: 25px; } .elementSearchResultList .searchInputBox .btninput { width: 60px; height: 24px; border: none; text-indent: -999em; background: url(/common/images/maincontents/button-search.gif) no-repeat 0 0; } .elementSearchResultList .searchInputBox .btninput:hover { background: url(/common/images/maincontents/button-search-over.gif) no-repeat 0 0; } .elementSearchResultList .top .searchInputBox { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } .elementSearchResultList .foot .searchInputBox { margin-top: 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .elementSearchResultList #searchBoxFoot table { width: 100%; } .elementSearchResultList #resultHead .resultMessage { padding: 10px; background: #e4e4e4; } .elementSearchResultList #resultHead .resultMessage .resultNavi { float: right; } .elementSearchResultList #resultHead .resultMessage .resultNavi span a { padding: 0 0 0 18px; background: url(/common/images/icon-link-l.gif) no-repeat left 50%; } .elementSearchResultList #resultHead .resultMessage .resultNavi span:nth-last-of-type(1) { margin-left: 15px; } .elementSearchResultList #resultHead .resultMessage .resultNavi span:nth-last-of-type(1) a { padding: 0 18px 0 0; background: url(/common/images/icon-link.gif) no-repeat right 50%; } @media screen and (max-width: 640px) { .elementSearchResultList #resultHead .resultMessage .resultNavi { float: none; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #fff; overflow: auto; } .elementSearchResultList #resultHead .resultMessage .resultNavi span:nth-last-of-type(1) { float: right; } } .elementSearchResultList .rerationalWords, .elementSearchResultList .rerationalWordsBottom { margin-top: 10px; } .elementSearchResultList .rerationalWords a, .elementSearchResultList .rerationalWordsBottom a { margin-right: 10px; } .elementSearchResultList #searchresultNumber h2 { margin: 10px 0 0; padding: 0; color: #000; font-size: 100%; font-weight: normal; background: #fff; } .elementSearchResultList #searchresultNumber ol { padding: 0 40px; width: auto; } @media screen and (max-width: 640px) { .elementSearchResultList #searchresultNumber ol { padding: 0 20px; } } .elementSearchResultList #searchresultNumber ol li { margin-top: 30px; margin-bottom: 40px; list-style-type: none; } .elementSearchResultList #searchresultNumber ol li dl { margin: 0; width: auto; } .elementSearchResultList #searchresultNumber ol li dl dt { font-size: 16px; } .elementSearchResultList #searchresultNumber ol li dl dd { margin: 5px 0 0; word-wrap: break-word; } .elementSearchResultList #searchresultNumber ol li dl dd:nth-last-of-type(1) { color: #666; } .elementSearchResultList #searchresultNumber ol li dl dd:nth-last-of-type(1) a { margin-left: 15px; color: #666; } .elementSearchResultList #pageing { margin-top: 50px; margin-bottom: 40px; } .elementSearchResultList #pageing span, .elementSearchResultList #pageing a { margin: 0 10px; } @media screen and (max-width: 640px) { .elementSearchResultList #pageing span, .elementSearchResultList #pageing a { margin: 0 7px; } } .elementSearchResultList #pageing .arrow { padding: 0 0 0 18px; background: url(/common/images/icon-link-l.gif) no-repeat left 50%; } .elementSearchResultList #pageing .arrow:nth-last-of-type(1) { padding: 0 18px 0 0; background: url(/common/images/icon-link.gif) no-repeat right 50%; } .elementSearchResultList .gFt2010 { display: none; } /** elementSocialButtons */ .elementSocialButtons { margin-top: 30px; text-align: right; } @media screen and (max-width: 640px) { .elementSocialButtons { display: block !important; position: static !important; margin: 10px 0 !important; z-index: 1; } } .elementSocialButtons.top { height: 20px; margin: 0; position: absolute; top: 0; right: 0; height: 20px; } .lt-ie8 .elementSocialButtons { margin-right: 43px; } .elementSocialButtons ul.buttons { margin: 0 auto; width: auto; height: auto; display: inline-block; list-style: none; text-align: left; *zoom: 1; } .elementSocialButtons ul.buttons:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .lt-ie8 .elementSocialButtons ul.buttons { display: inline; } .elementSocialButtons ul.buttons li { min-height: 30px; float: left; text-align: left; } .elementSocialButtons ul.buttons .line { width: 100px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .line { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .twitter-tweet { width: 87px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .twitter-tweet { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .facebook-like { width: 160px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .facebook-like { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .facebook-like iframe { z-index: 1; } .elementSocialButtons ul.buttons .mixi-check { width: 70px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .mixi-check { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .google-plusone { width: 60px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .google-plusone { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .hatena-bookmark { width: 30px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .hatena-bookmark { width: auto; margin-right: 10px; } } .elementSocialButtons ul.buttons .evernote { width: 51px; } @media screen and (max-width: 640px) { .elementSocialButtons ul.buttons .evernote { width: auto; margin-right: 10px; } } /** A-B patternToggle */ .patternToggleA { display: block; } .patternToggleB { display: none; } .listNote { padding-left: 0; font-size: 12px; } .listNote li, .listNote dd { position: relative; font-size: 12px; color: #333; padding-left: 1.4em; margin-bottom: 5px; } .listNote li:before, .listNote dd:before { margin-left: -1.4em; content: "※"; position: absolute; } .listNormal { padding-left: 0; margin: 0; } .listNormal dt { margin-bottom: 5px; } .listNormal > li, .listNormal > dd { position: relative; font-size: 12px; color: #333; padding-left: 1.0em; margin-bottom: 5px; margin-left: 0; } .listNormal > li:before, .listNormal > dd:before { margin-left: -1.0em; content: "・"; position: absolute; left: 12px; top: 0; } .listNumnote { padding-left: 0; font-size: 12px; } .listNumnote li, .listNumnote dd { position: relative; font-size: 12px; color: #333; padding-left: 2.2em; margin-bottom: 5px; list-style: none; counter-increment: cntnote; position: relative; } .listNumnote li:before, .listNumnote dd:before { margin-left: -2.2em; content: "※" counter(cntnote); position: absolute; } .listNum { padding-left: 0; font-size: 12px; } .listNum li, .listNum dd { position: relative; font-size: 12px; color: #333; padding-left: 1.4em; margin-bottom: 5px; list-style: none; counter-increment: cntnote; position: relative; } .listNum li:before, .listNum dd:before { margin-left: -1.4em; content: counter(cntnote) "."; } .gooddesignNote { width: 950px; margin: 80px auto 0px; } .gooddesignNote li { position: relative; padding-left: 1.2em; font-size: 0.8em; text-align: left; } .gooddesignNote li span { position: absolute; top: 0px; left: 0px; } .bottomNote { width: 950px; margin: 80px auto 0px; } .bottomNote li { padding-left: 1.2em; text-align: left; font-size: 12px; } .bottomNote li span { text-indent: -1.2em; } @media screen and (max-width: 640px) { .gooddesignNote { width: 100%; box-sizing: border-box; padding: 0px 10px; margin: 40px 0px 0px; } .bottomNote { width: 100%; box-sizing: border-box; padding: 0px 10px; margin: 30px 0px 0px; } } .applySingle { margin: 60px 0 30px; } .applySingle h2 { background: none !important; border-top: none !important; line-height: 1.1; font-size: 30px; padding: 0; line-height: 1.1em; margin: 0 0 40px; text-align: center; color: #222; border: none; } .applySingle .elementGeneralButton { text-align: center; display: block; } .applySingle .elementGeneralButton a { background: #339933; display: inline-block; padding: 25px 0 20px; width: 90%; max-width: 700px; color: #fff; text-decoration: none; font-weight: bold; font-size: 24px; box-sizing: border-box; } .applySingle .elementGeneralButton a:hover { opacity: 0.8; } .applySingle .body { border: none; text-align: center; } .applySingle .body h3 { display: block; font-size: 20px; font-weight: bold; background: none; margin: 30px 0　20px; padding: 0; line-height: 140%; } .applyDouble .wrapperInner { box-sizing: border-box; } .applyDouble h2 { padding: 0 !important; color: #222 !important; border-bottom: none !important; } .applyDouble ul li a { display: block; width: 450px; background: #393; color: #fff; font-weight: bold; font-size: 22px; text-align: center; padding: 80px 0 10px; position: relative; box-shadow: 0px 1px 3px 1px #a1a1a1; -moz-box-shadow: 0px 1px 3px 1px #a1a1a1; -webkit-box-shadow: 0px 1px 3px 1px #a1a1a1; box-sizing: border-box; text-decoration: none; } .applyDouble ul li a:hover { opacity: 0.8; } .applyDouble ul li a:before { position: absolute; content: url("/common/images/ico_conv.png"); top: 25px; left: 50%; margin-left: -21px; } .applyDouble ul li a span { font-size: 18px; } .applyDouble ul li:first-child a { padding: 100px 0 10px; } .applyDouble h2.phone { padding: 70px 0 30px !important; margin: 0 !important; border-bottom: none !important; } .applyDouble .phoneBlock { background: #fff; border-radius: 8px; margin: 0 168px 18px; border: 1px solid #ccc; } .applyDouble .phoneBlock h3 { font-size: 16px !important; border-bottom: 1px solid #ccc; padding: 20px 10px; text-align: center; background: none !important; color: #222 !important; margin: 0; } .applyDouble .phoneBlock h3 span { color: #393; font-weight: bold; font-size: 18px; } .applyDouble .phoneBlock .numArea { padding: 20px 10px; text-align: center; } .applyDouble .phoneBlock .numArea div { display: inline-block; padding: 0 5px; vertical-align: bottom; } .applyDouble .phoneBlock .numArea p { margin: 16px 5px 0; font-size: 15px; vertical-align: bottom; display: inline-block; line-height: 100%; } .applyDouble .phoneBlock .numArea p span { font-size: 20px; } @media screen and (max-width: 640px) { .applyDouble ul.clearfix li { display: table; width: 100%; margin-bottom: 20px; } .applyDouble ul.clearfix li a { display: table-cell; margin-bottom: 00px; width: 100%; font-size: 18px; padding: 20px 10px 20px 65px; vertical-align: middle; } .applyDouble ul.clearfix li a:before { position: absolute; top: 50%; left: 15px; margin-left: 0px; margin-top: -22px; } .applyDouble ul.clearfix li a span { font-size: 16px; } .applyDouble ul.clearfix li:first-child a { padding: 20px 10px 20px 65px; } .applyDouble h2.phone { padding: 40px 0 30px !important; } .applyDouble .phoneBlock { background: #fff; border-radius: 8px; margin: 0 0 18px; } .applyDouble .phoneBlock h3 { font-size: 16px !important; border-bottom: 1px solid #ccc; padding: 20px 10px; text-align: center; margin: 0; } .applyDouble .phoneBlock h3 span { color: #393; font-weight: bold; font-size: 18px; } .applyDouble .phoneBlock .numArea { padding: 20px 10px; text-align: center; } .applyDouble .phoneBlock .numArea div { display: inline-block; padding: 0 5px; vertical-align: bottom; } .applyDouble .phoneBlock .numArea p { margin: 16px 5px 0; font-size: 15px; vertical-align: bottom; display: inline-block; line-height: 100%; } .applyDouble .phoneBlock .numArea p span { font-size: 20px; } } .fl { float: left; } .fr { float: right; } @media screen and (max-width: 640px) { .fnSp { float: none !important; } } @media screen and (min-width: 641px) { .pcNone { display: none !important; } } .open-default, .open-default2 { cursor: pointer; text-decoration: underline; } .open-default:hover, .open-default2:hover { text-decoration: none; } .iziModal-overlay { z-index: 9998; } @media screen and (max-width: 640px) { .iziModal { width: 85% !important; margin: 0 auto !important; top: 10% !important; } } .iziModal .close a { position: absolute; top: -10px; right: -10px; font-weight: bold; color: #fff; line-height: 100%; border-radius: 30px; border: 2px solid #fff; background: #444; padding: 4px 6px; text-decoration: none; font-size: 16px; cursor: pointer; } .iziModal .iziModal-content { z-index: 9999; padding: 25px 15px 15px !important; box-sizing: border-box; position: relative; font-size: 14px; } .iziModal .iziModal-content p { margin: 0; } .iziModal .iziModal-content .txt-close { margin-top: 15px; text-align: center; cursor: pointer; text-decoration: underline; } .iziModal .iziModal-content .txt-close:hover { text-decoration: none; } .pagetopLink { border: 2px solid #ababab; text-align: center; padding: 12px; font-size: 15px; color: #666; display: block; font-weight: bold; text-decoration: none; margin: 40px auto; box-sizing: border-box; } .pagetopLink:visited { color: #666; } .pagetopLink span { padding: 0 20px; position: relative; } .pagetopLink span:after { width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent #666666 transparent; content: ""; position: absolute; left: 0; top: 50%; margin-top: -3px; } @media screen and (min-width: 641px) { .pagetopLink { margin: 60px auto; max-width: 910px; } } @media screen and (max-width: 640px) { .pagetopLink { width: 95%; } .pagetopLink.simpleFooterbtn { margin: 40px auto; box-sizing: border-box; } } .simpleFooter { background-color: #262626; width: 100%; margin: 0 auto; padding: 10px 0; text-align: center; } .simpleFooter p { color: #fff; margin: 0; padding: 0 10px; } .txtRed { color: #D23633 !important; } .headCmp { background: #eb6f00; text-align: center; margin: 0; padding: 10px; } .headCmp a { color: #fff; display: block; text-decoration: none; } .headCmp a:hover { text-decoration: underline; } .topNews { width: 100%; max-width: 950px; margin: 10px auto; text-align: left; margin-bottom: 15px; display: block; border: 3px solid #FFA500; font-size: 16px; box-sizing: border-box; } .topNews dt { background: #FFA500; font-weight: bold; display: table-cell; vertical-align: top; padding: 5px 10px; margin: 0; } .topNews dd { display: table-cell; vertical-align: top; padding: 5px 10px; margin: 0; } @media screen and (max-width: 768px) { .topNews { width: 95%; } .topNews dt { display: block; text-align: center; } } .convTtl { text-align: center; font-weight: bold; font-size: 1.2em; background: #eee; padding: 10px; margin: 25px 0 0px; } @media screen and (min-width: 641px) { .convTtl { background: none; padding: 0 0 10px; margin: 0 0 30px; border-bottom: 1px solid #cdcdcd; } } .convSbttl { color: #db2b5d; text-align: center; font-size: 0.9em; margin-bottom: 10px; } @media screen and (min-width: 641px) { .convSbttl { text-align: left; } } @media screen and (min-width: 768px) { .pcConv .pcConvInner .telConv, .pcConv .pcConvInner .webConv { width: 340px !important; } } .anchorLinkArea { margin-top: -20px; padding-top: 20px; } @media screen and (min-width: 641px) { .anchorLinkArea { margin-top: -60px; padding-top: 60px; } } .wifiContent { margin: 30px 0 0; box-sizing: border-box; padding: 0 15px; } .wifiContent .wifiTop { padding: 20px 15px; background: #ee6770; } .wifiContent .wifiTxt { padding: 20px; background: #fff; } .wifiContent p.wifiLead { font-size: 18px; text-align: center; font-weight: bold; margin: 0; color: #fff; position: relative; } .wifiContent .ttlArea { margin: 20px 0; padding: 30px 10px 20px; position: relative; text-align: center; z-index: 1; background: #fff; border-radius: 6px; } .wifiContent .ttlArea p { font-weight: bold; margin: 0; color: #ee6770; font-size: 16px; } .wifiContent .ttlArea p span { font-size: 28px; } .wifiContent .ttlArea div { position: static; text-align: center; top: 0; left: 0; margin: 0 auto 20px; } .wifiContent .ttlArea:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 12px 18px 0 18px; border-color: #ffffff transparent transparent transparent; bottom: -12px; left: 50%; margin-left: -18px; content: ""; } .wifiContent .priceTxt { color: #fff; margin: 30px 0 10px; text-align: center; font-size: 22px; font-weight: bold; } .wifiContent .priceDetail { color: #ee6770; background: #fff; font-size: 16px; text-align: center; padding: 10px; font-weight: bold; } .wifiContent .priceDetail del { position: relative; padding: 0 2px; } .wifiContent .wifiInside { width: 100%; margin: 20px auto; } .wifiContent .wifiInside .priceBlock { border: 4px solid #e5e5e5; display: block; text-align: center; padding: 15px 5px; font-size: 16px; margin-top: 10px; } .wifiContent .wifiInside .priceBlock p { font-weight: bold; margin: 1.0em 0 0; } .wifiContent .wifiInside .priceBlock p span { font-weight: normal; } .wifiContent .wifiInside .priceBlock p:first-child { margin: 0; } .wifiContent .wifiInside .wifiList { display: flex; justify-content: space-between; padding: 0; flex-wrap: wrap; } .wifiContent .wifiInside .wifiList li { width: 33.3%; } .wifiContent .wifiInside .wifiList li span { width: 120px; height: 120px; display: block; border-radius: 60px; font-weight: bold; text-align: center; color: #555; background: #fde545; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } @media screen and (max-width: 480px) { .wifiContent .wifiInside .wifiList li span { width: 90px; height: 90px; } } .wifiContent strong { color: #fe616c; } /*wifi*/ .flowContent { background: #fff; padding: 30px 24px; margin: 30px 15px 0; font-size: 15px; box-sizing: border-box; } .flowContent .open-default { color: #4a7ab2; text-decoration: underline; cursor: pointer; padding-right: 30px; background: url("/common/images/ico-modal.png") right center no-repeat; background-size: auto 24px; } .flowContent .open-default:hover { text-decoration: none; } .flowContent .topTxt { text-align: center; display: block; font-weight: bold; font-size: 32px; margin: 10px auto; padding: 10px 26px; background: #ffe9d7; } .flowContent .attTxt { margin: 30px -24px; background: #fafafa; padding: 12px; text-align: center; } .flowContent .wifi { border: 6px solid #f99f14; padding: 44px 30px 30px; text-align: left; } .flowContent .wifi a.wifiBtn { margin: 30px auto 0; border-radius: 4px; border: 2px solid #707070; text-align: center; color: #424242; padding: 12px; position: relative; display: block; font-weight: bold; text-decoration: none; } .flowContent .wifi a.wifiBtn:hover { opacity: 0.8; } .flowContent .wifi a.wifiBtn:after { content: "→"; position: absolute; top: 50%; margin-top: -10px; right: 10%; } .flowCommonList { padding: 30px 24px 40px; margin: 0; box-sizing: border-box; } .flowCommonList > li { background: #fff; border-radius: 16px; padding: 30px; position: relative; margin: 0 0 34px; text-align: left; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); font-size: 15px; } .flowCommonList > li div { margin-bottom: 40px; } .flowCommonList > li p.ttl { font-size: 24px; font-weight: bold; margin: 0 0 26px; } .flowCommonList > li p.ttl span { font-size: 18px; } .flowCommonList > li ul.listNote { margin: 0; } .flowCommonList > li ul.listNote li { font-weight: bold; color: #f40000; font-size: 15px; } .flowCommonList > li:before { position: absolute; } .flowCommonList > li:nth-of-type(1):before { content: url("/common/images/flow/step01img.png"); top: 32px; right: 42px; } .flowCommonList > li:nth-of-type(2):before { content: url("/common/images/flow/step02img.png"); top: 26px; right: 42px; } .flowCommonList > li:nth-of-type(3):before { content: url("/common/images/flow/step03img.png"); top: 24px; right: 36px; } .flowCommonList > li:nth-of-type(3) { margin: 0; } .flowCommonList > li:nth-of-type(3):after { content: none; } .flowCommonList > li:after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 13px 0 13px; border-color: #424242 transparent transparent transparent; left: 50%; margin-left: -13px; bottom: -22px; } .flowCommonList--moving > li { margin: 0 0 34px; text-align: left; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); font-size: 15px; } .flowCommonList--moving > li div { margin-bottom: 40px; } .flowCommonList--moving > li p.ttl { font-size: 24px; font-weight: bold; margin: 0 0 26px; } .flowCommonList--moving > li p.ttl span { font-size: 18px; } .flowCommonList--moving > li ul.listNote { margin: 0; } .flowCommonList--moving > li ul.listNote li { font-weight: bold; color: #f40000; font-size: 15px; } .flowCommonList--moving > li:before { position: absolute; } .flowCommonList--moving > li:nth-of-type(1):before { display: none !important; } .flowCommonList--moving > li:nth-of-type(2):before { display: none !important; } .flowCommonList--moving > li:nth-of-type(3):before { display: none !important; } .flowCommonList--moving > li:nth-of-type(3) { margin: 0 0 46px; } .flowCommonList--moving > li:nth-of-type(3):after { content: ""; } .flowCommonList--moving > li:nth-of-type(4) { margin: 0; } .flowCommonList--moving > li:nth-of-type(4):after { content: none; } .flowCommonList--moving > li:after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 13px 0 13px; border-color: #424242 transparent transparent transparent; left: 50%; margin-left: -13px; bottom: -22px; } .bottomBtn { width: 267px; margin: 0 auto; position: relative; z-index: 100; } .bottomBtn a { border-radius: 4px; background: #262626; display: block; text-align: center; color: #fff; text-decoration: none; padding: 16px 0; font-weight: bold; font-size: 15px; } .bottomBtn a:visited { color: #fff; } .bottomBtn a:hover { text-decoration: none; opacity: 0.8; } @media screen and (min-width: 641px) { .wifiContent { margin: 30px auto 0; width: 690px; padding: 0; } .wifiContent .wifiTop { padding: 60px 40px 30px; } .wifiContent .wifiTxt { padding: 20px 80px; } .wifiContent .priceTxt { font-size: 32px; } .wifiContent .priceDetail { font-size: 18px; } .wifiContent p.wifiLead { text-align: center; font-size: 42px; font-weight: bold; margin: 0; position: relative; } .wifiContent .ttlArea { padding: 50px 0 50px 340px; position: relative; z-index: 1; } .wifiContent .ttlArea p { font-weight: bold; font-size: 22px; margin: 0; text-align: left; } .wifiContent .ttlArea p span { font-size: 32px; } .wifiContent .ttlArea div { position: absolute; top: 40px; left: 120px; } .wifiContent .wifiInside { width: 420px; margin: 20px auto; } .wifiContent .wifiInside .priceBlock { border: 4px solid #e5e5e5; display: block; padding: 25px 0; text-align: center; font-size: 17px; font-weight: bold; margin-top: 10px; } .wifiContent .wifiInside .priceBlock span { font-size: 14px; font-weight: normal; } .wifiContent .wifiInside .wifiList { display: flex; justify-content: space-between; padding: 0; margin: 20px -8px 0; } .wifiContent .wifiInside .wifiList li span { width: 120px; display: block; border-radius: 60px; font-weight: bold; text-align: center; display: flex; align-items: center; height: 120px; font-size: 16px; justify-content: center; } .wifiContent strong { color: #fe616c; } .flowContent { width: 920px; padding: 30px 50px; margin: 30px auto 0; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); } .flowContent .topTxt { width: 280px; } .flowContent .attTxt { margin: 20px auto; background: #fafafa; width: 405px; } .flowContent .wifi { border: 5px solid #f99f14; padding: 30px 30px 30px 240px; text-align: left; position: relative; } .flowContent .wifi div { position: absolute; top: 36px; left: 32px; } .flowContent .wifi p { margin-top: 0; } .flowContent .wifi a.wifiBtn { margin: 20px auto 0; width: 370px; } .flowCommonList { padding: 40px 0; margin: 0 auto; width: 920px; } .flowCommonList > li { padding: 36px 50px 46px 236px; position: relative; margin: 0 0 46px; height: 120px; } .flowCommonList > li div { position: absolute; left: 86px; top: 30px; } .flowCommonList > li p.ttl { margin: 0 0 20px; } .flowCommonList > li:nth-of-type(1):before { content: url("/common/images/flow/step01img.png"); top: 90px; right: 736px; } .flowCommonList > li:nth-of-type(2):before { content: url("/common/images/flow/step02img.png"); top: 90px; right: 736px; } .flowCommonList > li:nth-of-type(3):before { content: url("/common/images/flow/step03img.png"); top: 90px; right: 728px; } .flowCommonList > li:after { border-width: 10px 10px 0 10px; margin-left: -10px; bottom: -28px; } .flowCommonList--moving > li:before { display: none !important; } .flowCommonList--moving > li:nth-of-type(2) { height: 160px; } .flowCommonList--moving > li:after { border-width: 10px 10px 0 10px; margin-left: -10px; bottom: -28px; } .bottomBtn { width: 370px; } .bottomBtn a { padding: 16px 0; } } @media screen and (max-width: 640px) { .flowCommonList--moving > li:nth-of-type(3) { margin-bottom: 34px !important; } } .modalwindow { width: 556px; background: #666; position: fixed; left: 50%; top: 50%; z-index: 2001; display: none; margin: -255px 0 0 -284px; padding: 6px; /* h2 { width: 300px; height: 24px; margin: 41px auto 0 auto; background: url(/common/images/label-modalwindow-inquiry.gif) no-repeat 0 0; text-indent: -999em; @media screen and (max-width: 640px) { background: none; font-size: 120%; font-weight: bold; text-indent: 0; } }*/ } @media screen and (max-width: 640px) { .modalwindow { width: 300px; margin: -150px 0 0 -150px; } } .modalwindow .close { width: 20px; height: 20px; position: absolute; right: 13px; top: 13px; background: url(/common/images/icon-modalwindow-close.gif) no-repeat 0 0; cursor: pointer; text-indent: -999em; } .modalwindow .close:hover { background-position: 0 -20px; } .modalwindow .inner { width: 500px; min-height: 450px; position: static; background: #fff; margin: 0; padding: 28px; text-align: left; } @media screen and (max-width: 640px) { .modalwindow .inner { padding: 34px 6px 20px; width: 288px; height: 300px; min-height: 300px; overflow: auto; } } .modalwindow h2 { margin: 0 0 13px 0; padding: 12px 10px 12px 10px; background: #111 url(data:image/gif;base64,R0lGODdhAQAEAPEAAJ+fn4yMjKamppaWliH/C1hNUCBEYXRhWE1QjT94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbXRhIHhBMTU4QTc2Qzc2REEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2t0IGVuZD0iciI/PgAsAAAAAAEABAAAAgMUFgUAOw==) repeat-x 0 100%; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; color: #fff; font-size: 133%; font-style: normal; line-height: 1.1; } .modalwindow h3 { margin: 13px 0 13px 0; padding: 10px 20px; background: #e3e3e3; color: #333; font-size: 117%; font-style: normal; line-height: 1.1; } @media screen and (max-width: 640px) { .modalwindow h3 { margin-bottom: 5px; } } .modalwindow p { width: 460px; margin: 15px auto 28px auto; } @media screen and (max-width: 640px) { .modalwindow p { width: auto; margin: 15px 20px 0; } } .modalwindow .button-inquiry { width: 244px; height: 34px; display: block; margin: 17px auto 0 auto; background: url(/common/images/button-modalwindow-inquiry.gif) no-repeat 0 0; text-indent: -999em; } @media screen and (max-width: 640px) { .modalwindow .button-inquiry { width: 244px; height: 14px; padding: 6px 10px 6px 0; display: inline-block; background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAtUlEQVR42n2QQQqCQBSG3UTQHQIv0LZV1yloOQidogt0lmjtRhCGYUAQdBRGERSUcXAjf08XgZQ9+Pjh51u89xwAO8JZwxnH8UI8AOx/CtZaDzTDMKi+768AtguhrmtGEowxmLLrulfTNKePoLVmVKAsy5m2bVFVFYqi8GYhSRJGEtI0xZRKKZtl2Z16dxaklIxKxHGMKIqexHGxQxiGNyFEzjk/B0Gw+bqCyoPv++7qHwD85Q3z8/zOQQTmoQAAAABJRU5ErkJggg==) no-repeat 238px 50%; color: #fff; text-indent: 0; text-decoration: none; font-size: 14px; line-height: 14px; -moz-border-radius: 3px / 3px; -webkit-border-radius: 3px 3px; border-radius: 3px / 3px; } } .modalwindow .button-inquiry:hover { background-position: 0 -34px; } @media screen and (max-width: 640px) { .modalwindow .button-inquiry:hover { background-position: 238px 50%; } } .modalwindowBackground { background: #000; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 2000; background: url(/common/images/bg-modalwindow.png) repeat 0 0; display: none; } .obliquelyLayerWrapper { position: fixed; left: 50%; top: 50%; z-index: 1000; font-size: 0; line-height: 0; } .obliquelyLayerTile { background: #000; position: relative; font-size: 0; line-height: 0; } .obliquelyLayerLogo { width: 334px; height: 92px; position: fixed; left: 50%; top: 50%; z-index: 1001; margin: -46px 0 0 -167px; background: url(/common/images/logo-white.gif) no-repeat 50% 50%; } /*# sourceMappingURL=all.css.map */