/*i-room*/
/*▼共通■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/
body{width:100%; font-size:16px; text-align:left; padding:5px 10px 10px 10px; background-color:#f0f0f0;
font-family: "Noto Sans JP", "メイリオ", sans-serif;
user-select:auto; 
-webkit-user-select:auto;
-moz-user-select:auto;
-khtml-user-select:auto;
-webkit-user-drag:auto; 
-khtml-user-drag:auto;
}
input[type=checkbox],[type=radio]{width:50px; height:50px; border:38px; vertical-align:-10px;}
/*input[type=text]{width:50%; height:25px; margin:2px;}*/
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;   /* パディングを幅に含める（意図しないはみ出しを防ぐ） */
  overflow-wrap: anywhere;  /* 長い語や記号でもどこでも折り返す（強制折返し） */
}
/*▲共通■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/

/*▼スマホ用(767px以下)■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/
#top{width:800px; margin:25px auto; background-color:#fff; padding:15px 10px; text-align:center; border:1px solid #ccc;}
#fixed-btn{position:fixed; top:5%; right:10%;}
img{width:99%;}
input.hn{width:70px;}
input.hne{width:100px;}
input.lne{width:240px;}
.type_text{height:25px; margin:2px;}
.gzipsize{width:400px;}
.sen{border-top:1px solid #000080;}
.changefile{text-align:center;}
.passbtn{border:1px blue solid; font-size:32px;}
.cnt{text-align:center;}
.chatarea{width:95%; height:1400px; background-color:white; overflow:hidden;}
.tfile{max-width:140px; height:auto; display:inline-block;}
.aka{color:red;}
.ao{color:blue;}
.usuiao{color:#2C7CFF;}
.red{color:red;font-weight:bold;}
.blue{color:blue; font-weight:bold;}
.topf2{font-size:17px;}
.topf3{font-size:27px;}
.hne{width:100px;}
.playbtn{color:blue;}
.width_rate{width:90%;}
.bun{font-size:45px; font-weight:bold; text-align:center;}
.btn_sentaku{zoom:315%; text-align:center;}
.room_gzu{width:100%; text-align:center;}
.question_str{margin:15px auto; width:95%; height:auto; padding:15px; border-bottom:1px solid #666; text-align:left; font-size:35px; color:#000080; word-wrap:break-word;}
.topf0{font-size:65px;}
.topf1{font-size:54px;}
.posi{zoom:80%; margin:25px 10px 25px 10px;}

.new_room{font-size:45px; text-align:center;}
.bunin{font-size:45px;}
.bunin_s{font-size:36px;}
.chat_time{font-size:27px;}

.btnin{zoom:270%;}
.btnin_chat{zoom:270%; margin:1px 0;}
.btnin_l{zoom:270%;}
.btnin_s{zoom:180%;}
.btnin_list{zoom:210%;}

.futoji{font-size:35px; color:#0000FF; font-weight:bold;}
.hosoji{font-size:35px; color:#0000FF;}
.bigfutoji{font-size:45px; color:#0000FF; font-weight:bold;}
.nor{font-size:32px;}
.openbtn{zoom:315%;}
.border-s{border:solid 1px #00c; border-collapse:collapse; word-wrap:break-word; overflow-wrap:break-word; font-size:32px; background-color:#cccccc;}
.border-s td{border:solid 1px #00c; word-wrap:break-word; overflow-wrap:break-word; font-size:32px;}

.border-d{border:solid 1px #00c; word-wrap:break-word; overflow-wrap:break-word; font-size:32px; border-top:hidden; border-collapse:collapse;}
.border-d td{border:solid 1px #00c; word-wrap:break-word; overflow-wrap:break-word; font-size:32px; border-top:hidden;}

/*room_list*/
.td_haba1{width:100px;}
.td_haba2{width:130px;}
.td_haba3{width:390px;}

/*user_room_list*/
.td_haba_u1{width:160px;}
.td_haba_u2{width:100px;}
.td_haba_u3{width:130px; height:85px;}
.td_haba_u4{width:400px; white-space:normal; word-wrap:break-word; word-break:break-all; overflow-wrap:break-word;}
.td_haba_u5{width:240px;}

.td_haba_u4 span {display:block;}

.dltbtn{height:30px; font-size:13px; color:red;}
.posi2{zoom:52%; margin:20px 10px;}
.sen_blue{border:solid 0.5px blue;}

.enter-btn{font-size:340%; text-align:center; border:0; border-radius:7px; transition:transform 0.2s ease;}
.enter-btn{background:linear-gradient(#0000AA,#0000FF); text-decoration:none; color:#fff; width:520px; padding:15px 15px; margin:15px 20px; text-align:center; display:inline-block;}
.enter-btn:hover{background:linear-gradient(#005FFF,#BAD3FF); text-decoration:none;}
.enter-btn:active{transform:translateY(2px);}

.new-btn{font-size:340%; text-align:center; border:0; border-radius:7px; transition:transform 0.2s ease;}
.new-btn{background:linear-gradient(#AA0000,#FF0000); text-decoration:none; color:#fff; width:520px; padding:15px 15px; margin:15px 20px; text-align:center; display:inline-block;}
.new-btn:hover{background:linear-gradient(#FF0461,#FFBEDA); text-decoration:none;}
.new-btn:active{transform:translateY(2px);}

.user-btn{font-size:340%;text-align:center; border:0; border-radius:7px; transition:transform 0.2s ease;}
.user-btn{background:linear-gradient(#007700,#009900); text-decoration:none; color:#fff; width:520px; padding:15px 15px; margin:15px 20px; text-align:center; display:inline-block;}
.user-btn:hover{background:linear-gradient(#009900,#00EE00); text-decoration:none;}
.user-btn:active{transform:translateY(2px);}

.dr-btn{font-size:340%; text-align:center; border:0; border-radius:7px; transition:transform 0.2s ease;}
.dr-btn{background:linear-gradient(#939393,#999999); text-decoration:none; color:#fff; width:520px; padding:15px 15px; margin:15px 20px; text-align:center; display:inline-block;}
.dr-btn:hover{background:linear-gradient(#888888,#DDDDDD); text-decoration:none;}
.dr-btn:active{transform:translateY(2px);}

.cafe-btn{font-size:340%;text-align:center; border:0; border-radius:7px; transition:transform 0.2s ease;}
.cafe-btn{background:linear-gradient(#FF6928,#FF773E); text-decoration:none; color:#fff; width:520px; padding:15px 15px; margin:15px 20px; text-align:center; display:inline-block;}
.cafe-btn:hover{background:linear-gradient(#FF8856,#FFDBC9); text-decoration:none;}
.cafe-btn:active{transform:translateY(2px);}

/*カフェ画像ボタンにする時*/
a.cafe-btn {width:100%; max-width:520px; margin:15px auto; display:inline-flex; align-items:center; justify-content:center; padding:21px 16px; border-radius:7px;
	overflow:hidden; font-size:3.5rem; font-family:"Noto Sans JP", "メイリオ", sans-serif; text-decoration:none; color:#fff; position:relative; background:none;}
a.cafe-btn img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:7px;}
a.cafe-btn .cafe-text {position:relative; z-index:1; font-size:1em; font-weight:normal; line-height:1.2; white-space:nowrap; text-shadow:0 0 6px #000; pointer-events:none;}
a.cafe-btn:hover img {filter:brightness(1.15);}

.pc_area{display:none;}
.mobile_area{display:block;}
.mobile_br{display:block;}

.kakusu{color:#FFF; padding:10px 5px; border:none; background:#0000FF; cursor:pointer; transition:0.2s;}
.kakusu:hover {background:rgba(0, 68, 204, 0.8);}

.leave{color:#fff; padding:6px 8px; border:2px solid #FF3300; background:#FF3300; border-radius:5px; font-weight:Normal; cursor:pointer; font-size:15px; box-shadow:0 2px 0 #ca1c30;}
.leave:hover{background:#fff; color:#ca1c30; transition:all 0.3s ease;}
.leave:active{box-shadow:none; transform:translateY(4px);}

.reload{color:#fff; padding:6px 8px; border:2px solid #0066FF; background:#0066FF; border-radius:5px; font-weight:Normal; cursor:pointer; font-size:15px; box-shadow:0 2px 0 #3333FF;}
.reload:hover{background:#fff; color:#3333FF; transition:all 0.3s ease;}
.reload:active{box-shadow:none; transform:translateY(4px);}

.allchat{color:#fff; padding:6px 8px; border:2px solid #FF6600; background:#FF6600; border-radius:5px; font-weight:Normal; cursor:pointer; font-size:15px; box-shadow:0 2px 0 #FF4500;}
.allchat:hover{background:#fff; color:#FF4500; transition:all 0.3s ease;}
.allchat:active{box-shadow:none; transform:translateY(4px);}

.file-input{display:none;}

/*緑*/
.push_on{display:inline-block; padding:6px 11px; background:#009900; color:white; border-radius:5px; border:none; cursor:pointer; font-size:15px; font-weight:normal; font-family:inherit; outline:none; transition:transform 0.2s ease;}
.push_on:hover{background:#008000;}
.push_on:active{transform:translateY(2px);}

/*青*/
.bpush_on{display:inline-block; padding:6px 11px; background:#4A90C2; color:white; border-radius:5px; border:none; cursor:pointer; font-size:15px; font-weight:normal; font-family:inherit; outline:none; transition:transform 0.2s ease;}
.bpush_on:hover{background:#3F7FB0;}
.bpush_on:active{transform:translateY(2px);}

/*青(スマホ 縦長)*/
.blpush_on{display:inline-block; padding:16px 5px; background:#4A90C2; color:white; border-radius:5px; border:none; cursor:pointer; font-size:17px; font-weight:normal; font-family:inherit; outline:none; transition:transform 0.2s ease;}
.blpush_on:hover{background:#255D87;}
.blpush_on:active{transform:translateY(2px);}

/*グレー*/
.push_off{display:inline-block; padding:6px 11px; background:#999999; color:white; border-radius:5px; border:none; cursor:pointer; font-size:15px; font-weight:normal; outline:none; transition:transform 0.2s ease;}
.push_off:hover{background:#888888;}
.push_off:active{transform:translateY(2px);}

.image_link{display:block; border:blue solid 1px; cursor:zoom-in;}
.image_link img{transition:0.3s; display:block; width:100%;}
.image_link:hover img{opacity:0.7;}

.chat_input{height:45px; width:60%; font-size:32px; margin:2px;}

.make_db #target{width:100%; max-width:100%;}

/* 入室ルーム赤POP */
#myAlert {opacity:0; position:fixed; top:20px; left:20px; background:#f44336; color:#fff; padding:10px 20px; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,0.3); pointer-events:none; animation:fadeInOut 5s ease forwards;}
@keyframes fadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }  /* ここまででフェードイン */
  90%  { opacity: 1; }  /* この間は表示 */
  100% { opacity: 0; }  /* フェードアウト */
}

/* 保存ルーム青POP */
#myAlert2 {opacity:0; position:fixed; top:20px; left:20px; background:#3582F4; color:#fff; padding:10px 20px; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,0.3); pointer-events:none; animation:fadeInOut 5s ease forwards;}
@keyframes fadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }  /* ここまででフェードイン */
  90%  { opacity: 1; }  /* この間は表示 */
  100% { opacity: 0; }  /* フェードアウト */
}

#sitetop-move-btn{position:fixed; right:2%; bottom:15%; font-size:60px; transition:transform 0.2s ease;}
#sitetop-move-btn a{background:#0000FF; text-decoration:none; color:#fff; width:100px; padding:70px 0px; margin:25px 0px; text-align:center; display:block; border-radius:50px;}
#sitetop-move-btn a:hover {text-decoration:none; background:#5D99FF;}
#sitetop-move-btn a:active {transform:translateY(2px);}

#top-move-btn{position:fixed; right:2%; bottom:0%; font-size:60px; transition:transform 0.2s ease;}
#top-move-btn a{background:#008000; text-decoration:none; color:#fff; width:100px; padding:70px 0px; margin:25px 0px; text-align:center; display:block; border-radius:50px;}
#top-move-btn a:hover {text-decoration:none; background:#00BB00;}
#top-move-btn a:active {transform:translateY(2px);}

#top-move-btn_list{position:fixed; right:2%; bottom:0%; font-size:60px; transition:transform 0.2s ease;}
#top-move-btn_list a{background:#008000; text-decoration:none; color:#fff; width:100px; padding:70px 0px; margin:25px 0px; text-align:center; display:block; border-radius:50px;}
#top-move-btn_list a:hover {text-decoration:none; background:#00BB00;}
#top-move-btn_list a:active {transform:translateY(2px);}

#apli-btn{font-size:340%;text-align:center; transition:transform 0.2s ease;}
#apli-btn a{background:linear-gradient(#00CC66, #66CC99); text-decoration:none; color:#fff; width:auto; padding:5px 15px; margin:0px 20px; text-align:center; display:inline-block; border-radius:15px;}
#apli-btn a:hover {background:linear-gradient(#00FFCC, #66CC99); text-decoration:none; border-radius:15px;}
#apli-btn a:active {transform:translateY(2px);}

/*▲スマホ用(767px以下)■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/

/*▼画面サイズが768～1023px以上用【タブレット】 ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/
/*@media(min-width:768px) and (max-width:1023px) {*/



/*}*/
/*▲画面サイズが768～1023px以上用【タブレット】 ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□*/

/*▼画面サイズが1024px以上用【PC】 ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■*/
@media(min-width:1024px) {
	/*input[type=text]{height:25px;}*/
	#top{width:620px;}
	#fixed-btn{position:fixed; top:1%; right:50%;}
	.type_text{height:25px;}
	.topf0{font-size:39px;}
	.topf1{font-size:32px;}
	.posi{zoom:40%; margin:20px 20px;}
	.topf2{font-size:16px;}
	.topf3{font-size:16px;}
	.bun{font-size:20px;}
	.btn_sentaku{zoom:150%;}
	.room_gzu img{width:70%; text-align:center;}
	.passbtn{border:1px blue solid; font-size:16px;}
	.tfile{max-width:70px; height:auto; display:inline-block;}
	.chat_width{width:100px;}
	.chatarea{width:width:95%; height:430px; background-color:white; overflow:hidden;}

	.new_room{font-size:16px;}
	.bunin{font-size:16px;}
	.bunin_s{font-size:16px;}
	.chat_time{font-size:12px;}

	.btnin{zoom:100%;}
	.btnin_chat{zoom:100%;}
	.btnin_l{zoom:120%;}
	.btnin_s{zoom:100%;}
	.btnin_list{zoom:100%;}

	.openbtn{zoom:120%;}
	.futoji{font-size:16px;}
	.hosoji{font-size:16px;}
	.bigfutoji{font-size:25px;}
	.nor{font-size:20px;}
	.border-s{font-size:16px;}
	.border-s td{font-size:16px;}
	
	.border-d{font-size:16px;}
	.border-d td{font-size:16px;}

	/*room_list*/
	.td_haba1{width:80px;}
	.td_haba2{width:80px;}
	.td_haba3{width:190px;}

	/*user_room_list*/
	.td_haba_u1{width:80px;}
	.td_haba_u2{width:50px;}
	.td_haba_u3{width:60px; height:38px;}
	.td_haba_u4{width:800px; white-space:normal; word-wrap:break-word; word-break:break-all; overflow-wrap:break-word;}
	.td_haba_u5{width:120px;}

	.width_rate{width:100%;}
	.posi2{zoom:27%; margin:5px;}

	.enter-btn{font-size:200%; text-align:center;}
	.enter-btn{padding:5px 15px; margin:15px 5px; width:320px;}	

	.new-btn{font-size:200%; text-align:center;}
	.new-btn{padding:5px 15px; margin:15px 5px; width:320px;}	

	.user-btn{font-size:200%; text-align:center;}
	.user-btn{padding:5px 15px; margin:15px 5px; width:320px;}	
	
	.dr-btn{font-size:200%; text-align:center;}
	.dr-btn{padding:5px 15px; margin:15px 5px; width:320px;}	

	.cafe-btn{font-size:200%; text-align:center; text-decoration:none;}
	.cafe-btn{padding:5px 15px; margin:15px 5px; text-decoration:none; width:320px;}

	.pc_area{display:inline}
	.mobile_area{display:none;}

	.tablet_br{display:none;}
	.tablet_area{display:inline}

	.mobile_br{display:none;}

	.chat_input{height:25px; width:60%; font-size:16px; margin:2px;}

    .make_db #target {width:600px; max-width:600px;}

	/*カフェ画像ボタンにする時*/
    a.cafe-btn {width:320px; max-width:none; margin:15px 5px; padding:10px 12px; font-size:2.0rem;}
    a.cafe-btn .cafe-text {font-size:1em; line-height:1.1;}

	/*青(スマホ 縦長)*/
	.blpush_on{padding:6px 11px; font-size:15px;}

	#sitetop-move-btn{right:42%; bottom:15%; font-size:28px;}
	#sitetop-move-btn a {width:100px; padding:30px 0px;}

	#top-move-btn{right:42%; bottom:0%; font-size:28px;}
	#top-move-btn a {width:100px; padding:30px 0px;}

	#top-move-btn_list{right:10%; bottom:0%; font-size:28px;}
	#top-move-btn_list a {width:100px; padding:30px 0px;}

	#apli-btn{font-size:120%; text-align:center;}
	#apli-btn a {padding:5px 15px; margin:0px 5px;}
}
/*▲画面サイズが1024px以上用【PC】 ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■*/

/*印刷画面のCSS ■□■□■□■□■□■□■□■□■□■□■□■□*/
@media print{
	body{zoom:75%; font-size:10px;}
	@page {size:portrait;}
}
/*印刷画面のCSS ■□■□■□■□■□■□■□■□■□■□■□■□*/