@charset "UTF-8";

/* --------------------------------------------------
 Base
-------------------------------------------------- */
body,ol,ul,dl,li,dt,dd,table,th,td,input,textarea,select,h1,h2,h3,h4,h5,h6{
color: rgb(68,68,68);
font-size:12px;
font-weight:normal;
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; /* Gothic */
font-weight:500;
letter-spacing:0;
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
}

body{
min-width:320px;
line-height:1.5;
font-size:100%;
word-wrap:break-word;
position:relative;
overflow-x:hidden;
}

@media screen and (max-width: 767px) {
body{
font-size:85%;
}
}

img{
max-width:100%;
vertical-align:middle;
}

input{
padding:5px 8px;
}

textarea{
padding:3px;
}

ul > li{
list-style-type: none;
}

ol{
margin:0px 0px 0px 21px;
}

ol > li{
list-style:decimal outside;
margin:0px 0px 3%;
}

a:link,
a:visited{
color: rgb(68,68,68);
text-decoration: underline;
outline:0;
}

a:hover,
a:active{
color:rgb(1,88,162);
text-decoration:none;
}

em{
font-style:normal;
font-weight:bold;
color:#4f2b14;
}

strong{
font-style:normal;
font-weight:bold;
}

input[submit]{
cursor: pointer;
}

/* --------------------------------------------------
 Wrapper
-------------------------------------------------- */
#wrapper{
}

#header{
width: 100%;
}

#header #gNav{
background-color:#0158a2;
}

#header #gNav.fixNav{
width:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}

#header #gNav > ul{
letter-spacing:-0.4em;
text-align:center;
}

#header #gNav > ul > li{
letter-spacing:normal;
text-align:left;
padding:15px 20px;
display:inline-block;
}

#header #gNav > ul > li > a{
font-size:140%;
color:#fff;
text-decoration:none;
display:block;
transition:all 200ms ease-in-out;
}

#header #gNav > ul > li > a:hover{
color:#b8d0e5;
}

.headerBar{
width: 100%;
max-width: 1000px;
padding: 7px 1%;
margin: 0 auto;
box-sizing: border-box;
background-color: #fff;
}

.headerBar a{
text-decoration: none;
}

.headerBar .ttl{
float: left;
}

.headerBar .ttl img{
float: left;
padding-top: 5px;
}

.headerBar .ttl .txt{
float: left;
line-height: 50px;
font-size: 120%;
margin-left: 10px;
}

.headerBar .ttl .txt2{
float: left;
line-height: 58px;
font-size: 120%;
margin-left: 10px;
}

.headerBar .ttl .txt3{
float: left;
line-height: 29px;
font-size: 120%;
margin-left: 15px;
}

.headerBar .ttl .txt3 .txtStyle1{
font-size: 160%;
font-weight: bold;
color: rgba(1, 88, 162, 1);
letter-spacing: 1px;
}

.headerBar .ttl .txt br{
display: none;
}

.headerBar .btnBlc{
padding-top: 20px;
margin-right:15px;
float: right;
}

.headerBar .btnBlc a{
text-align:center;
font-size: 85%;
font-weight:bold;
color:#0158a2;
border:1px solid #0158a2;
padding:5px 20px;
box-sizing:border-box;
text-decoration:none;
display:block;
}

.headerBar .detBlc{
position: relative;
display: table;
float: right;
height: auto;
}

.headerBar .detBlc > a{
display: table-cell;
vertical-align: middle;
margin-right: 2%;
}

#headTxt{
width: 100%;
max-width: 1000px;
padding: 1%;
margin: 0 auto;
box-sizing: border-box;
}

#headTxt a{
text-decoration: none;
}

#headTxt > h1{
float: left;
font-size: 80%;
}

#headTxt > span{
float: right;
font-size: 80%;
}

#headerMain{
width: 100%;
padding: 0;
box-sizing: border-box;
}

#headerMain{
text-align: center;
background: url(../img/common/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.top{
text-align: center;
background: url(../img/index/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.howto{
text-align: center;
background: url(../img/howto/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.catagory{
text-align: center;
background: url(../img/catagory/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.faq{
text-align: center;
background: url(../img/faq/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.disclaimer{
text-align: center;
background: url(../img/disclaimer/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.privacy{
text-align: center;
background: url(../img/privacy/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.company{
text-align: center;
background: url(../img/company/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}


#headerMain.inquiry{
text-align: center;
background: url(../img/inquiry/cover_01.jpg) no-repeat top right rgb(255,255,255);
background-size: cover;
}

#headerMain.post_inquiry{
text-align: center;
background: url(../img/post_inquiry/cover_01.jpg) no-repeat top right rgb(255,255,255);
background-size: cover;
}

#headerMain.bridge{
text-align: left;
background: url(../img/bridge/cover_02.jpg) no-repeat top right rgb(255,255,255);
background-size: cover;
}

#headerMain.enduser{
text-align: center;
background: url(../img/end_user/cover_01.jpg) no-repeat top right rgb(255,255,255);
background-size: cover;
}

#headerMain.postcompany{
text-align: center;
background: url(../img/post_company/cover_01.jpg) no-repeat top right rgb(255,255,255);
background-size: cover;
}

#headerMain.register{
text-align: center;
background: url(../img/register_selection/cover_01.jpg) no-repeat center top rgb(255,255,255);
background-size: cover;
}

#headerMain.appCompany{
text-align: center;
background: url(../img/app_company/cover_01.jpg) no-repeat center center rgb(255,255,255);
background-size: cover;
}

#headerPagem{
position: relative;
width: 100%;
max-width: 1000px;
height: 450px;
box-sizing: border-box;
margin: 0 auto;
}

.bridge > #headerPagem{
height: auto;
}

#headerPagem > ul{
position: absolute;
width: 230px;
top: 5%;
right: 1%;
}

#headerPagem > ul > li > a{
float: left;
text-align: center;
list-style-type: none;
width: 48%;
font-size: 100%; 
font-weight: bold;
color: rgb(255,255,255);
border: 1px solid rgb(255,255,255);
padding: 2%;
margin: 0 1%;
box-sizing: border-box;
text-decoration: none;
}

#headerPagem > .ttlTop {
padding-top: 8%;
}

#headerPagem > .ttlTop > img{
width: 160px;
}

#headerPagem > .ttlTop > h1{
font-size: 340%;
font-weight: bold;
color: rgb(255,255,255);
}

#headerPagem > .ttlTop > h2{
font-size: 210%;
font-weight: bold;
color: rgb(255,255,255);
}

#headerPagem > .ttlBridge {
padding: 4%;
}

#headerPagem > .ttlBridge > img{
width: 180px;
vertical-align: top;
}

#headerPagem > .ttlBridge > h1{
display: inline-block;
width: 70%;
font-size: 170%;
font-weight: bold;
color: rgb(255,255,255);
margin-left: 3%;
padding: 2% 0;
}

@media screen and (max-width: 1200px) {
#header #gNav{
display:none;
}
}

@media screen and (max-width: 850px) {
#headerPagem > .ttlBridge {
    padding-top: 8%;
}

#headerPagem > .ttlBridge > h1{
font-size: 160%;
}
}

@media screen and (max-width: 768px) {
#headerPagem > .ttlBridge{
text-align: center;
}

#headerPagem > .ttlTop > h1{
font-size: 270%;
}

#headerPagem > .ttlTop > h2{
font-size: 180%;
}

#headerPagem > .ttlBridge > h1{
display: block;
width: 100%;
font-size: 180%;
margin-left: 0;
}

#headerPagem > ul {
width: 150px;
}

#headerPagem > ul > li > a{
width: 100%;
margin: 5% 0;
padding: 6% 4%;
}

.headerBar .ttl .txt3{
font-size: 110%;
}
}

@media screen and (max-width: 650px) {
.headerBar .ttl .txt3{
font-size: 100%;
}

.headerBar .btnBlc{
padding-top: 10px;
padding-left: 1%;
padding-right: 1%;
margin-right: 0;
float: none;
clear: left;
}

.headerBar .btnBlc a{
padding-top:10px;
padding-bottom:10px;
}
}

@media screen and (max-width: 600px) {
#headTxt{
padding: 2%;
}

#headTxt > h1,
#headTxt > span{
font-size: 90%;
}

#headerPagem{
padding-top: 10%;
height: 350px;
}

#headerPagem > .ttlTop > h1{
font-size: 250%;
}

#headerPagem > .ttlTop > h2{
font-size: 160%;
}

#headerPagem > ul {
width: 100%;
top: 0;
right: 0;
}

#headerPagem > ul > li > a{
float: left;
width: 46%;
margin: 2% 2% 0 2%;
padding: 4% 3%;
box-sizing: border-box;
}
}

@media screen and (max-width: 530px) {
#headerPagem > .ttlBridge > h1{
font-size: 170%;
}

.headerBar .ttl .txt3 .txtStyle1{
letter-spacing: 0;
}
}

@media screen and (max-width: 480px) {
#headTxt{
font-size: 80%;
padding: 4% 2%;
}

#headerPagem{
padding-top: 20%;
}

#headerPagem > .ttlTop > h1{
font-size: 200%;
}

#headerPagem > .ttlTop > h2{
font-size: 120%;
}

#headerPagem > .ttlBridge > h1{
font-size: 125%;
}

.headerBar .ttl .txt{
line-height: 25px;
font-size: 100%;
}

.headerBar .ttl .txt2{
line-height: 58px;
font-size: 100%;
}

.headerBar .ttl .txt br{
display: block;
}

.headerBar .ttl .txt3{
font-size: 90%;
margin-left: 10px;
}

.headerBar .ttl .txt3 .txtStyle1{
font-size: 130%;
}
}

@media screen and (max-width: 380px) {
.headerBar .ttl .txt3{
font-size: 85%;
}

.headerBar .ttl .txt3 .txtStyle1{
font-size: 110%;
}	
}

@media screen and (max-width: 360px) {
#headerPagem{
padding-top: 20%;
}

#headerPagem > .ttlTop > h1{
font-size: 180%;
}

#headerPagem > .ttlTop > h2{
font-size: 100%;
}

#headerPagem > .ttlBridge > h1{
font-size: 110%;
}
}


input.pure-toggle{
display:none;
}
.gNavi{
display:none;
}

@media screen and (max-width: 1200px) {
input.pure-toggle{
display:block;
}
.gNavi{
background-color: #0158a2;
padding-top: 12px;
display:block;
}

.gNavi .ttl{
background-color: #fff;
text-align: center;
padding: 2% 0;
}

.gNavi .listNavi{
background-color: #fff;
border-top: 4px solid #0158a2;
border-bottom: 4px solid #0158a2;
-webkit-box-shadow: 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1);
  -moz-box-shadow: 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1);
  box-shadow: 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1);
margin-bottom: 7%;
}

.gNavi .listNavi li{
display: block;
border-bottom: 1px solid #0158a2;
}

.gNavi .listNavi a{
display: block;
font-size: 120%;
color: #0158a2;
text-decoration: none;
padding: 4% 2%;
}

.gNavi .listNavi .listEndu{
display: block;
text-align: center;
}

.gNavi .listNavi .listEndu .enduserBtn{
background-color: #0158a2;
width: 80%;
font-size: 120%;
color: #ffffff;
border-radius: 5px;
padding: 3% 2%;
margin: 2% auto;
}

.gNavi .listNavi .listEndu .enduserBtn.colorOrange{
background-color: #F16621;
}

.gNavi .listNavi .listClose{
display: none;
text-align: center;
line-height: 25px;
border-top:8px solid #0158a2;
}
}

@media screen and (max-width: 641px) {
.gNavi .listNavi .listClose{
display: block;
}

.pure-toggle-label.gclose{
text-align: center;
content:"";
display: block;
width:100%;
height: 25px;
background-color: #ffffff;
padding: 2% 0;
}

.pure-toggle-label.gclose:after {
display: none;
}

.pure-toggle-label.gclose .txt{
position: relative;
line-height: 25px;
font-size: 120%;
font-weight: bold;
color: #0158a2;
}

.pure-toggle-label.gclose .txt:before {
position: absolute;
display: block;
content: "";
width: 25px;
height: 25px;
background: url(../img/common/x.png) no-repeat center center rgb(255,255,255);
background-size: 20px auto;
bottom: -4px;
left: -28px;
}
}


#footer{
width: 100%;
}

#footer a{
text-decoration: none;
}

#footer > ul{
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

#footer > ul > li{
float: left;
} 

#footer > ul > li:nth-child(1){
width: 65%;
padding-left: 4%; 
box-sizing: border-box;
margin-bottom: 2%;
} 

#footer > ul > li:nth-child(2){
width: 35%;
text-decoration: none;
padding-right: 4%; 
box-sizing: border-box;
} 

#footer > ul > li:nth-child(2) > a > div{
position: relative;
text-align: center;
width: 250px;
height: 55px;
line-height: 55px;
color: rgb(255,255,255);
background-color: rgb(1,88,162);
}

#footer > ul > li:nth-child(2) > a > div:after{
position: absolute;
content: '^';
width: 10px;
height: 10px;
color: transparent;
background: url('../img/common/list.png') no-repeat top left;
top: 25px;
left: 20px;
}

#footer > ul > li:nth-child(2) > a > div.btnPublicity{
margin-top:5px;
}

.telTxt{
font-size: 100%;
color: rgb(68,68,68);
}

.telTxt > span{
font-size: 150%;
color: rgb(1,88,162);
font-weight: bold;
}

.telTTl{
display: block;
}

.telTxt > span.telNum{
font-size: 230%;
font-weight: bold;
}

.telTxt > span.telNum a{
text-decoration: none;
color: rgb(1,88,162);
}

.detailTxt{
padding: 0 6%;
}

#copyRight{
height: 40px;
font-size: 80%;
background-color: rgb(242,242,242);
}

#copyRight > p{
text-align: center;
width: 100%;
line-height: 40px;
color: rgb(68,68,68);
margin: 0;
}

@media screen and (max-width: 768px) {
#footer > ul > li{
float: none;
width: 100% !important;
margin: 0;
padding: 0 2%;
}

#footer > ul > li:nth-child(1){
text-align: center;
padding: 0;
margin-bottom: 3%;
}

#footer > ul > li:nth-child(2){
width: 100%;
padding: 0;
}

#footer > ul > li:nth-child(2) > a > div{
width: 70%;
text-align: center;
margin: 2% auto;
}
}