@charset "utf-8";

/* common setting */
html,body,h1,h2,h3,h4,h5,h6,h7,
a,p,div,cpan,ul,li,ul,ol,img,address,
label,input,select,textarea,
form {
   margin:0;
   padding:0;
   border:none;
   text-decoration:none;
   font-weight:normal;
   font-style:normal;
   font-size:18px;
   font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Osaka,sans-serif;
   box-sizing:border-box;
}
ul li,ul ol {
   list-style-type:none;
}

html,body{
   width:100%;
   height:100%;
}

body {
   padding-top:40px;
   position:relative;
}

a {
   font-size:80%;
   color:#00c5b5;
}
a:hover {
   color:#444;
}





#header {
   padding-bottom:5px;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   z-index:9999;
   background-color:#eee;
}
#header .icon {
   position:absolute;
   top:0;
   left:5px;
}
#header .icon img{
   width:40px;
   height:auto;
}

#header ul {
   width:100%;
   height:40px;
   text-align:center;
   font-size:0;
   background-color:#fff;
}
#header li {
   margin:0 10px;
   display:inline-block;
}
#header li a {
   padding:0 10px;
   height:40px;
   line-height:40px;
   display:block;
   font-size:80%;
   color:#888;
}
#header li a:hover {
   color:#000;
}


#footer {
   margin-top:180px;
   margin-bottom:20px;
   font-size:80%;
   text-align:center;
}



#container {
   width:100%;
}


/* AS */
#container .as{
   margin-top:60px;
   text-align:center;
}
#container .as img{
   max-width:100%;
   height:auto;
}

/* top box */
#container-top {
   margin:auto;
   padding:8vw 10vw;
   background-image:linear-gradient(90deg, #2c8ccd, #60b0e6); /*グラデ*/
   color:#eee;

}
#container-top h1 {
   font-size:280%;
   font-weight:bold;
}
#container-top p {
   margin:20px 0;
}

/* WebBoard 主機能 */
#container-characteristics {
   margin:auto;
   padding:4vw 10vw;
   background-image:linear-gradient(90deg, #9fceec, #fff);/*グラデ*/
}
#container-characteristics h2 {
   margin-bottom:30px;
   font-size:160%;
   font-weight:bold;
}
#container-characteristics p {
   margin-bottom:10px;
   font-weight:bold;
}
#container-characteristics li {
  margin-left:20px;
  font-size:90%;
list-style-type:disc;
}


/* WebBoard 連携 */
#container-api {
   padding:4vw 10vw;
}
#container-api h2 {
   margin-bottom:30px;
   font-size:160%;
   font-weight:bold;
}
#container-api .demo {
   margin-top:6vw;
   text-align:center;
}
#container-api .demo a {
   padding:1vw 10vw;
   display:inline-block;
   background-color:#fff;
   border:solid 2px #00c5b5;
   color:#00c5b5;
}
#container-api .demo a:hover {
   border-color:#009384;
   background-color:#00c5b5;
   color:#fff;
}


/*
======================================================================
ソーシャルリンク
*/
#social_link {
   padding:2vw 10vw;
   text-align:center;
}
#social_link img {
   border-radius:50%;
}



/*
======================================================================
*/
#container-sub {
   margin:auto;
   padding:8vw 10vw;
}
#container-sub p {
   line-height:2em;
}
#container-sub h1 {
   margin-bottom:2vw;
   font-size:180%;
   font-weight:bold;
}
#container-sub h2 {
   margin-top:3em;
   padding:20px 10px;
   border-style:solid;
   border-width:1px 1px 0 1px;
   border-color:#dedede;
   background-color:#eee;
   border-radius:0.5vw 0.5vw 0 0;
}
#container-sub .nav {
   padding:20px;
   border-style:solid;
   border-width:1px;
   border-color:#dedede;
   border-radius:0 0 0.5vw 0.5vw;
}
#container-sub .nav a {
   font-size:80%;
}
#container-sub .nav li {
   margin-left:20px;
   list-style-type:square;
}

#container-sub h3 {
   margin-top:5em;
}
#container-sub .design_demo {
   padding:20px;
   border-style:solid;
   border-width:1px;
   border-color:#dedede;
   border-radius:0.5vw;
}
#container-sub .TW_WB_preset3 {
   height:40em;
   overflow:auto;
}
#container-sub #design_slide {
}
#container-sub #design_slide h4 {
   margin-top:3em;
}
#container-sub #design_slide .TW_WB_Slider {
}


@media only screen and (max-width: 481px) {
   #container-top h1 {
       font-size:220%;
   }
}