@charset "utf-8";
/* CSS Document */

/*------------------------
ヘッダー
------------------------*/
header{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
padding: 10px;
background-color: #ffffff;
}
header #headerLogo{
max-width: 200px;
}
/*------------------------
／ヘッダー
------------------------*/



/*------------------------
フッター
------------------------*/
#footLink{
margin: 0 0 30px;
}
#footLink ul{
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 -50px;
}
#footLink ul li{
margin-left: 50px;
}
#footLink ul li a{
position: relative;
display: flex;
align-items: center;
padding: 10px 0 10px 28px;
color: #009b73;
font-size: 87.5%;
}
#footLink ul li a::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 18px;
height: 23px;
background-image: url(../images/api_pdf.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

footer{
background-color: #009b73;
padding: 40px 0;
}
footer #copy{
font-size: 87.5%;
color: #ffffff;
text-align: center;
}

@media screen and (max-width: 999px){
#footLink{
margin: 0 0 20px;
padding: 0 10px;
}
#footLink ul{
display: block;
margin: 0;
}
#footLink ul li{
margin-left: 0;
}
#footLink ul li a{
font-size: 75%;
padding: 10px 0 10px 24px;
}
#footLink ul li a::before{
width: 14px;
height: 18px;
}
footer{
padding: 20px 0;
}
}/*999*/
/*------------------------
／フッター
------------------------*/





#mainContent{
max-width: 800px;
margin: 0 auto;
padding: 100px 0;
}
.contentBox+.contentBox{
margin-top: 100px;
}

@media screen and (max-width: 999px){
#mainContent{
padding: 50px 10px;
}
.contentBox+.contentBox{
margin-top: 50px;
}
}/*999*/





#pageTitle{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
padding: 10px;
background-color: #009b73;
}
#pageTitle h2{
color: #ffffff;
font-size: 150%;
line-height: 1.4;
text-align: center;
}





.txt{
font-size: 87.5%;
}
h3.heading{
border-left: 6px solid #009b73;
padding: 0 0 0 10px;
font-size: 150%;
line-height: 1.4;
margin-bottom: 1em;
}





#apiServiceImage{
background-color: #eeeeee;
padding: 30px;
margin: 40px 0 0;
}
#apiServiceImage figure{
margin: 0 auto;
}
#apiServiceImage .sp{
display: none;
}
#apiServiceBtn{
margin: 40px auto 0;
}
#apiServiceBtn a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #009b73;
border-radius: 10px;
color: #009b73;
background-color: #ffffff;
text-decoration: none;
font-size: 150%;
line-height: 1.4;
padding: 20px 40px;
transition: background 100ms ease;
}
#apiServiceBtn a:hover{
background-color: #dcfff6;
}
#apiServiceBtn a::before{
content: '';
display: block;
width: 30px;
height: 40px;
background-image: url(../images/api_pdf.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-right: 20px;
}
#apiServiceBtn a::after{
content: '';
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url(../images/api_arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
#apiServiceBtn a span{
display: block;
}

@media screen and (max-width: 999px){
#apiServiceImage{
padding: 30px 20px;
}
#apiServiceImage figure{
max-width: 240px;
}
#apiServiceImage .pc{
display: none;
}
#apiServiceImage .sp{
display: block;
}
#apiServiceBtn a{
font-size: 125%;
padding: 20px 36px 20px 20px;
}
#apiServiceBtn a::before{
width: 24px;
height: 32px;
margin-right: 20px;
}
#apiServiceBtn a::after{
width: 16px;
height: 16px;
}
#apiServiceBtn a span{
width: calc(100% - 40px);
}
}/*999*/





#apiAgree dl dt{
font-size: 112.5%;
color: #009b73;
}
#apiAgree dl dd+dt{
padding-top: 20px;
}
#apiAgree dl dd{
font-size: 87.5%;
margin-top: 0.5em;
padding: 0 0 20px;
border-bottom: 1px solid #c8c8c8;
}





#apiFlow ol li{
counter-increment: flow;
}
#apiFlow ol li+li{
margin-top: 20px;
}
#apiFlow ol li.figure+li{
margin-top: 70px;
}
#apiFlow ol li p.title{
position: relative;
padding-left: 1.5em;
}
#apiFlow ol li p.title::before{
content: counter(flow, decimal) ".";
display: block;
position: absolute;
top: 0;
left: 0;
width: 1.5em;
color: #009b73;
}
#apiFlow ol li figure{
margin-top: 10px;
}

@media screen and (max-width: 999px){
#apiFlow ol li.figure+li{
margin-top: 50px;
}
}/*999*/





#apiBtn{
margin: 100px auto 0;
max-width: 300px;
}
#apiBtn a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
text-decoration: none;
color: #ffffff;
background-color: #808080;
padding: 15px 50px;
border-radius: 10px;
text-align: center;
transition: opacity 100ms ease;
cursor: pointer;
}
#apiBtn a:hover{
opacity: 0.7;
}
#apiBtn a::before{
content: '';
display: block;
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
transform: translateY(-50%);
background-image: url(../images/api_close.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

@media screen and (max-width: 999px){
#apiBtn{
margin: 50px auto 0;
}
}/*999*/