@charset "utf-8";
/*--------------------------------------------------

	MAIN VISUAL

--------------------------------------------------*/
#mv {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 100%;
	overflow: hidden;
}
.image-crossfader {
	position: relative;
	z-index: -2;
	width: 100%;
	height: calc(150px + 215 * ((100vw - 375px) / 1605));
	overflow: hidden;
}
.image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transform: scale(1.2);
	transition:
	opacity 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
	transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	background-size: cover;
	background-position: center;
	background-color: #DEDEDE;
}
#mv.about .image-crossfader-inner {background-image: url("../img/page/about/mv.webp");}
#mv.service .image-crossfader-inner {background-image: url("../img/page/service/mv.webp");}
#mv.recruit .image-crossfader-inner {background-image: url("../img/page/recruit/mv.webp");}
.image-crossfader-inner.is-visible {z-index: 1;opacity: 1;transform: scale(1.02);}
#mv .container {
	position: absolute;
	left: 50%;
	bottom: 50%;
	z-index: 1;
	transform: translate(-50%, 50%);
	width: 100%;
}
#mv .container h1 {
	margin-bottom: 10px;
	font-size: calc(24px + 24 * ((100vw - 375px) / 1605));
	text-align: center;
}
#mv .container p {letter-spacing: .1em;text-align: center;}
/*--------------------------------------------------

	COMMON

--------------------------------------------------*/
#breadcrumb {padding: 10px 0;background: #DEDEDE;}
#breadcrumb ul {display: flex;flex-wrap: wrap;gap: 5px 10px;}
#breadcrumb ul li {
	display:inline;
	position: relative;
	font-weight: 500;
	font-size: calc(10px + 4 * ((100vw - 375px) / 1605));
	line-height: 1;
	letter-spacing: .075em;
}
#breadcrumb ul li a {padding-right: 18px;font-weight: 500;}
#breadcrumb ul li a::after {
	content: '/';
	position: absolute;
	right: 0;
	bottom: 50%;
	transform: translate(0, 50%);
	width: 6px;
    height: 100%;
}
#breadcrumb ul li a:hover {text-decoration: underline;}
.wp-pagenavi {
	display: flex;
	justify-content: center;
	margin-top: 50px;
	text-align: center;
}
.wp-pagenavi a,
.wp-pagenavi span {
	display: flex;
    align-items: center;
    justify-content: center;
	width: calc(30px + 20 * ((100vw - 375px) / 1545));
	height: calc(30px + 20 * ((100vw - 375px) / 1545));
	margin: 0 10px!important;
	padding: 10px 13px!important;
	border-color: #2789D0!important;
	border-radius: 5px;
	background: #fff;
	color: #2789D0;
	font-size: calc(13px + 2 * ((100vw - 375px) / 1545));
	text-align: center;
}
.wp-pagenavi span.current {background: #2789D0;color: #fff;}
.wp-pagenavi a:hover {background: #2789D0;color: #fff;}
.back {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(164px + 50 * ((100vw - 375px) / 1605));
	margin: 0 auto;
	padding-top: calc(16px + 5 * ((100vw - 375px) / 1605));
	padding-bottom: calc(10px + 5 * ((100vw - 375px) / 1605));
	border: 1px solid #707070;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	text-align: center;
	transition: .3s;
}
.back:hover {background-position: 99% 50%;color: #fff;}
.back::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	transform-origin: left top;
	transform: scale(0, 1);
	height: 101%;
	background: #707070;
	transition: transform .3s;
}
.back:hover::before {transform-origin: left top;transform: scale(1, 1);}
.back::after {
	content: '';
	position: absolute;
	right: 13px;
	bottom: 0;
	width: 14%;
	height: 100%;
	background: url(../img/arrowR-blk.svg) no-repeat right 60% / 100%;
	transition: .3s;
}
.back:hover::after {background-image: url(../img/arrowR-wht.svg);}
/*--------------------------------------------------

	ABOUT US

--------------------------------------------------*/
/*--------------------------------------------------
	President’s Message │ 代表メッセージ
--------------------------------------------------*/
#about #message .container {
	flex-direction: row-reverse;
	padding-top: calc(30px + 20 * ((100vw - 375px) / 1605));
	border-top: 1px solid #D3EDF8;
}
#about #message .container figure {width: 46%;}
#about #message .container .content {width: 49%;}
#about #message .container .content p {margin-bottom: 25px;}
#about #message .container .content p:last-child {margin-bottom: 0;}
#about #message .container .content p.txtR {text-align: right;}
/*--------------------------------------------------
	Philosophy │ 企業理念
--------------------------------------------------*/
#about #philosophy .ttl_content p {
	font-weight: 500;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .1em;
	text-align: center;
}
/*--------------------------------------------------
	Development of the company │ 会社沿革
	Company overview │ 会社概要
--------------------------------------------------*/
#about .inner {max-width: calc(900px + 2 * ((100vw - 375px) / 1605));}
#about table tr {
	display: block;
	margin-bottom: 10px;
	padding: calc(15px + 10 * ((100vw - 375px) / 1605));
	background: #fff;
}
#about table tr:last-child {margin-bottom: 0;}
#about table tr th {width: 160px;font-weight: 700;}
#about table tr td dl {overflow: hidden;}
#about table tr td dl dt {float: left;width: calc(80px + 20 * ((100vw - 375px) / 1605));}
#about table tr td dl dd {margin-bottom: 10px;padding-left: calc(80px + 20 * ((100vw - 375px) / 1605));}
#about table tr td dl dd:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 768px ) {
	#about #philosophy .ttl_content p {text-align: left;}
	#about #message .container figure {width: 100%;margin-bottom: 20px;}
	#about #message .container .content {width: 100%;}
	#about table tr {padding: 0;}
	#about table tr th {display: block;width: 100%;padding: 5px 15px;background: #eee;}
	#about table tr td {display: block;width: 100%;padding: 10px 15px;}
}
@media only screen and ( max-width : 500px ) {
	#about table tr td dl dt {float: none;}
	#about table tr td dl dd {padding-left: 0;}
}
/*--------------------------------------------------

	SERVICE

--------------------------------------------------*/
#service nav {position: sticky;top: 0;z-index: 2;overflow: hidden;background: #fff;}
#service nav ul {
	display: grid;
	gap: calc(5px + 20 * ((100vw - 375px) / 1605));
	grid-template-columns: repeat(3, 1fr);
}
#service nav ul li a {
	display: block;
	position: relative;
	padding: 13px;
	padding-right: calc(15px + 15 * ((100vw - 375px) / 1605));
	padding-left: calc(10px + 10 * ((100vw - 375px) / 1605));
	border-bottom: 3px solid #EAEAEA;
	font-weight: 700;
	font-size: calc(10px + 6 * ((100vw - 375px) / 1605));
}
#service nav ul li a.link-current {border-bottom: 3px solid #82CEEC;}
#service nav ul li a::before {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%) rotate(135deg);
	width: calc(6px + 3 * ((100vw - 375px) / 1605));
	height: calc(6px + 3 * ((100vw - 375px) / 1605));
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	color: #079DD9;
	box-sizing: border-box;
	transition: .3s;
}
#service #block2,#block3,#block4 {padding-top: 0;}
#service .block h2 {
	margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));
	padding-bottom: 10px;
	font-size: calc(18px + 26 * ((100vw - 375px) / 1605));
}
#service .block .container {flex-direction: row-reverse;margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));}
#service .block .container figure {width: 47%;}
#service .block .container .content {width: 49%;}
#service .block .container .content h3 {
	margin-bottom: calc(20px + 5 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(15px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .1em;
}
#service .block .container .content .wrap p {margin-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));}
#service .block .container .content .wrap p:last-child {margin-bottom: 0;}
#service .block ul {display: grid;gap: 20px;grid-template-columns: repeat(4, 1fr);}
#service .block ul li.content {background: #FAFAFA;}
#service .block ul li.content h4 {
	padding: 18px 0;
	background: linear-gradient(-45deg, #079DD9, #023059);
	color: #fff;
	font-weight: 500;
	font-size: calc(15px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .075em;
	text-align: center;
}
#service .block ul li.content .wrap {padding: calc(15px + 15 * ((100vw - 375px) / 1605));}
#service .block ul li.content .wrap p {font-size: calc(12px + 2 * ((100vw - 375px) / 1605));letter-spacing: .05em;}
#service .block ul li.content .wrap ul {display: block;margin-top: calc(15px + 15 * ((100vw - 375px) / 1605));}
#service .block ul li.content .wrap ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 20px;
	font-size: calc(12px + 2 * ((100vw - 375px) / 1605));
	letter-spacing: .05em;
}
#service .block ul li.content .wrap ul li:last-child {margin-bottom: 0;}
#service .block ul li.content .wrap ul li::before {content: '・';position: absolute;left: 0;}
@media only screen and ( max-width : 1024px ) {
	#service .block ul {grid-template-columns: repeat(2, 1fr);}
	#service .block ul li.content h4 {padding: 10px 0;}
}
@media only screen and ( max-width : 768px ) {
	#service nav ul {grid-template-columns: repeat(2, 1fr);gap: 0;}
	#service nav ul li a {padding: 10px 20px 10px 10px;}
	#service .block .container figure {width: 100%;margin-bottom: 20px;}
	#service .block .container .content {width: 100%;}
	#service .block ul {grid-template-columns: repeat(1, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#service nav {position: initial;}
}
/*--------------------------------------------------

	SUSTAINABILITY

--------------------------------------------------*/
#sustainability .inner {max-width: calc(1000px + 2 * ((100vw - 375px) / 1605));}
#sustainability h2 {
	margin-bottom: calc(30px + 30 * ((100vw - 375px) / 1605));
	font-size: calc(20px + 12 * ((100vw - 375px) / 1605));
}
#sustainability figure {max-width: 800px;margin: 0 auto calc(30px + 30 * ((100vw - 375px) / 1605));}
#sustainability .container .content {margin-bottom: calc(30px + 30 * ((100vw - 375px) / 1605));}
#sustainability .container .content p {margin-bottom: 30px;}
#sustainability .container .content p:last-child {margin-bottom: 0;}
#sustainability .container ol {margin-left: 20px;}
#sustainability .container ol li {margin-bottom: 20px;list-style-type: decimal;}
#sustainability .container ol li:last-child {margin-bottom: 0;}
/*--------------------------------------------------

	RECRUIT ARCHIVE

--------------------------------------------------*/
#archive .inner {max-width: calc(1000px + 2 * ((100vw - 375px) / 1605));}
#archive .search {margin-bottom: calc(40px + 40 * ((100vw - 375px) / 1605));}
#archive .search .ttl_content {margin-bottom: calc(50px + 50 * ((100vw - 375px) / 1605));}
#archive .search .ttl_content h2 {
	margin-bottom: calc(30px + 30 * ((100vw - 375px) / 1605));
	font-size: calc(20px + 12 * ((100vw - 375px) / 1605));
	text-align: center;
}
#archive .search .ttl_content p {text-align: center;}
#archive .search .search_container {padding: 45px 20px 25px;border: 1px solid #363636;background: #fff;}
#archive .search .search_container form {max-width: 780px;margin: 0 auto;}
#archive .search .search_container .content dl {width: 47%;margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));}
#archive .search .search_container .content dl dt {float: left;width: 150px;}
#archive .search .search_container .content dl dd {padding-left: 150px;}
#archive .search .search_container .content dl dd .wrap {position: relative;}
#archive .search .search_container .content dl dd .wrap::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 0;
    height: 0;
    border-top: 10px solid #363636;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}
#archive .search .search_container .content dl dd .wrap select {
	width: 100%;
	height: 38px;
	padding: 5px 15px;
	border: 1px solid #363636;
	background: #fff;
	cursor: pointer;
}
#archive .search .search_container dl.free {margin-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));}
#archive .search .search_container dl.free dt {float: left;width: 150px;}
#archive .search .search_container dl.free dd {padding-left: 150px;}
#archive .search .search_container dl.free dd input {width: 100%;height: 38px;padding: 5px 15px;border: 1px solid #363636;}
#archive .search .search_container button {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 306px;
	margin: 0 auto;
	padding: 15px 0;
	border: 1px solid #363636;
	background: #fff;
	text-align: center;
	transition: .3s;
}
#archive .search .search_container button:hover {background-position: 99% 50%;color: #fff;}
#archive .search .search_container button::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #363636;
	transition: transform .3s;
}
#archive .search .search_container button:hover::before {transform-origin: left top;transform: scale(1, 1);}
#archive .block h3 {display: inline-block;margin-bottom: 20px;padding-bottom: 5px;border-bottom: 1px solid #363636;}
#archive .block h3 span {font-size: 1.6em;}
.common_block {
	margin-bottom: calc(60px + 100 * ((100vw - 375px) / 1605));
	padding: calc(20px + 20 * ((100vw - 375px) / 1605));
	border: 1px solid #363636;
	background: #fff;
}
.common_block:last-child {margin-bottom: 0;}
.common_block h4 {
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
}
.common_block .sub_ttl {margin-bottom: calc(20px + 30 * ((100vw - 375px) / 1605));}
.common_block .sub_ttl p {width: 45%;}
.common_block .sub_ttl ul {display: flex;flex-wrap: wrap;gap: 5px 20px;width: 55%;}
.common_block .sub_ttl ul li {
	display: inline-block;
	padding: 6px calc(10px + 10 * ((100vw - 375px) / 1605));
	border: 1px solid #363636;
	font-size: calc(12px + 2 * ((100vw - 375px) / 1605));
	line-height: 1;
	text-align: center;
}
.common_block .content {align-items: center;margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));}
.common_block .content figure {width: 42%;}
.common_block .content table {width: 55%;}
.common_block .content table tr {display: block;padding: 10px 0;border-bottom: 1px solid #363636;}
.common_block .content table tr:first-child {padding-top: 0;}
.common_block .content table tr th {width: calc(60px + 60 * ((100vw - 375px) / 1605));font-weight: 700;}
.common_block .button_content {max-width: 492px;margin: 0 auto;}
.common_block .button_content a {
	display: block;
	position: relative;
	z-index: 1;
	width: 42%;
	padding: 15px 0;
	border: 1px solid #363636;
	background: #fff;
	text-align: center;
	transition: .3s;
}
.common_block .button_content a:hover {background-position: 99% 50%;color: #fff;}
.common_block .button_content a::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -5;
	transform-origin: left top;
	transform: scale(0, 1);
	background: #363636;
	transition: transform .3s;
}
.common_block .button_content a:hover::before {transform-origin: left top;transform: scale(1, 1);}
.common_block .button_content a::after {
	content: '';
	position: absolute;
	right: 30px;
	bottom: 50%;
	z-index: 1;
	transform: translateY(50%);
	width: 4px;
	height: 4px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 12px solid #363636;
	box-sizing: border-box;
	transition: .3s;
}
.common_block .button_content a:hover::after {border-left-color: #fff;}
@media only screen and ( max-width : 768px ) {
	#archive .search .search_container {padding: 20px;}
	#archive .search .search_container .content dl {width: 100%;}
	.common_block .sub_ttl p {width: 100%;margin-bottom: 5px;}
	.common_block .sub_ttl ul {width: 100%;}
	.common_block .content figure {width: 100%;margin-bottom: 10px;}
	.common_block .content table {width: 100%;}
	.common_block .button_content a {width: 48%;}
}
@media only screen and ( max-width : 500px ) {
	.common_block .sub_ttl ul {gap: 5px;}
	.common_block .content table tr th {display: block;width: 100%;}
	.common_block .content table tr td {display: block;width: 100%;}
	.common_block .button_content {gap: 10px;}
	.common_block .button_content a {width: 100%;}
}
/*--------------------------------------------------

	RECRUIT SINGLE

--------------------------------------------------*/
#single .inner {max-width: calc(1000px + 2 * ((100vw - 375px) / 1605));}
#single .common_block .button_content {justify-content: center;}
#single .common_block .button_content a {width: 100%;max-width: 275px;}
#single .single_block {
	padding: calc(20px + 20 * ((100vw - 375px) / 1605));
	border: 1px solid #363636;
	background: #fff;
}
#single .single_block table tr {display: block;padding: 10px;border-bottom: 1px solid #363636;}
#single .single_block table tr:first-child {padding-top: 0;}
#single .single_block table tr th {width: 140px;font-weight: 700;vertical-align: top;}
@media only screen and ( max-width : 768px ) {
	#single .single_block table tr th {display: block;width: 100%;}
	#single .single_block table tr td {display: block;width: 100%;}
}
@media only screen and ( max-width : 500px ) {
}
/*-------------------------------------------------

	NEWS ARCHIVE

--------------------------------------------------*/
#news-ac .container ul {display: grid;gap: calc(20px + 10 * ((100vw - 375px) / 1605));}
#news-ac .container ul li {display: flex;align-items: center;position: relative;}
#news-ac .container ul li a {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;}
#news-ac .container ul li .content {display: flex;align-items: center;}
#news-ac .container ul li .content time {font-size: calc(16px + 4 * ((100vw - 375px) / 1605));}
#news-ac .container ul li .content span {
	margin: 0 50px 0 20px;
	padding: 5px calc(10px + 15 * ((100vw - 375px) / 1605));
	background: #081A40;
	color: #fff;
	text-align: center;
}
#news-ac .container ul li p {position: relative;color: #081A40;font-size: calc(15px + 3 * ((100vw - 375px) / 1605));}
#news-ac .container ul li p::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: auto;
	width: 0;
	height: 1px;
	background-color: #081A40;
	transition: .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#news-ac .container ul li:hover p::before {width: 100%;right: auto;left: 0;}
@media only screen and ( max-width : 768px ) {
	#news-ac .container ul li {display: block;border-bottom: 1px solid #ccc;}
	#news-ac .container ul li .content {margin-bottom: 10px;}
}
/*-------------------------------------------------

	NEWS SINGLE

--------------------------------------------------*/
#news-sg {padding-bottom: calc(60px + 60 * ((100vw - 375px) / 1605));}
#news-sg .title_content {padding-bottom: 10px;border-bottom: 1px solid #363636;}
#news-sg .title_content .wrap {align-items: flex-end;}
#news-sg .title_content .wrap .ttl_flex {display: flex;flex-wrap: wrap;align-items: center;}
#news-sg .title_content .wrap .ttl_flex p span {
	display: inline-block;
	margin-right: calc(10px + 10 * ((100vw - 375px) / 1605));
	padding: 5px 25px;
	background: #081A40;
	color: #fff;
	text-align: center;
}
#news-sg .title_content .wrap .ttl_flex h2 {font-size: calc(18px + 6 * ((100vw - 375px) / 1605));}
#news-sg .title_content .wrap time {letter-spacing: .1em;}
#news-sg .txt_content {
	padding-top: calc(30px + 30 * ((100vw - 375px) / 1605));
	padding-bottom: calc(50px + 10 * ((100vw - 375px) / 1605));
}
#news-sg .txt_content p {margin-bottom: calc(25px + 25 * ((100vw - 375px) / 1605));}
#news-sg .txt_content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 768px ) {
}
@media only screen and ( max-width : 500px ) {
}
/*-------------------------------------------------

	PROJECTS ARCHIVE

--------------------------------------------------*/
#projects-ac .container ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20px + 10 * ((100vw - 375px) / 1605));
}
#projects-ac .container ul li {
	position: relative;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
	background: #fff;
}
#projects-ac .container ul li a {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;}
#projects-ac .container ul li figure {overflow: hidden;}
#projects-ac .container ul li figure img {transition: .5s;}
#projects-ac .container ul li:hover figure img {transform: scale(1.1);}
#projects-ac .container ul li .content {padding: calc(15px + 10 * ((100vw - 375px) / 1605));}
#projects-ac .container ul li .content .wrap {
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
	flex-direction: row-reverse;
	margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));
}
#projects-ac .container ul li .content .wrap h2 {
	flex: 1;
	padding-left: 5px;
	border-left: 5px solid #79C252;
	font-size: calc(16px + 8 * ((100vw - 375px) / 1605));
}
@media only screen and ( max-width : 1024px ) {
	#projects-ac .container ul li .content .wrap {display: block;}
	#projects-ac .container ul li .content .wrap p {margin-bottom: 10px;}
}
@media only screen and ( max-width : 768px ) {
	#projects-ac .container ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#projects-ac .container ul {grid-template-columns: repeat(1, 1fr);}
}
/*-------------------------------------------------

	PROJECTS SINGLE

--------------------------------------------------*/
#projects-sg {padding-bottom: calc(60px + 60 * ((100vw - 375px) / 1605));}
#projects-sg .title_content {padding-bottom: 10px;border-bottom: 1px solid #363636;}
#projects-sg .title_content .wrap {align-items: flex-end;}
#projects-sg .title_content .wrap .ttl_flex {display: flex;flex-wrap: wrap;align-items: center;}
#projects-sg .title_content .wrap .ttl_flex p span {
	margin-right: calc(10px + 10 * ((100vw - 375px) / 1605));
}
#projects-sg .title_content .wrap .ttl_flex h2 {font-size: calc(18px + 6 * ((100vw - 375px) / 1605));}
#projects-sg .title_content .wrap time {letter-spacing: .1em;}
#projects-sg .txt_content {
	padding-top: calc(30px + 30 * ((100vw - 375px) / 1605));
	padding-bottom: calc(50px + 10 * ((100vw - 375px) / 1605));
}
#projects-sg .txt_content p {margin-bottom: calc(25px + 25 * ((100vw - 375px) / 1605));}
#projects-sg .txt_content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 768px ) {
}
@media only screen and ( max-width : 500px ) {
}