@charset "UTF-8";
/* ---------------------------------------------------------- */
/* PC                                                                                     */
/* -----------------------------------------------------------*/

/*  フェードインして表示
------------------------------------------------------------- */
#contents {
animation: fadeIn .7s ease 0s 1 normal;
-webkit-animation: fadeIn .7s ease 0s 1 normal;
position: relative;
}
 @keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
 @-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

/*  common
------------------------------------------------------------- */
a.redirect{}
a.redirect_cs{}
a.link-txt{
	color: #333333;
	border-bottom-style: none;
}
a.underline {
	text-decoration: none;
	border-bottom: 1px solid #007aff;
	padding-bottom: 0.1em;
}
a.underline:hover{
	border-bottom-style: none;
}
a.link-btn {
color: #ffffff;
display: inline-block;
position: relative;
padding: 0.4em 2em;
border-radius: 5px;
background-color: #00005c;
}
a.link-btn:after {
font-family: 'FontAwesome';
content: ' \f105';
position: absolute;
top: 50%;
right: 0.6em;
transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
a.link-btn:hover {
color: #FFFFFF;
text-decoration: none;
}
a.link-btn-line {
border-radius: 40px;
color: #007aff;
display: inline-block;
position: relative;
padding: 0.3em 1.8em 0.3em 1.6em;
border: 1px solid #007aff;
font-size: 0.9em;
}
a.link-btn-line:after {
font-family: 'FontAwesome';
content: ' \f105';
color: #007aff;
position: absolute;
top: 50%;
right: 0.6em;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
a.link-btn-line:hover {
color: #FFFFFF;
text-decoration: none;
border-left: 1px solid #007aff;
border-right: 1px solid #0e66a9;
border-bottom: 1px solid #0e66a9;
border-top: 1px solid #0e66a9;
background-color: #007aff;
opacity: 1;
}
a.link-btn-line:hover:after {
color: #FFFFFF;
}
.arw01 {
text-decoration: none;
border-bottom: 1px solid #007aff;
padding-bottom: 0.1em;
}
.arw01:hover {
text-decoration: none;
border-style: none;
}
.arw01:after {
font-family: 'FontAwesome';
content: ' \f105';
}
ul .fa{
margin-right: 0.2em;
color: #666666;
}

/* TXT */
.tCorporate {
color: #12339b;
}
.tGray2{
	color: #c7c7c8;
	}

/*  header  
------------------------------------------------------------- */
header {
	width: 100%;
	background-color: #FFFFFF;
	height: 153px;
	position: fixed;
	z-index: 100;
	transition: 0.3s;
	border-top: 3px solid #00005c;
}
header section{
height: 80px;
margin-bottom: 0px;
}
header .logo {
  height: 49px;
  top: 14px;
  position: absolute;
  /* [disabled]transition: 0.3s; */
  width: auto;
}
header .logo2 {
height: 40px;
top: 20px;
position: absolute;
transition: 0.3s;
right: 0px;
}
header ul#nav-data2{
	position: absolute;
	top: 25px;
	right: 130px;
}
header #nav-data2 li {
display: inline-block;
}
header ul#nav-data2 a{
font-size: 13px;
display: inline-block;
margin-right: 25px;
color: #666666;
}
header ul#nav-data2 li:last-child a{
 	margin-right: 0px;
}
header nav.global-nav ul {
	transition: 0.3s;
	background-color: #f2f2f2;
	text-align: center;
	border-bottom: 3px solid #c7c7c8;
	max-height: 70px;
}
header nav.global-nav ul li {
display: inline-block;
vertical-align: middle;
padding: 1.0em 0em 0.90em;
}
header nav.global-nav ul li a {
font-family: 'Noto Sans Japanese';
color: #333333;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
display: block;
border-right: 1px solid #cccccc;
padding-right: 2.5em;
padding-left: 2.5em;
}
header nav.global-nav ul li:last-child a{
border-right-style: none;
}
header nav.global-nav ul li a:hover,
#user header nav.global-nav ul li:nth-child(1) a, 
#corporate header nav.global-nav ul li:nth-child(2) a, 
#contact header nav.global-nav ul li:nth-child(4) a {
	color: #0f228b;
	text-decoration: none;
	opacity: 1;
}
header.smaller {
height: 100px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
transition: 0.3s;
}
header.smaller section  {
	height: 60px;
	transition: 0.3s;
	}
header.smaller .logo {
	height: 42px;
	top: 9px;
	transition: 0.3s;
}
header.smaller .logo2 {
	height: 33px;
	top: 14px;
	transition: 0.3s;
}
header.smaller  nav.global-nav ul li {
padding: 1em 0em;
}
header.smaller nav.global-nav ul li a {
	font-size: 14px;
	transition: 0.3s;
	}
header.smaller ul#nav-data2{
	top: 13px;
	right: 100px;
	transition: 0.3s;
}
header.smaller ul#nav-data2 a{
	font-size: 11px;
 margin-right: 20px;
	transition: 0.3s;
}

@media all and (-ms-high-contrast:none){
  header nav.global-nav ul li {
padding: 2em 0em 1.75em;
  }
   header.smaller  nav.global-nav ul li {
padding: 1.2em 0em 0.8em;
  }
}

.drawer-hamburger {
display: none !important;
}

/*  footer
------------------------------------------------------------- */
footer {
clear: both;
position: relative;
}
footer small {
color: #333333;
padding-top: 2em;
display: block;
padding-bottom: 2em;
font-size: 0.7em;
font-family: roboto;
text-align: center;
}
footer .footer-block {
background-color: #f0efeb;
border-top: 3px solid #00005c;
z-index: 1;
}
footer section {
padding-top: 2.5em;
padding-bottom: 2.5em;
margin-bottom: 0px;
}
footer ul.footer-link-01{
	margin-bottom: 1em;
	margin-right: 100px;
}
footer ul.footer-link-01 li,
footer ul.footer-link-02 li{
	display: inline-block;
	line-height: 2.5;
}
footer ul.footer-link-01 li a{
font-size: 14px;
border-right: 1px solid #cccccc;
padding-right: 2em;
margin-right: 2em;
color: #666666;
}
footer ul.footer-link-02 li a{
	font-size: 12px;
	color: #666666;
	margin-right: 2em;
}
footer .privacyMark {
position: absolute;
right: 0px;
top: 25px;
}

/* pageTop
---------------------------------------------------------- */
.pageTop {
display: none;
}
.pageTop a {
margin-left: auto;
position: absolute;
right: 10px;
}
.pageTop a img{
width: 52px;
opacity: .8;
}

/*  contents
------------------------------------------------------------- */
#contents {
position: relative;
top: 153px;
margin-bottom: 153px;
transition: 0.3s;
}
#contents.smaller {
top: 50px;
transition: 0.3s;
margin-bottom: 50px;
}

/*  contents-hdr
------------------------------------------------------------- */
#contents-hdr {
height: 130px;
background-position: right center;
background-color: #00005c;
background-size: contain;
background-repeat: no-repeat;
}
#contents-hdr h2.ttl-contents-hdr {
font-family: 'Noto Sans Japanese';
color: #ffffff;
font-weight: 100;
font-size: 36px;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.17);
display: block;
vertical-align: middle;
line-height: 1em;
position: absolute;
top: 44px;
}
@media all and (-ms-high-contrast:none){
#contents-hdr h2.ttl-contents-hdr { 
top: 52px;
}
}

/*  breadcrumbs 
------------------------------------------------------------- */
nav#breadcrumbs {
height: 70px;
}
nav#breadcrumbs ol {
height: 70px;
display: table-cell;
vertical-align: middle;
}
nav#breadcrumbs ol li {
display: inline;
list-style-type: none;
font-size: 13px;
line-height: 1;
color: #cccccc;
}
nav#breadcrumbs span{
color: #cccccc;
}
nav#breadcrumbs a span{
color: #666666;
}
nav#breadcrumbs ol li a {
border-bottom: 1px solid #666666;
padding-bottom: 0.15em;
}
nav#breadcrumbs ol li a:hover {
border-bottom-style: none !important;
text-decoration: none;
}
nav#breadcrumbs ol li:before {
font-family: 'FontAwesome';
content: "\f105";
padding-left: 0.5em;
padding-right: 0.5em;
}
nav#breadcrumbs ol li:first-child:before {
content: "";
}

/*  .h-ttl
------------------------------------------------------------- */
.h-ttl01 {
	text-align: left;
	font-size: 28px;
	font-weight: 100;
	letter-spacing: -0.05em;
	line-height: 1.3em;
	color: #333333;
	background-color: #f2f2f2;
	border-top: 2px solid #00005c;
	padding: 0.8em 20px;
	margin-bottom: 1.5em;
}
.h-ttl02 {
font-weight: 500;
border-bottom: 2px solid #d2dde4;
padding-bottom: 0.8em;
margin-bottom: 1em;
font-size: 1.2em;
}
.h-ttl03 {
font-weight: 500;
letter-spacing: -0.05em;
border: 1px solid #d2dde4;
font-size: medium;
padding: 0.5em 1em;
}
.h-ttl04 {
line-height: 1.3em;
background-color: #f6f7f8;
padding: 0.7em 1em;
margin-bottom: 1em;
font-weight: 500;
color: #02005C;
}
@media all and (-ms-high-contrast:none){
 .h-ttl01 {
	padding: 1.1em 1em 0.7em;
}
 .h-ttl02 {
padding-bottom: 0.3em;
}
 .h-ttl03 {
padding: 1em 1em 0.6em;
  line-height: 1;
}
 .h-ttl04 {
padding: 1.2em 1em 0.8em;
line-height: 1;
}
}
p.copy {
color: #02005C;
font-weight: bold;
}

/*  sec-bg
------------------------------------------------------------- */
.sec-bg01 {
	background-color: #f6f6f6;
}

/*  box-block 
------------------------------------------------------------- */
.box-block {
padding: 1em;
border: 1px solid #bfbfbf;
display: table;
}
.box-block2 {
	padding: 0.8em 1em;
	border: 2px solid #d2dde4;
	background-color: #f3f7f9;
	text-align: left;
}
/*  ul-list,dt-list
------------------------------------------------------------- */
ul.ul-list00{
	margin-left: 1em;
}
ul.ul-list01 li:before,
dl.dl-list01 dt:before{
	content:'・';
}
dl.dl-list01{
	margin-left: 1em;
	margin-bottom: 0.5em;
}
dl.dl-list01 dt{
	display: block;
	float: left;
	clear: both;
	margin-right: 0.3em;
}
dl.dl-list01 dt:after{
	content:' …';
}
dl.dl-list01 dd{
	display: inline-block;
	float: left;
	margin-left: 0px;
}
dl.dl-list01 dd.dl-list01-dd-line2{
line-height: 1.4;
margin-left: 1em;
}

/* dl.dl-list02 */
ul.ul-list02 li{
	text-indent: -1.4em;
	padding-left: 1.5em;
}
ul.ul-list02 li:before{
	font-family: 'FontAwesome';
	content: "\f111";
	color: #c7c7c8;
	padding-right: 0.4em;
}

/* telTable01
---------------------------------------------------------- */
.telTable01 {
border-top: 2px solid #d2dde4;
border-left: 2px solid #d2dde4;
}
.telTable01 th,
.telTable01 td {
padding: .5em;
border-bottom: 2px solid #d2dde4;
border-right: 2px solid #d2dde4;
vertical-align: middle;
text-align: left;
}
.telTable01 td {
font-size: 1.2em;
text-align: center;
}
.telTable01 th {
font-style: normal;
font-weight: 200;
vertical-align: middle;
background-color: #f6f7f8;
line-height: 1.1;
width: 40%;
text-align: center;
}
.telTable01 thead th {
background-color: #999;
}
.telTable01 caption {
caption-side: bottom;
text-align: right;
}
.telTable01 td .notes {
margin-top: -1.5em;
}
.telTable01 .th-font01 {
font-size: 24px;
}
.telTable01 .font01 {
font-size: 48px;
line-height: 1.2;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.telTable01 .font02 {
font-size: 28px;
line-height: 1.3;
}
.telTable01 .num {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.telTable01 .num span.city  {
font-size: 0.85em;
margin-right: 0.3em;
}
.telTable01 .num img {
width: 40px;
vertical-align: middle;
}

/* dataTable01
---------------------------------------------------------- */
.dataTable01 {
border-top: 1px solid #d2dde4;
border-left: 1px solid #d2dde4;
}
.dataTable01 th,
.dataTable01 td {
padding: 1.5em;
border-bottom: 1px solid #d2dde4;
border-right: 1px solid #d2dde4;
}
.dataTable01 th {
	background-color: #f6f7f8;
	text-align: center;
	font-weight: bold;
}
.dataTable01 thead th {
background-color: #999;
}
.dataTable01 caption {
margin-top: 0.2em;
margin-bottom: 0.2em;
}

/* application-block
---------------------------------------------------------- */
ul.ul-application-block {
	/* [disabled]padding-top: 0.5em; */
}
ul.ul-application-block li {
display: block;
width: 48%;
border-top-color: #00005c;
border-top-width: 2px;
float: left;
border-top-style: solid;
}
ul.ul-application-block li dl {
border-right: 2px solid #d2dde4;
border-left: 2px solid #d2dde4;
border-bottom: 2px solid #d2dde4;
}
ul.ul-application-block li dd {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
text-align: center;
}
ul.ul-application-block .h-ttl04 {
padding-top: 1.5em;
padding-bottom: 1.5em;
text-align: center;
}
ul.ul-application-block li:first-child  {
margin-right: 4%;
}


/* ---------------------------------------------------------- */
/* SP                                                                                     */
/* -----------------------------------------------------------*/

@media screen and (min-width:1px) and (max-width:767px) {
 
 .box-block {
width: 100%;
}
 
 
/*  header  
------------------------------------------------------------- */
header,
header.smaller {
height: 60px;
-webkit-box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
 box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
}
header section{
height: auto;
width: 95%;
}
header .logo,
header.smaller  .logo{
height: 43px;
top: 6px;
}
header .logo2,
header.smaller  .logo2{
height: 36px;
top: 12px;
right: 53px;
}
.drawer-hamburger {
display: block !important;
}
.hamburger-icon {
position: absolute;
height: 35px;
right: 16px;
top: 14px;
}
.hamburger-icon img {
width: 40px;
height: 40px;
}
.hamburger-icon {
background-image: url(/uccard/images/hamburger-icon.svg);
background-size: 100%;
background-repeat: no-repeat;
}
.drawer-open .hamburger-icon {
background-image: url(/uccard/images/hamburger-icon-close.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 40% auto;
top: 12px !important;
right: 3px;
}
#drawer-logo-group{
background-color: #ffffff;
border-bottom: 2px solid #c7c7c8;
 }
#drawer-logo-group #logo-group{
width: 90%;
margin-left: auto;
margin-right: auto;
height: 60px;
position: relative;
}
#drawer-logo-group .logo{
height: 38px;
position: absolute;
left: 0px;
top: 9px;
}
#drawer-logo-group .logo2{
height: 37px;
position: absolute;
padding-top: 7px;
right: 0px;
top: 8px;
}
footer.drawer-nav {
background-color: #f2f2f2;
}
nav.drawer-nav ul {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: .8em;
}
nav.drawer-nav ul li {
padding-top: 1em;
padding-right: 0.2em;
padding-bottom: 1em;
display: list-item;
border-bottom: 1px solid #d7d7d7;
}
nav.drawer-nav ul li a,
nav.drawer-nav ul li span{
color: #333333;
font-size: 14px;
display: block;
position: relative;
font-weight: bold ;
}
nav.drawer-nav ul#nav-data li a:before,
nav.drawer-nav ul#nav-data li span:before{
font-family: 'FontAwesome';
content: '\f105';
top: 0;
bottom: 0;
font-weight: normal;
vertical-align: top;
right: 0px;
position: absolute;
}
nav.drawer-nav  ul#nav-data2 li{
border-bottom: 0px solid #d7d7d7;
padding-top: 0.7em;
padding-right: 0.2em;
padding-bottom: 0.7em;
}
nav.drawer-nav  ul#nav-data2 li a{
font-weight: normal;
}

/*  footer
------------------------------------------------------------- */
footer section {
padding-top: 0em;
padding-bottom: 0em;
width: 100%;
}
footer .footer-block{
width: 100%;
background-color: #FFFFFF;
padding-top: 0px;
}
footer .footer-block  li a{
color: #333333;
position: relative;
display: block;
padding-left: 0.5em;
}
#footer-nav-data ul,
#footer-nav-data2 ul,
footer ul.footer-link-01{
width: 95%;
margin-left: auto;
margin-right: auto;
display: block;
}
#footer-nav-data {
background-color: #f0efeb;
}
#footer-nav-data ul li a{
font-weight: bold;
}
#footer-nav-data ul li,
#footer-nav-data2 ul li {
padding-top: 1.2em;
padding-right: 0.2em;
padding-bottom: 1.2em;
display: list-item;
border-bottom: 1px solid #d7d7d7;
}
#footer-nav-data ul li:last-child{
border-bottom-style: none;
}
#footer-nav-data ul a:before{
font-family: 'FontAwesome';
content: '\f105';
top: 0;
bottom: 0;
font-weight: normal;
vertical-align: top;
right: 0px;
position: absolute;
}
footer ul.footer-link-01 li,
footer ul.footer-link-02 li{
display: block;
line-height: 2.5;
}
footer ul.footer-link-01 li a{
border-right-style: none;
color: #999999;
margin-right: 0px;
}
footer ul.footer-link-01 li a:after{
font-family: 'FontAwesome';
content: ' \f105';
}
footer ul.footer-link-02{
border-bottom: 1px solid #d7d7d7;
border-top: 1px solid #d7d7d7;
display: table;
width: 100%;
}
footer ul.footer-link-02 li{
display: table-cell;
text-align: center;
padding-top: 0.7em;
padding-bottom: 0.7em;
border-right: 1px solid #d7d7d7;
width: 33.33%;
}
footer ul.footer-link-02 li:last-child{
border-right-style: none;
}
footer ul.footer-link-02 li a{
font-size: 12px;
color: #999999;
margin-right: 0px;
padding-left: 0px;
}
footer .privacyMark {
position: relative;
margin-top: 1.3em;
margin-right: auto;
margin-left: auto;
display: block;
width: 20vw;
top: 0px;
}
footer small {
font-size: 0.7em;
}
 
/* pageTop
---------------------------------------------------------- */
.pageTop {
z-index: 2; 
position: absolute; 
}
 
/*  contents
------------------------------------------------------------- */
#contents {
position: relative;
top: 60px;
margin-bottom: 4em;
}
 
/*  contents-hdr
------------------------------------------------------------- */
#contents-hdr {
height: 90px;
background-position: 23vw center;
margin-bottom: 2em;
background-size: cover;
}
 #contents-hdr section{
height: 90px;
margin-bottom: 0px !important;
 }
#contents-hdr h2.ttl-contents-hdr {
font-size: 25px;
text-shadow: 0px 0px 10px #101010;
top: 32px;
}
 
/*  .h-ttl
------------------------------------------------------------- */
.h-ttl01 {
font-size: 20px;
padding-left: 0.4em;
padding-right: 0.4em;
}
.h-ttl02 {
font-size: 16px;
}
.h-ttl03 {
 font-size: 16px;
}
p.copy {
width: 100%;
}

 /*  table scroll
---------------------------------------------------------- */
 .scroll table{
margin-bottom: 5px;
font-size: .8em;
}
 .scroll table th,
 .scroll table td {
padding: 1em;
}
 .scroll:before{
  content: "※図がはみ出す場合は左右にスクロールできます";
  font-size: 10px;
  color: #8A8A8A;
 }
	.scroll  p.caption{
		width: 100%;
		text-align: left !important;
		display: block;
	}
.scroll{
	white-space: nowrap;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	-webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar{
 height: 5px;
}
.scroll::-webkit-scrollbar-track{
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
 
	/*  ul-list,dt-list
------------------------------------------------------------- */
ul.ul-list01 li:before,
dl.dl-list01 dt:before{
	content:'';
}
dl.dl-list01 {
	margin-left: 0em;
	margin-bottom: 2em;
}
dl.dl-list01 dt{
	display: block;
	float: none;
	clear: both;
	padding: .3em .5em;
	background-color: #F6F7F8;
	margin-bottom: 0.3em;
	margin-right: 0px;
}
dl.dl-list01 dt:after{
	content:'';
}
dl.dl-list01 dd{
	display: block;
	float: left;
	margin-left: 0.6em;
	margin-bottom: 1.5em;
	margin-right: 0.6em;
}
dl.dl-list01 dd.dl-list01-dd-line2{
	line-height: 1.3;
}

 /* telTable01
---------------------------------------------------------- */
.telTable01 th,
.telTable01 td {
width: 100%;
display: block;
padding: 1em;
}
.telTable01 th {
font-size: 4vw !important;
font-weight: 300;
}
.telTable01 td {
font-size: 4vw;
}
.telTable01 .font01 {
font-size: 8vw !important;
display: block;
width: 100%;
}
.telTable01 .font02 {
font-size: 5vw !important;
display: block;
width: 100%;
}
 
 /* ul-application-block
---------------------------------------------------------- */
 ul.ul-application-block li {
width: 100%;
float: none;
margin-bottom: 2em;
}
 
/*  #sp-breadcrumbs
------------------------------------------------------------- */
#sp-breadcrumbs {
margin-bottom: 0px;
font-size: medium;
}
nav#sp-breadcrumbs-data section{
margin-bottom: 1em;
}
nav#sp-breadcrumbs-data ol {
vertical-align: middle;
font-size: 15px;
margin-left: auto;
margin-right: auto;
display: block;
line-height: 1.2;
text-align: justify;
}
nav#sp-breadcrumbs-data section#breadcrumbs-data{
margin-left: 0px;
margin-right: 0px;
}
nav#sp-breadcrumbs-data ol li {
display: inline;
list-style-type: none;
line-height: 1;
color: #999999;
}
nav#sp-breadcrumbs-data ol li:before {
font-family: 'FontAwesome';
content: "\f105";
padding-left: 0.5em;
padding-right: 0.5em;
}
 nav#sp-breadcrumbs-data ol{
  padding-left: 0.5em;
 }
nav#sp-breadcrumbs-data ol li:first-child:before {
content: "";
padding-left: 0em;
padding-right: 0em;
display: none;
}
#contents-hdr-line {
background-image: -moz-linear-gradient( 0deg, rgb(0,155,149) 0%, rgb(0,108,179) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(0,155,149) 0%, rgb(0,108,179) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(0,155,149) 0%, rgb(0,108,179) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009b94', endColorstr='#0068b5',GradientType=1 ); /* IE6-9 */
height: 10px;
border-bottom-right-radius: 100px;
margin-bottom: 3em;
}
}

@media screen and (max-width:375px) {
a.link-btn-line {
font-size: 4vw;
}
}

@media print {
header {
	position: relative;
}
#contents,#contents.smaller  {
position: relative;
top: 0px;
margin-bottom: 0px;
}
footer section {
	padding-left: 1em;
	padding-right: 1em;
}
footer .privacyMark {
	margin-right: 1em;
}
}