@charset "UTF-8";

[data-visible="block"] {
    display: block !important;
}

[data-visible="none"] {
    display: none !important;
}

.wrap-api {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6rem 0; background: #eff6ff url('../images/bg-blue-banner.png') no-repeat right bottom;}
.wrap-api .icon {text-align: center;}
.wrap-api .text {margin: 3rem 0; font-family: pb; font-size: 4rem; color: #000000;}

@media screen and (max-width: 768px) {
	.wrap-api .icon img {max-width: 75%;}
    .wrap-api .text {font-size: 3rem;}
}

.ai-layer {display: block; text-align: left; position: fixed; width: 80%; height: auto; max-width: 70rem; padding: 5rem; left: 0; top: 50%; z-index: 200; background: #fff; left: 50%; transform: translate(-50%, -50%);}
.ai-layer .btn-sch-close {position: absolute; right: -3.5rem; top: -3.5rem; width: 7rem; height: 7rem; background: #0599d9 url('../images/btn-sch-close.png') no-repeat center; border-radius: 100%; text-indent: -99999rem; transition: transform .35s;}
.ai-layer .btn-sch-close:hover {transform: rotate(270deg);}
.ai-layer .subject {font-family: pb; font-size: 2.6rem; color: #0a4da1;}
.ai-layer .sub-subject {display: block; margin-top: 2rem; font-family: psb; font-size: 1.8rem; color: #222;}

.black-bg2 {display: none; position: fixed; z-index: 190; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.black-bg2.on {display: block;}

@media screen and (max-width: 768px) {
	.ai-layer { padding: 3rem;}
}

.btn-control .row {display: flex; justify-content: center; margin-top: 5rem;}
.btn01,
.btn02 {display: flex; justify-content: center; align-items: center; min-width: 13rem; height: 5rem; margin: 0 1rem; padding: 0 1.5rem; font-family: pm; font-size: 1.6rem; color: #fff; transition: .35s;}
.btn01 {background: #028ef6;}
.btn01:hover {background: #1e537a;}
.btn02 {background: #fff; border: 1px solid #000000; color: #000000;}