body , html{height:100%}
body{color:#1d1d1d; font-family:'Noto Sans JP',"メイリオ", Meiryo, Osaka, sans-serif}
html {font-size: 62.5%} /* 10px */
a{outline: none}

body {font-size: 1.6rem; letter-spacing:0.5px} /* 16px */
p    {font-size: 1.6rem; letter-spacing:0.5px} /* 16px */
li   {font-size: 1.6rem; letter-spacing:0.5px} /* 16px */
li p {font-size: 1.6rem} /* 16px */

/* 体験デモサイト利用申込：共通：CoctailAI・DocuMakerOffice */
#demo-box h2{margin:30px 0 20px 0; font-size:2.8rem; letter-spacing:2px}
#demo-box h3{margin:50px 0 20px 0; font-weight:500; font-size:2.2rem; color:#1d1d1d;}
#demo-box p{margin:0 0 10px 0}
#demo-box ul{line-height:160%}
#demo-box footer p{margin: 0 auto; padding-bottom: 20px; font-size: 1.5rem}

.demo_flow{display:flex; justify-content:space-between;}
.demo_flow div{padding:5px 25px; background:#f1f1f1; position: relative; border-radius: 5px; width:255px}
.demo_flow div:not(:last-child)::before{position:absolute; content: ''; width: 0; height: 0; border-left:30px solid #888; border-top:30px solid transparent; border-bottom: 30px solid transparent; top: 50%; right: -74px; transform: translate(-50%, -50%);}
.demo_flow dl{font-size: 1.8rem; font-weight: bold;}
.demo_flow dt{color:#db0010; margin-bottom: 10px;}
.demo_flow div:first-child dd {padding-top: 12px;}
.demo_flow dd{margin: 0; text-align: center}

.demo_notes{border:3px solid #cccccc; padding:25px; margin-bottom:50px}
.demo_notes ul{list-style: disc;}
.demo_notes ul li{margin-left:1.5em; margin-bottom:10px;}
.demo_notes ul li:last-child{margin-bottom:0;}

@media print, screen and (min-width: 770px){
#demo-box {margin:0 auto; padding:20px 0 40px 0; width:1080px}

}
@media screen and (max-width: 769px){
#demo-box {margin:0 auto; padding:0 25px;}
#demo-box img{max-width:100%; height:auto;}

.demo_flow{flex-direction: column;}
.demo_flow div:not(:last-child)::before{right: 0; left: 50%; top: 121%; 
	border-bottom: none; 
	border-left:30px solid transparent;
	border-right:30px solid transparent;
	border-top:30px solid #888;}
.demo_flow div:first-child::before{top:128%;}
.demo_flow div{width:auto; padding:5px 25px;}
.demo_flow div:not(:last-child){margin-bottom:60px;}
.demo_flow div:first-child dd {padding-top: 0;}
.demo_flow dd{text-align: center;}

.br_n{display:none}
}

/* 申込フォーム */
#demo_form form{margin-top: 20px}
#demo_form .note01{margin-top: 20px; font-size: 1.6rem}
#demo_form #p_box h3{margin: 0 0 20px 0}
@media print, screen and (min-width: 770px){
#demo_form form{width:1080px}
#demo_form #p_box{width:1040px}
#demo_form .a02{width:663px;}
#demo_form .mf01 button[id=submit]{margin:30px 0 60px 420px;}
.a00, .a01, .a02{width:60%;}
.formbox{padding-bottom:10px}
}
@media screen and (max-width: 769px) {
#demo_form .q00_demo,
#demo_form .q01_demo,{font-weight: bold; font-size: 1.8rem}
#demo_form select{padding:10px 5px; height:45px; font-size: 1.6rem}
#demo_form .mf01 button[id=submit]{margin-bottom:80px}
}

/* CocktailAI 無料体験デモサイト利用申込 */
p#c-ai_nb{margin:30px auto 0 auto; padding:20px; border:3px solid #db0010; font-size: 1.8rem; line-height: 180%; text-align:center; font-weight:bold; color:#db0010}