/*
【執筆者が設定しているcss】
執筆者からデブレルチームに更新依頼がきたらこちらのCSSに追記していく
*/

/* marketing  */

.xs {
   font-size: 85%;
   }

table.marketing th {
    border: 1px solid #708090;
    border-spacing: 0;
    line-height: 120%;
    padding: 10px;
    width: 10%;
}
table.marketing td {
    border: 1px solid #708090;
    border-spacing: 0;
    line-height: 120%;
    padding: 10px;
    width: 45%;
}
table.marketing02 {
    text-align: center;
    width: 100%;
}
table.marketing02 td {
    border: 1px solid #708090;
    border-spacing: 0;
    line-height: 120%;
    padding: 10px;
}
table.marketing02 th {
    border: 1px solid #708090;
    border-spacing: 0;
    line-height: 120%;
    padding: 10px;
}
table.marketing03 {
    margin: 10px 0;
    width: 100%;
}
table.marketing03 td {
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 5px;
    word-break: break-all;
}
table.marketing03 th {
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 5px;
    text-align: center;    
}
table.marketing04 {
    margin: 10px 0;
}

table.marketing04 td {
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 10px;
    width: 130px;
}

table.marketing04 th {
    border: 1px solid #CCCCCC;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 10px;
    width: 100px;
}
.point {
    font-weight: bold;
    text-decoration: underline;
}

.midashi {
    font-size: 115%;
    font-weight: bold;
    margin-bottom: 20px;
}

@media screen and (max-width:630px) { 
.box_xs { font-size: 80% !important;}
}
@media screen and (max-width:630px) { 
.box { border: 1px solid #bebebe; font-size: 100%; padding: 10px !important;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.box { border: 2px solid #bebebe; font-size: 100%; padding: 10px !important;}
}
@media screen and (min-width:1024px) {
.box { border: 2px solid #bebebe; font-size: 120%; padding: 10px 15px;}
}

.box2 {
    border: 1px solid #bebebe;
    font-size: 110%;
    margin: 0 0 0 95px;
    padding: 10px 15px;
    width: 460px;
}

@media screen and (max-width:630px) { 
.box2 { border: 1px solid #bebebe; font-size: 100%; margin: 0 0 0 95px; padding: 10px !important; width: auto;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.box2 { border: 1px solid #bebebe; font-size: 100%; margin: 0 0 0 95px; padding: 10px !important; width: auto;}
}
@media screen and (min-width:1024px) {
.box2 { border: 1px solid #bebebe; font-size: 110%; margin: 0 0 0 95px; padding: 10px 15px; width: 460px;}
}


@media screen and (max-width:630px) { 
.indent { padding-left: 3rem !important; text-indent: -3rem !important;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.indent { padding-left: 40px !important; text-indent: -38px !important;}
}
@media screen and (min-width:1024px) {
.indent { padding-left: 50px; text-indent: -50px;}
}

.indent0 {
    padding-left: 15px;
    text-indent: -15px;
}


.arrow {
    font-size: 150% !important;
    font-weight: bold;
    margin: 5px 0 !important;
    text-align: center;
    width: 670px;
}
.pr {
    float: left;
    font-size: 120%;
    margin-right: 15px;
    width: 354px;
}
.pr_img {
    float: left;
}

/* solution */
.Azuretext {
    float: left;
    font-size: 120%;
    margin-right: 15px;
    width: 484px;
}
.Azureimg {
    float: left;
    width: 170px;
}

.command {
    background: #012456 none repeat scroll 0 0;
    color: #ffffff;
    font-family: Consolas;
    line-height: 10px;
    white-space: pre;
    overflow: scroll;
    padding: 10px;
}
@media screen and (max-width:630px) { 
.command { line-height: 12px; padding: 10px !important; font-size: 85% !important; height: 150px; overflow: scroll; display: block; -webkit-overflow-scrolling: touch;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.command { padding: 15px !important;}
}
@media screen and (min-width:1024px) {
.command { padding: 15px !important;}
}

.command_bk {
    background: #000000 none repeat scroll 0 0;
    color: #ffffff;
    font-family: Consolas;
    line-height: 22px;
}
@media screen and (max-width:630px) { 
.command_bk { padding: 10px !important; font-size: 85% !important; height: 150px; overflow: scroll; display: block; -webkit-overflow-scrolling: touch;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.command_bk { padding: 15px !important;}
}
@media screen and (min-width:1024px) {
.command_bk { padding: 15px !important;}
}


.com {
    background: #012456 none repeat scroll 0 0;
    color: #ffffff;
    font-family: Consolas;
    line-height: 22px;
}

@media screen and (max-width:630px) { 
.com {  height: 150px; font-size: 85% !important; line-height: 15px; overflow: scroll; display: block; width: auto; -webkit-overflow-scrolling: touch;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.com { font-size: 100% !important;}
}
@media screen and (min-width:1024px) {
.com { font-size: 100% !important;}
}

@media screen and (max-width:630px) { 
.com100 {  height: 100px; !important;}
}
@media screen and (max-width:630px) { 
.com25 {  height: 25px; !important;}
}


.inc {
    display: flex;
    float: left;
    margin: 20px 0;
    overflow: scroll;
}
@media screen and (max-width:630px) { 
.inc { width: auto; height: 150px !important; -webkit-overflow-scrolling: touch;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.inc { width: auto;}
}
@media screen and (min-width:1024px) {
.inc { width: 640px;}
}

.inc02 {
    display: flex;
    float: left;
    margin: 20px 0;
    overflow: auto;
}
@media screen and (max-width:630px) { 
.inc02 { width: auto; height: 150px !important; -webkit-overflow-scrolling: touch; font-size: 80%;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.inc02 { width: auto;}
}
@media screen and (min-width:1024px) {
.inc02 { width: 640px;}
}



@media screen and (max-width:630px) { 
#sma table { overflow: scroll; display: block; width: auto; -webkit-overflow-scrolling: touch;}
}
@media screen and (max-width:630px) { 
#sma td { display: block; font-size: 85%; line-height: 15px;}
}
@media screen and (max-width:630px) { 
.sma2 { width: auto; overflow: scroll; font-size: 90%;}
}



/* solution art_id=157*/
#LM {
	margin: 0 0 40px 0;
	}
#LM ul {
    clear: both;
	}
#LM li {
    margin: 0 0 -5px;
	}
#LM .LM1 {
    margin: 0 0 -6px 29px;
}

#LM .LM2 {
    float: left;
    background: url("https://group.gmo/images/public/common/report/solution/28/ya.gif") no-repeat scroll 0 45px rgba(0, 0, 0, 0);
    padding: 12px 0 0 20px;
}
#LM ul.bg1 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_01.gif") no-repeat scroll 0 0;
    height: 10px;
    width: 600px;
}

#LM ul.bg2 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_02.gif") no-repeat scroll 0 0;
    height: 102px;
    width: 600px;
}
#LM ul.bg3 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_03.gif") no-repeat scroll 0 0;
    height: 102px;
    width: 600px;
}
#LM ul.bg4 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_04.gif") no-repeat scroll 0 0;
    height: 112px;
    width: 600px;
}
#LM ul.bg5 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_05.gif") no-repeat scroll 0 0;
    height: 205px;
    width: 600px;
}
#LM ul.bg6 {
    background: url("https://group.gmo/images/public/common/report/solution/28/bg_06.gif") no-repeat scroll 0 0;
    height: 102px;
    width: 600px;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity = 70);
}

@media screen and (max-width:630px) { 
.mov { width: auto;}
}
@media screen and (min-width:630px) and ( max-width:900px) {
.mov { width: auto;}
}
@media screen and (min-width:1024px) {
.mov { width: 640px; height: 345px;}
}


.bk {
background: #f2f7f9;
line-height: 120%;
padding: 20px;
}