@charset "utf-8";

main{
	position:relative;
	}

@media (min-width: 1200px) {
	main{
	margin-top:98px;
	display:block;
	}
}
@media (max-width: 1200px) {
	main{
	margin-top:60px;
	display:block;
	}
}


/* トップへ戻るボタン */

#page_top{
  width: 80px;
  height: 65px;
  position: fixed;
  right: 30px;
  bottom: 20px;
  background: #333;
  opacity: 0.6;
  border-radius: 15px;
  z-index:100;
}



@media screen and (max-width: 1000px) {
	#page_top.atBottom{
	bottom:140px;
	}
}
@media screen and (max-width: 767px) {
	#page_top.atBottom{
		bottom:calc(100vw / 4) ;
	}
}

#page_top a{
  position: relative;
  display: block;
  width: 80px;
  height: 65px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -35px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 35px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top:hover{
	background-color:#444;
	opacity:0.5;
}



.page-title{
position:relative;
background-color:#007FC5;
width:100%;height:250px;
background: -moz-linear-gradient(left,  rgba(0,127,197,1) 1%, rgba(0,74,148,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,127,197,1) 1%,rgba(0,74,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,127,197,1) 1%,rgba(0,74,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007fc5', endColorstr='#004a94',GradientType=1 ); /* IE6-9 */
}

.page-title h2{
position:absolute;
color:white;
top:50%;left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
font-size:30px;
font-weight:normal;
z-index:99;
display:block;
}


.page-title h2 img{
display:block;
width:auto;
height:58px;
margin:0 auto 10px;
}
.main-wrapper{
width:90%;margin:0 auto;max-width:1300px;
}
.breadcrumbs{
margin-top:10px;font-size:11px;
}
.breadcrumbs ul{
display:flex;
}

.breadcrumbs ul a{
color:#007FC5;
text-decoration:underline;
}
.breadcrumbs ul li:before{
content:">";
margin:0px 5px;
}
.breadcrumbs ul li:first-child:before{
display:none;
}
.breadcrumbs ul a:hover{
color:#541f82;
}
.contents-wrapper{
margin-top:32px;
}

.sideNav-area{
margin-right:50px;
}
.sideNav-area h3{
font-size:18px;
background-color:#A3A3A3;
color:white;
border:solid 1px #A3A3A3;
text-align:center;
padding:15px 0 10px;
}

.sideNav{
width:280px;
border:solid 1px #E1E1E1;
background-color:#FAFAFA;
padding:20px;
}
.sideNav ul li a{
color:#333;
font-size:16px;
}
.sideNav ul li:before{
content:"▶︎";
color:#C11C1F;
margin-right:3px;
font-size:14px;
}

.sideNav ul li a:hover{
color:#666;
text-decoration:underline;
}

.sideNav-sub{
border-left:1px solid #E1E1E1;
padding-left:16px;
margin:0.5rem 0 1rem 2em;
}

.sideNav ul.sideNav-sub li:before{
display:none;
}

.sideNav ul.sideNav-sub li a{
font-size:13px;
}
.here{
font-weight:bold;
}


.contents-area{
width:calc(100% - 330px);
padding-bottom:80px;
}
.lead-text{
font-size:19px;
font-weight:bold;
line-height:150%;
}

.arrow{
	padding-top: 10vw;
	position: relative;
}
.arrow::before,
.arrow::after{
	content: '';
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-bottom: 10vw solid #F5F5F5;
}
.arrow::before{
	left: 0;
	border-right: 50vw solid transparent;
}
.arrow::after{
	right: 0;
	border-left: 50vw solid transparent;
}


/* テキストだけの情報ページ */

.main-wrapper.noside.infopage{
max-width:970px;
}

.main-wrapper.noside.infopage .contents-area{
width:100%;
padding-bottom:8rem;
}

.top-text{
margin-top:3rem;margin-bottom:3rem;
}


.infopage ol li{
	font-size:15px;
	line-height:1.6;
	list-style-type:none;
	list-style-position:inside;
	counter-increment: cnt;
	margin-left:0;
	padding-left:2em;
	position:relative;
	}
.infopage ol li:before{
	display: marker;
	content: "(" counter(cnt) ")  ";
	position:absolute;
	top:0;left:0;
}


@media (max-width: 1200px) {
.main-wrapper.noside.infopage{
width:95%;
}

.main-wrapper.noside.infopage .contents-area h3{
margin-bottom:0rem;
}

.top-text{
margin-top:2.5rem;margin-bottom:2rem;
}

}


/* テキストだけの情報ページ終わり */




@media (max-width: 1200px) {
.main-wrapper{
width:95%;
}
.contents-wrapper{
display:block;
}
.sideNav-area{
display:none;
}
.contents-area{
width:100%;
}

}
/* about Page
--------------------------------------------------------------*/
table.aboutTable {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #333;
  border-collapse: collapse;
}
table.aboutTable th,
table.aboutTable td {
  padding: 0.5em 2em;
  border: 1px solid #333;
  vertical-align: top;
}
sup {
  font-size: .5em;
}
.aboutCont {
  width: 90%;
  margin: 0 auto;
}
.link_blue{
  color: #0d64b0 !important;
}
@media (max-width: 1200px) {
table.aboutTable {
  width: 100%;
  margin: 0 auto;
  border: none;
}
table.aboutTable th {
  display: block;
  padding: 0.5em 2em;
  border: none;
  background-color: #f0f0f0;
  text-align: left;
}
table.aboutTable td {
  display: block;
  padding: 0.5em 2em;
  border: none;
}
.aboutCont {
  width: 90%;
  margin: 10px auto;
}
}
/* 最新情報 */

#news{
padding:5rem 0 7rem;
}
@media (max-width: 1200px) {
  #news{
  padding:2.5rem 0;
  }
}


#news-list-wrapper{
background-color:white;
width:100%;
margin:0px auto;
text-align:left;
margin-top:30px;
}
@media (max-width: 1200px) {
  #news-list-wrapper{
  width:95%;
  }
}


#news-list-wrapper ul{
width:100%;
display: table;
border-collapse:collapse;
}

#news-list-wrapper li{
border-bottom:1px solid #DCDCDC;padding:20px 0;text-align:left;
display: table-row;
}

#news-list-wrapper li:first-child{
border-top:1px solid #DCDCDC;
}


#news-list-wrapper li div, #news-list-wrapper li time, #news-list-wrapper li p{
display: table-cell;
vertical-align:middle;
padding:15px 0;
line-height:150%;
font-size:14px;
}

#news-list-wrapper li div{
width:150px;
}
#news-list-wrapper li time{
width:150px;
}
#news-list-wrapper #pagination {
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
}
#news-list-wrapper #pagination a {
  color: #5c5c5c;
  text-decoration: none;
}
@media (max-width: 768px) {
  #news-list-wrapper li div, #news-list-wrapper li time{
  padding:1.2rem 10px 0.5rem 0;
  display:inline-block;
  }
  #news-list-wrapper li p{
  width:100%;
  display:block;
  padding:0rem 1.5rem 1.2rem 0;
  }
  #news-list-wrapper li div{
  width:auto;
  }
  #news-list-wrapper li time{
  width:auto;
  }

}


#news-list-wrapper li div.cat span{
width:8em;
text-align:center;
padding:3px 0 2px;
color:white;
font-size:13px;
border-radius:5px;
display:block;
}

.cat.topics span{
background-color:#0d64b0;
}
.cat.release span{
background-color:#303593;
}

#news-list-wrapper li div.news{
width:8em;text-align:center;
padding:3px 0 2px;
background-color:#039ada;
color:white;font-size:13px;
border-radius:5px;
}

#news-list-wrapper li time.date{
font-weight: bold;
color: #5c5c5c;
margin-right: 20px;
}

#news-list-wrapper li p.info-title{
display:block;
position:relative;
text-align:justify;
}



#news-list-wrapper li p.info-title:after{
content:"";
width:20px;
height:20px;
background-image:url(../images/icon_pdf.jpg);
background-size:20px 20px;
display:inline-block;
background-repeat:no-repeat;
margin-left:3px;
position:relative;
top:3px;
}


#news-list-wrapper a{
color: #0d64b0;
text-decoration: none;
}
#news-list-wrapper a:hover{
text-decoration:underline;
color:#999;
}

.news-toggle-btn{
text-align:left;
margin-bottom:25px;
}

.news-toggle-btn div{
padding:6px 0px 4px;
width:130px;
text-align:center;
font-size:12px;
display:inline-block;
transition:all 0.2s linear;
}

@media (max-width: 1200px) {
  .news-toggle-btn{
  display:flex;
  width:100%;
  justify-content: space-between;
  margin-bottom:12px;
  }
  .news-toggle-btn div{
  padding:6px 10px 4px;
  width:33%;
  }
}

.news-toggle-btn div:hover{
cursor: pointer;
}

.news-toggle-btn div#news-all{
background-color:#0d64b0;
color:white;
}
.news-toggle-btn div#news-all:hover{
background-color:#2C9DDE;
}

.news-toggle-btn div#news-topics, .news-toggle-btn div#news-press{
background-color:#EEEEEE;
color:#868686;
}
.news-toggle-btn div#news-topics:hover, .news-toggle-btn div#news-press:hover{
background-color:#dddddd;
}

.goNewsList{
font-size:11px;
text-align:right;
margin-top:10px;
}

.goNewsList a{
color:#333;
text-decoration:underline;
}
.goNewsList a:hover{
color:#666;
}

.info-title a:hover{cursor:pointer;}


/*サービスページ
--------------------------------------------------------------*/

#service div.btn_goLink a{
color:white;
display:inline-block;
font-size:18px;
padding:8px 80px 8px 10px;
background-color:#0D5FA5;
color:white;
/*font-weight:bold;*/
background-image:url(../images/icon_link.png);
background-size:32px 32px;
background-repeat:no-repeat;
background-position:right 16px center;
border:solid 1px #0D5FA5;
border-radius: 10px;
}

#service div.btn_goLink a:hover{
background-color:#81D0FC;
}

.flex-wrapper {
    display: flex;
}
.fig_l {
    width: 52%;
    margin-right: 0px;
}
.fig_r {
    width: 47%;
    margin-left: 30px;
}
.fig_l img.logo, .fig_r img.logo{
  max-width: 230px;
}
img.screen_image{
  width: 410px;
}
.qa_l {
    width: 50%;
    margin-right: 0px;
}
.qa_r {
    width: 50%;
    margin-left: 30px;
}
.qa_l img,
.qa_r img{
  width: 100%;
}
@media (max-width: 768px) {
.flex-wrapper {
    display: block;
    width: 90%;
    margin: 0 auto;
}
.fig_l {
    margin: 0 auto;
    width: 100%;
    margin-top: 1rem;
}
.fig_r {
    margin: 0 auto;
    margin-top: 1rem;
    width: 100%;
}
.fig_l img, .fig_r img{
  width: 100%;
}
.fig_l img.logo, .fig_r img.logo{
  max-width: 250px;
}
.qa_l,
.qa_r{
  width: 100%;
  margin-top: 1rem;
  margin-left: 0;
}

}

/* Q&A Page
--------------------------------------------------------------*/

dl.qa {
  counter-reset: number 0;
}
dl.qa > dt{
}

dl.qa dt{
  font-size: 1.2rem;
    color: #084e8e;
    margin: 0 0 8px;
  counter-increment: number;
}
dl.qa dt:before{
    content: "Q"counter(number)"." ;
}
dl.qa dd{
  font-size: 1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: 10px;
}
.qa a{
  color: #333333;
}

/* 規約 Page
--------------------------------------------------------------*/
.terms p {
  margin-bottom: 16px;
}
ol.list_jou {
  counter-reset: number 0;
}
ol.list_jou > li{
  font-weight: bold;
  counter-increment: number;
  padding-left: 3rem;
}
ol.list_jou > li:before {
  content: "第" counter(number) "条";
  margin-right: 1rem;
}

ul.list_kou {
  margin-bottom: 30px;
  margin-left: 2rem;
  counter-reset: kou 0;
}
ul.list_kou > li{
  list-style: none;
  counter-increment: kou;

}
ul.list_kou >  li:before {
  content: counter(kou) ".";

}
ul.list_kakko{
  margin-left: 2rem;
}
ul.list_kakko > li{
  list-style: none;
  counter-increment: kakko;

}
ul.list_kakko li:before {
  content: "("counter(kakko) ")";
}
ul.list_disc {
  list-style: disc;
}
ul.list_disc li:before{
  content: "・";
}
ol p {
  margin-left: 2rem;
}

/* Contact Page
--------------------------------------------------------------*/
.contact p{
  margin-bottom: 1em;
  margin-left: 1em;
}
.btnFormWrap {
  text-align: center;
}

.btnFormWrap .btnFormBox {
  text-align: center;
  font-size: 1.2rem;
  margin: 18px 0;
}

.btnFormWrap .btnFormBox li {
  display: inline-block;
  margin: 0 8px;
}

.btnFormWrap .btnFormBox button {
  display: block;
  border: solid 1px #363636;
  width: 180px;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}
#btn_back,
#btn_agree {
    border: 1px solid #333333;
    padding: 10px;
    color: #333333;
}

/* Privacy Page
--------------------------------------------------------------*/
.privacy {
  font-size: 15px;
}
.privacy ol {
    counter-reset: section;
    margin-left: 0rem;
}
.privacy ol > li {
    list-style: none;
}
.privacy ul > li {
    margin-top: 0px;
    margin-left: 2em;
    text-indent: -1em;
}
.privacy ol > li:before {
    content : counters(section, '.') '. ';
    counter-increment : section;
}
.privacy ul {
  list-style: disc;
  /*margin-bottom: 10px;*/
}
.privacy ul li:before{
  content: "・";
}
.privacy a{
  color: #333333;
}
.privacy .contactInfo{
  padding-left: 1em;
}
.privacy .children{
  padding-left: 2em;
}
/* cooparation Page
--------------------------------------------------------------*/
table.cooperationTable {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #333;
  border-collapse: collapse;
}
table.cooperationTable th,
table.cooperationTable td {
  padding: 0.5em 2em;
  border: 1px solid #333;
  vertical-align: top;
}
@media (max-width: 1200px) {
table.cooperationTable {
  width: 100%;
  margin: 0 auto;
  border: none;
}
table.cooperationTable th {
  display: block;
  padding: 0.5em 2em;
  border: none;
  background-color: #f0f0f0;
  text-align: left;
  border-bottom: 1px dotted #CCC;
}
table.cooperationTable td {
  display: block;
  padding: 0.5em 2em;
  border: none;
  border-bottom: 1px dotted #CCC;
  background: #FFFFFF;
}
table.cooperationTable tr:nth-child(odd) td {
  background: #FFFFFF;
}
table.cooperationTable td:last-child {
    border-bottom: 1px solid #333;
}

}
/* hPage
--------------------------------------------------------------*/
/*
#styleguide

詳細ページ内で使用するタイトル・見出し
主に最下層・詳細ページで使用します。
```
<h1 class="hPage01">詳細ページタイトル</h1>
<h2 class="hPage02">中見出し</h2>
<h3 class="hPage03">小見出し</h3>
<h4 class="hPage04">小見出し</h4>
<h5 class="hPage05">小見出し</h5>
<h5 class="hPage06">小見出し</h5>
<h6 class="hPage07">小見出し</h6>
```
*/
.hPage01{
    font-size: 2rem;
    border-bottom: 2px solid #084e8e;
    margin: -5px 0 30px;
}

.hPage02{
	font-size: 1.6rem;
    background: #f0f0f0;
    border-left: 5px solid #084e8e;
    padding: 4px 14px 3px;
    margin: 48px 0 24px;
}
.hPage03{
    font-size: 1.4rem;
    color: #084e8e;
    padding-left: 14px;
    margin: 40px 0 20px;
    position: relative;
}
.hPage03:before {
    content: '';
    display: block;
    width: 5px;
    height: 36px;
    background: #084e8e;
    position: absolute;
    top: 0px;
    left: 0;
}

.hPage04{
	font-size: 1.0rem;
    padding-left: 14px;
    margin: 0 0 16px;
    position: relative;
}
.hPage04:before{
    content: '';
    display: block;
    width: 5px;
    height: 15px;
    background: #292929;
    position: absolute;
    top: 5px;
    left: 0;
}
.hPage05{
	font-size: 1.0rem;
    font-weight: bold;
}
.hPage06{
	font-size: 1.6rem;
    color: #084e8e;
    margin: 0 0 8px;
}
.hPage07{
	font-size: 1.0rem;
	font-weight: bold;
	margin: 0 0 8px;
}
.hPage08{
	font-size: 1.0rem;
    color: #084e8e;
    font-weight: bold;
    margin: 0 0 8px;
}