@charset "UTF-8";

/*--------------------------------------------------------------------
	arcface
--------------------------------------------------------------------*/

.pcPagetop, .spPagetop { pointer-events: none; }
.pcPagetop a, .spPagetop a { pointer-events: all; }

/*inqSection*/
.inqSection { text-align: center; }
.inqSection div { text-align: center; padding: 25px 30px 20px; display: inline-block; margin: 40px auto 0; border-radius: 12px; }
.inqSection a { display: inline-block; text-align: center; font-size: 100%; color: #fff; margin: 10px; padding: 10px 30px; border-radius: 10px; background: #1998d6; position: relative; text-decoration: none; transition: opacity .4s; }
.inqSection a::after { position: absolute; content: ""; display: block; right: 12px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px; background-color: #fff; clip-path: polygon(0 0, 0% 100%, 100% 50%); }

/*inqPosSection*/
#inqPosSection { position: fixed; right: 30px; bottom: 40px; opacity: 0; transition: all .4s; }
#inqPosSection a { display: block; width: 310px; transition: opacity .4s; pointer-events: none; }
#inqPosSection a img { width: 100%; }
#inqPosSection.show { opacity: 1; bottom: 60px; }
#inqPosSection.show a { pointer-events: auto; }

/*introSection*/
#introSection { text-align: center; }
#introSection p { font-size: 160%; line-height: 2; margin-top: 60px; }

#introSection ul { display: flex; justify-content: center; }
#introSection ul li { margin: 50px 15px 0; }
#introSection ul li a { width: 240px; display: block; border: 1px solid #297091; padding: 15px 25px 17px; border-radius: 10px; position: relative; transition: opacity .4s; }
#introSection ul li a img { width: 90%; }
#introSection ul li a::after { position: absolute; content: ""; display: block; right: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 7px; background-color: #297091; clip-path: polygon(50% 100%, 0 0, 100% 0); }

/*Arc FACE Home*/
#afHomeSection { text-align: center; padding-top: 160px; }

#afHomeSection #iframeSection { max-width: 750px; width: 90%; margin: 40px auto 0; }
#afHomeSection #iframeSection .iframeOuter { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; }
#afHomeSection #iframeSection .iframeOuter iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*Arc FACE Gate*/
#afGateSection { text-align: center; padding: 40px 0; }
#afGateSection .pName img { margin-top: 20px; }
#afGateSection .pName + div { margin-top: 60px; }

#afGateSection .imgBox3 { display: flex; flex-wrap: wrap; justify-content: space-between; }
#afGateSection .imgBox3 img { width: 47%; margin-top: 30px; border-radius: 10px; }
#afGateSection .imgBox3 img:nth-child(1) { width: 100%; margin-top: 0; }

/*licenseArea*/
.licenseArea { text-align: left; font-size: 90%; margin-top: 60px; }
.licenseArea h5 { font-size: 100%; }
.licenseArea p { font-size: 100%; }
.licenseArea a { margin-top: 5px; display: inline-block; padding-left: 12px; position: relative; }
.licenseArea a::before { position: absolute; content: ""; display: block; left: 0; top: 0.3em; width: 5px; height: 8px; background-color: #297091; clip-path: polygon(0 0, 0% 100%, 100% 50%); }

@media screen and (min-width:640px){
    /*introSection*/
    #introSection ul li a:hover { opacity: 0.7 }

    /*inqSection*/
    .inqSection a:hover { opacity: 0.7; }
    
    /*inqPosSection*/
    #inqPosSection a:hover { opacity: 0.7; }
}

@media screen and (max-width:1000px){
    
    /*introSection*/
    #introSection p { text-align: left; width: 90%; margin: 20px auto 0; font-size: 120%; }
    
    #introSection ul li { margin: 30px 5px 0; }
    #introSection ul li a { width: 160px; padding: 15px 15px 17px; }
    #introSection ul li a img { width: 90%; margin-right: 20px; }

}


@media screen and (max-width:640px){
    
    #footer { padding-bottom: 167px !important;}
    
    /*inqSection*/
    .inqSection div { width: 90%; }
    
    /*inqPosSection*/
    #inqPosSection { bottom: 20px; }
    #inqPosSection a { transition: opacity .4s; pointer-events: none; }
    #inqPosSection.show { opacity: 1; bottom: 40px; }
    #inqPosSection.show a { pointer-events: auto; }
    
    /*Arc FACE Home*/
    #afHomeSection { padding-top: 30px; }
    #afHomeSection #iframeSection { width: 100%; margin-top: 20px; }
    
    /*Arc FACE Gate*/
    #afGateSection { padding: 0; }
    #afGateSection .pName img { margin-top: 0; }
    #afGateSection .pName + div { margin-top: 30px; }
    
    #afGateSection .imgBox3 img { margin-top: 20px; }
    #afGateSection .imgBox3 img:nth-child(1) {  margin-top: 20px; }

}