@charset "UTF-8";

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

/*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 }
}

@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){
    
    /*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; }

}