@charset "utf-8";
*{ margin:0; padding:0; -webkit-appearance:none; }

.center{ text-align:center; }
.clear{ clear:both; }


/* 共通 */
body{ width:100vw; margin:0 auto; padding:0 0 2rem; text-align:center; -webkit-text-size-adjust:100%; font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }

h1{ font-size:1.35rem; color:#666666; margin:1.5rem 0; padding:0; line-height:120%; }
h2{ font-size:1.2rem; color:#333333; margin:3rem 0 0.75rem; padding:0.5rem 0; background:#E8E8E8; line-height:110%; }
h3{ font-size:1.25rem; color:#333333; margin:0 0 0.75rem; padding:0.5rem 0; line-height:110%; }

p{ text-align:left; margin:0 0 1rem; padding:0; line-height:140%; text-indent:1em; }

label{ font-weight:bold; color:#333333; margin-right:0.5rem; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; }
input{ font-size:1.1rem; padding:0.5rem; border-radius:0.75rem; }
input[type="submit"]{ width:95%; color:#FFFFFF; font-weight:bold; margin:0 0 1.25rem; padding:0.5rem 0; border:none; border-radius:1rem; background:linear-gradient(#39d0f9, #0087cc); -webkit-appearance:none; }
input.main[type="submit"]{ background:linear-gradient(#89bf2b, #55a000);}
input.back[type="submit"]{ width:75%; font-size:0.9rem; background:linear-gradient(#f4cd58, #e07b00); margin-top:2rem; }
input.dev[type="submit"]{ background:dimgray; opacity:0.3; }
input[type="text"]{ width:50%; margin:0 0 2rem; border:3px #CCCCCC solid; }
input[type="password"]{ width:50%; margin:0 0 3rem; border:3px #CCCCCC solid; }
input[type="date"]{ width:50%; margin:0 0 3rem; border:3px #CCCCCC solid; }
input[type="email"]{ width:50%; margin:0 0 3rem; border:3px #CCCCCC solid; }
select{ padding:0.5rem; border-radius:0.75rem; margin:0 0 2rem; border:3px #CCCCCC solid; }
.admin2rem{ margin:2rem 0 0; }
.adminbtn input[type="submit"]{ width:70%; font-size:0.9rem; padding:0.5rem 0; background:#999999; }
.adminbtn input[type="submit"]:disabled{ background:#CCCCCC; }


ul{ list-style-type:none; margin:0 0 1rem; padding:0; text-align:left; }
ul li{ line-height:120%; padding-bottom:0.3rem; padding-left:1rem; }
ul li:before{ content:"■"; margin-left:-1rem; padding-right:0.25rem; color:#CCCCCC; }
ul.note{ color:red; font-size:0.9rem; }
ul.note li:before{ content:"※"; color:red; }

ol{ list-style:none; list-style-position:outside; margin:0rem 0 1rem; padding-left:1.5rem; text-align:left; position:relative; }
ol li{ line-height:120%; padding-bottom:0.5rem; padding-left:0; }
ol li span{ position:absolute; left:0; margin:0; }


table{ margin:0 auto; border-collapse:collapse; }
th{ border:#999999 1px solid; padding:0.25rem; background:#CCCCCC; }
td{ border:#999999 1px solid; padding:0.25rem 0.5rem; line-height:120%; }

#header{ background:#666666; color:#FFFFFF; font-weight:bold; font-size:1.2rem; padding:0.5rem 0; margin-bottom:1rem; }


/* ログイン */
#login{ max-width:640px; margin:0 auto; padding:1.5rem 0.5rem 0; }


/* メインメニュー */
#menu{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#menu .wellcome{ text-align:center; font-size:1.15rem; }


/* お相手情報の入力 */
#input{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }

/* パーソナリティー(個性) */
#partner{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#partner .textbox{ margin-bottom:2rem; }
#partner .talk{ font-size:1.2rem; font-weight:bold; line-height:110%; margin-bottom:0.5rem; }
#partner p{ margin:0.75rem 0 1rem; }

#partner .compatibility{ padding-top:0.25rem; }
#partner .compatibility .yourname,
#partner .compatibility .partnername{ background:#FFFFFF; border:0.1rem #999999 solid; margin:0 auto; padding:0.5rem; width:80%; line-height:100%; }
#partner .compatibility .relationship{ line-height:110%; font-size:1.1rem; font-weight:bold; padding:0.5rem 0; margin:0 auto; }
#partner .compatibility .essence{ display:inline-block; color:tomato; padding:0.5rem 0.7rem 0.5rem 0; margin-right:1rem; width:8rem; }
#partner .compatibility .earrow1{ border-right:0.5rem tomato double; }
#partner .compatibility .earrow2{ border-right:0.25rem tomato solid; position: relative;}
#partner .compatibility .earrow2::after{ content:""; position:absolute; bottom:-0.2rem; right:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-top:0.7rem solid tomato; }
#partner .compatibility .earrow2::before{ content:""; position:absolute; top:-0.2rem; right:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-bottom:0.7rem solid tomato; }
#partner .compatibility .earrow3,
#partner .compatibility .earrow5{ border-right:0.25rem tomato solid; position: relative;}
#partner .compatibility .earrow3::after,
#partner .compatibility .earrow5::after{ content:""; position:absolute; bottom:-0.2rem; right:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-top:0.7rem solid tomato; }
#partner .compatibility .earrow4,
#partner .compatibility .earrow6{ border-right:0.25rem tomato solid; position: relative;}
#partner .compatibility .earrow4::before,
#partner .compatibility .earrow6::before{ content:""; position:absolute; top:-0.2rem; right:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-bottom:0.7rem solid tomato; }
#partner .compatibility .living{ display:inline-block; color:dodgerblue; padding:0.5rem 0 0.5rem 0.7rem; margin-left:1rem; width:8rem; }
#partner .compatibility .larrow1{ border-left:0.5rem dodgerblue double; }
#partner .compatibility .larrow2{ border-left:0.25rem dodgerblue solid; position: relative;}
#partner .compatibility .larrow2::after{ content:""; position:absolute; bottom:-0.2rem; left:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-top:0.7rem solid dodgerblue; }
#partner .compatibility .larrow2::before{ content:""; position:absolute; top:-0.2rem; left:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-bottom:0.7rem solid dodgerblue; }
#partner .compatibility .larrow3,
#partner .compatibility .larrow5{ border-left:0.25rem dodgerblue solid; position: relative;}
#partner .compatibility .larrow3::after,
#partner .compatibility .larrow5::after{ content:""; position:absolute; bottom:-0.2rem; left:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-top:0.7rem solid dodgerblue; }
#partner .compatibility .larrow4,
#partner .compatibility .larrow6{ border-left:0.25rem dodgerblue solid; position: relative;}
#partner .compatibility .larrow4::before,
#partner .compatibility .larrow6::before{ content:""; position:absolute; top:-0.2rem; left:-0.82rem; border-left:0.7rem solid transparent; border-right:0.7rem solid transparent; border-bottom:0.7rem solid dodgerblue; }
#partner .compatibility .essence span,
#partner .compatibility .living span{ font-size:0.9rem; font-weight:normal; }


/* アプリ使用前のHまでの意識 */
#introduction{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; font-size:0.9rem; }
#introduction h2 span{ font-size:1rem; }
#introduction h3 { margin:2rem 0 0; }
#introduction h4 { font-size:1.1rem; text-align:left; margin:1rem 0 0.25rem; }
#introduction table{ margin-bottom:1rem; }
#introduction th{ padding:0.25rem; font-size:0.9rem; }
#introduction td{ padding:0.5rem　0.25rem; }
#introduction .level{ font-weight:bold; }
#introduction .friend{ color:forestgreen; }
#introduction .interest{ color:dodgerblue; }
#introduction .like{ color:mediumorchid; }
#introduction .love{ color:deeppink; }
#introduction p{ margin:0 0 0.5rem; }


/* パスワード変更 */
#pwchange{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#pwchange .passng{ color:red; }
#pwchange label.err{ color:red; }
#pwchange .passok{ margin:3rem 0; font-size:1.15rem; }


/* ログインユーザー追加 */
#adduser{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#adduser .inputng{ color:red; }
#adduser label.err{ color:red; }
#adduser dl{ margin:0 0 2.5rem; }
#adduser dt{ width:6rem; font-size:1.1rem; font-weight:bold; color:#666666; text-align:right; float:left; }
#adduser dd{ font-size:1.1rem; margin:0 0 1rem 7rem; text-align:left; }
#adduser .registok{ font-size:1.15rem; }


/* 登録ユーザー一覧 */
#userlist{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#userlist button{ border:none; background:none; -webkit-appearance:none; }
#userlist .block{ color:red; }
#userlist .demo{ color:darkorange; }


/* 登録ユーザー情報詳細 */
#user{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#user dl{ margin:0 0 2.5rem; }
#user dt{ width:6rem; font-weight:bold; color:#666666; text-align:right; float:left; }
#user dd{ margin:0 0 1rem 7rem; text-align:left; }
#user .block{ color:red; }
#user .demo{ color:darkorange; }


/* 登録ユーザー情報変更 */
#userchange{ max-width:640px; margin:0 auto; padding:0 0.5rem 0; }
#userchange .inputng{ color:red; }
#userchange label.err{ color:red; }
#userchange dl{ margin:0 0 2.5rem; }
#userchange dt{ width:6rem; font-weight:bold; color:#666666; text-align:right; float:left; }
#userchange dd{ margin:0 0 1rem 7rem; text-align:left; }
#userchange .registok{ font-size:1.15rem; }