@charset "UTF-8";

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

Last Updated:
Summary:全ページ共有で利用する各要素デザイン

* contents area内で適用

- hn
- link
- list
- number list
- box
- table
- dl
- text
- form

-margin,padding
-indent
-line
-flex 2 column

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

/*-----------------------------------------------------
hn
-------------------------------------------------------*/

/* h1 */
h1 {
  margin: 10px 0 30px;
	padding: 12px 15px;
  background-color: #006699;
	color:#fff;
  position: relative;
  clear: both;
  font-size: 1.4em;
}

@media screen and (min-width: 640px) { /* tab pc */
	h1 {
		font-size: 1.6em;
	}
}

/* h2 */
.h2Block {
	background-image: url(../img/ttl_bg_dot01.png) ;
	padding: 0 0 0 15px;
	margin-bottom: 1.5em;
}
.h2Block h2{
	display: inline-block;
	color:#006699;
	background-color:#fff;
  margin: 0;
	padding: 1px 12px;
  font-size: 1.2em;
}

#mainContents .h2Block:first-child {
  margin-top: 0;
}

@media screen and (min-width: 640px) { /* tab pc */
	div.h2Block h2{
	  font-size: 1.3em;
	}
}

/* h3 */
#mainContents h3{
	background-color:#666666;
	color:#ffffff;
	display: inline-block;
	padding: 4px 1em;
}

#mainContents h3:first-child {
  margin-top: 0;
}

#mainContents h3 a{
	color:#ffffff;
}


@media screen and (min-width: 960px) { /* pc */
}

@media screen and (max-width: 959px) { /* sp, tab */
}

.contents h1.alert {
  background: #ffc0d0;
  border-left-color: #e6003a;
  color:#333333;
  margin-top:0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.contents h1.alert::before,
.contents h1.alert::after {
  content: none;
}

.h1Block h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  border-left: solid 5px #005bac;
  background: none;
  border-top: none;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
}

.h1Block h1::before,
.h1Block h1::after {
  content: none;
}

h1 span.stxt {
  font-size:.8em;
  font-weight: normal;
  line-height:1em;
  display:block;
  margin-top: 5px;
  line-height: 1.5em;
}

h2.none {
  margin: 2em 0 1em 0;
  font-size: 1.2em;
}

.standard h2{
  clear:both;
}

.h2Block{
  clear:both;
  position:relative;
  width:100%;
  margin: 3em 0 1em 0;
}

.h2Block:first-child { margin-top: 0; }

h2.tit_2cols {
  border-left: solid 4px #0B4199;
  padding: 0 0 0 10px;
  margin: 0 10px 15px 5px;
  font-size: 1.2em;
}

h3 {

}

h4 {
  padding:0;
  margin: 1em 0 .5em 0;
  font-size: 1em;
  border-bottom: 1px dotted #c8c8c8
}

h5,h6{
  margin: 1em 0 .5em 0;
}

/*-----------------------------------------------------
box
-------------------------------------------------------*/
.sectionBox{
  margin: 1em 0 ;
  clear:both;
}

.graySection{
  background-color : #ededed;
  padding : 10px;
  border : solid 1px #c8c8c8;
  margin: 0 0 30px 0;
}

.grayBox{
  background-color : #ededed;
  padding : 10px;
  border : 1px solid #c8c8c8;
  margin: 1em 0 2em 0 ;
}

.grayBox2{
  background-color : #ededed;
  padding : 7px;
  margin: 0 0 1em 0;
}

.grayLineBox{
  background-color : #ffffff;
  padding : 10px;
  border : 1px solid #c8c8c8;
  margin: 1em 0 2em 0;
}

/* text to top */
.pageTop {
  text-align : right;
  padding : 10px 0 0 0;
  margin : 40px 0 40px 0 ;
  clear:both;
}

.pageTop a {
    background-repeat: no-repeat;
    background-position: right center;
    font-size: 1em;
    position: relative;
}
.pageTop a::after {
  content: url(../img/ico_link.svg);
	width:15px;
	height: 15px;
  margin-left: 5px;
  display: inline-block;
    transform: rotate(-90deg);
}

#mainContentsBlock .section{
  margin: 0 0 30px 0;
  padding:0;
  width:auto;
  clear:both;
  overflow:hidden;
}

#mainContentsBlock .itemBox{
  padding: 0;
  width: auto;
  overflow: hidden;
}

#mainContentsBlock .itemBox .innerBox{
  margin:0;
  padding: 0 0 10px 0;
  float:left;
  width:50%;
}

#mainContentsBlock .itemBox .innerBox.col1{
  width:99% !important;
  padding:0 25px 10px 5px;
  overflow:hidden;
}

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

#contentsArea #subContentsBlock .sideSection ul{
  margin: 0 0 8px;
	list-style: none;
}

#contentsArea #subContentsBlock .sideSection ul li {
  margin-left: 0;
  padding: 10px 0 10px 25px;
  line-height: 1.7em;
  border-bottom: dotted 1px #cccccc;
  position: relative;
	top:0;
	left: 0;
}

#contentsArea #subContentsBlock .sideSection ul li::before {
  content: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2212px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2012%2014%22%20style%3D%22enable-background%3Anew%200%200%206%207%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23005BAC%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%223%2C0%206%2C3.5%203%2C7%200%2C7%203%2C3.5%200%2C0%20%22%2F%3E%3C%2Fsvg%3E');
  z-index: 1;
	position: absolute;
	top: 1.2em;
	left: 2.6em;
}

#contentsArea #subContentsBlock ul.bannerList,
#contentsArea #subContentsBlock ul.bannerList li{
  margin: 0;
  padding: 0;
}

#contentsArea #subContentsBlock ul.bannerList{
  text-align: center;
  width: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

#contentsArea #subContentsBlock ul.bannerList li{
  list-style-type: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

/*-----------------------------------------------------
table
-------------------------------------------------------*/

.tableBase{
  margin: .5em 0;
  border:1px solid #c8c8c8;
  background-color:#e8edf0;
  border-collapse: collapse;
}
.tableBase th,
.tableBase td {
  padding:7px;
}
.tableBase th{
  background-color:#006699;
	border:1px solid #c8c8c8;
	color:#ffffff;
}

.tableBase td{
  padding:7px;
  background-color:#ffffff;
	border:1px solid #c8c8c8;
}

.tableBase td.indent1{
  padding:7px 7px 7px 1.5em;
}

.tableBase td.indent2{
  padding:7px 7px 7px 2.5em;
}

.tableBase td.indent3{
  padding:7px 7px 7px 3.5em;
}

.tableBase td.indent4{
  padding:7px 7px 7px 4.5em;
}

.tableBase td.indent5{
  padding:7px 7px 7px 5.8em;
}
.baseTable .bg-yellow th {
  background-color: #ffffcc;
  text-align: center;
}

.valignTop th,
.valignTop td {
  vertical-align: top;
}
.tableBase caption,
.tableBase2 caption{
  padding: .5em 0;
  font-weight: bold;
  text-align: left;
}


/*-----------------------------------------------------
ul,ol
-------------------------------------------------------*/

#contentsArea ul {
  list-style-type:disc;
}

#contentsArea ul li {
  padding-left : 0;
  margin-left : 20px;
  line-height: 1.7em;
}

#contentsArea ol {
  list-style-type:decimal;
}

#contentsArea ol li {
  padding-left : 0;
  margin-left : 20px;
  line-height: 1.7em;
}

#contentsArea ul.linkMonthly{
}


#contentsArea ul.linkMember,
#contentsArea ul.linkAnchor{
  margin:0;
}


#contentsArea ul.linkMonthly li{
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding:0 3px 2px;
  margin-left: 0;
}

#contentsArea ul.linkMember li,
#contentsArea ul.linkAnchor li {
  display : inline;
  margin:0;
  padding:0 5px 3px 5px;
}

#contentsArea ul.linkMonthly li a{
  padding-left:20px;
  position: relative;
}

#contentsArea ul.linkMonthly li a::before {
  content: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%229%22%20viewBox%3D%220%200%205%209%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ebullet%3C%2Ftitle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%3E%3Cg%20id%3D%22logo%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%221%200%200%200%204%204.5%200%209%201%209%205%204.5%201%200%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  z-index: 1;
}

#contentsArea ul.linkMonthly li a::after {
  background: #004697;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: 15px;
  width: 15px;
}

#contentsArea ul.linkMember li a,
#contentsArea ul.linkAnchor li a{
  padding-left:10px;
  background: url(/common3/img/bullet_arrow.gif) no-repeat 0 3px;
}

#contentsArea .bulletListFloat {
  list-style-type:none;
  overflow:hidden;
}

#contentsArea .bulletListFloat li{
  background: url(/common3/img/bullet_arrow.gif) no-repeat left center ;
  margin-left:0;
  padding:0 13px 5px 13px;
  float:left;
  width:300px;
}

#contentsArea .bulletList {
  list-style-type:none;
}

#contentsArea .bulletList li {
  margin-left:0;
  padding:2px 10px 2px 2em;
  line-height: 1.7em;
  position: relative;
}

#contentsArea .bulletList li::before {
	content: url(../img/ico_link.svg);
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
  margin-left: -1.8em;
	margin-right: 0.2em;
}

/* 2段目 */
#contentsArea ul.bulletList li ul.bulletList li{
 background:url(../img/bullet_arrow.gif) no-repeat left 0.75em ;
 margin-left:0;
 padding:2px 10px 2px 15px !important;
}

#contentsArea ul.bulletList li ul.bulletList li::before {
  content: none;
}

#contentsArea .markNone{
  list-style-type:none;
  margin-left:0;
  padding-left:0;
}

#contentsArea .markNone li{
  margin-left:0;
  padding-left:0;
}

#contentsArea .markNone li li{
  margin-left:15px;
}

/* new ol style */
#contentsArea .numList {
  counter-reset: my-counter;
  list-style-type: none;
  padding: 0;
}

#contentsArea .numList li {
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 10px;
  position: relative;
}

#contentsArea .numList li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  display: block;
  float: left;
  font-size: .7em;
  line-height: 1.7em;
  margin: 3px 5px 0 -25px;
  text-align: center;
  height: 1.7em;
  width: 1.7em;
  border: 1px solid #333;
  border-radius: 50%;
}

#contentsArea .romanNumList01 li,
#contentsArea .romanNumList02 li {
  margin-left: 30px;
}

#contentsArea .romanNumList01 {
  list-style-type: upper-roman;
}

#contentsArea .romanNumList02 {
  list-style-type: lower-roman;
}


/*-----------------------------------------------------
icon
-------------------------------------------------------*/
.ico-out:after{ /* target="_blank" */
	content: url(../img/ico_out.gif);
	margin-left: 4px;
	display: inline-block;
}
.ico-pdf:after{
	content: url(../img/ico_pdf.gif);
	margin-left: 4px;
	display: inline-block;
}
.ico-file:after{ /* CSV, Excel */
	content: url(../img/ico_file.gif);
	margin-left: 4px;
	display: inline-block;
}
.ico-movie:after{
	content: url(../img/ico_movie.gif);
	margin-left: 4px;
	display: inline-block;
}


/*-----------------------------------------------------
font
-------------------------------------------------------*/
.textS{
  font-size:.8em;
  line-height:1.2;
}

.textL{
  font-size:1.2em;
}
.textNormal,
h2 span.textNormal{
  font-weight: normal;
  font-size:.8em;
}

.caption{
  font-size:.8em;
  padding:0;
  margin:0.5em 0 !important;
}

.textRed{
  color:#c00202;
}

.indent p{
  text-indent:1em;
}

#contentsArea .indentMg0 p {
  margin:0 0 1em 1em;
}

/*-----------------------------------------------------
margin,padding
-------------------------------------------------------*/
.txtNote {
  padding-left : 15px;
}

.mt0px{
	margin-top: 0 !important;
}

.mb16px{
	margin-bottom: 16px !important;
}

.mb24px{
	margin-bottom: 24px !important;
}

.mb40px{
	margin-bottom: 40px !important;
}

/*-----------------------------------------------------
indent
-------------------------------------------------------*/
.indent {
	text-indent: 1em;
}
.indent05 {
	text-indent: 0.5em;
}
.indent-ico {
	text-indent: -1em;
	margin-left: 1em;
}
.indent *,
.indent05 *,
.indent-ico * {
	text-indent: 0;
	margin-left: 0;
}

/*-----------------------------------------------------
line
-------------------------------------------------------*/
.photoLine{
  border:1px solid #dad1d2;
}

.border-bottom-dotted{
	border-bottom: dotted 1px #cccccc;
}

/*-----------------------------------------------------
flex
-------------------------------------------------------*/
/* flex 2 column  */
#contentsArea .flex2-box > ul{
}
#contentsArea .flex2-box > ul > li{
	margin: 0 0 24px;
	list-style: none;
}
@media screen and (min-width: 641px) { /* tab pc */
	#contentsArea .flex2-box > ul{
		display: flex;
		justify-content: space-between;
		flex-flow: wrap;
	}
	
	#contentsArea .flex2-box > ul > li{
		width:48%;
	}
}