:root {
	--dgreen: #097a46;
}

body{
	background-image: url(../img/chat_bk.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.header{
	padding-inline: var(--w20);
	padding-bottom: 0;
	position: relative;
	align-items: flex-start;
	/* gap:var(--w20); */
	grid-template-columns: 12% auto 8%;
	background-color: transparent;
}

h1{
	font-size: var(--f-18-24);
	color: var(--red);
	text-align: center;
}

.header>*:nth-child(3){
	grid-column: 3 / 4;
	grid-row: 1 / 3;
}

.header ._subject{
	grid-column: 1 / 3;
	font-size: var(--f-10-16);
	display: grid;
	  place-content: center;
}

.header ._tugumu{
	max-width: 80px;
}

@media screen and (max-width : 400px) {
	.header{
		grid-template-columns: 14% auto 8%;
	}
	
	h1{
		font-size: var(--f-14-16);
	}
	.header ._tugumu{
		max-width: 40px;
	}
	.header>*:nth-child(3){
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}
	.header ._subject{
	grid-column: 1 / 4;
	}
}




h5{
	color: var(--dgreen);
	margin-bottom: 0.5em;
}

.header ._subject li{
	position: relative;
	padding-left:2em; 
}

.header ._subject li::before{
	position: absolute;
	top: 0;
	left: .5em;
	content:"●";
	color: var(--dgreen);
}
	







.s_chat{
	padding: var(--w10) var(--w30);
	text-align: center;
}

.iframe_box{
	border: 5px solid var(--dgreen);
	width: 100%;
	min-height:700px;
	max-width: 1000px;
	margin-inline: auto;
	background-color: #fff;
	border-radius: 30px;
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
	}

.footer {
	padding-top: 0;
	background-color: transparent;
}