@charset "utf-8";
/* CSS Document */

/* indexArea */
#contents .indexArea{
	display: table;
    width: 100%;
    margin: 2em 0 3em;
}

#contents .indexArea p.left{
	background: #ccc;
	color: #000;
	font-size: 14px;
    padding: 0.5em;
    margin: 0;
    display: table-cell;
    width: 1.5em;
	text-align: center;
    vertical-align: middle;
}

#contents p.tategaki {
    writing-mode: vertical-rl;
    letter-spacing: 0.5rem;
}

#contents .indexArea ul{
	border: 1px solid #ccc;
	padding: 1.5em 1em 1em 1.5em;
	list-style-type: none;
	margin: 0;
	box-sizing: border-box;
	height: 100%;
	background-color: #fff;
}

#contents .indexArea ul{
	border-color: #ccc;
}

#contents ul.txtlink.inner > li,
#contents ul.btnList li span.inner{
    background: url(/support/share/images/arrow_underline.gif) no-repeat 0 0.5em;
    padding: 0 0 0 1em;
}

/* flex */
#contents .flex{
    display: flex;
}

#contents .flex .textArea{
    flex: 2 1 auto;   
}

#contents .flex figure{
    margin: 0 0 0 1em;
}

#contents .flex div.singleBtn a{
    width: auto;
}

#contents img.pc_arrow {
    width: 58px !important;
    height: 38px;
}

#contents .openArea .flex,
#contents ol.stepList .flex{
    align-items: center;
    margin-top: 1em;
}

#contents .openArea .flex figure{
    text-align: center;
    margin-left: 1em;
}

#contents .openArea .flex figure img.dics{
    width: 84px;
}

#contents .openArea .flex ul.innerList{
    margin-left: 4em;
}

#contents .flex.start{
    align-items: flex-start!important;
}

#contents .flex.start figure{
    margin: 0;
}

#contents .flex.start .txt{
    margin-left: 1em;
}

/* caution */
#contents .caution{
	background: #efefef;
    padding: 1em;
}

#contents .caution p.list + .singleBtn{
	margin-left: 2.8em;
}

/* onepoint */
#contents .onepoint{
    background: #FFFFEF;
}

/* detailArea */
#contents div.detailArea ol > li{
	margin-bottom: 3em;
}

#contents div.detailArea .onepoint{
	width: 100%;
}

#contents div.detailArea ol > li figure{
	margin: 1em 0;
}

#contents div.detailArea ol > li > ul.disc{
	list-style-type: disc;
	margin-left: 1.5em;
}

#contents span.lead{
	display: inline-block;
	font-weight: bold;
	margin-bottom: 5px;
}

/* btnList */
#contents ul.btnList.flex  {
    list-style: none;
    margin: 1em 0;
    flex-wrap: wrap;
}

#contents ul.btnList.flex li{
    width: 40%;
    margin-bottom: 0.5em;
    margin-right: 1em;
}

#contents ul.btnList li a {
    background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
    border: solid 1px #CCCCCC;
    border-radius: 5px;
    color: #333;
    padding: 0.75em;
    display: block;
    box-sizing: border-box;
}

#contents ul.btnList li a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* stepList */
#contents ol.stepList {
	list-style-type: none;
	counter-reset: square;
	margin: 2em 0!important;
}

#contents ol.stepList > li{
	margin-bottom: 1.5em;
}

#contents ol.stepList > li:last-child{
	margin-bottom: 0;
}

#contents ol.stepList > li:before {
	content: counter(square);
    counter-increment: square;
    color: #fff;
    display: block;
    line-height: 24px;
    text-align: center;
    height: 24px;
    width: 24px;
    margin-right: -4px;
    font-weight: 700;
    float: left;
	background-color: #999;
}

#contents ol.stepList > li > *{
	margin-left: 2em!important;
}

#contents ol.stepList > li > ul.disc{
	margin-left: 3.5em!important;
}

#contents ol.stepList > li >p.lead{
	display: table-cell;
    margin: 0;
    font-weight: bold;
    padding-top: 2px;
    padding-left: 14px;
}

#contents ol.stepList span.square,
#contents span.square{
	background: #ccc;
    padding: 0 6px;
    margin: 0 4px;
    color: #fff;
    font-weight: bold;
	vertical-align: text-top;
}

#contents ol.count{
    list-style-type: none;
    margin-left: 0;
}

#contents ol.count li{
    margin-bottom: 0;
}

#contents p.list{
    display: list-item;
    list-style-type: disc;
    margin-left: 4em!important;
}

@media (max-width: 640px){
    #contents .flex.start,
    #contents .flex.mq{
        flex-direction: column;
    }
    
    #contents .flex.start img:not(.pc_arrow),
    #contents .flex.mq img:not(.pc_arrow){
        width: 100%;
        height: auto;
        max-width: 300px!important;
    }
    
    #contents .flex.start .txt{
        margin-top: 1em;
        margin-left: 0;
    }
    
    #contents .flex figure{
        margin: 1em 0 0;
    }
    
    #contents img.pc_arrow{
		transform: rotate( 90deg );
		display: block;
		margin: 1em auto;
	}
    
    #contents .openArea .flex figure{
        margin-left: 0;
    }
    
    #contents .openArea .flex figure img.dics{
        max-width: 100px;
    }
    
    #contents .flex div.singleBtn a{
        width: 100%;
    }
    
    #contents .img_style{
        flex-direction: column;
    }
    
    #contents .img_style img{
        max-width: 300px;
    }
    
    #contents p.list{
        margin-left: 1.5em!important;
    }
    
	#contents .caution p.list + .singleBtn {
		margin-left: 0;
	}
    
	#contents div.singleBtn a{
		width: 100%;
	}
    
	#contents ol.circle > li .onepoint ul.disc li figure figcaption{
		text-align: left;
	}
    
    #contents ul.btnList.flex li{
        width: 100%;
        margin-right: 0;
    }
    
    #contents ol.count li{
        text-indent: -2em;
        padding-left: 2em;
    }
}