@charset "utf-8";

/*----------------------------------------------------
  step系
----------------------------------------------------*/
.title + .operation,
.sub_title + .operation {
	padding: 0px;
	margin: 0px;
}
.accordion .operation{
	margin-top: 0px;
}
.operation{
	margin-top: 20px;
}
.operation dt{
	text-indent: 2.75em;
	text-indent: 1.75em\9;
}
.operation dt p{
	font-size: 100%;
	text-indent: -2.75em;
	text-indent: -1.75em\9;
	margin-left:1.95em;
	background-color:#FFF;
	padding:9px 10px 3px 10px;
	vertical-align:middle;
}
.operation dt span{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 150%;
	font-weight:bold;
	line-height:0;
	padding:3px 10px;
	margin-right:10px;
	color:#0068B6;
}
.operation dt span.two{
	padding:3px 3px 3px 4px;
}
.operation dd > p,
.operation dd > h3,
.operation dd > .memo,
.operation dd > .accent_box,
.operation dd > .tablescroll,
.operation dd > ol,
.operation dd > .foot_note,
.operation dd > .column {
	margin-left: 40px !important;
}
.operation table .img{
	margin:0;
}
.operation dd ol p{
	margin-left:0px;
}
.operation dd h3{
	padding:10px 0px 5px 0px;
	font-size: 100% !important;
	font-weight:normal !important;
}
ol > p{
	margin-left:35px !important;
}
ol li p{
	margin-left:0px;
	font-weight: bold;
}
ol.item_num{
  counter-reset: item;
  list-style: none;
  padding: 0 0 10px 0;
}
ol.item_num li{
	padding-top: 10px;
  padding-left: 30px;
  position: relative;
}
ol.item_num li:before{
  content: counter(item);
  counter-increment: item;
  background-color: #fff;
  display: block;
  float: left;
  line-height: 22px;
  margin-top: -2px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border: 1px solid #000;
  border-radius: 50%;
}
ol.item_num li > p{
	margin: 0 !important;
}
ol.item_num > p,
ol.item_num > .foot_note{
	margin-left: 30px !important;
}
.note + ol.sub_step{
	margin-left: 15px;
}
ol.sub_step{
  counter-reset: step;
  list-style: none;
  padding: 0;
}
ol.sub_step li{
	padding-top: 10px;
  padding-left: 35px;
  position: relative;
}
ol.sub_step li > p{
	margin: 0 !important;
}
ol.sub_step li:before{
  content: counter(step);
  counter-increment: step;
  background-color: #FFF;
  color: #226AB7;
  border:1px solid #226AB7;
  display: block;
  float: left;
  line-height: 22px;
  font-weight:bold;
  margin-top:-2px;
  margin-left: -35px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
ol.sub_step li p{
	font-weight:normal;
}

/*----------------------------------------------------
	memo | notice
----------------------------------------------------*/
.memo{
	margin-top:30px;
}
.memo .word{
	background: url(../img/icon/memo.svg) no-repeat 0px 0px;
	-webkit-background-size: auto 35px;
	background-size: auto 35px;
	padding:12px;
}
.memo .col{
	margin:0;
	border: 1px solid #999999;
	padding:2px 10px 5px 10px;
}
.memo .col p{
	margin:0;
}
.notice{
	margin-top:30px;
}
.notice .word{
	background: url(../img/icon/notice.svg) no-repeat 0px 0px;
	-webkit-background-size: auto 35px;
	background-size: auto 35px;
	padding:12px;
}
.notice .col{
	background-color:#FFF;
	border:2px solid #333;
	padding:2px 10px 5px 10px;
}
.notice .col p{
	margin:0;
}

/*----------------------------------------------------
	table
----------------------------------------------------*/
p + .tablescroll,
h3 + .tablescroll{
	margin-top: 5px;
}
table {
	width: 100%;
	border-collapse:collapse;
	border-spacing:0;
	border-top:none;
}
table th  {
	border: 1px solid #C5C5C5;
	background-color:#DDD;
	padding: 5px;
	text-align: center;
}
table th p{
	font-weight:bold;
	margin:0px !important;
	padding:0px !important;
}
table tr td {
	border: 1px solid #C5C5C5;
	background-color:#FFF;
	padding: 0px 5px 5px 5px;
	margin:auto;
	vertical-align: middle;
	text-align: left;
}
table .img {
	text-align: start;
}
.tablescroll{
	margin-top: 20px;
	overflow-x: auto;
}
.tablescroll::-webkit-scrollbar{
	height: 5px;
}
.tablescroll::-webkit-scrollbar-track{
	background: #F1F1F1;
}
.tablescroll::-webkit-scrollbar-thumb {
	background: #BCBCBC;
}
.tablescroll .hide-table-header th{
	border:none;
	padding:0px;
}

/*----------------------------------------------------
	tabs
----------------------------------------------------*/
.tabs{
	margin:20px 0px;
	position: relative;
}
.tabs .tab_menu { 
	display: table;
	margin: 10px auto 0px auto;
	border-collapse:separate;
}
.tab_menu li{
	display: table-cell;
}
.tab_menu li a{
	font-size:120%;
	color:#333;
	text-align:center;
	padding:5px 30px;
	display:block;
	border-left:1px solid #333;
	border-right:1px solid #333;
}
.tab_menu li:nth-child(1) a{
	border-right:none;
}
.tab_menu li a:hover{
    background: #C5C5C5;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.tab_menu li.active a{
    color:#FF0000;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	position: relative;
	z-index:2;
}
.tab_menu li a{
	text-decoration:none;
}
.tabboxs{
	padding: 0px 20px;
}
.tabbox{
	text-align:left;
	overflow: hidden;
	zoom: 1;
}
@media screen and (max-width:520px) {
	.tab_menu li a{
		font-size:120%;
		color:#333;
		text-align:center;
		padding:5px 30px;
		display:block;
		border-left:1px solid #333;
		border-right:none;
	}
	.tab_menu li:nth-child(1) a{
		border-right:none;
		border-left:none;
	}
}


/*----------------------------------------------------
	event
----------------------------------------------------*/

.accordion{
	margin-top:10px;
	width:100%;
}
.event_title a{
	text-decoration:none;
}
.event_title p {
	color:#000;
 	text-decoration: none;
	border:1px solid #C5C5C5;
	background: #FFF url(../img/burette/Down.svg) no-repeat right center;
	padding: 10px 40px 10px 10px;
	margin: 0px 0px 5px 0px!important;
	display:block;
	cursor:pointer;
}
.event_title p:hover{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background: #EFEFEF url(../img/burette/Down.svg) no-repeat right center;
}
.event_title.open p {
	color: #0068B6;
	background: #EFEFEF url(../img/burette/Up.svg) no-repeat right center;
}
.event_title p img{
	margin-right:7px;
}
.event_box {
	background:#FFF;
	padding:10px 0px 15px 0px;
	margin: 0px 0px 5px 0px!important;
	display:none;
	border-bottom: 1px solid #DDD;
}

.accordion.trouble .event_title {
	margin: 5px 0 0 0;
}
.accordion.trouble .event_title p {
	color:#000;
 	text-decoration: none;
	border:none;
	border-top:1px solid #C5C5C5;
	border-bottom:1px solid #C5C5C5;
	background: #FFF url(../img/burette/Down.svg) no-repeat right center;
	padding: 10px 40px 10px 0px;
	margin: 0px !important;
	display:table;
	cursor:pointer;
	width: 100%;
	box-sizing: border-box;
	font-size: 100%;
}
.accordion.trouble .event_title.acc p {
	font-weight: bold;
	border-top:5px solid #0068B6;
	border-bottom:5px solid #0068B6;
}
.accordion.trouble .event_title p .qaa_q{
	color: #000;
	width: 90px;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	padding: 30px 0 0 0;
	background: url(../img/icon/qa_q.svg) no-repeat top center;
	-webkit-background-size: auto 32px;
	background-size: auto 32px;
	display: table-cell;
	vertical-align: middle;
}
.accordion.trouble .event_title p .qaa_t{
	display: table-cell;
	vertical-align: middle;
}
.accordion.trouble .event_title p:hover{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background: #EFEFEF url(../img/burette/Down.svg) no-repeat right center;
}
.accordion.trouble .event_title.open p {
	color: #0068B6;
	border-bottom:1px solid #C5C5C5;
	background: #EFEFEF url(../img/burette/Up.svg) no-repeat right center;
	margin: 0 !important;
}
.accordion.trouble .event_title.acc.open p {
	border-bottom:1px solid #0068B6;
}
.accordion.trouble .event_box {
	background:#EFEFEF;
	padding:10px 10px 15px 0px;
	margin: 0px 0px 5px 0px !important;
	display:none;
	border-bottom:1px solid #C5C5C5;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.accordion.trouble .event_box.acc {
	border-bottom:5px solid #0068B6;
}
.accordion.trouble .event_box .qaa_a{
	color: #000;
	width: 90px;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	padding: 35px 0 0 0;
	background: url(../img/icon/qa_a.svg) no-repeat top center;
	-webkit-background-size: auto 32px;
	background-size: auto 32px;
	display: table-cell;
}
.accordion.trouble .event_box .qaa_b{
	display: table-cell;
	vertical-align: middle;
}
.accordion.trouble .event_title p .qaa_q:lang(ja){
	width: 60px;
}
.accordion.trouble .event_box .qaa_a:lang(ja){
	width: 60px;
}
/*----------------------------------------------------
	item_explanation
----------------------------------------------------*/
.item {
	position: relative;
	display: grid;
	grid-template-columns: 8em 1fr;
	gap: 0 20px;
  }
  .item_explanation_title{
	position: relative;
  }
  .item_explanation_title::before {
	content: ":";
	padding-top: 3px;
	width: 20px;
	text-align: center;
	position: absolute;
	right: -20px;
  }
  
  .item_explanation_text {
  }
/*----------------------------------------------------
	sub_note
----------------------------------------------------*/
.sub_note{
	width: auto;
	margin-left:12px;
}
.sub_note .note {
	background: url(../img/burette/Note_2.svg) no-repeat left 7px;
	padding-left: 12px;
	margin-left: 5px;
}
/*----------------------------------------------------
	accent_box
----------------------------------------------------*/
h3 + .accent_box{
	margin-top:0px;
}
#main .accent_box h3:nth-child(1){
	margin-top:0px;
}
.column .area .accent_box:nth-child(1){
	margin-top: 0px;
}
.accent_box{
	width: auto;
	margin-top: 20px;
	padding: 5px 10px 5px 10px;
	border: solid 1px #999999;
	overflow: hidden;
}
.accent_box::after{
	content: "";
	clear: both;
	display: block;
}
.accent_box.second{
	background-color: #e5edf5;
}
.accent_box > p{
	margin-top:0px !important;
}
.accent_box p{
	margin-left:0px !important;
}
/*----------------------------------------------------
	indent
----------------------------------------------------*/
.note+.indent{
	margin-left: 17px;
}
/*----------------------------------------------------
	text系
----------------------------------------------------*/
h2 + h3{
	margin:15px 0px 5px 0px !important;
}
#main_title + h2{
	margin:20px 0px 5px 0px !important;
}
#main h2{
	margin:40px 0px 5px 0px;
	padding: 3px 0px 3px 10px;
	border-left: 10px solid #0068B6;
	border-bottom: 2px solid #0068B6;
}
#main h3{
	font-weight:bold !important;
	margin:35px 0px 5px 0px;
	padding:0;
}

p.text_right {
	text-align: right;
}
p.text_center {
	text-align: center;
}
.note {
	background: url(../img/burette/Note_1.svg) no-repeat left 7px;
	padding-left: 12px;
	margin-left: 5px;
}
.foot_note .note {
	background:none;
	padding-left: 0px;
	margin-left:1em;
	text-indent:-1em;
}
.foot_note .num {
	margin-left:1.95em; 
	text-indent:-1.95em;
}

.link a{
	margin: 5px 0px 10px 19px;
	display:block;
}
.img{
	text-align: center;
	padding: 20px auto;
}
.img img{
	max-width:200px;
	width: 100%;
}
.column{
	margin-top:10px;
	margin-bottom:20px;
}
/*----------------------------------------------------
	caption illust
----------------------------------------------------*/

/* キャプションイラスト内部に関するもの */
div.caption_illust_container{
	margin:20px 0;
}
.column div.caption_illust_container{
	margin:0;
}
.column .area div.caption_illust_container+div.caption_illust_container{
	margin:30px 0 0 0;
}
div.caption_illust_container div.caption_illst_src {
    height: 0px;
}
div.caption_illust_container {
    position: relative;
    margin-left: 0px;
}
div.caption_illust_container div.caption_texts {
    position: relative;
}
div.caption_illust_container p img/*.img-inline*/ {
    display: inline;
    padding: 0 1.5px;
}
div.caption_illust_container div.caption_text {
    position: absolute;
    text-align: left;
}
div.caption_illust_container div.caption_text.center {
    text-align: center;
}
div.caption_illust_container div.caption_text.right {
    text-align: right;
}
#main div.caption_illust_container div.caption_text.right * {
    margin: 0 0 0 auto;
}
#main div.caption_illust_container div.caption_text > *
, .second #contents #main .article div.caption_text > * {
    line-height: inherit;
    height: inherit;
    width: inherit;
    display: table-cell;    /* 子要素の vertical-align を有効にするため */
}
#main div.caption_illust_container div.bold {
    font-weight: bold;
}
#main div.caption_illust_container div.underlined {
    text-decoration: underline;
}
#main div.caption_illust_container div.italic {
    font-style: italic;
}
#main div.caption_illust_container div.v_top > * {
    vertical-align: top;
}
#main div.caption_illust_container div.v_center > * {
    vertical-align: middle;
}
#main div.caption_illust_container div.v_bottom > * {
    vertical-align: bottom;
}
#main div.caption_illust_container * {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
}
#main div.caption_illust_container img.self_cap
, #main div.caption_illust_container div.img
, #main div.caption_illust_container div.caption_text * {
    margin: 0px auto;
}

/* 高さの異なるイラストが並んだ場合に上端揃えするため */ 

div.figures > div.caption_illust_container {
    vertical-align: top;
}

/*----------------------------------------------------
 キャプションイラスト外部 (他要素との位置関係) に関するもの 
----------------------------------------------------*/
/*
div.caption_illust_container.caption_illust_float_right {
    float: right;
    clear: right;
}*/
article aside.important
, article aside.note { /* 直前に float:right のキャプションイラストがある場合に被ってしまう件への対応。 */
    clear: both;
}
/* column group の要素である場合 */
@media screen and (min-width: 769px) {
div.multi-column-caption {
    display:grid;
    display:-ms-grid; }
    div.multi-column-caption.col-len-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); -ms-grid-columns: (minmax(0, 1fr))[1]; }
    div.multi-column-caption.col-len-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); -ms-grid-columns: (minmax(0, 1fr))[2]; }
    div.multi-column-caption.col-len-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); -ms-grid-columns: (minmax(0, 1fr))[3]; }
    div.multi-column-caption.col-len-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); -ms-grid-columns: (minmax(0, 1fr))[4]; }
    div.multi-column-caption.col-len-5 { grid-template-columns: repeat(5, minmax(0px, 1fr)); -ms-grid-columns: (minmax(0, 1fr))[5]; }
div.multi-column-caption > div:nth-child(1) { -ms-grid-column:1; }
div.multi-column-caption > div:nth-child(2) { -ms-grid-column:2; }
div.multi-column-caption > div:nth-child(3) { -ms-grid-column:3; }
div.multi-column-caption > div:nth-child(4) { -ms-grid-column:4; }
div.multi-column-caption > div:nth-child(5) { -ms-grid-column:5; }
}

/*----------------------------------------------------
    arabic
----------------------------------------------------*/

html[dir="rtl"] #main div.caption_illust_container { /* itrex で左右端に余裕のないレイアウトをした場合に見切れる件への対応 */
    margin-left: 5px;
    margin-right: 5px;
}

html[dir="rtl"] #main div.caption_illust_container *:not(.center .left) {
    text-align: right;
}

/*----------------------------------------------------
----------------------------------------------------*/