/*----------------------
2018/01/E
ExPub HTML User Manual For mobile browser
Kazunori Maruyama
----------------------*/
/* ******************* Reset Style ******************* */
@charset 'UTF-8';
*{
    margin:0;
    padding:0;
    font-size:16px;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 
	'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
p {
    line-height:1.5;
    color: #333;
}
a{
	word-wrap: break-word;
    /*text-decoration:none;*/
    color:#0066aa;
}
/* ******************* Mobile First ******************* */
html,
body {
    height: 100%;/*☆*/
}
body{
    position:relative;
    min-height: 100%;
}
html, body {
	width: 100%;
	height: auto;
	background-size: cover;    
}
img {
	max-width:500px;
}

/* ******************* For Tablet ******************* */
@media only screen and (min-width: 640px) {
    .header_title a{
        font-size:1.84em;
    }
    .searchbox{
        top:20px;
    }
    .menu > li{
        float: left;
        width:47%;
        min-height:13em;
    }
    
    article {
        width:70%;
        padding:2% 2% 6%;
        float:right;
    }
    article:after{
        clear:both;
    }
}

/*------------------------------
   タイトル
--------------------------------*/
.header {
	    text-align: center;
	    padding-top: 10px;
	    padding-bottom: 5px;
	    margin-bottom: 10px;
	    background-color: #89CEEB;
}
.header h1{
	padding-left:10pt;
	padding-right:10pt;
	font-size:1.2em;
	font-weight:bold;
	margin: 5px 0px;
	color:#000000;
}
.header h2{
	padding-left:10pt;
	padding-right:10pt;
	font-size:1.2em;
	margin: 5px 0px;
	color:#000000;
}
.cheader {
	    text-align: left;
	    padding-top: 10px;
	    padding-bottom: 5px;
	    margin-bottom: 10px;
	    background-color: #89CEEB;
}
.cheader h1{
	padding-left:10pt;
	padding-right:10pt;
	font-size:1.2em;
	font-weight:bold;
	margin: 5px 0px;
	color:#000000;
}
.cheader h2{
	padding-left:10pt;
	padding-right:10pt;
	font-size:1.0em;
	margin: 5px 0px;
	color:#000000;
}

/*------------------------------
   title
--------------------------------*/
.title {
    font-size:1.0em;
    font-weight:bold;
    margin: 10px 0px;
}

/*------------------------------
   リード
--------------------------------*/
.lead {
	    text-align: left;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    margin: 0px 0px;
}

.contents {
	margin: 0px 10px;
	color:#000000;
}

.contents h3{
    font-size:1.1em;
    font-weight:bold;
}

/*----------------------
    Top Page用
----------------------*/
.top_title {
	    text-align: center;
	    padding-top: 10px;
	    padding-bottom: 5px;
	    margin-bottom: 20px;
}
.top_title h1{
	font-weight:bold;
	margin: 0.1em 0px;
	color:#003399;
}
.top_title h2{
	margin: 0.1em 0px;
	color:#003399;
}
.top_read {
	    text-align: center;
	    padding-top: 10px;
	    padding-bottom: 10px;
}
.top_contents1 {
	    text-align: center;
}
.top_contents1 .toc_btn1 {
	width:220px;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 20px auto;
	background-image:url("../image/menu1.gif");
	background-repeat: no-repeat;
	background-position:center;
}
.top_contents1 .toc_btn1:active {
	opacity:0.6;
}
.top_contents1 .toc_btn2 {
	width:220px;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 20px auto;
	background-image:url("../image/menu2.gif");
	background-repeat: no-repeat;
	background-position:center;
}
.top_contents1 .toc_btn2:active {
	opacity:0.6;
}
.top_contents1 .toc_btn3 {
	width:220px;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 20px auto;
	background-image:url("../image/menu3.gif");
	background-repeat: no-repeat;
	background-position:center;
	background-zindex:999;
}
.top_contents1 .toc_btn3:active {
	opacity:0.6;
}
.top_contents2 {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 5px;
}

/*-------------------
   mokuji item
--------------------*/
.toc_contents {
	margin: 0px 10px;
	color:#000000;
}
.toc_contents ul{
	list-style:none;
}
.toc_contents p:hover,
.toc_contents p:active{
    text-decoration:underline;
}
.toc_contents .remark_num{
	width:2.8em;
	text-align:center;	
}
.toc_contents .remark_num p{
	color:#000;
	font-size:1.1em;
	font-style:italic;
	margin-top:-1pt;
}
.toc_contents .contents_item li{
    color:#888;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:0.5em;
}
.toc_contents .contents_item li:before{
	content:'▶ ';
	font-size:0.5em;
    color:#20b2aa;
}
.toc_contents .contents_item li a:hover,
.toc_contents .contents_item li a:active{
    text-decoration:underline;
    color:#20b2aa;
}
.toc_contents .contents_item li > ul > li{
    margin-left:2em;
}

/*-------------------
   検索窓
--------------------*/
.search {
	margin: 0px 10px;
}
.search form {
}
.search input{
	width:100%;
	height:3rem;
	max-width:400px;
	box-sizing: border-box;
	background:#eee;
	border:1px solid #bebebe;
	font-size:1.0em;
	text-indent:0.1em;
}
.search button {
    width:85px;
	height:38px;
	display:block;
	box-sizing:border-box;
	margin: 2px 0px;
	background-image:url("../image/SearchImg.gif");
	background-repeat: no-repeat;
	background-position:left;
}
.search button:hover {
    opacity: 0.8;
}

/*-------------------
   20件ボタン
--------------------*/
.open_count_20 {
	margin-left:4%;
	margin-top:10px;
	width:auto;
}
.open_count_20 p {
	text-align:center;
	width:auto;
}

.open_count_20 a{
	width:98%;
	display:block;
    background: #adf;
    box-shadow: inset 0 0 0 1px #0ac;
    border-radius: 3px;
    border: 1px solid #0ff;
    box-sizing: border-box;
}

.open_count_20 a.button {
    font-weight: normal;
    padding: 5px 10px;
    color: #000;
    /*border-style: none;*/
    border-color:#00f;
    /*background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #039), to(#36d));*/
    border-radius: 5px;
}

.open_count_20 .button:hover {
    opacity: 0.8;
}

/*------------------------------
   操作手順
--------------------------------*/
.step_title {
	width:100%;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 10px 0px;
	background-image:url("../image/OperationImg.gif");
	background-repeat: no-repeat;
	background-position:center;
}

/*------------------------------
   詳細情報
--------------------------------*/
.detail_title {
	font-size:0pt;
	width:100%;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 10px 0px;
	background-image:url("../image/DetailImg.gif");
	background-repeat: no-repeat;
	background-position:center;
}

/*------------------------------
  関連情報
--------------------------------*/
.others_title {
	font-size:0pt;
	width:100%;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 10px 0px;
	background-image:url("../image/ReferenceImg.gif");
	background-repeat: no-repeat;
	background-position:center;
}

/*------------------------------
  お問い合わせ
--------------------------------*/
.inquiry{
}
.inquiry_title {
	font-size:0pt;
	width:100%;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 10px 0px;
	background-image:url("../image/Inquiry.gif");
	background-repeat: no-repeat;
	background-position:center;
}
.inquiry_contents{
	text-align:center;
	margin-top:15pt;
	margin-bottom:30pt;
}

/*----------------------
    トップへボタン
----------------------*/
.bottom {
	margin-top:10pt;
	text-align: left;
	padding-left: 15px;
}
.bottom a.top_btn {
	width:180px;
	height:32px;
	display:block;
	box-sizing:border-box;
	margin: 10px 0px;
	background-image:url("../image/TopPageImg.gif");
	background-repeat: no-repeat;
	background-position:left;

}

/*------------------------------
  戻るボタン
--------------------------------*/
.btn_return a{
   text-decoration:none;
}
.bottom a.button {
    width:185px;
	height:38px;
	display:inline-block;
	box-sizing:border-box;
	margin: 2px 0px;
	background-image:url("../image/ReturnImg.gif");
	background-repeat: no-repeat;
	background-position:left;
}
.btn_return .button:hover {
    opacity: 0.8;
}

/*------------------------------
  レベルインデント1
--------------------------------*/
.level1 {
	margin-left:10pt;
}

/*----------------------
     検索結果で使用
-----------------------*/
article {
    width:100%;
    padding:4% 4% 10%;
    position:relative;
}

h1{
	vertical-align:baseline;
}
h2{
	margin-top:1em;}

/*--------main----------*/

.index_link li{
    list-style: none;
}
.index_link li p{
	display:inline;
}

.index_link li{
    color:#888;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:0.5em;
}
.index_link li:before{
	content:'▶ ';
	font-size:0.5em;
    color:#20b2aa;
}
.index_link li a:hover,
.index_link li a:active,
.thissite_link a:hover,
.thissite_link a:active{
    text-decoration:underline;
    color:#20b2aa;
}
.index_link li > ul > li{
    margin-left:2em;
}

.menu > li:last-child{
    margin-bottom:2%;
}

/*--------footer----------*/
#ft_wrapper{
   position: relative;
}

/*---------------------------*/
/*----- accordion erea ------*/
/*---------------------------*/
.branch{
	cursor:pointer;
	margin:2em 0 2em 1.57em;
	padding:1em;
	border:#cdcbc4 solid 1px;
	background:#fcfbfc;
}
.branch dt:before{
	content:'＋ ';
	color:#20b2aa;
	font-weight:bold;
}
.branch dt.selected:before{
	content:'－ ';
}
.branch dt.selected{
border-bottom:#aaa dotted 1px;
padding-bottom:0.5em;
	margin-bottom:1em;
}
/*------memo erea-------*/
.others{
	margin-top:2em;
/*	padding:1em;*/
/*	border:#cdcbc4 solid 1px;
	background:#fdfdfd;*/
	font-size:1.1em;
}
.step_title,
.inquiry,
.detail,
.others{
	margin-top:2em;
/*	padding:1em;*/
/*	border:#cdcbc4 solid 1px;
	background:#fdfdfd;*/
	font-size:1.1em;
}
.branch .detail,
.branch .others{
	font-size:1.0em;
}

.detail li a{
	background:url("../img/bullet1.png") no-repeat left 50%;
	background-repeat:no-repeat;
	background-size:0.6em 0.6em;
	background-position:left 0.4em;
}
*/
/*------ research parts button -------*/
/*.return_index a,*/
.return_index a{
	z-index:99;
	position:absolute;
	top:2.5em;
	right:2%;
}
.return_index a:before{
	content:'▷ ';
	font-size:0.5em;
    color:#20b2aa;
}



/* ##################################################### */
/* ##################################################### */
/* ******************* Contents Page ******************* */
/*------illust-------*/
.l_graph,
.m_graph,
.s_graph{
	margin:10px 0;
	text-align:left;
}

.i_graph{
	margin:0px 0.2em 0px;
	height:1em;
	position:relative;
	vertical-align:baseline;
	top:0.0em;
}
video{
	width:98%;
}
.m_xl_graph{
	width:98%;
}
.m_graph{
	width:98%;
}
.v_graph{
	width:98%;
}
.s_2pane{
	margin: 0px 0px;
}
.s_2pane_left{
	margin: 0px 0px;
	width:98%;
}
.s_2pane_left .s_graph{
	width:98%;
}
.s_2pane_right{
	margin: 0px 0px;
}
.s_2pane video{
	width:98%;
}
.s_3pane{
	margin: 0px 0px;
	width:98%;
}
.s_3pane div:nth-child(2){
	width:98%;
	text-align:center;
}
.s_3pane div:nth-child(2) img{
	width:10%;
	margin-top:1%;
	transform:rotate(90deg);
}
.s_3pane div:nth-child(1),
.s_3pane div:nth-child(3){
	text-align:center;
	width:98%;
}
.s_3pane div:nth-child(1) img,
.s_3pane div:nth-child(3) img,
.l_graph{
	text-align:left;
	width:98%;
}



/*-------------------
   1 step
--------------------*/
.step {
	display: inline;
}
ul.step {
	margin:1em 0 1em;
	counter-reset:number;
}
ul.step li.no{
	margin:0.5em 0 0.5em;
	padding-left:1.5em;
	text-indent:-1.5em;
	list-style:none;
	counter-increment:number;
}
/*--- step no -------------*/
ul.step li.no:before {
	content:counter(number)'.';
	font-size:1.2em;
	font-weight:bold;
}
.step_strong {
	display: inline;
	font-weight:bold;
}
.step_contents {
	text-indent: 0em;	
}
.step_lead {
	text-indent: 0em;	
}
ul.step li.no a.iframe{
/*	padding-left:1.5em;*/
}
.step li a.iframe{
/*	padding-left:1.5em;*/	
}

/*-------------------
   ※ remark
--------------------*/
.remark li.mark{
	list-style:none;
	padding-left:1.5em;
	text-indent:0em;
	/*border:#cdcdc4 solid 1px;*/
	background: transparent url("../image/note.png") no-repeat left 0.34em;
	background-position:0.12em 0.2em;
	background-size:0.8em 0.8em;
	font-size:1.0em;	
}
.remark_contents{	
	/*padding-left:1.0em;*/
	/*text-indent:-1em;*/
}
ul.remark li.mark a.iframe{
	padding-left:0em;	
}

/*-------------------
   ○ bullet
--------------------*/
.bullet li.bullet_mark{
	list-style: none;
	padding-left:1.0em;
	text-indent:0em;
	margin-top:0.2em;
	font-size:1.1em;
	background:url("../image/bullet1.png") no-repeat left 50%;
	background-repeat:no-repeat;
	background-size:0.5em 0.5em;
	background-position:0.2em 0.35em;
}
.bullet li.bullet_mark:before{
	content:none;
}
ul.bullet li.bullet_mark a.iframe{
	padding-left:0em;	
}

/*-------------------
   white
--------------------*/
.clearText {
	text-indent:100%;
	overflow:hidden;
}