@charset "UTF-8";

/*
variable
------------------------------*/
:root,* {
    --mono-color:#4E4E56;
    --mono-color-light:#4E4E56;
    --mono-lightness:#ABABB6;
    --base-color:#007AFF;
    box-sizing: border-box;
    --light-gray:#F4F4F6;

/*
*    SVG Icon URL ▼ usage ▼
*
*    .facebook-icon::before,.facebook-icon::after{
*        background: var(--facebook-svg);
*    }
*/
    --weibo-svg    : url('data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48dGl0bGU+d2VpYm88L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTc1LjMzLDM0LjM3QTUuMzgsNS4zOCwwLDAsMCw3MCwzMi42MWEzLDMsMCwwLDEtMi4yNy0uNDEsMi41NywyLjU3LDAsMCwxLTEuMjUtMS44NiwyLjksMi45LDAsMCwxLC40LTIuMjQsMi44NCwyLjg0LDAsMCwxLDEuODYtMS4yOCwxMS41LDExLjUsMCwwLDEsNiwuMjgsMTEuMjQsMTEuMjQsMCwwLDEsNS4wOCwzLjI5LDExLjUxLDExLjUxLDAsMCwxLDIuNzQsNS40NiwxMS4xMywxMS4xMywwLDAsMS0uMzMsNS45MSwyLjk0LDIuOTQsMCwwLDEtMS40OCwxLjcxLDIuODcsMi44NywwLDAsMS0yLjI0LjIsMi45NCwyLjk0LDAsMCwxLTEuNzEtMS40OCwyLjg3LDIuODcsMCwwLDEtLjItMi4yNEE1LjM0LDUuMzQsMCwwLDAsNzUuMzMsMzQuMzdaTTkzLjg0LDQ1LjUzYTMuMzUsMy4zNSwwLDAsMS0xLjcxLDIsMy4yMSwzLjIxLDAsMCwxLTIuNjEuMjEsMy40MiwzLjQyLDAsMCwxLTItMS43MSwzLjM3LDMuMzcsMCwwLDEtLjI2LTIuNjIsMTYuODQsMTYuODQsMCwwLDAtMy41Mi0xNi42QTE2LjM3LDE2LjM3LDAsMCwwLDc2LjI5LDIyYTE3LjMsMTcuMywwLDAsMC04LjcxLS40MywzLjQ3LDMuNDcsMCwwLDEtNC4xMi0yLjY3LDMuMjksMy4yOSwwLDAsMSwuNDgtMi41OSwzLjM1LDMuMzUsMCwwLDEsMi4xOS0xLjQ4LDI0LDI0LDAsMCwxLDEyLjI3LjU4LDIzLDIzLDAsMCwxLDEwLjQ2LDYuNzYsMjMuMjMsMjMuMjMsMCwwLDEsNS42NiwxMS4xOUEyMywyMywwLDAsMSw5My44NCw0NS41M1pNODEuNjIsNjguOGEyNC44NCwyNC44NCwwLDAsMS01LjQ5LDYuODksNDEuODUsNDEuODUsMCwwLDEtOC40Nyw1LjkxLDQ2Ljg1LDQ2Ljg1LDAsMCwxLTExLjM3LDQuMTcsNTguMTgsNTguMTgsMCwwLDEtMTMuNjEsMS41Niw1Nyw1NywwLDAsMS0xMy44My0xLjY4QTQ5LjE2LDQ5LjE2LDAsMCwxLDE2Ljc2LDgxYTI1LjksMjUuOSwwLDAsMS04LjYzLTcuNTksMTcsMTcsMCwwLDEtMy4yNy0xMEEyNi4xNSwyNi4xNSwwLDAsMSw4LjM2LDUxYTU1LjgyLDU1LjgyLDAsMCwxLDkuOTMtMTNxOC41MS04LjUxLDE3LjE4LTExLjg3dDEyLjQuMzVxMy4yNywzLjIxLDEsMTAuNTFhMS41NSwxLjU1LDAsMCwwLDAsMSwuNjIuNjIsMCwwLDAsLjUxLjM1LDIsMiwwLDAsMCwuNzMsMCw1LDUsMCwwLDAsLjY3LS4xN2wuMzEtLjFhMzIuMjYsMzIuMjYsMCwwLDEsMTIuMzctM2MzLjU5LDAsNi4xNSwxLDcuNywzLjA3czEuNSw1LjA5LDAsOWE2LjQ5LDYuNDksMCwwLDEtLjIzLDEsLjUyLjUyLDAsMCwwLC4yMy42MywyLjMyLDIuMzIsMCwwLDAsLjYuMzdsLjg2LjMxYTIyLDIyLDAsMCwxLDUuMTcsMi4zNiwxMy4xNiwxMy4xNiwwLDAsMSw0LDQuMSwxMC41NywxMC41NywwLDAsMSwxLjcxLDUuODZBMTUuMjQsMTUuMjQsMCwwLDEsODEuNjIsNjguOFpNNjMuNTEsNTNBMjQuNzgsMjQuNzgsMCwwLDAsNTMsNDcuNTRhMzguMzEsMzguMzEsMCwwLDAtMTMuOC0xUTI4LDQ3LjY1LDIwLjYzLDUzLjYxVDE0LDY2LjkxYTEzLjE2LDEzLjE2LDAsMCwwLDQuNDgsOC41NUEyNC42NywyNC42NywwLDAsMCwyOC45Myw4MWEzOC4zNSwzOC4zNSwwLDAsMCwxMy44MSwxUTU0LDgwLjg1LDYxLjMyLDc0Ljg5VDY4LDYxLjU4QTEzLjExLDEzLjExLDAsMCwwLDYzLjUxLDUzWk01Mi4zLDY5LjYzYTE0LjQxLDE0LjQxLDAsMCwxLTcuOTUsNy41NCwxNS42OCwxNS42OCwwLDAsMS0xMS4yNy42MSwxMS4zOSwxMS4zOSwwLDAsMS03LjQyLTYuMzdBMTAuNjYsMTAuNjYsMCwwLDEsMjYsNjJhMTQuODUsMTQuODUsMCwwLDEsNy42Mi03QTE1LjkzLDE1LjkzLDAsMCwxLDQ0LjIsNTRhMTEuOTIsMTEuOTIsMCwwLDEsOCw2QTEwLjQ2LDEwLjQ2LDAsMCwxLDUyLjMsNjkuNjNaTTQyLjg0LDYyYTIsMiwwLDAsMC0xLjQ0LDAsMiwyLDAsMCwwLTEuMDguOTNjLS41NywxLS4zNSwxLjc5LjY2LDIuMjZhMi4xLDIuMSwwLDAsMCwxLjQ2LDAsMiwyLDAsMCwwLDEuMS0uOTQsMS41MSwxLjUxLDAsMCwwLC4xOC0xLjMzQTEuNDUsMS40NSwwLDAsMCw0Mi44NCw2MlpNMzcuMSw2NC4zNWE1LjA5LDUuMDksMCwwLDAtMy42NywwLDUuNSw1LjUsMCwwLDAtMywyLjMxLDQuMjEsNC4yMSwwLDAsMC0uNjUsMy40NCwzLjczLDMuNzMsMCwwLDAsMi4xNiwyLjU0LDQuODksNC44OSwwLDAsMCwzLjc1LjEzLDUuNzUsNS43NSwwLDAsMCwzLjE0LTIuMzksNC4xOCw0LjE4LDAsMCwwLC41Ni0zLjQ3QTMuNzYsMy43NiwwLDAsMCwzNy4xLDY0LjM1WiIvPjwvc3ZnPg==');
    --facebook-svg : url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48dGl0bGU+ZmFjZWJvb2s8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTg5LDguNjdIMTIuNGE0LDQsMCwwLDAtNC4xNCwzLjcyVjg5LjI4QTQsNCwwLDAsMCwxMi40LDkzSDUzLjI4VjU3SDQ1LjE0VjQzaDguMTRWMzMuOWMwLTYuOCw1LjczLTEzLDE0LjU5LTEzSDgxLjIxdjE0SDcyLjA2Yy0xLjc3LDAtMi40OS4yNS0yLjQ5LDIuMTF2Nkg4MC4zOGwtLjg2LDE0aC0xMFY5M0g4OWEzLjU3LDMuNTcsMCwwLDAsMy41OS0zLjcyVjEyLjM5QTMuNTYsMy41NiwwLDAsMCw4OSw4LjY3WiIvPjwvc3ZnPg==);
    --twitter-svg  : url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48dGl0bGU+dHdpdHRlcjwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODcuMTUsMzEuODNjMCwuMjgsMCwuNTcsMCwuODVzMCwuNzUsMCwxLjEyYy0uMzksOS4zNC0zLjU2LDMyLjIzLTI0LjI1LDQ2LTkuMTEsNi4wNy0xOS41MSw3LjQtMjcuNDgsNy41N2E0OS42OSw0OS42OSwwLDAsMS0yOC45NS04LjNjMTAuMTQuNzgsMTguMDUtMS44OCwyNi44My03LjY0LTEzLjYyLS43My0xNy4zOS0xMy4yNi0xNy4zOS0xMy4yNmEyMi4yNiwyMi4yNiwwLDAsMCw3LjY1LDBDOSw1NC4xNiw5LDM5LjkzLDksMzkuOTNhNjUuMTUsNjUuMTUsMCwwLDAsOC43NywyLjVjLTEzLjUxLTEwLjc0LTYtMjQuNjMtNi0yNC42M0MyMS42NSwyOC44NywzMy4wNSwzNS4wOSw0OS45MSwzN0ExOC44NywxOC44NywwLDAsMSw4MiwxOS42N2M3LjMyLTEuMzQsMTEuMjctNC41MiwxMS4yNy00LjUyQTE3Ljg5LDE3Ljg5LDAsMCwxLDg1LjksMjUuNTRhMjUuMzUsMjUuMzUsMCwwLDAsOS42LTIuNjNBMTcuODIsMTcuODIsMCwwLDEsODcuMTUsMzEuODNaIi8+PC9zdmc+);
    --insta-svg    : url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkO308L3N0eWxlPjwvZGVmcz48dGl0bGU+aW5zdGFncmFtPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS4zMiwxMy44OGMxMC4xNiwwLDExLjQzLDAsMTUuNDIuMjNhMjcuNTcsMjcuNTcsMCwwLDEsOS4wOCwxLjczLDE4LjQ3LDE4LjQ3LDAsMCwxLDYuNjIsNC4zMiwxOC4yMiwxOC4yMiwwLDAsMSw0LjMxLDYuNjIsMjcuMjksMjcuMjksMCwwLDEsMS43NCw5LjA4Yy4xOCw0LC4yMyw1LjI2LjIzLDE1LjQxczAsMTEuNDMtLjIzLDE1LjQyYTI3LjI5LDI3LjI5LDAsMCwxLTEuNzQsOS4wOEExOS4xLDE5LjEsMCwwLDEsNzUuODIsODYuN2EyNy4yOSwyNy4yOSwwLDAsMS05LjA4LDEuNzRjLTQsLjE4LTUuMjYuMjMtMTUuNDIuMjNzLTExLjQzLDAtMTUuNDItLjIzYTI3LjIyLDI3LjIyLDAsMCwxLTkuMDctMS43NCwxOC4xNCwxOC4xNCwwLDAsMS02LjYyLTQuMzEsMTguMzgsMTguMzgsMCwwLDEtNC4zMi02LjYyLDI3LjgsMjcuOCwwLDAsMS0xLjc0LTkuMDhjLS4xOC00LS4yMi01LjI2LS4yMi0xNS40MnMwLTExLjQyLjIyLTE1LjQxYTI3LjgsMjcuOCwwLDAsMSwxLjc0LTkuMDhBMTkuMjEsMTkuMjEsMCwwLDEsMjYuODMsMTUuODRhMjcuNSwyNy41LDAsMCwxLDkuMDctMS43M2M0LS4xOSw1LjI3LS4yMywxNS40Mi0uMjNabTAsNi43NGMtMTAsMC0xMS4xNywwLTE1LjExLjIyYTIwLjY1LDIwLjY1LDAsMCwwLTYuOTQsMS4yOCwxMi40MSwxMi40MSwwLDAsMC03LjEsNy4xLDIwLjg1LDIwLjg1LDAsMCwwLTEuMjksNi45NGMtLjE4LDQtLjIxLDUuMTMtLjIxLDE1LjExczAsMTEuMTcuMjEsMTUuMTFhMjAuODYsMjAuODYsMCwwLDAsMS4yOSw3LDExLjY1LDExLjY1LDAsMCwwLDIuOCw0LjMsMTEuNDMsMTEuNDMsMCwwLDAsNC4zLDIuNzksMjAuNTksMjAuNTksMCwwLDAsNi45NCwxLjI5YzMuOTQuMTgsNS4xMy4yMiwxNS4xMS4yMnMxMS4xNywwLDE1LjExLS4yMmEyMC42LDIwLjYsMCwwLDAsNi45NS0xLjI5LDExLjM5LDExLjM5LDAsMCwwLDQuMjktMi43OSwxMS42NSwxMS42NSwwLDAsMCwyLjgtNC4zLDIwLjg2LDIwLjg2LDAsMCwwLDEuMjktN2MuMTgtMy45NC4yMi01LjEyLjIyLTE1LjExczAtMTEuMTYtLjIyLTE1LjExYTIwLjg1LDIwLjg1LDAsMCwwLTEuMjktNi45NCwxMS42NSwxMS42NSwwLDAsMC0yLjgtNC4zLDExLjUzLDExLjUzLDAsMCwwLTQuMjktMi44LDIwLjY3LDIwLjY3LDAsMCwwLTYuOTUtMS4yOGMtMy45NC0uMTgtNS4xMi0uMjItMTUuMTEtLjIyWm0wLDExLjQ1YTE5LjIxLDE5LjIxLDAsMSwxLTE5LjIsMTkuMiwxOS4yLDE5LjIsMCwwLDEsMTkuMi0xOS4yWm0wLDMxLjY3QTEyLjQ3LDEyLjQ3LDAsMSwwLDM4Ljg2LDUxLjI3LDEyLjQ3LDEyLjQ3LDAsMCwwLDUxLjMyLDYzLjc0Wk03NS43NywzMS4zMWE0LjQ5LDQuNDksMCwxLDEtNC40OS00LjQ4LDQuNDksNC40OSwwLDAsMSw0LjQ5LDQuNDhaIi8+PC9zdmc+);
    --wechat-svg   : url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48dGl0bGU+d2VjaGF0PC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01NS42OCw1NGEyLjU0LDIuNTQsMCwxLDAsMi41NCwyLjY1QTIuNTgsMi41OCwwLDAsMCw1NS42OCw1NFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MCw0MC41YTMsMywwLDEsMC0uMDgtNi4wOSwzLjE0LDMuMTQsMCwwLDAtMy4wNywzLjA5QTMuMDcsMy4wNywwLDAsMCw1MCw0MC41WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMwLjUzLDM0LjQxYTMsMywwLDEsMC0uMTksNi4wOCwzLjEsMy4xLDAsMCwwLDMuMjEtMi45NEEzLjE0LDMuMTQsMCwwLDAsMzAuNTMsMzQuNDFaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzEuNSw1NEEyLjU0LDIuNTQsMCwwLDAsNjksNTYuMzhhMi41LDIuNSwwLDEsMCw1LC4yMkEyLjUzLDIuNTMsMCwwLDAsNzEuNSw1NFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik04MC4xNyw4LjgzSDIxLjA2QTEyLjY2LDEyLjY2LDAsMCwwLDguNCwyMS41VjgwLjZBMTIuNjYsMTIuNjYsMCwwLDAsMjEuMDYsOTMuMjdIODAuMTdBMTIuNjYsMTIuNjYsMCwwLDAsOTIuODMsODAuNlYyMS41QTEyLjY2LDEyLjY2LDAsMCwwLDgwLjE3LDguODNaTTMzLjM2LDY0LjE3YTQuNzQsNC43NCwwLDAsMC0yLjU2LjQzYy0yLjM3LDEuMzQtNC42NCwyLjg1LTcuMzMsNC41My40OS0yLjIzLjgxLTQuMTksMS4zOC02LjA3QTIuMzEsMi4zMSwwLDAsMCwyMy44LDYwYy04LjE4LTUuNzgtMTEuNjMtMTQuNDItOS0yMy4zMkMxNy4xNCwyOC40NiwyMywyMy40NiwzMSwyMC44NmMxMC44Ny0zLjU1LDIzLjA5LjA3LDI5LjcsOC43YTIwLjI5LDIwLjI5LDAsMCwxLDQuMjQsMTAuNzZjLTYuODEuMzYtMTIuNzQsMi40Mi0xNy41NSw3LjA5YTIwLjg1LDIwLjg1LDAsMCwwLTYuNDcsMTcuNjZDMzguMjIsNjQuNzQsMzUuOCw2NC4zOCwzMy4zNiw2NC4xN1ptNDgsMTEuMThjLTIuMSwxLjg3LTIuODYsMy40LTEuNTEsNS44NmE2LjY4LDYuNjgsMCwwLDEsLjQyLDEuNmMtMi4xNS0xLTQuMTMtMi40LTYuMjQtMi42MnMtNC4zMSwxLTYuNSwxLjIxYTIxLjcyLDIxLjcyLDAsMCwxLTE3LjYzLTUuNzVjLTkuNC04LjY5LTguMDYtMjIsMi44Mi0yOS4xNSw5LjY2LTYuMzMsMjMuODQtNC4yMiwzMC42NSw0LjU3Qzg5LjI3LDU4LjczLDg4LjU3LDY4LjkxLDgxLjMxLDc1LjM1WiIvPjwvc3ZnPg==);

}

.wrapper{height:100vh; overflow: hidden;border-bottom:1px solid var(--mono-color-light);}
.wrapper.bg-grey{background:var(--light-gray);}

.component{
    width:90%;
    margin:0 auto;
    padding:0.7em 0;
}


h1,h2,h3,h4,h5,h6,p{ color:var(--mono-color-light); margin:0.4em 0;}
h2,h3,h4,h5,h6,p{ line-height:1.4em; }

h1{
    text-align:center;
    line-height:2em;
    font-size:8vmin;
}
h2{ font-size:7vmin; }
h3{ font-size:6vmin; }
h4{ font-size:5vmin; }
h5{ font-size:4vmin; }
h6{ font-size:3vmin; }
p{  font-size:4.5vmin;
    text-align:justify;
}

label{
    color:var(--mono-color-light);
    line-height:1.3em;
    font-size:16px;
}


/* button
****************************/
.btn{
    display:inline-block;
    text-align: center;
    vertical-align:bottom;
    padding:0.7em 1em;
    color:#FFF;
    width:100%;
    border-radius:0.4em;
    font-size:15px;
}

.btn-white{
    display:inline-block;
    border:1px solid var(--mono-color-light);
    text-align: center;
    vertical-align:bottom;
    padding:0.7em 1em;
    color:var(--mono-color-light);
    width:100%;
    border-radius:0.4em;
    font-size:15px;
}

.btn-normal,.btn-insta,.btn-twitter,.btn-wechat,.btn-facebook,.btn-weibo{ color:#fff; }

/* btn brand color
****************************/
.btn-normal{   background: var(--mono-color); }
.btn-insta{    background: #3f729b;}
.btn-twitter{  background: #55acee;}
.btn-wechat{   background: #1AAD19;}
.btn-facebook{ background: #3b5998;}
.btn-weibo{    background: #fa7d3c;}

/* btn icon
****************************/
.icon-facebook::before,
.icon-twitter::before,
.icon-insta::before,
.icon-weibo::before,
.icon-wechat::before{
    background-position:50% 050%;
    background-repeat:  no-repeat;
    background-origin: content-box;
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    background-size:100%;
    margin-right:0.6em;
}

.icon-facebook::before{ background: var(--facebook-svg); }
.icon-twitter::before{  background: var(--twitter-svg);  }
.icon-insta::before{    background: var(--insta-svg);    }
.icon-weibo::before{    background: var(--weibo-svg);    }
.icon-wechat::before{   background: var(--wechat-svg);   }





/* form components
****************************/
input,select,textarea{
    color:var(--mono-color-light);
    border:1px solid var(--mono-color-light);
    border-radius:0.4em;
    display:block;
    padding:0.5em;
    width:100%;
    font-size:16px;
    background:#FFF;
}

.wrapper.bg-grey input,
.wrapper.bg-grey select,
.wrapper.bg-grey textarea{
    border:none;
}

textarea{
    resize: vertical;
    height:auto;
}

/* select */
.select::after,.select-half::after{
    content: '\02228';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position:relative;
    top:-1.6em;
    right:0.5em;
    left:calc(100% - 1.5em);
    color:var(--mono-color-light);
}

.component.select,.component.select-split{
    padding-bottom:0 !important;
}


/* radio */
.radio-input{ display: none; }

.radio-input + label{
  padding-left: 1.2em;
  position:relative;
  margin-right: 0.6em;
}

.radio-input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid var(--mono-color-light);
  border-radius: 50%;
  background:#FFF;
}

.radio-input:checked + label{
  color: var(--mono-color);
}

.radio-input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 0.35em;
  left: 0.2em;
  width: 0.6em;
  height: 0.6em;
  background: var(--mono-color);
  border-radius: 50%;
}

input[type="radio"] + label{
    font-weight:bold;
    font-size:1.2em;
}

label + *{
    margin-top:0.3em;
}


/* popup
***************************/

.popup{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    background:rgba(0,0,0,0.8);
    padding:1em;

}

.popup-inner{
    margin:0 auto;
    padding:0.8em;
    background:#FFF;
    border-radius:0.4em;
    max-height:80vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


.popup.active{
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
    -webkit-align-items: center;  -ms-flex-align: center; align-items: center;
}

.popup-inner img{
    width:100%;
}
.popup-inner p{
    font-size:4vmin;
    padding:1em 0;
}
.popup-inner a.btn{
    margin:0.5em 0;
}

a.close{
    padding: 0.2em 0.3em;
    background:#FFF;
    border:1px solid var(--mono-color-light);
    position:absolute;border-radius: 50%;line-height: 1em;
    right:2em;
}
a.close::before{
    content:"\02715";
}



/*
PC コンポーネント
***************************/
@media(min-width:768px){
    .popup-inner{width:90%;}

    a.close{right:calc(10% - 2em);}

    h1{
        font-size:30px;
    }
    h2{
        font-size:24px;
    }
    h3{
        font-size:20px;
    }
    h4{
        font-size:16px;
    }
    h5{
        font-size:14px;
    }
    h6{
        font-size:12px;
    }
    p{
        font-size:16px;
    }



}




/*
View Area コンポーネント
***************************/
.view-area{
    padding:0.5em 2em;
}

.view-area > *{
    color:var(--mono-color);
}

.view-area h2 + h3,
.view-area h3 + h4,
.view-area h4 + h5,
.view-area h5 + h6,
.view-area * + p
{
    margin-top:1em;
}




/*
page
*/
.inner-box{
    width:90%;
}

.bg-white{
    background:#FFF;
}


.under-line{ border-bottom:2px solid var(--mono-lightness); }

.indent{padding-left:1.3em;text-indent:-0.8em;}

.before-dot:before{
    content:"\02022";
    margin-right:0.3em;
}

a[class^="after-"]{
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: space-between;-ms-flex-pack: justify; justify-content: space-between;
    -webkit-align-items: center;  -ms-flex-align: center; align-items: center;
    position:relative;
}

a[class^="after-"] > *{
    width:calc(100% - 2em);
}
a.after-raquo:after{
    content:"\0bb";
    position:absolute;
    right:0.5em;
}

a.next:after{
    content:"\0bb";
    position:absolute;
    right:10%;
}



a.list-item{
    border-bottom:1px solid var(--mono-lightness);
}
a.list-item > p{
    font-size:0.8em;
}

.padding-box{
    padding:5% 10%;
}

.border-box{
    display:inline-block;
    padding:0.3em 2em;
    border:3px solid var(--mono-lightness);
}

.confirm-icon{
    padding:1em;
    background:#1AAD19;
    border-radius: 50%;
    transform:scale(1.5);
}
.confirm-icon:before{
    content:"✔︎";
    color:#FFF;
}

.confirm-h1{
    line-height:1.2em;
    font-size:7vmin;
    font-weight:bold;
    color:#1AAD19;
}