@charset "utf-8";
/*
共通スタイル（style.cssから移動）
========================================*/
/*------------------------------
common
-------------------------------*/
body {
background-image: none;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
min-width: 320px;
}
.sectioning_layout-inner {
position: relative;
max-width: 1260px;
margin: 0 auto;
}
#main {
margin: 0 auto;
width: 100%;
word-break: break-word;
}
a.new_win, a span.new_win {
margin-right: 5px;
padding-right: 17px;
background: url(/common/img/icon_out1.png) right 0.3em no-repeat;
}
.noteBox a.new_win {
margin-right: 3px;
padding-right: 14px;
background: url(/common/img/icon_out2.png) right 0.35em no-repeat;
}
.newWin {
background: url(/common/img/icon_out1.png) no-repeat right center;
margin-right: 5px;
padding-right:17px;
}
.noteArea .newWin, .fs_12 .newWin, .fs_12 .newWin {
background: url(/common/img/icon_out2.png) no-repeat right center;
margin-right: 3px;
padding-right: 15px;
}
#main .t_blue {
color: #1151ca;
}
#main .t_red {
color: #fb0203;
}
#main a {
transition-duration: 0.2s;
}
#main a:hover {
opacity: .7;
}
#main a img.bright {
transition: .2s ease-in-out;
}
#main a img.bright:hover {
filter: brightness(1.15);
}
/*------------------------------
display: none
-------------------------------*/
.pc {}
.sp {
display: none !important;
}
@media screen and (max-width: 750px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
img.sp {
display: inline-block !important;
}
}
/*------------------------------
.h1_area
-------------------------------*/
.h1_area {
padding: 30px 0;
}
.h1_area p {
margin: 0 auto;
font-size: 36px;
text-align: center;
}
@media screen and (max-width: 480px) {
.h1_area p {
font-size: 26px;
}
}
/*------------------------------
#main .main_inner
-------------------------------*/
@media screen and (max-width:1260px) {
#main .main_inner {
padding: 0 20px;
}
}
/*------------------------------
fit size（1260px以下 769px以上 に適応）
-------------------------------*/
@media screen and (max-width:1260px) and (min-width:769px) {
body {
min-width: 100%;
background-size: 100% auto;
}
.sectioning {
min-width: 100%;
}
/*------------------------------
footer
-------------------------------*/
footer {
padding: 0;
width: 100%;
min-width: 100%;
text-align: center;
}
.footerInner {
width: 100%;
padding: 50px 0;
}
footer .snsArea, footer .linkArea, footer .dArea, footer .langArea {
display: block;
width: 100%;
text-align: center;
margin: 0;
}
.footerInner div {
display: block;
width: 100%;
text-align: center;
}
footer .snsArea ul.sns {
float: none;
display: table;
table-layout: fixed;
margin: 0 auto 50px;
}
footer .snsArea ul.sns li {
float: none;
display: table-cell;
padding: 0 10px;
width: 100%;
text-align: center;
}
footer .linkArea ul.link {
float: none;
margin: 0 auto 30px;
max-width: 100%;
}
footer .linkArea ul.link li {
float: none;
display: inline-block;
padding: 0 20px;
width: auto;
text-align: center;
}
footer .dArea {
margin-bottom: 20px;
}
footer .langArea {
padding: 20px 0 0;
width: 100% !important;
}
footer .langArea .lang {
float: none;
padding-right: 0;
margin: 0 auto 50px;
display: inline-block;
}
footer .langArea .copyright {
float: none;
}
footer .dArea {
float: none;
}
footer .bigFooter {
width: 100%;
padding-left: 6.1%;
padding-right: 6.1%;
min-width: 100%;
text-align: left;
}
footer .bigFooter .bigFooterInner {
width: 100%;
}
.popupFooter {
min-width: 100%;
}
}
/*
20203更新までにあったスタイル
========================================*/
table.mysecure-pair-table td.headline {
background-color: #00809c;
color: #ffffff;
width: 40%;
}
table.mysecure-pair-table th {
background-color: #f4f4f4;
}
/* Padding */
.pa0 {padding: 0px !important;}
.pa5 {padding: 5px !important;}
.pa10 {padding: 10px !important;}
.pa15 {padding: 15px !important;}
.pa20 {padding: 20px !important;}
.pa25 {padding: 25px !important;}
.pa30 {padding: 30px !important;}
.pa35 {padding: 35px !important;}
.pa40 {padding: 40px !important;}
.pa45 {padding: 45px !important;}
.pa50 {padding: 50px !important;}
.pa55 {padding: 55px !important;}
.pa60 {padding: 60px !important;}
/* Padding-top */
.pt0 {padding-top: 0px !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}
/* Padding-right */
.pr0 {padding-right: 0px !important;}
.pr5 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr35 {padding-right: 35px !important;}
.pr40 {padding-right: 40px !important;}
.pr45 {padding-right: 45px !important;}
.pr50 {padding-right: 50px !important;}
.pr55 {padding-right: 55px !important;}
.pr60 {padding-right: 60px !important;}
/* Padding-bottom */
.pb0 {padding-bottom: 0px !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 40px !important;}
.pb55 {padding-bottom: 40px !important;}
.pb60 {padding-bottom: 40px !important;}
/* Padding-left */
.pl0 {padding-left: 0px !important;}
.pl5 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl35 {padding-left: 35px !important;}
.pl40 {padding-left: 40px !important;}
.pl45 {padding-left: 45px !important;}
.pl50 {padding-left: 50px !important;}
.pl55 {padding-left: 55px !important;}
.pl60 {padding-left: 60px !important;}
/* margin */
.ma0 {margin: 0px !important;}
.ma5 {margin: 5px !important;}
.ma10 {margin: 10px !important;}
.ma15 {margin: 15px !important;}
.ma20 {margin: 20px !important;}
.ma25 {margin: 25px !important;}
.ma30 {margin: 30px !important;}
.ma35 {margin: 35px !important;}
.ma40 {margin: 40px !important;}
.ma45 {margin: 45px !important;}
.ma50 {margin: 50px !important;}
.ma55 {margin: 55px !important;}
.ma60 {margin: 60px !important;}
/* margin-top */
.mt0 {margin-top: 0px !important;}
.mt5 {margin-top: 5px !important;}
.mt8 {margin-top: 8px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}
/* margin-right */
.mr0 {margin-right: 0px !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}
/* margin-bottom */
.mb0 {margin-bottom: 0px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}
/* margin-left */
.ml0 {margin-left: 0px !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}
/* text-align */
.txtr {
text-align: right !important;
}
.txtl {
text-align: left !important;
}
.txtc {
text-align: center !important;
}
/* display */
.dis_table {
display: table !important;
}
.dis_tablecell {
display: table-cell !important;
}
/* font */
.b {
font-weight: 700 !important;
}
.u {
text-decoration: underline !important;
}
.i {
font-style: italic !important;
}
.fw_n {
font-weight: normal;
}
.txt-red {
color: #ff0000;
}
.txt-red_cc0033 {
color: #cc0033!important;
}
/*common*/
ul, li {
margin: 0;
padding: 0;
}
dl dt {
font-weight: bold;
}
div.column-common-img.column-col2 {
width: 730px;
margin-bottom: 20px;
}
div.column-common-img.column-col2 div.segment-img {
float: left;
margin-right: 20px;
width: 300px;
}
div.column-common-img.column-col2 div.segment-txt {
float: left;
width: 410px;
}
ol.list-ordered-01 {
margin-bottom: 20px;
margin-left: 1.5em;
_margin-left: 1.9em;
}
ol.list-ordered-01 li {
margin: 0 0 2px;
}
/*/common*/
/*index.html*/
div.column-index-service.column-col2 {
width: 730px;
}
div.column-index-service.column-col2 div.segment-left {
float: left;
margin-right: 20px;
width: 355px;
}
.exc_box {
background: #ffeeee url("/option/security/mysecure/img/icon_exc.gif") no-repeat scroll 10px 8px;
border: 2px solid #ff0000;
padding: 10px 40px;
margin-bottom: 20px;
}
.exc_box_01 {
border: 2px solid #cbcbcb;
padding: 20px 140px;
margin: 10px 73px 20px;
}
.exc_box_f {
background: #ffeeee url("/option/security/mysecure/img/icon_exc.gif") no-repeat scroll 18px 8px;
border: 2px solid #ff0000;
padding: 10px 18px;
margin-bottom: 20px;
}
.exc_box_f .red_exc a {
color: red;
padding: 0px 28px;
display: block;
}
.exc_box_f .exc_write {
padding-top: 3px;
display: block;
}
.flow-step-right .exc_box {
padding: 15px 20px;
background-image: none;
}
div.column-index-service.column-col2 div.segment-right {
float: left;
width: 355px;
}
div.column-index-effect {
margin-left: 10px;
width: 720px;
background: url(/option/security/mysecure/img/bg_column-index-effect_01.gif) left bottom no-repeat;
margin-bottom: 15px;
padding-bottom: 16px;
}
div.column-index-effect div.segment-left {
float: left;
margin-right: 20px;
width: 350px;
}
*html div.column-index-effect div.segment-left {
margin-right: 10px;
background: none
}
div.column-index-effect div.segment-right {
float: left;
width: 350px;
background: none;
}
div.column-index-effect div.column-index-effect-inner {
width: 350px;
}
div.column-index-effect div.column-index-effect-inner div.segment-img {
float: left;
margin-right: 10px;
width: 80px;
}
div.column-index-effect div.column-index-effect-inner div.segment-txt {
float: left;
width: 260px;
}
div.column-index-effect div.column-index-effect-inner div.segment-txt h4 {
border: none;
margin: 0 0 9px 0;
padding: 0;
background: none;
}
ul.list-bullet-01 li {
margin: 0 !important;
padding: 0 !important;
font-size: 100%;
}
strong {
/*color: #333333;*/
}
#and6 {
border: 1px solid #727171;
padding: 5px;
}
/*/index.html*/
/*/charge.html*/
div.charge-area {
margin-bottom: 20px;
}
div.charge-area div.charge_hdg-area {
background: url(/option/security/mysecure/img/bg_charge_hdg.gif) left top no-repeat;
padding: 5px;
height: 25px;
margin: 0;
}
*html div.charge-area div.charge_hdg-area {
padding: 5px 0 0 5px;
margin-bottom: -12px;
}
div.charge-area div.charge_hdg-area h3.charge_hdg, div.charge-area div.charge_hdg-area h3.charge_hdg a {
font-size: 120%;
color: #ffffff;
}
div.charge-area div.charge_hdg-area h3 {
margin: 0;
padding: 0;
}
div.charge-area div.charge-area-inner {
width: 690px;
background: url(/option/security/mysecure/img/bg_charge_area.gif) left bottom no-repeat;
padding: 20px;
margin: 0;
}
div.charge-area div.charge-area-inner div.segment-left {
float: left;
margin-right: 18px;
width: 422px;
}
div.charge-area div.charge-area-inner div.segment-right {
float: left;
width: 250px;
padding-top: 9px;
}
div.charge-area div.charge-area-inner div.segment-right p.btn {
margin: 10px;
text-align: center;
}
/*/charge.html*/
/*service.html*/
table.lyt_tbl_01 tbody td.col-left {
border-left: 1px solid #D9D9D9;
}
/*/service.html*/
/*common*/
.color-01 {
color: #333333 !important;
}
div.attention-box {
padding: 10px;
margin: 10px 0;
border: double 3px #ff0000;
}
div.box_bg-color_01 {
padding: 10px;
margin: 10px 0;
background-color: #EEEEFF;
}
/*/common*/
/*===================================================*/
/*creafix*/
div.column-index-service.column-col2:after, div.column-index-effect:after, div.column-index-effect div.column-index-effect-inner:after, div.charge-area div.charge-area-inner:after, div.column-common-img.column-col2:after {
font-size: 0.1em;
height: 0;
visibility: hidden;
clear: both;
content: ".";
display: block;
}
div.column-index-service.column-col2, div.column-index-effect, div.column-index-effect div.column-index-effect-inner, div.charge-area div.charge-area-inner, div.column-common-img.column-col2 {
zoom: 1;
}
/*===================================================*/
/*150312_リニューアル追??*/
/*common サイドバー動画・ペ???ジheadline*/
#mysecure-move {
margin-bottom: 20px;
}
h1.top-navbar em {
padding: 5px 17px 5px 10px;
color: #ffffff;
font-weight: bold;
display: inline-block;
height: 15px;
background: url(/option/security/mysecure/img/bg_h1title_03.png) right top no-repeat #003f80;
}
h1.navbar em {
padding: 5px 17px 5px 10px;
color: #ffffff;
font-weight: bold;
display: inline-block;
height: 15px;
background: url(/option/security/mysecure/img/bg_h1title_01.png) right top no-repeat #003f80;
}
h1.navbar span {
vertical-align: top;
height: 15px;
font-size: 14px;
padding: 5px 20px 5px 10px;
color: #09266c;
background: url(/option/security/mysecure/img/bg_h1title_02.png) right top no-repeat;
}
h1.navbar em:after {
vertical-align: middle;
}
h1.navbar span {
display: inline-block;
background-color: #dcdcdc;
}
h4.mysecure-title {
margin: 0 0 10px 0;
padding: 0px;
font-size: 16px;
font-weight: bold;
background-image: none;
border: none;
}
h4.mysecure-title span {
font-size: 24px;
}
h4.flow-headline {
color: #ffffff;
background-color: #0087BC;
padding: 10px;
}
h4.flow-hedline-blue {
color: #0080B3;
margin-bottom: 20px;
}
/* 申し込みボタン系 */
.apply-parts {
width: 300px;
text-align: center;
}
.apply-lead {
color: #666666;
}
.apply-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.apply-button {
margin-bottom: 10px;
}
.apply-price {
padding-left: 6em;
text-indent: -6em;
font-size: 20px;
color: #ff0000;
font-weight: bold;
}
.apply-price .text-big {
font-size: 36px;
}
/* index.html */
dl.mysecure-info dt {
padding-left: 15px;
display: inline;
float: left;
clear: left;
font-weight: normal;
margin-right: 5px;
}
body#person h3.mysecure-h3-short, body#person h3.mysecure-h3-long {
color: #ffffff;
padding: 0 0 0 25px;
margin-bottom: 20px;
}
body#person h3.mysecure-h3-short {
background: url(/option/security/mysecure/img/bg_top_h3_short.png) left no-repeat;
width: 415px;
line-height: 33px;
}
body#person h3.mysecure-h3-long {
background: url(/option/security/mysecure/img/bg_top_h3_long.png) left no-repeat;
width: 705px;
line-height: 36px;
}
.mysecure-top-leftcontent {
float: left;
width: 440px;
margin-right: 20px;
}
.mysecure-top-rightcontent {
float: right;
width: 270px;
}
.mysecure-top-leftcontent p {
padding: 5px;
}
table.mysecure-top-table {
width: 100%;
background-color: #cbcbcb;
}
table.mysecure-top-table th, table.mysecure-top-table td {
padding: 10px;
background-color: #ffffff;
}
table.mysecure-top-table th {
background-color: #f4f4f4;
width: 210px;
}
table.mysecure-top-table td {
text-align: center;
}
table.mysecure-top-table td.headline {
background-color: #00809c;
color: #ffffff;
width: 260px;
}
#content ul.slides li {
padding: 0;
}
body#person #content ul.slides {
margin: 0px;
}
#carousel ul.slides {
-webkit-transform: translate3d(0px, 0px, 0px) !important;
-ms-transform: translate3d(0px, 0px, 0px) !important;
transform: translate3d(0px, 0px, 0px) !important;
margin-left: 0 !important;
}
#carousel ul.slides li.firstlist {
width: 0;
height: 0;
}
#carousel ul.slides li.nav1, #carousel ul.slides li.nav2, #carousel ul.slides li.nav3 {
width: 242px;
height: 40px;
}
#carousel ul.slides li.nav1 {
background: url(/option/security/mysecure/img/top_carousel_nav2_off.jpg) no-repeat;
}
#carousel ul.slides li.nav2 {
background: url(/option/security/mysecure/img/top_carousel_nav3_off.jpg) no-repeat;
}
#carousel ul.slides li.nav3 {
background: url(/option/security/mysecure/img/top_carousel_nav4_off.jpg) no-repeat;
}
#carousel ul.slides li.nav1.flex-active-slide {
background: url(/option/security/mysecure/img/top_carousel_nav2_on.jpg) no-repeat;
}
#carousel ul.slides li.nav2.flex-active-slide {
background: url(/option/security/mysecure/img/top_carousel_nav3_on.jpg) no-repeat;
}
#carousel ul.slides li.nav3.flex-active-slide {
background: url(/option/security/mysecure/img/top_carousel_nav4_on.jpg) no-repeat;
}
#slider ul.slides li.hidden-slide {
opacity: 0;
display: block;
z-index: 1;
}
/* service */
table.function-table {
width: 100%;
background-color: #aeafaf;
}
table.function-table tr.function-title {
font-weight: bold;
}
table.function-table td, table.function-table th {
padding: 10px;
}
table.function-table td {
background-color: #ffffff;
}
table.function-table th {
background-color: #f0f7ff;
font-weight: bold;
width: 200px;
}
table tr.function-title td {
font-size: 18px;
font-weight: bold;
}
table tr.function-title01 td {
background: url(/option/security/mysecure/img/service_img_05.png) right no-repeat #ffffff;
height: 125px;
}
table tr.function-title02 td {
background: url(/option/security/mysecure/img/service_img_12.jpg) right no-repeat #ffffff;
height: 125px;
background-size: 30%;
}
table tr.function-title03 td {
background: url(/option/security/mysecure/img/service_img_07.png) right no-repeat #ffffff;
height: 125px;
}
table tr.function-title04 td {
background: url(/option/security/mysecure/img/service_img_08.png) right no-repeat #ffffff;
height: 125px;
}
table tr.function-title06 td {
background: url(/option/security/mysecure/img/service_img_09.png) right no-repeat #ffffff;
height: 125px;
}
table tr.function-title07 td {
background: url(/option/security/mysecure/img/service_img_10.png) right no-repeat #ffffff;
height: 125px;
}
table tr.function-title08 td {
background: url(/option/security/mysecure/img/service_img_11.jpg) right no-repeat #ffffff;
height: 125px;
background-size: 30%;
}
table tr.function-title09 td{
background: url(/option/security/mysecure/img/index_img_02.png) 95% no-repeat #ffffff;
height: 125px;
}
/* service apply */
.service-content {
width: 308px;
border: 1px solid #005082;
border-top: 13px solid #2b5fa9;
padding: 20px;
}
.service-content dt {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.service-content dd {
margin-bottom: 15px;
}
/* charge */
.charge-contact-box {
background-color: #f7f3ed;
padding: 15px;
}
.charge-contact-box dl {
padding: 20px 14px 20px 18px;
background-color: #fbf9f6;
}
.charge-contact-box dt {
width: 114px
}
.charge-contact-box dd h4 {
margin-top: 0px;
padding-top: 0px;
font-size: 18px;
font-weight: bold;
}
.charge-contact2 h4 {
color: #329ed8;
}
.charge-contact3 h4 {
color: #32b761;
}
/* apply */
.apply-step {
margin-bottom: 30px;
}
.apply-step dt {
width: 240px;
}
.apply-step dd {
padding: 0 20px 20px 70px;
width: 395px;
}
.apply-step dd.step1 {
background: url(/option/security/mysecure/img/apply_step_01.gif) left top no-repeat #ffffff;
}
.apply-step dd.step2 {
background: url(/option/security/mysecure/img/apply_step_02.gif) left top no-repeat #ffffff;
}
.apply-step dd.step3 {
background: url(/option/security/mysecure/img/apply_step_03.gif) left top no-repeat #ffffff;
}
.apply-step dd.step4 {
background: url(/option/security/mysecure/img/apply_step_04.gif) left top no-repeat #ffffff;
}
#content #txt-menu.end1 {
margin-top: 450px;
}
#content #txt-menu.end7 {
margin-top: 500px;
}
#content #txt-menu.end8 {
margin-top: 250px;
}
#content #txt-menu.end9 {
margin-top: 750px;
}
#content #txt-menu.endc {
margin-top: 150px;
}
/* flow */
dl.flow-step dt {
float: left;
clear: left;
width: 130px;
padding: 22px 10px 10px 60px;
height: 33px;
vertical-align: middle;
}
dl.flow-step dd {
float: left;
width: 510px;
padding: 10px 10px 10px 10px;
}
dl.flow-step dt.flow-step01 {
background: url(/option/security/mysecure/img/flow_num01.gif) left no-repeat #ffffff;
}
dl.flow-step dt.flow-step02 {
background: url(/option/security/mysecure/img/flow_num02.gif) left no-repeat #ffffff;
}
dl.flow-step dt.flow-step03 {
background: url(/option/security/mysecure/img/flow_num03.gif) left no-repeat #ffffff;
}
dl.flow-step dt.flow-step04 {
background: url(/option/security/mysecure/img/flow_num04.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt {
padding: 10px 2px 30px 60px;
height: 33px;
vertical-align: middle;
}
dl.flow-step-pc dd {
padding: 0px 10px 10px 60px;
}
dl.flow-step-pc dt.flow-step01 {
background: url(/option/security/mysecure/img/flow_num01.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step02 {
background: url(/option/security/mysecure/img/flow_num02.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step03 {
background: url(/option/security/mysecure/img/flow_num03.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step04 {
background: url(/option/security/mysecure/img/flow_num04.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step05 {
background: url(/option/security/mysecure/img/flow_num05.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step06 {
background: url(/option/security/mysecure/img/flow_num06.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step07 {
background: url(/option/security/mysecure/img/flow_num07.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step08 {
background: url(/option/security/mysecure/img/flow_num08.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-step09 {
background: url(/option/security/mysecure/img/flow_num09.gif) left no-repeat #ffffff;
}
dl.flow-step-pc dt.flow-faq-q {
color: #157aa9;
background: url(/option/security/mysecure/img/flow_faq-q.png) left no-repeat #ffffff;
}
dl.flow-step-pc dd.flow-faq-a {
padding: 22px 10px 10px 60px;
height: 33px;
vertical-align: middle;
background: url(/option/security/mysecure/img/flow_faq-a.png) left no-repeat #ffffff;
}
.linestyle {
margin: 50px auto;
border: none;
border-top: 1px dotted #157aa9;
}
.flow-step-left {
text-align: center;
float: left;
width: 270px;
margin-right: 15px;
}
.flow-step-right {
float: right;
width: 380px;
}
.flow-step-right .column {
border: 2px solid #CCC;
background-color: #EEE;
padding: 10px;
border-radius: 10px;
}
.flow-step-right .column h5 {
text-align: center;
}
.flow-step-right .column dl {
padding-left: 40px;
}
.flow-step-right .column dd {
padding-left: 0.5em;
}
.h01 {
height: 220px;
}
.h01-5 {
height: 240px;
}
.h02 {
height: 165px;
}
.h03 {
height: 105px;
}
.h04 {
height: 90px;
}
.h05 {
height: 50px;
}
#content ol.flow-step-list {
counter-reset: number;
list-style: none !important;
margin: 0!important;
padding: 0!important;
}
#content ol.flow-step-list li {
margin-bottom: 20px;
padding-left: 1em !important;
padding-bottom: 20px;
text-indent: -1em;
list-style: none !important;
}
#content ol.flow-step-list li.numlist {
margin-bottom: 10px;
padding-bottom: 20px;
background: none !important;
}
#content ol.flow-step-list li:last-child {
background-image: none;
}
#content ol.start5 {
counter-reset: number 4 !important;
}
#content ol.start8 {
counter-reset: number 7 !important;
}
#content ol.start12 {
counter-reset: number 11 !important;
}
#content ol.start5 li, #content ol.start8 li, #content ol.start12 li {
display: block;
}
#content ol.start5 li:before, #content ol.start8 li:before, #content ol.start12 li:before {
content: counter(number) ". ";
counter-increment: number;
}
#content ol.flow-step-list li .note li {
padding-left: 21px !important;
list-style-type: none;
margin-bottom: 10px !important;
padding-bottom: 0 !important;
}
body#person #content ul.disc li ul li {
margin-left: 1em;
}
#content ol.flow-step-list li {
margin-bottom: 20px;
padding-left: 1em !important;
padding-bottom: 20px;
text-indent: -1em;
list-style: none !important;
}
#content ol.flow-step-list li.bgnone {
background-image: none;
}
#content ol.flow-step-list li:before {
counter-increment: number;
content: counter(number);
background-size: 15px;
width: 15px;
height: 15px;
display: inline-block;
text-align: center;
line-height: 15px;
color: #ffffff;
font-size: 10px;
font-weight: bold;
text-indent: 0;
padding-left: -1em;
}
body#person #content ul.bgnone {
margin-left: 0;
}
#content ol.flow-step-list li ul.bgnone li {
list-style: none;
text-indent: -1em;
padding-left: 1em;
}
#content ol.flow-step-list li ul.bgnone li:before {
background: none;
background-size: 10px;
}
span.download_num-bg {
background: url(/option/security/mysecure/img/bg_flow_num.gif) no-repeat top center;
background-size: 14px;
width: 14px;
height: 14px;
display: inline-block;
text-align: center;
color: #ffffff;
font-size: 10px;
font-weight: bold;
text-indent: 0;
vertical-align: middle;
margin-left: 3px;
}
.flow-step-attention {
border: 2px solid #bf1f20;
padding: 20px 20px 20px 60px;
background: url(/option/security/mysecure/img/bg_arrow_left_red.gif) no-repeat left center;
color: #bf1f20;
margin-bottom: 20px;
text-indent: 0;
}
.step-list-inline {
text-indent: 0;
}
.text_blue {
color: #157aa9;
}
body#person #content ul.step_list {
margin-left: 0;
}
body#person #content ul.step_list li {
margin-bottom: 20px;
padding-left: 1em;
padding-bottom: 20px;
text-indent: -1em;
list-style: none;
}
p.note {
padding-left: 2em;
text-indent: -2em;
}
p.txtm {
margin: 0 0 20px;
}
span.newmark {
background: #f00;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 10px;
font-weight: 700;
color: #fff;
font-size: 14px;
height: 24px;
}
span.newmark02 {
background: #f00;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px 10px;
font-weight: 700;
color: #fff;
font-size: 14px;
}
/* scene */
.scene-right {
float: right;
width: 50%;
}
.scene-left {
float: left;
width: 350px;
}
#scene01, #scene02 {
margin: 30px 0 10px 0 !important;
padding: 0 !important;
border: none;
background: none;
}
#scene01, #scene02 {
height: 38px;
font-size: 14px;
color: #000;
}
#scene01 div, #scene02 div {
display: inline-block;
width: 98px;
margin-right: 15px;
padding-top: 7px;
padding-bottom: 7px;
color: #FFF;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#scene01 span, #scene02 span {
margin-right: 15px;
font-size: 18px;
font-weight: bold;
}
#scene01 {
border: 1px solid #44c2f2;
}
#scene01 div {
background-color: #44c2f2;
}
#scene01 span {
color: #44c2f2;
}
#scene02 {
border: 1px solid #f596c0;
}
#scene02 div {
background-color: #f596c0;
}
#scene02 span {
color: #f596c0;
}
.scene01 {
background-image: none;
background-color: #f596c0;
padding: 10px;
font-size: 18px;
text-align: center;
color: #FFF;
font-weight: bold;
border: none;
}
.scene01 a {
color: #ffffff;
}
.scene02 {
background-image: none;
background-color: #44c2f2;
padding: 10px;
font-size: 18px;
text-align: center;
color: #FFF;
font-weight: bold;
border: none;
}
.scene02 a {
color: #ffffff;
}
body#person #content ul.scene {
margin: 20px 100px;
}
body#person #content ul.scene li {
padding-bottom: 30px;
}
body#person #content ul.scene li ul li {
padding-bottom: 0;
}
body#person #content ul.scene li ul li {
position: relative;
list-style: none;
}
body#person #content ul.scene li ul li::before {
display: block;
content: '' !important;
position: absolute;
top: .5em;
left: -1em;
width: 8px;
height: 3px;
border-left: 2px solid #44c2f2;
border-bottom: 2px solid #44c2f2;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-left: 0;
}
body#person #content ul.scene li {
list-style: none;
}
body#person #content ul.scene li:before {
content: '\25cf \3000';
margin-left: -20px;
}
body#person #content ul.scene li.note {
list-style: none;
}
body#person #content ul.scene li.note:before {
content: '\203b \3000';
margin-left: -20px;
}
/*2016.5.9???m?点?g???*/
.info_box {
border: 2px solid #878787;
padding: 14px 18px 3px;
margin-bottom: 20px;
background: #F3F3F3;
}
.info_box_title {
font-weight: bold;
font-size: 16px;
}
table.mysecure-top-table td.headline60 {
background-color: #00809c;
color: #ffffff;
width: 60px;
}
table.select-table {
width: 90%;
background-color: #00809C;
}
table.select-table th {
background-color: #FFFFFF;
font-weight: bold;
width: 25%;
text-align: center;
line-height: 35px;
}
table.select-table th a {
color: #007D9C;
text-decoration: none !important;
display: block;
}
table.select-table th a:hover, table.select-table th.active a {
text-decoration: underline !important;
background-color: #EDEDED;
display: block;
}
/* /internet/mysecure/charge.html ????g??? */
.service-content02 {
width: 360px;
border: 1px solid #C4C4C4;
}
.apply-lead02 {
color: #666666;
height: 36px;
font-size: 12px;
}
.apply-title02 {
font-size: 29px;
font-weight: bold;
margin: 0 3px 5px 0;
color: #006B61;
display: inline-block;
}
.apply-price02 {
padding-left: 6em;
text-indent: -6em;
font-size: 13px;
text-align: right;
}
.apply-price02 .text-big02 {
font-size: 30px;
}
.apply-button02 {
text-align: right;
}
.text-btn02 {
font-size: 12px;
font-weight: bold;
margin: 0 8px 12px 0;
display: inline-block;
color: #006B61;
}
.apply-info-area02 {
padding: 10px;
}
.apply-button-area02 {
background-color: #EBFAFD;
padding: 10px;
border-top: 1px solid #C4C4C4;
}
/* /internet/mysecure/charge.html ?e?[?u????? */
table.mysecure-charge-table {
width: 100%;
background-color: #cbcbcb;
}
table.mysecure-charge-table th, table.mysecure-top-table td {
padding: 10px;
background-color: #ffffff;
}
table.mysecure-charge-table th {
background-color: #f4f4f4;
width: 50px;
}
table.mysecure-charge-table td {
padding: 10px;
text-align: center;
background-color: #ffffff;
}
table.mysecure-charge-table td.headline {
background-color: #00809c;
color: #ffffff;
width: 260px;
}
table.mysecure-pair-table {
width: 100%;
background-color: #cbcbcb;
}
table.mysecure-pair-table th, table.mysecure-pair-table td {
padding: 10px;
background-color: #ffffff;
width: auto;
}
table.mysecure-pair-table th {
background-color: #f4f4f4;
}
table.mysecure-top-table td {
text-align: center;
}
table.mysecure-pair-table td.headline {
background-color: #00809c;
color: #ffffff;
width: 40%;
}
.select-os {
border: 1px solid #555;
width: 66px;
border-radius: 3px;
display: inline-block;
text-align: center;
font-size: 12px;
color: #555;
margin-left: 2px;
}
.color-green {
background-color: #EBFAFD !important;
color: #006B61;
font-weight: bold;
}
.gray-line{
border:2px solid #ccc;
border-radius:30px;
padding: 20px;
}
/*types*/
.select-os {
background: #fff none repeat scroll 0 0;
border: 1px solid #555;
border-radius: 3px;
color: #555;
display: inline-block;
font-size: 12px;
margin-left: 2px;
text-align: center;
width: 66px;
line-height: normal;
font-weight:normal;
margin: 1px;
}
.align-r {
text-align: right;
}
.gray {
background: #ffffff none repeat scroll 0 0 !important;
border: 1px dashed #c9c9c9 !important;
color: #c9c9c9 !important;
}
table.mysecure-top-table td.b_col{
background-color: #f4f4f4;
}
table.mysecure-top-table td.f_col a{
color:#ffffff;
}
table.mysecure-top-table td.txt_l{
text-align:left;
}
@media screen and (min-width: 0px) and (max-width: 480px) {
.sp-width {
width: 100%;
}
}
/*inquiry_m.html*/
.btn_years{
width: 100%;
}
.btn_years a {
padding: 10px 15px 10px 30px;
color: #fff;
font-size: 14px;
line-height: 1.3;
text-align: left;
border-radius: 10px;
background: #3c82d7;
display: block;
position: relative;
transition-duration: 0.2s;
text-decoration: none;
text-align: center;
float: right;
}
.btn_years a::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
margin-right: 10px;
position: absolute;
top: 50%;
left: 10px;
margin-top: -4px;
}
.btn_years a:hover{
opacity: 0.8;
}
.btn_link {
margin: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn_link a {
padding: 7px 15px 7px 30px;
color: #004795;
font-size: 14px;
line-height: 1.3;
text-align: left;
border: 1px solid #004795;
border-radius: 10px;
background: #fff;
display: inline-block;
position: relative;
text-decoration: none;
}
.btn_link a::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border: 0;
border-top: solid 2px #003572;
border-right: solid 2px #003572;
transform: rotate(45deg);
margin-right: 10px;
position: absolute;
top: 50%;
left: 10px;
margin-top: -4px;
}
.btn_link a:hover{
opacity: 0.8;
}
/*------------------------------------------------------------
.teleArea
------------------------------------------------------------*/
.teleArea {
max-width: 940px;
margin: 30px auto;
background: #fff8dc;
}
.teleArea .telebox_img {
text-align: center;
}
.teleArea .telebox_img img {
max-width: 100%;
width: auto !important;
height: auto;
}
.teleArea .telebox_img img.tele_pc {}
.teleArea .telebox_img img.tele_sp {
display: none;
}
.teleArea .telebox_info {
max-width: 880px;
margin: 0 auto;
padding: 0 20px 20px;
}
.teleArea .telebox_info .tele_t00 {
color: #333;
font-size: 18px;
font-weight: bold;
margin-bottom: 14px;
}
.teleArea .telebox_info .tele_t01 {
color: #308735;
font-size: 18px;
font-weight: bold;
}
.teleArea .telebox_info .tele_t02 {
color: #333;
font-size: 14px;
}
.teleArea .telebox_info .tele_t02 a {}
.teleArea .telebox_info .tele_t02 a:before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-top: 2px solid #004386;
border-right: 2px solid #004386;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-right: 8px;
}
@media screen and (max-width: 767px) {
.teleArea .telebox_img img.tele_pc {
display: none;
}
.teleArea .telebox_img img.tele_sp {
display: inline-block;
}
.teleArea .telebox_info {
padding: 0 15px 15px;
}
.teleArea .telebox_info .tele_t00 {
font-size: 14px;
}
.teleArea .telebox_info .tele_t01 {
font-size: 14px;
}
.teleArea .telebox_info .tele_t02 {
font-size: 12px;
}
}
/*------------------------------------------------------------
.remodal.info
------------------------------------------------------------*/
.remodal.info {
padding: 35px 10px 70px;
}
.remodal.info .m_img {
text-align: center;
}
.remodal.info .m_img img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.remodal.info .m_img img.m_pc {}
.remodal.info .m_img img.m_sp {
display: none;
}
@media screen and (max-width: 767px) {
.remodal.info .m_img img.m_pc {
display: none;
}
.remodal.info .m_img img.m_sp {
display: inline-block;
}
}
/*------------------------------------------------------------
.mailad
------------------------------------------------------------*/
.mailad img.mail_pc {}
.mailad img.mail_sp {
display: none;
}
.mailad img, #main .mailad img, #main .Area01 .mailad img {
max-width: 100%;
width: auto;
}
@media screen and (max-width: 767px) {
.mailad img.mail_pc {
display: none;
}
.mailad img.mail_sp {
display: inline-block;
}
}
/*
2020726追記
========================================*/
.end-info {
border: solid 1px #ccc;
margin: 30px 10px;
padding: 0 50px 50px;
line-height: 2.2em;
}
.end-info dl {
margin: 20px 0;
}
.end-info dl dd {
margin-left: 1em;
line-height: 1.8em;
margin-bottom: 20px;
}
.end-info .in-box {
background: #eaf5fc;
margin: 10px 0 20px;
padding: 20px;
line-height: 2em;
}
.end-info .in-box dl {
/*display: table;*/
}
.end-info .in-box dl dt,dd {
/*display: inline-table;*/
}
table.norton th{
text-align: center;
}
.add-info {
font-size: 14px;
line-height: 1.6em;
font-weight: 400;
display: inline-block;
text-align: left;
}
.f-bld {font-weight: bold;}
.txtl {text-align: left;}
.end-info h4 {
font-weight: bold;
background: #003572;
color: #fff;
padding-left: 0.5em;
}
h5 {font-weight: bold;}
/*2個ボックス*/
.end-info .cmnColLayout.s_col2{
padding-top: 0;
}
.box-left {
display: block;
width: 100%;
max-width: 370px;
height: 130px;
padding-top: 50px;
margin: 0 auto;
}
.tel-box {
width: 100%;
max-width: 370px;
display: block;
margin: 0 auto;
}
/*テーブル*/
td.td01 {width: 18%;}
td.td02 {width: 8%;}
td.td03 {width: 5%;}
td.td04 {width: 69%;}
@media screen and (max-width: 480px) {
.end-info {
border: solid 1px #ccc;
margin: 30px 10px 50px 10px;
padding: 0 10px 10px;
line-height: 2.2em;
}
/*スマホ用テーブルデザイン*/
.cmnTable.s_tdCenter {margin-top:60px}
.cmnTable.s_tdCenter .tr-hd {
display: none;
}
.cmnTable.s_tdCenter tr,
.cmnTable.s_tdCenter td{
display: block;
width: 100%;
position: relative;
margin-bottom: 40px;
line-height: 1.6em;
}
td.td01 {height: 60px;}
td.td02 {height: 40px;}
td.td03 {height: 40px;}
td.td04 {height: 80px;}
.cmnTable.s_tdCenter td.td01:before {
content: "サービス";
background: #f4f4f4;
box-sizing: border-box;
border: solid 1px #ccc;
font-weight: bold;
height: 40px;
padding: 10px;
position: absolute;
top: -41px;
left: -0.2%;
display: block;
width: 100.5%;
}
.cmnTable.s_tdCenter td.td02:before {
content: "月額利用料";
background: #f4f4f4;
box-sizing: border-box;
border: solid 1px #ccc;
font-weight: bold;
height: 40px;
padding: 10px;
position: absolute;
top: -41px;
left: -0.2%;
display: block;
width: 100.5%;
}
.cmnTable.s_tdCenter td.td03:before {
content: "端末";
background: #f4f4f4;
box-sizing: border-box;
border: solid 1px #ccc;
font-weight: bold;
height: 40px;
padding: 10px;
position: absolute;
top: -41px;
left: -0.2%;
display: block;
width: 100.5%;
}
.cmnTable.s_tdCenter td.td04:before {
content: "特徴";
background: #f4f4f4;
box-sizing: border-box;
border: solid 1px #ccc;
font-weight: bold;
height: 40px;
padding: 10px;
position: absolute;
top: -41px;
left: -0.2%;
display: block;
width: 100.5%;
text-align:center
}
}
/* === PDFアイコン === */
a.i_pdf {
background: url(/common/img/icon_pdf.png) right center / 20px no-repeat;
margin-right: 2px;
padding-right: 22px;
}
.fs-12 a.i_pdf, .fs_12 a.i_pdf {
background: url(/common/img/icon_pdf.png) right center / 16px no-repeat;
margin-right: 1px;
padding-right: 17px;
}
@media screen and (max-width:480px) {
a.i_pdf {
background: url(/common/img/icon_pdf.png) right center / 16px no-repeat;
margin-right: 1px;
padding-right: 17px;
}
}
/* ======================================================
横幅調整
=========================================================*/
.level2BlockInner {
max-width: none!important;
}