@charset "utf-8";

/* --------------------------------------------------------- */
/* index.css */
/* --------------------------------------------------------- */

/* メイン
----------------------- */
#main{}
#main .char{position:absolute;}
#main .btn{display:flex;flex-wrap:wrap;}
#main .btn a{display:block;}
#main .nolink a{pointer-events:none;}


/* kv ------------------------------ */
#kv{}


/* application ------------------------------ */
#webapp{}
#webapp .char{width:6.4%;margin:-2% 9.8% 0 0;top:0;right:0;}
#webapp .head{width:29.7%;margin:0 auto;padding-top:6.5%;}
#webapp .sub{background:#bac0fb;}
#webapp .btn{width:75.4%;justify-content:center;margin-top:20%;margin-left:0.4%;top:0;left:50%;transform:translateX(-50%);position:absolute;}
#webapp .btn li{width:100%;margin-bottom:1.99%;}
#webapp .btn li:nth-of-type(n+3){width:32.361%;}
#webapp .txt{width:100%;margin-bottom:6.5%;font-size:18px;font-weight:bold;line-height:177%;text-align:center;position:absolute;bottom:0;left:0;}
#webapp .txt + .txt{margin-bottom:7.5%;}
#webapp .txt small{font-size:83%;font-weight:normal;}
#webapp li.txt{color:#d51f1f;position:relative;}


/* application guideline ------------------------------ */
#app{}
#app .char:nth-of-type(1){width:3%;margin:-6.9% 6.5% 0 0;top:0;right:0;}
#app .char:nth-of-type(2){width:5%;margin:8.4% 0 0 4.8%;top:0;left:0;}
#app .head{width:57.8%;margin:0 auto;padding-top:6.6%;}
#app .sub{background:#bac0fb;}
#app .btn{width:75.4%;justify-content:space-between;margin:3.8% 0 0 12.5%;}
#app .btn li{width:48.276%;}
#app .btnhead{width:21.1%;margin:8.6% auto 0%;}
#app .btn2{width:45.4%;margin:1.5% 0 0 27.5%;padding-bottom:7%;}


/* method ------------------------------ */
#method{border-top:none;}
#method .char:nth-of-type(1){display:none;width:9.9%;margin:-7.7% 0 0 6.4%;left:0;z-index:2;}
#method .char:nth-of-type(2){width:7.2%;margin:0 6.8% -3.6% 0;top:auto;bottom:0;right:0;z-index:2;}
#method .head{width:44.3%;margin:0 auto;padding-top:6.7%;}
#method .sub{background:#bac0fb;}
#method .btn{width:100%;justify-content:center;margin:0 0 0 0.4%;padding-bottom:3.7%;}
#method .btn li{width:36.4%;margin:0 1.3% 3.6%;}



@media screen and (max-width: 1000px){
	
/* application ------------------------------ */
#webapp .txt{font-size:1.8vw;}
	
}



@media screen and (max-width: 750px){

/* メイン
----------------------- */
#main .btn{display:block;}


/* application ------------------------------ */
#webapp .head{width:51.6%;padding-top:10.267%;}
#webapp .btn{width:92.534%;margin:32% 0 0 0.534%;}
#webapp .btn li{margin-bottom:2.882%;}
#webapp .btn li:nth-of-type(n+3){width:100%;margin-bottom:2.306%;}
#webapp .txt{margin-bottom:10%;font-size:3.734vw;line-height:150%;}
#webapp .txt + .txt{margin-bottom:10%;}
#webapp .txt small{display:block;margin-top:0.75em;font-size:85%;}
#webapp li.txt{width:calc(100% + 1em);margin-left:-0.25em;}


/* application guideline ------------------------------ */
#app .head{width:51.6%;padding-top:10.534%;}
#app .btn{width:92.534%;margin:5.334% 0 0 4%;}
#app .btn li{width:100%;margin-bottom:2.882%;}
#app .btnhead{width:37.6%;margin-top:6.534%;}
#app .btn2{width:92.534%;margin:3.067% 0 0 4%;padding-bottom:10.667%;}


/* method ------------------------------ */
#method .head{width:76.667%;padding-top:10.534%;}
#method .btn{margin:0 0 0 4%;padding-bottom:7.6%;}
#method .btn li{width:92.534%;margin:0 0 2.134%;}


}