@charset "UTF-8";

/*
======== context ======================================

Last Updated:YYMMDD
Summary:各要素に跨って共有するlayout設定

* contents area内で適用

- align
- float

=======================================================
*/


/*-----------------------------------------------------
common
-------------------------------------------------------*/

#contentsArea ul,
#contentsArea ol,
#contentsArea dl{
	margin:1em 0;
}

#contentsArea ul li ul{
	margin:.5em 0;
}

#contentsArea p{
	margin:1em 0;
	line-height: 1.7em;
}

/*-----------------------------------------------------
align
-------------------------------------------------------*/

.txtRight{
	text-align:right;
}

.txtLeft{
	text-align:left;
}

.txtCenter{
	text-align:center;
}

.layoutLeft{
	float:left;
	padding: 0 15px 15px 0;
}

.layoutCenter{
	text-align:center;
}

.layoutRight{
	float:right;
	padding: 0 0 15px 15px;
}

.blockCenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.blockRight {
	margin-left: auto !important;
	margin-right: 0 !important;
}

ul.blockCenter,
ul.blockRight,
dl.blockCenter,
dl.blockRight {
	display: table !important;
}

/*-----------------------------------------------------
float
-------------------------------------------------------*/
.clear {
	clear : both;
	margin : 0;
	padding : 0;
}

.floatL {
	float : left;
	margin: 0 20px 15px 0 !important;
}

.floatR {
	float : right;
	margin: 0 0 15px 20px !important;
}

/*-----------------------------------------------------
micro clearfix
-------------------------------------------------------*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 *zoom: 1;
}

/*-----------------------------------------------------
other
-------------------------------------------------------*/

#mainContents hr{
	margin: 30px 0;
}

.ib{
	display: inline-block;
}

a .ib{
	text-decoration: underline;
}

@media screen and (min-width: 641px) { /* tab pc */
	a:hover .ib{
		text-decoration: none;
	}
}

#mainContents img,
#subContentsBlock img{
	max-width: 100%;
	height: auto;
}


/* detail link box */
.detail-link-box > .inner{
	max-width: 980px;
	margin: 0 auto;
	text-align: right;
}

.detail-link-box a{
	display: inline-block;
	background-color: #f2f2f2;
	padding: 4px 4px 4px 20px;;
	position: relative;
	top:0;
	left:0;
}

.detail-link-box a:before{
	content: "→";
	position: absolute;
	top:4px;
	left:4px;
}

/* 2 column right */
#subContentsBlock a{
	display: block;
}

#subContentsBlock h2 {
  padding: 0;
  margin: 0;
  border-left: 0;
  font-size: 1em;
  background: #ebf7fb;
	position:relative;
	top:0;
	left:0;
	color:#006699;
}

#subContentsBlock h2:before {
	content: "";
	position: absolute;
	top:50%;
	left:0.7em;
	margin-top: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 10px;
	border-color: transparent transparent transparent #006699;
}

#subContentsBlock h2 a{
	color:#006699;
}
#subContentsBlock h2 span a,
#subContentsBlock h2 span .not-link {
  display: block;
  padding: 15px 30px 15px 1.8em;
}

#subContentsBlock h2 .small {
  font-size: 0.8em;
}

/* sub h3 */
#subContentsBlock .h3-wrap h3 {
  padding: 0;
  margin: 0 0;
  border-left: 0;
  font-size: 1em;
	line-height: 1.7em;
	position: relative;
}

#subContentsBlock .h3-wrap h3:before {
	content:url(../img/ico_squre01.png);
	position: absolute;
	top:50%;
	left:0.7em;
	margin-top: -6px;
}

#subContentsBlock .h3-wrap h3 a,
#subContentsBlock .h3-wrap h3 span.not-link{
	display: block;
  padding: 15px 4px 15px 1.8em;
}

#subContentsBlock .h3-wrap ul{
}

#contentsArea #subContentsBlock .sideSection {
    margin: 15px 0 20px 0;
    padding: 0 0 10px 0;
}

@media screen and (min-width: 960px) { /* pc */
	#contentsArea #subContentsBlock .sideSection:nth-child(1) {
    margin-top: 0;
	}
	
	div#subContentsBlock a {
    display: inline;
	}
}

/* to page top */
.totop{
	position: fixed;
	z-index: 1;
	right: 1%;
	bottom: 1%;
	width: 48px;
	height: 48px;
	background-image: url(../img/totop_sp.svg);
	background-size: 100% auto;
}

.totop img{
	visibility:hidden;
}

.totop a{
	display: block;
}

.totop a:focus {
  outline-color: rgba(0, 153, 204, .85);
}


@media screen and (min-width: 960px) { /* pc */
	div.totop{
		right: 16px;
		bottom: 16px;
		width: 100px;
		height: 100px;
		background-image: none;
	}
	
	div.totop img{
		visibility:visible;
	}
	
	div.totop a{
		transition: all 0.2s ease 0s;
	}
	
	div.totop a:hover{
		opacity: 0.8;
	}

}