@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}

/*****************************************************************************
0001 .mainimage
0002 .index_contact
0003 .column
0004 .access

1000 2026-06-26 - ADD
1001 .renew
1002 .renew blockquote {
1003 .renew TYPO
1004 .renew .btn
1005 .renew table
1006 .renew ol.default
1007 .renew.feat
1008 .renew dl.list
1009 .renew .inner



*****************************************************************************/









/*****************************************************************************
0001 .mainimage
*****************************************************************************/
.mainimage {
	position: relative;
	border: 0pt solid red;
}

.mainimage .Img .bxslider li,
.mainimage .Img .bxslider li img {
	width: 100%;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
0002 .index_contact
*****************************************************************************/
.index_contact {
	position: relative;
	z-index: 9999;
	transform: translateY(-50%);
}

.index_contact .inner {
	width: 1050px;
	height: 140px;
	background: linear-gradient(90deg, #d16398, #e482b1);
	color: #fff;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.index_contact .row {
	padding: 15px;
	flex: 1;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
}

.index_contact .row dl {
	display: flex;
	align-items: flex-start;
	width: 100%;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
}

.index_contact .row dl dt {
	width: 100px;
	border-right: 1px solid #fff;
}

.index_contact .row dl dd {
	flex: 1;
	padding-left: 20px;
}

.index_contact .row dl dd small {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
}

.index_contact .row p {
	font-size: 1.2rem;
}

.index_contact .phone {
	padding: 15px;
}

.index_contact .phone a {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	width: 360px;
	height: 110px;
	background: #fff;
	color: #D05F98;
	line-height: 1.28;
	border: 1px solid #fff;
	transition-duration: 0.4s;
}

.index_contact .phone a:hover {
	background: #D05F98;
	color: #fff;
}

.index_contact .phone a dl {
	display: flex;
	align-items: baseline;
	font-family: "Oswald", sans-serif;
}

.index_contact .phone a dl dt {
	font-size: 2.4rem;
	margin-right: 5px;
}

.index_contact .phone a dl dd {
	font-size: 4.5rem;
}

.index_contact .phone a span {
	display: block;
	font-size: 1.4rem;
	letter-spacing: 0.29em;
}

@media screen and (max-width: 768px) {
	.index_contact {
		transform: translateY(0);
		width:100%;
		height:auto;
		padding:0;
		margin:0;
	}

	.index_contact .inner {
		width: 100%;
		height: auto;
		display:block;
		padding:2.5vw;
		margin:0;
	}

	.index_contact .row {
		padding:0;
		display:block;
		border:0px solid red;

	}

	.index_contact .row dl {
		display: flex;
		align-items: flex-start;
		width: 100%;
		font-size: 1.8vw;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 10px;
		border:0px solid red;
		font-size: calc( 1.8vw * 1.9);
		margin:0.5em 0;
	}

	.index_contact .row dl dt {
		width: 5em;
		padding:0;
		margin:0;
	}

	.index_contact .row dl dd {
		width: calc( 100% - 5em);
		padding:0 0 0 1em;
		margin:0;
	}

	.index_contact .row dl dd small {
		font-size: 0.6em;
	}

	.index_contact .row p {
		font-size: calc( 1.2vw * 1.9);
	}

	.index_contact .phone {
		padding: 0;
		width:100%;
		background:yellow;
	}

	.index_contact .phone a {
		transition-duration: 0.4s;
		width: 100%;
		height:auto;
		padding:1vw;
	}

	.index_contact .phone a:hover {
		background: #D05F98;
		color: #fff;
	}

	.index_contact .phone a dl {
		display: flex;
		align-items: baseline;
		font-family: "Oswald", sans-serif;
	}

	.index_contact .phone a dl dt {
		font-size: calc( 2.4vw * 1.9);
		margin-right: 0.5em;
	}

	.index_contact .phone a dl dd {
		font-size: calc( 4.5vw * 1.9);
	}

	.index_contact .phone a span {
		font-size: calc( 1.4vw * 1.9);
	}
}

@media screen and (max-width: 600px) {
	/* .index_contact .row dl dd small {
		display: block;
		margin-top: 5px;
	}

	.index_contact .phone,
	.index_contact .phone a {
		width: 100%;
	} */
}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {
	/* .index_contact .phone a dl dd {
		font-size: 4.0rem;
	} */
}









/*****************************************************************************
0003 .column
*****************************************************************************/
.column {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 50px 15px 40px;
}

.column h1 {
	font-size: 3.0rem;
	font-size: clamp(calc(3.0rem * 0.7), calc(3.0vw * 1.0), 3.0rem);
	display: flex;
	align-items: center;
	margin: 1em 0;
}

.column h1:before {
	content: url(../img/index/ttl_info.png);
	margin-right: 5px;
}

.column .information {
	width: 630px;
}

.column .information ul li {
	border-top: 1px solid #ddd;
	padding: 5px 0 30px;
	display: flex;
}

.column .information ul li time {
	background: linear-gradient(90deg, #f5502a, #ff7c3c);
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
	width: 7em;
	height: 2em;
	border-radius: 100vh;
	color: #fff;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin-right: 1em;
}

.column .information ul dl {
	flex: 1;
}

.column .information ul dl dt {
	font-size: 1.8rem;
	font-size: clamp(calc(1.8rem * 0.7), calc(1.8vw * 1.0), 1.8rem);
	font-weight: bold;
}

.column .information ul dl dd {
	font-size: 1.4rem;
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
}

.column .schedule {
	width: 360px;
}

.column .schedule .week {
	margin-bottom: 5px;
}

.column .schedule .week li {
	padding: 5px 0;
	border-bottom: 1px solid #ddd;
}

.column .schedule .week li:first-child {
	border-top: 1px solid #ddd;
}

.column .schedule .week dl {
	display: flex;
	align-items: center;
}

.column .schedule .week dl dt {
	background: linear-gradient(90deg, #dbf3dd, #eaffec);
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
	width: 7em;
	height: 2em;
	border-radius: 100vh;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;


}

.column .schedule .week dl dd {
	font-size: 1.2rem;
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
	padding: 0 15px;
}

.column .schedule .week .closed dl dt {
	background: linear-gradient(90deg, #ffe5f2, #ffecf5);
}

.column .schedule .week .closed dl dd {
	color: #d16398;
	font-size: 1.4rem;
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);

}

.column .schedule .remarks {
	font-size: 1.2rem;
	font-size: clamp(calc(1.2rem * 0.7), calc(1.2vw * 1.0), 1.2rem);
	line-height: 1.66;
}

.column .schedule .remarks li {
	display: flex;
	align-items: baseline;
}

.column .schedule .remarks li:before {
	content: "※";
	display: block;
}

@media screen and (max-width: 768px) {
	.column .information {
		width: 55%;
	}

	.column .schedule {
		width: 40%;
	}
}

@media screen and (max-width: 600px) {
	.column .information {
		width: 100%;
		margin-bottom: 60px;
	}

	.column .schedule {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {
	.column h1 {
		/* font-size: 2.6rem; */
	}
}









/*****************************************************************************
0004 .access
*****************************************************************************/
.access {
	background: url(../img/common/pattern01.png);
}

.access .inner {
	padding: 90px 15px 100px;
}

.access .map {
	margin-bottom: 15px;
	border: 8px solid #fff;
}

.access .map iframe {
	width: 100%;
	height: 420px;
	vertical-align: bottom;
}

.access ul {
	color: #333;
	line-height: 1.5;
	font-size: 1.6rem;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem);

}

.access ul dl {
	display: flex;
	flex-flow: row wrap;
}

.access ul dl dt {
	width: 200px;
}

.access ul dl dt:before {
	content: "●";
}

@media screen and (max-width: 768px) {
	.access .map iframe {
		height: 360px;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {
	.access ul dl {
		flex-flow: column wrap;
	}

	.access ul dl dt {
		width: auto;
	}

	.access ul dl dd {
		padding-left: 1em;
	}

}

@media screen and (max-width: 320px) {}









/*****************************************************************************
10001 .renew
*****************************************************************************/
.renew {
	padding: 6.0rem 0;
	border: 0pt solid black;
}

.renew * {
	color: red;
	letter-spacing: 0.05em;
}

.renew .inner.narrow {
	max-width: 900px;
}

.renew .inner.narrow-narrow {
	max-width: 800px;
}

.flexbox {
	display: flex;
	flex-wrap: wrap;
}

.half {
	width: 50%;
	border: 0px solid yellow;
	padding: 1.5rem;
}

@media screen and (max-width: 768px) {
	.renew {
		padding: 4.5rem 0;
	}

	.half {
		width: 100%;
		padding: 1.5rem 0;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
10002 .renew blockquote
*****************************************************************************/
.renew blockquote {
	background: linear-gradient(90deg, #f9f9f9, #fafafa);
	padding: 1.5rem;
	margin: 0;
	width: 100%;
	height: 100%;
	border: none;
	position: relative;
	z-index: -1;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1003 .renew TYPO
*****************************************************************************/
.renew p {
	font-sie: 1.6rem;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem);
	line-height: 1.8;
	padding: 0;
	margin: 0.75em 0;
	color: #333;
}

.renew p b {
	color: inherit
}

.renew p strong {
	color: #D05F98;
	font-weight: 600;
}

.renew p span,
.renew p small {
	color: inherit
}

.renew p.medatsu {
	color: #20b1b6;
	line-height: 1.9;
	font-size: clamp(calc(1.8rem * 0.7), calc(1.8vw * 1.0), 1.8rem);
	letter-spacing: 0.3em;
}

@media screen and (max-width: 768px) {
	.renew p.medatsu {
		letter-spacing: 0.1em;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









.renew h2 {
	font-size: 4.0rem;
	font-size: clamp(calc(4.0rem * 0.7), calc(4.0vw * 1.0), 4.0rem);
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-weight: 600;
	color: #333;
	padding: 0;
	margin: 0;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.renew h2 {
		font-size: clamp(calc(4.0rem * 0.6), calc(4.0vw * 1.0), 4.0rem);
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









.renew h3 {
	font-size: clamp(calc(50px * 0.7), calc(5.0vw * 1.0), 50px);
	font-family: 'Poppins', sans-serif;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 1em;
	text-transform: uppercase;
	color: #333;
}

.renew h3 small {
	display: block;
	font-size: 0.3em;
	letter-spacing: 0.1em;
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	color: inherit;
}

.renew h3:after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, #6ABA6E 0%, #6ABA6E 50%, #000 50%, #000 100%);
	margin: 10px auto 0;
}

.renew.scholarship h3:after {
	background: linear-gradient(90deg, #20b1b6 0%, #20b1b6 50%, #000 50%, #000 100%);
}

.renew.message h3:after {
	background: linear-gradient(90deg, #E480B0 0%, #E480B0 50%, #000 50%, #000 100%);
}

@media screen and (max-width: 768px) {
	.renew h3 {
		font-size: clamp(calc(50px * 0.5), calc(5.0vw * 1.0), 50px);
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









.renew h4 {
	position: relative;
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-weight: bold;
	line-height: 1.3;
	font-size: clamp(calc(3.0rem * 0.7), calc(3.0vw * 1.0), 3.0rem);
	padding: 0 0 0 0.25em;
	margin: 1.5em 0 1em 1em;
	color: #333;
}

.renew h4:before {
	content: url(../img/index/ttl_pink.png);
	position: absolute;
	z-index: -1;
	left: 0;
	top: 50%;
	transform: translate(-1em, -50%);
}

.renew .second h4:before {
	content: url(../img/index/ttl_green.png);
}

@media screen and (max-width: 768px) {
	.renew h4 {
		font-size: clamp(calc(3.0rem * 0.6), calc(3.0vw * 1.0), 3.0rem);
	}

	.renew h4:before {
		transform: translate(-1em, -50%) scale(0.7);
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









.renew h5 {
	font-size: 2.4rem;
	font-size: clamp(calc(2.4rem * 0.7), calc(2.4vw * 1.0), 2.4rem);
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-weight: 600;
	color: #333;
	padding: 0;
	margin: 0;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.renew h5 {
		font-size: clamp(calc(2.4rem * 0.6), calc(2.4vw * 1.0), 2.4rem);
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









.renew h6 {
	font-size: 3.0rem;
	font-size: clamp(calc(3.0rem * 0.6), calc(3.0vw * 1.0), 3.0rem);
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-weight: 600;
	color: #333;
	padding: 0;
	margin: 0;
	line-height: 1.4;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {
	.renew h6 br {
		display: none;
	}
}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1004 .renew .btn
*****************************************************************************/
.renew .btn {
	width: fit-content;
	padding: 0;
	margin: 6.0rem auto 0;
}

.renew .btn.left {
	margin-left: 0;
}

.renew .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18.0em;
	height: 3.2em;
	border: 2px solid #333;
	background: transparentfff;
	font-size: 1.2rem;
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
	text-align: center;
	line-height: 1;
	position: relative;
	transition-duration: 0.4s;
	color: #333;
	transition: 0.1s;
	opacity: 1;
}

.renew .btn a:hover {
	background: #333;
	color: white
}

.renew .btn a:after {
	content: "\f105";
	font-family: FontAwesome;
	font-size: 1.4rem;
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1005 .renew table
*****************************************************************************/
.renew table {
	width: 100%;
	margin: 30px 0;
	border: 0px solid red;
}

.renew table th,
.renew table td {
	color: #333;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem) !important;
	line-height: 1.5;
	padding: 0.75em 1.5em;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.renew table th {
	font-weight: 600;
	background: #e6e6e6;
	min-width: 15em;
}

.renew.dx table small {
	color: inherit;
}

.renew.dx table th,
.renew.dx table td {
	color: #333;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ccc;
	display: table-cell;
	width: auto;
	padding: 1em;
}

@media screen and (max-width: 768px) {

	.renew table th,
	.renew table td {
		display: block;
		width: 100%;
		border: none;
	}

	.renew table th {
		border-top: 2px solid #ccc;
	}

	.renew table td {
		padding-bottom: 2em;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1006 .renew ol.default
*****************************************************************************/
.renew ol.default {
	border: 0pt solid red;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem);
	padding: 0 0 0 0.5em;
	margin: 1.5rem 0;
}

.renew ol.default li {
	color: #333;
	line-height: 1.5;
	font-size: 1.6rem;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem);
	letter-spacing: 0;
	list-style: disc;
	list-style-position: outside;
	margin: 0 0 0 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.renew ol.default.little,
.renew ol.default.little li {
	font-size: clamp(calc(1.4rem * 0.7), calc(1.4vw * 1.0), 1.4rem);
}



.renew ol.default.star li {
	text-indent: -1em;
	mamrgin-left: 1em;
	list-style: none;
	font-size: 1.8rem;
	font-size: clamp(calc(1.8rem * 0.7), calc(1.8vw * 1.0), 1.8rem);
}

.renew ol.default.star li::before {
	content: '★'
}

.renew ol.default li b {
	color: #D05F98;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1007 .renew.feat
*****************************************************************************/
.renew.feat {
	background: linear-gradient(90deg, #d16398, #e482b1);
}

.renew.feat .inner {
	padding: 60px 0;
}

.renew.feat ul {
	display: flex;
	flex-flow: row wrap;
}

.renew.feat ul li {
	width: 33.3333%;
	padding: 5px;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.renew.feat ul li a {
	border: 1px solid white;
	width: 100%;
	height: 100%;
	padding: 3px;
	display: block;
	font-size: clamp(calc(1.8rem * 0.7), calc(1.8vw * 1.0), 1.8rem);
	color: #D05F98;
	position: relative;
	height: 4em;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	transition: 0.1s;
	opacity: 1;
	line-height: 1.3;
}

.renew.feat ul li a:after {
	content: "\f138";
	font-family: FontAwesome;
	font-size: 2.1rem;
	font-weight: normal;
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%);
}

.renew.feat ul li a:hover {
	opacity: 0.5;
}

.renew.feat ul li span {
	color: inherit;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	padding: 0 2.7em 0 1em;
	background: white;
}

.renew.feat.link {
	background: linear-gradient(90deg, #f9f9f9, #fafafa);
}

.renew.feat.link ul li a {
	border: 3px double #666;
	color: #666;
}

@media screen and (max-width: 768px) {
	.renew.feat ul li {
		width: 50%;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {
	.renew.feat ul li {
		width: 100%;
	}
}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1008 .renew dl.list
*****************************************************************************/
.renew dl.list {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.renew dl.list dt,
.renew dl.list dd {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0.3em 0;
	font-size: clamp(calc(1.6rem * 0.7), calc(1.6vw * 1.0), 1.6rem);
	font-weight: 400;
	line-height: 1.3;
	color: #333;
}

.renew dl.list dt {
	width: 6em;
	border-right: 1px solid #333;
}

.renew dl.list dd {
	padding-left: 2em;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {
	.renew dl.list {
		margin: 1rem 0;
	}

	.renew dl.list dt,
	.renew dl.list dd {
		display: block;
		padding: 0.5em;
		margin: 0 0;
		width: 100%;
		border: 1px solid #aaa;
	}

	.renew dl.list dt {
		border-bottom: none;
		background: linear-gradient(90deg, #eee, #efefef);
	}

	.renew dl.list dd {
		border-top: none;
	}
}

@media screen and (max-width: 320px) {}









/*****************************************************************************
1009 .renew .inner
*****************************************************************************/
.renew .inner {
	border: 0px solid red;
	padding: 0 1.5rem;
}

.renew.feat .inner {
	border: 0px solid yellow;
	padding: 0 0.5rem;
}

@media screen and (max-width: 768px) {

	.inner,
	.renew .inner,
	.renew.feat .inner {
		border: 0px solid green;
		padding: 0 5vw;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}

.konnna-shojo {
	padding-top: 9.0rem;
}

.renew.recruit {
	background: linear-gradient(90deg, rgba(107, 186, 110, 0.15), rgba(107, 186, 110, 0.1));
}

.renew.recruit.scholarship {
	background: linear-gradient(90deg, rgba(32, 177, 182, 0.15), rgba(32, 177, 182, 0.1));
}

.renew.recruit.message {
	background: linear-gradient(90deg, rgba(228, 128, 176, 0.15), rgba(228, 128, 176, 0.1));
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}