/* Codex mobile redesign layer */
img,
iframe,
embed,
object {
	max-width: 100%;
}

/* Codex mobile polish: compact app header, calmer hero, richer service cards. */
@media screen and (max-width: 760px) {
	html {
		scroll-padding-top: 72px;
	}

	body {
		padding-top: 70px !important;
		background: #eef3f6 !important;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}

	#header-top,
	header #australia,
	header #contact,
	header #tel .tel,
	header #tel .open {
		display: none !important;
	}

	header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1002;
		padding: 9px 0 !important;
		border-bottom: 1px solid rgba(10, 44, 61, 0.1);
		background: rgba(255, 255, 255, 0.98) !important;
		box-shadow: 0 6px 18px rgba(10, 44, 61, 0.12) !important;
	}

	header > .container {
		display: grid !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 12px !important;
		grid-template-columns: 82px minmax(0, 1fr) 46px !important;
		grid-template-areas: "logo cta menu" !important;
		align-items: center;
		column-gap: 9px;
	}

	header #logo {
		grid-area: logo;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	header #logo a {
		display: inline-flex;
		align-items: center;
	}

	header #logo img {
		display: block;
		width: 76px !important;
		height: auto !important;
	}

	header #tel {
		grid-area: cta;
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	header #tel .banner {
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	header #tel .banner a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		width: 100% !important;
		max-width: none !important;
		padding: 10px 8px !important;
		border-radius: 5px;
		background: #d32323 !important;
		box-shadow: 0 5px 12px rgba(211, 35, 35, 0.26);
		color: #fff !important;
		font-size: 13px !important;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	#mobile-menu-toggle {
		grid-area: menu;
		display: inline-flex !important;
		position: relative;
		align-items: center;
		justify-content: center;
		justify-self: end;
		width: 44px !important;
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 !important;
		border: 1px solid #cbdde6 !important;
		border-radius: 5px !important;
		background: #fff !important;
		box-shadow: none !important;
		color: #0a2c3d !important;
		cursor: pointer;
	}

	#mobile-menu-toggle span {
		display: block !important;
		position: absolute;
		left: 11px;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: #0a2c3d !important;
		transition: transform 0.18s ease, opacity 0.18s ease;
	}

	#mobile-menu-toggle span:nth-child(1) {
		top: 13px;
	}

	#mobile-menu-toggle span:nth-child(2) {
		top: 20px;
	}

	#mobile-menu-toggle span:nth-child(3) {
		top: 27px;
	}

	#mobile-menu-toggle em {
		display: none !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(1) {
		top: 20px;
		transform: rotate(45deg) !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(2) {
		opacity: 0 !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(3) {
		top: 20px;
		transform: rotate(-45deg) !important;
	}

	nav {
		position: fixed !important;
		top: 70px !important;
		left: 0;
		right: 0;
		z-index: 1001;
		background: transparent !important;
		box-shadow: none !important;
		pointer-events: none;
	}

	body.mobile-menu-open nav {
		pointer-events: auto;
	}

	nav .container {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 12px !important;
		background: transparent !important;
	}

	nav .container:before,
	nav .container:after {
		content: none !important;
	}

	nav ul {
		display: none !important;
		max-height: calc(100vh - 86px) !important;
		margin: 0 !important;
		padding: 6px 0 !important;
		overflow-y: auto;
		border: 1px solid #d6e4eb !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 16px 32px rgba(10, 44, 61, 0.22);
	}

	body.mobile-menu-open nav ul {
		display: block !important;
	}

	nav li {
		float: none !important;
		width: 100% !important;
		min-height: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	nav li a,
	nav .current-menu-item a {
		display: flex !important;
		align-items: center;
		justify-content: space-between !important;
		min-height: 46px !important;
		padding: 13px 16px !important;
		border-bottom: 1px solid #edf3f6;
		background: transparent !important;
		color: #123447 !important;
		font-size: 14px !important;
		font-weight: bold;
		text-align: left !important;
		text-decoration: none;
	}

	nav li a:after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid #167cae;
		border-right: 2px solid #167cae;
		transform: rotate(45deg);
	}

	nav li:last-child a {
		border-bottom: 0;
	}

	#slider {
		display: block !important;
		position: relative;
		height: 232px !important;
		min-height: 232px !important;
		margin: 0 0 16px !important;
		padding: 0 !important;
		overflow: hidden;
		background: #0a2c3d !important;
	}

	#slider .container,
	#slider #thumbnail,
	#slider .flexslider {
		display: none !important;
	}

	#slider:before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("../images/index/img-slide02.jpg");
		background-position: center;
		background-size: cover;
		animation: gits-mobile-hero 16s infinite;
		transform: scale(1.01);
	}

	#slider:after {
		content: "";
		position: absolute;
		inset: 0;
		border-left: 0;
		border-radius: 0;
		background: linear-gradient(180deg, rgba(5, 22, 32, 0.05), rgba(5, 22, 32, 0.26));
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
		color: transparent;
		font-size: 0;
		text-shadow: none;
		white-space: normal;
	}

	#top.container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	#top #main > h2:first-child {
		height: auto !important;
		margin: 0 0 16px !important;
		padding: 13px 14px 13px 16px !important;
		border-left: 4px solid #167cae;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07);
		color: #123447 !important;
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	#top #main > ul#top-box {
		display: grid !important;
		width: 100% !important;
		gap: 14px !important;
		margin: 0 0 22px !important;
		padding: 0 !important;
	}

	#top #main > ul#top-box > li {
		display: flex !important;
		float: none !important;
		position: relative;
		flex-direction: column;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 14px !important;
		overflow: hidden;
		border: 1px solid #d6e4eb !important;
		border-radius: 6px !important;
		background: #fff !important;
		box-shadow: 0 5px 16px rgba(10, 44, 61, 0.08) !important;
	}

	#top #main > ul#top-box:first-of-type > li:before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 290 / 110;
		margin: 0 0 12px;
		border: 1px solid #e0ebf1;
		border-radius: 5px;
		background-color: #f8fbfd;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(1):before {
		background-image: url("../images/sub-2/img-plan01.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(2):before {
		background-image: url("../images/sub-2/img-plan02.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(3):before {
		background-image: url("../images/sub-2/img-plan03.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(4):before {
		background-image: url("../images/sub-2/img-plan04.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:before {
		content: "";
		display: block;
		width: 84px;
		height: 86px;
		margin: 0 0 10px;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(1):before {
		background-image: url("../images/index/ico-box05.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(2):before {
		background-image: url("../images/index/ico-box06.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(3):before {
		background-image: url("../images/index/ico-box07.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(4):before {
		background-image: url("../images/index/ico-box08.png");
	}

	#top #main > ul#top-box > li h3 {
		margin: 0 0 8px !important;
		padding: 0 !important;
		color: #126f9c !important;
		font-size: 17px !important;
		line-height: 1.35 !important;
	}

	#top #main > ul#top-box > li h3 span {
		display: block;
		margin-top: 3px;
		color: #4e606a !important;
		font-size: 12px !important;
		line-height: 1.45 !important;
	}

	#top #main > ul#top-box > li p {
		display: -webkit-box;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
		overflow: hidden;
		background-image: none !important;
		color: #334b57;
		font-size: 13px !important;
		line-height: 1.65 !important;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}

	#top #main > ul#top-box > li .more-btn {
		width: 100% !important;
		height: auto !important;
		margin: auto 0 0 !important;
		background: none !important;
	}

	#top #main > ul#top-box > li .more-btn a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-height: 42px;
		padding: 11px 12px !important;
		border-radius: 5px;
		background: #0a2c3d !important;
		color: #fff !important;
		font-size: 13px !important;
		text-align: center;
		text-decoration: none;
	}

	#top #main > p {
		margin: 0 0 22px !important;
		padding: 14px !important;
		border: 0 !important;
		border-radius: 6px !important;
		background: #fff !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07) !important;
		color: #334b57;
		font-size: 13px !important;
		line-height: 1.75 !important;
	}
}

@media screen and (max-width: 380px) {
	header > .container {
		grid-template-columns: 74px minmax(0, 1fr) 44px !important;
		column-gap: 7px;
		padding: 0 9px !important;
	}

	header #logo img {
		width: 70px !important;
	}

	header #tel .banner a {
		min-height: 40px;
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 12px !important;
	}

	#mobile-menu-toggle {
		width: 42px !important;
		height: 40px !important;
		min-height: 40px !important;
	}

	#slider {
		height: 214px !important;
		min-height: 214px !important;
	}
}

/* Codex final hero calm-down. */
@media screen and (max-width: 760px) {
	#slider {
		height: 136px !important;
		min-height: 136px !important;
		margin-bottom: 14px !important;
		background: #fff !important;
	}

	#slider:before {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		transform: none !important;
	}

	#slider:after {
		display: none !important;
		content: none !important;
	}
}

@media screen and (max-width: 380px) {
	#slider {
		height: 126px !important;
		min-height: 126px !important;
	}
}

/* Codex final design service price images. */
@media screen and (max-width: 760px) {
	#top #main > ul#top-box:nth-of-type(2) > li:before {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 290 / 110;
		margin: 0 0 12px !important;
		border: 1px solid #e0ebf1;
		border-radius: 5px;
		background-color: #f8fbfd;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(1):before {
		background-image: url("../images/index/design-plan01.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(2):before {
		background-image: url("../images/index/design-plan02.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(3):before {
		background-image: url("../images/index/design-plan03.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(4):before {
		background-image: url("../images/index/design-plan04.png") !important;
	}
}

img {
	height: auto;
}

table {
	max-width: 100%;
}

@media screen and (max-width: 1024px) {
	body {
		min-width: 0;
		overflow-x: hidden;
	}

	.container {
		width: min(94%, 1000px) !important;
	}

	#main,
	aside,
	#top-box,
	#domain,
	#top #portfolio,
	#testimonial article,
	#testimonial .more,
	#plans,
	#voucher,
	#about-plan,
	#portfolio #macbook,
	#portfolio #iphone {
		width: 100% !important;
	}

	#main,
	aside {
		float: none !important;
	}

	aside {
		clear: both;
		margin-top: 32px;
	}

	footer #footer-info,
	footer .footer-col {
		width: 48% !important;
		margin: 0 2% 28px 0 !important;
	}
}

@media screen and (max-width: 760px) {
	body {
		background: #f4f6f8 !important;
		color: #1f2b33;
		font-size: 15px;
		line-height: 1.7;
	}

	.container {
		width: 100% !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	#header-top {
		height: auto !important;
		padding: 8px 0;
		background: #071b26 !important;
	}

	#header-top #text,
	#header-top #english {
		float: none !important;
		width: 100%;
		height: auto !important;
		line-height: 1.45 !important;
		text-align: center;
	}

	#header-top #text {
		font-size: 11px !important;
		padding: 0 10px;
	}

	#header-top #english {
		display: none;
	}

	header {
		height: auto !important;
		padding: 18px 0 16px;
		background: #fff !important;
		box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
	}

	header #logo,
	header #australia,
	header #tel,
	header #contact {
		float: none !important;
	}

	header #logo {
		margin: 0 0 12px !important;
		text-align: center;
	}

	header #logo img {
		width: 132px;
	}

	header #australia {
		height: auto !important;
		margin: 0 auto 14px !important;
		padding: 0 !important;
		background: none !important;
		text-align: center;
		font-size: 13px !important;
		line-height: 1.55;
	}

	header #australia span {
		display: block;
		margin-bottom: 4px;
		font-size: 17px !important;
		line-height: 1.35;
	}

	header #tel {
		width: 100% !important;
		margin: 0 !important;
		text-align: center;
	}

	header #tel .banner {
		width: 100% !important;
		height: auto !important;
		margin: 0 auto 10px !important;
		background: none !important;
		overflow: visible !important;
	}

	header #tel .banner a {
		display: block;
		max-width: 340px;
		margin: 0 auto;
		padding: 13px 16px !important;
		border-radius: 6px;
		background: #d32323;
		box-shadow: 0 5px 14px rgba(211, 35, 35, 0.25);
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		line-height: 1.35;
		text-decoration: none;
	}

	header #tel .tel {
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		overflow: visible !important;
		color: #0a2c3d;
		font-size: 23px;
		font-weight: bold;
		letter-spacing: 0;
	}

	header #tel .tel:before {
		content: "08-6249-6463";
	}

	header #tel .open {
		width: auto !important;
		height: auto !important;
		margin-top: 4px !important;
		background: transparent !important;
		color: #687780;
		font-size: 12px;
		line-height: 1.4 !important;
	}

	header #contact {
		display: none !important;
	}

	nav {
		height: auto !important;
		background: #0a2c3d !important;
		position: static !important;
		box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
	}

	nav .container {
		padding: 0 !important;
	}

	nav .container:before {
		content: "MENU";
		display: block;
		padding: 9px 16px 7px;
		color: #9ed7ef;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0;
	}

	nav ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	nav li {
		float: none !important;
		width: auto !important;
		min-height: 48px;
		line-height: 1.3 !important;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	nav li a,
	nav .current-menu-item a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 9px 8px;
		background: transparent !important;
		color: #fff !important;
		font-size: 13px;
		text-align: center;
	}

	nav li a:hover {
		background: rgba(255, 255, 255, 0.08) !important;
	}

	#slider {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 22px !important;
		padding: 14px 0 0 !important;
		background: #d8edf7 !important;
	}

	#slider #thumbnail,
	.flex-control-thumbs {
		display: none !important;
	}

	.flexslider {
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.flexslider .slides img {
		display: block;
		width: 100% !important;
		border-radius: 0;
	}

	#top.container,
	#sub.container {
		padding-top: 0;
	}

	#main {
		width: 100% !important;
	}

	#top h2,
	#main-content h2,
	#internal-title {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 14px !important;
		padding: 13px 15px !important;
		background: #3398cc !important;
		color: #fff !important;
		font-size: 17px !important;
		font-weight: bold;
		line-height: 1.45 !important;
	}

	#internal-title {
		margin-bottom: 18px !important;
		line-height: 1.45 !important;
	}

	#internal-title h1 {
		font-size: 22px !important;
		line-height: 1.4;
	}

	#top-box {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 14px;
		margin: 0 0 20px !important;
	}

	#top-box li {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 17px !important;
		border: 1px solid #d9e4ea;
		border-radius: 6px;
		background-color: #fff !important;
		background-position: right 14px bottom 12px !important;
		background-size: 86px auto !important;
		box-shadow: 0 2px 10px rgba(10, 44, 61, 0.08);
	}

	#top-box h3 {
		margin: 0 0 10px !important;
		padding-right: 78px;
		font-size: 17px !important;
		line-height: 1.45;
	}

	#top-box h3 span {
		display: block;
		margin-top: 3px;
		font-size: 12px !important;
		line-height: 1.45;
	}

	#top-box p {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding-right: 78px !important;
		font-size: 13px !important;
		line-height: 1.65;
	}

	#top-box .more-btn {
		width: auto !important;
		height: auto !important;
		margin: 14px 0 0 !important;
		background: none !important;
	}

	#top-box .more-btn a {
		display: inline-block !important;
		min-width: 132px;
		padding: 8px 12px !important;
		border-radius: 4px;
		background: #0a2c3d;
		color: #fff !important;
		font-size: 12px;
		line-height: 1.3 !important;
		text-align: center;
	}

	#top #main > p {
		margin: 0 0 22px !important;
		padding: 15px;
		border-left: 4px solid #3398cc;
		background: #fff;
		font-size: 14px;
		line-height: 1.75;
	}

	#domain {
		height: auto !important;
		margin: 20px 0 24px !important;
		padding: 18px !important;
		border-radius: 6px;
		background: #0a2c3d !important;
		color: #fff;
	}

	#domain h3 {
		margin: 0 0 12px !important;
	}

	#domain p {
		margin: 0 0 10px !important;
		padding-left: 30px !important;
		color: #fff;
		font-size: 15px !important;
		line-height: 1.55;
		background-position: 0 3px !important;
	}

	#top #portfolio {
		height: auto !important;
		margin-bottom: 24px !important;
		padding: 14px !important;
		border: 0 !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 2px 10px rgba(10, 44, 61, 0.08);
	}

	#top #portfolio li .thumbnail,
	#top #portfolio h3,
	#top #portfolio p {
		float: none !important;
		width: 100% !important;
	}

	#top #portfolio li .thumbnail {
		height: auto !important;
		margin: 0 0 12px !important;
		border-radius: 5px;
	}

	#top #portfolio li .thumbnail img {
		width: 100% !important;
		height: auto !important;
	}

	#top #portfolio h3 {
		height: auto !important;
		margin: 0 0 10px !important;
		padding: 10px 12px !important;
		background: #3398cc !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	#top #portfolio p {
		font-size: 13px !important;
		line-height: 1.7 !important;
	}

	#testimonial article {
		height: auto !important;
		min-height: 0 !important;
		margin-bottom: 12px;
		padding: 16px !important;
		border: 0 !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 2px 10px rgba(10, 44, 61, 0.08);
	}

	#testimonial article h3 {
		font-size: 15px !important;
		line-height: 1.5;
	}

	#testimonial .more {
		height: auto !important;
		padding: 10px 12px !important;
		border-radius: 5px;
		line-height: 1.5 !important;
	}

	#main-content,
	section,
	#portfolio {
		padding: 16px !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 2px 10px rgba(10, 44, 61, 0.08);
	}

	#main-content h3,
	#main-content h4,
	#main-content h6 {
		height: auto !important;
		line-height: 1.45 !important;
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}

	#main-content table,
	#price-plan table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.points {
		padding: 116px 16px 16px !important;
		background-position: center 16px !important;
	}

	#inquiry {
		height: auto !important;
		margin-top: 22px !important;
		text-align: center;
	}

	#inquiry a {
		height: auto !important;
		padding: 16px;
	}

	#inquiry img,
	#inquiry p {
		float: none !important;
		margin: 0 auto !important;
	}

	#inquiry p {
		font-size: 21px !important;
		line-height: 1.35;
	}

	#about-plan {
		height: auto !important;
		padding: 16px !important;
		border: 1px solid #dce7ed;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07);
	}

	#about-plan h2 {
		width: auto !important;
		margin: 0 0 12px !important;
		font-size: 0;
	}

	#about-plan h2 img {
		display: none !important;
	}

	#about-plan h2:before {
		content: "料金プランの選び方";
		display: block;
		padding: 12px 14px;
		border-radius: 5px;
		background: #167cae;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.4;
	}

	#about-plan ul {
		counter-reset: plan-step;
		display: grid;
		gap: 10px;
	}

	#about-plan li {
		counter-increment: plan-step;
		position: relative;
		float: none !important;
		width: 100% !important;
		min-height: 0;
		padding: 12px 12px 12px 54px !important;
		border: 1px solid #d9e6ec;
		border-radius: 5px;
		background: #f7fbfd !important;
		color: #123447 !important;
		font-size: 15px !important;
		line-height: 1.45;
		text-align: left;
	}

	#about-plan li:before {
		content: counter(plan-step);
		position: absolute;
		left: 13px;
		top: 50%;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: #3398cc;
		color: #fff;
		font-weight: bold;
		line-height: 28px;
		text-align: center;
		transform: translateY(-50%);
	}

	#about-plan li span,
	#about-plan li span.small {
		color: #52636d !important;
		font-size: 12px !important;
	}

	#plans {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 14px;
	}

	#plans .plan,
	.portfolio-list section,
	#portfolio .website-info .left,
	#portfolio .website-info .right,
	#portfolio .website-info .member li,
	#portfolio #links #contact,
	#portfolio #links #service,
	#portfolio #links li,
	#portfolio #links p {
		float: none !important;
		width: 100% !important;
	}

	#plans .plan {
		height: auto !important;
		min-height: 205px;
		margin: 0 !important;
	}

	.portfolio-list section {
		min-height: 0 !important;
		margin-bottom: 16px;
		padding: 0 !important;
	}

	.portfolio-list section .thumbnail,
	.portfolio-list section img {
		width: 100% !important;
		height: auto !important;
	}

	#portfolio #macbook,
	#portfolio #iphone {
		height: auto !important;
		margin-top: 18px !important;
		padding: 0 !important;
		background: none !important;
	}

	#portfolio #macbook .website-img,
	#portfolio #iphone .website-img,
	#portfolio #macbook .website-img img,
	#portfolio #iphone .website-img img {
		width: 100% !important;
		height: auto !important;
	}

	#portfolio #macbook .reflection {
		display: none !important;
	}

	#firstNotice2 th,
	#secondNotice2 th,
	#ContactHead th,
	#firstNotice2 td,
	#secondNotice2 td,
	#ContactHead td {
		display: block !important;
		width: 100% !important;
		padding: 12px !important;
		white-space: normal !important;
	}

	#main-content .wpcf7 form table,
	#main-content .wpcf7 form tbody,
	#main-content .wpcf7 form tr,
	#main-content .wpcf7 form th,
	#main-content .wpcf7 form td,
	#main-content form table,
	#main-content form tbody,
	#main-content form tr,
	#main-content form th,
	#main-content form td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
		text-align: left !important;
	}

	#main-content input[type="text"],
	#main-content input[type="email"],
	#main-content input[type="tel"],
	#main-content input[type="url"],
	#main-content input[type="number"],
	#main-content select,
	#main-content textarea {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 42px;
		padding: 9px 10px;
		border: 1px solid #b9cbd5;
		border-radius: 4px;
		background: #fff;
		font-size: 16px;
	}

	#main-content textarea {
		min-height: 120px;
	}

	#main-content input[type="submit"] {
		width: 100% !important;
		min-height: 46px;
		border: 0;
		border-radius: 5px;
		background: #d32323;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}

	aside {
		margin-top: 28px !important;
	}

	aside .enquiry,
	aside .reason,
	aside .first,
	aside .portfolio,
	aside .price {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 0 10px !important;
		background: none !important;
		overflow: visible !important;
	}

	aside .enquiry a,
	aside .reason a,
	aside .first a,
	aside .portfolio a,
	aside .price a {
		display: block;
		padding: 13px 14px !important;
		border-radius: 6px;
		background: #0a2c3d;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		line-height: 1.4;
		text-align: center;
		text-decoration: none;
	}

	aside .enquiry a {
		background: #d32323;
	}

	aside .column,
	aside .message {
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 14px !important;
		border-radius: 6px;
		box-shadow: 0 2px 10px rgba(10, 44, 61, 0.08);
		overflow: hidden;
	}

	aside .message #hirata {
		width: 100% !important;
	}

	footer {
		margin-top: 40px !important;
		padding-top: 24px !important;
	}

	footer .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	footer #footer-info,
	footer .footer-col {
		float: none !important;
		width: 100% !important;
		margin: 0 0 22px !important;
	}

	#page-top {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	nav ul {
		grid-template-columns: 1fr;
	}

	header #australia {
		font-size: 12px !important;
	}

	header #tel .banner a {
		max-width: none;
	}

	#top-box li {
		background-image: none !important;
	}

	#top-box h3,
	#top-box p {
		padding-right: 0 !important;
		background-image: none !important;
	}

	#domain p {
		padding-left: 0 !important;
		background-image: none !important;
	}
}

#mobile-menu-toggle {
	display: none;
}

@media screen and (max-width: 760px) {
	body {
		background: #eef3f6 !important;
	}

	body.mobile-menu-open {
		overflow-x: hidden;
	}

	#header-top {
		padding: 7px 0 !important;
	}

	#header-top #text {
		max-width: 360px;
		margin: 0 auto;
		color: rgba(255, 255, 255, 0.88);
	}

	header {
		padding: 14px 0 16px !important;
	}

	header > .container {
		display: grid;
		grid-template-columns: 92px 1fr;
		grid-template-areas:
			"logo text"
			"cta cta";
		align-items: center;
		column-gap: 12px;
	}

	header #logo {
		grid-area: logo;
		margin: 0 !important;
		text-align: left;
	}

	header #logo img {
		width: 88px !important;
	}

	header #australia {
		grid-area: text;
		margin: 0 !important;
		text-align: left;
	}

	header #australia span {
		margin-bottom: 2px;
		font-size: 15px !important;
	}

	header #tel {
		grid-area: cta;
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		margin-top: 12px !important;
	}

	header #tel .banner {
		order: 2;
		margin: 0 !important;
	}

	header #tel .banner a {
		max-width: none !important;
		border-radius: 5px;
		background: #d32323;
		font-size: 15px;
	}

	header #tel .tel {
		order: 1;
		padding: 10px 12px !important;
		border: 1px solid #d8e4ea;
		border-radius: 5px;
		background: #f8fbfc !important;
		color: #0a2c3d;
		font-size: 20px !important;
		line-height: 1.2;
	}

	header #tel .tel:before {
		content: none !important;
	}

	header #tel .open {
		order: 3;
		margin: 0 !important;
	}

	nav {
		position: sticky !important;
		top: 0;
		z-index: 50;
		background: #0a2c3d !important;
	}

	nav .container {
		padding: 0 !important;
	}

	nav .container:before {
		content: none !important;
	}

	#mobile-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		min-height: 54px;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: #0a2c3d;
		color: #fff;
		font: inherit;
		font-weight: bold;
		cursor: pointer;
	}

	#mobile-menu-toggle span {
		display: none;
	}

	#mobile-menu-toggle em {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-style: normal;
		font-size: 13px;
		letter-spacing: 0;
	}

	#mobile-menu-toggle em:before {
		content: "";
		display: inline-block;
		width: 22px;
		height: 16px;
		background:
			linear-gradient(#fff, #fff) 0 0 / 22px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 7px / 22px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 14px / 22px 2px no-repeat;
	}

	nav ul {
		display: none !important;
		grid-template-columns: none !important;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		background: #0c3448;
	}

	body.mobile-menu-open nav ul {
		display: block !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(1) {
		transform: none;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(2) {
		opacity: 1;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(3) {
		transform: none;
	}

	body.mobile-menu-open #mobile-menu-toggle em:before {
		background:
			linear-gradient(#fff, #fff) 0 0 / 22px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 7px / 22px 2px no-repeat,
			linear-gradient(#fff, #fff) 0 14px / 22px 2px no-repeat;
		transform: none;
	}

	body.mobile-menu-open #mobile-menu-toggle em:after {
		content: none;
	}

	nav li {
		width: 100% !important;
		min-height: 0 !important;
		border-right: 0 !important;
	}

	nav li a,
	nav .current-menu-item a {
		justify-content: flex-start;
		min-height: 46px;
		padding: 13px 18px !important;
		font-size: 14px;
		text-align: left;
	}

	#slider {
		display: none !important;
	}

	.flexslider .slides img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.flexslider .slides,
	.flexslider .slides > li:first-child {
		display: block !important;
	}

	.flexslider .slides > li:not(:first-child) {
		display: none !important;
	}

	#top h2,
	#main-content h2,
	#internal-title {
		border-radius: 5px;
		background: #167cae !important;
		box-shadow: 0 2px 8px rgba(10, 44, 61, 0.08);
	}

	#top-box li,
	#top #portfolio,
	#testimonial article,
	#main-content,
	section,
	#portfolio,
	aside .column,
	aside .message {
		border: 1px solid #dce7ed;
		border-radius: 6px;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07) !important;
	}

	#top-box li {
		padding: 16px !important;
		background-position: right 12px top 16px !important;
		background-size: 74px auto !important;
	}

	#top-box h3 {
		padding-right: 82px;
		color: #126f9c;
	}

	#top-box p {
		padding-right: 0 !important;
	}

	#top-box .more-btn a,
	aside .reason a,
	aside .first a,
	aside .portfolio a,
	aside .price a {
		border-radius: 5px;
		background: #0a2c3d;
	}

	#domain {
		border-radius: 6px;
		background: #123447 !important;
	}

	#testimonial .more {
		background: #fff !important;
	}

	aside {
		margin-top: 24px !important;
	}

	aside .message {
		display: none !important;
	}

	footer {
		background: #071b26 !important;
	}
}

@media screen and (max-width: 420px) {
	header > .container {
		grid-template-columns: 78px 1fr;
		column-gap: 10px;
	}

	header #logo img {
		width: 76px !important;
	}

	header #australia span {
		font-size: 14px !important;
	}

	header #australia p {
		font-size: 11px;
		line-height: 1.45;
	}

	#top-box h3 {
		padding-right: 0;
	}

	#top-box li {
		background-image: none !important;
	}
}

@media screen and (max-width: 760px) {
	body {
		padding-top: 54px;
		background: #edf3f6 !important;
	}

	#header-top {
		display: none !important;
	}

	nav {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	}

	#mobile-menu-toggle {
		min-height: 54px;
	}

	nav ul {
		max-height: calc(100vh - 54px);
		overflow-y: auto;
	}

	header {
		padding: 14px 0 !important;
		box-shadow: none !important;
	}

	header > .container {
		grid-template-columns: 74px 1fr;
		column-gap: 10px;
	}

	header #logo img {
		width: 72px !important;
	}

	header #australia span {
		color: #167cae;
		font-size: 14px !important;
	}

	header #australia p {
		font-size: 11px;
		line-height: 1.45;
	}

	header #tel {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-top: 12px !important;
	}

	header #tel .tel,
	header #tel .banner {
		order: initial;
	}

	header #tel .tel {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 8px !important;
		font-size: 17px !important;
	}

	header #tel .banner a {
		min-height: 46px;
		padding: 11px 10px !important;
		font-size: 13px;
	}

	header #tel .open {
		grid-column: 1 / -1;
		font-size: 11px;
	}

	#slider {
		display: block !important;
		position: relative;
		height: 238px !important;
		min-height: 238px !important;
		margin: 0 0 18px !important;
		padding: 0 !important;
		overflow: hidden;
		background: #0a2c3d !important;
	}

	#slider .container,
	#slider #thumbnail,
	#slider .flexslider {
		display: none !important;
	}

	#slider:before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("../images/index/img-slide02.jpg");
		background-position: center;
		background-size: cover;
		animation: gits-mobile-hero 14s infinite;
		transform: scale(1.02);
	}

	#slider:after {
		content: "オーストラリアで\Aホームページ制作ならGITS";
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 18px;
		padding: 16px;
		border-left: 4px solid #d32323;
		border-radius: 6px;
		background: rgba(7, 27, 38, 0.82);
		color: #fff;
		font-size: 22px;
		font-weight: bold;
		line-height: 1.35;
		white-space: pre-line;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	}

	@keyframes gits-mobile-hero {
		0%, 30% {
			background-image: url("../images/index/img-slide02.jpg");
		}
		36%, 64% {
			background-image: url("https://gitsweb.com.au/wp-content/uploads/2019/02/img-slide03.png");
		}
		70%, 100% {
			background-image: url("../images/index/img-slide01.png");
		}
	}

	#top.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	#top #main > h2:first-child {
		margin-bottom: 14px !important;
		border-left: 4px solid #167cae;
		border-radius: 6px;
		background: #fff !important;
		color: #123447 !important;
		font-size: 16px !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07);
	}

	#top-box {
		gap: 12px;
	}

	#top-box li {
		border-color: #d6e4eb;
		background: #fff !important;
	}

	#top-box h3 {
		margin-bottom: 8px !important;
		padding-right: 0 !important;
		font-size: 18px !important;
	}

	#top-box h3 span {
		color: #4e606a !important;
	}

	#top-box .more-btn a {
		width: 100%;
		padding: 10px 12px !important;
	}

	#top #main > p {
		border-left: 0;
		border-radius: 6px;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07);
	}
}

/* Codex final mobile top-page layer. Keep this block last. */
@media screen and (max-width: 760px) {
	html {
		scroll-padding-top: 72px;
	}

	body {
		padding-top: 70px !important;
		background: #eef3f6 !important;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}

	#header-top,
	header #australia,
	header #contact,
	header #tel .tel,
	header #tel .open {
		display: none !important;
	}

	header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1002;
		padding: 9px 0 !important;
		border-bottom: 1px solid rgba(10, 44, 61, 0.1);
		background: rgba(255, 255, 255, 0.98) !important;
		box-shadow: 0 6px 18px rgba(10, 44, 61, 0.12) !important;
	}

	header > .container {
		display: grid !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 12px !important;
		grid-template-columns: 82px minmax(0, 1fr) 46px !important;
		grid-template-areas: "logo cta menu" !important;
		align-items: center;
		column-gap: 9px;
	}

	header #logo {
		grid-area: logo;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	header #logo a {
		display: inline-flex;
		align-items: center;
	}

	header #logo img {
		display: block;
		width: 76px !important;
		height: auto !important;
	}

	header #tel {
		grid-area: cta;
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	header #tel .banner {
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	header #tel .banner a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 42px;
		width: 100% !important;
		max-width: none !important;
		padding: 10px 8px !important;
		border-radius: 5px;
		background: #d32323 !important;
		box-shadow: 0 5px 12px rgba(211, 35, 35, 0.26);
		color: #fff !important;
		font-size: 13px !important;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	#mobile-menu-toggle {
		grid-area: menu;
		display: inline-flex !important;
		position: relative;
		align-items: center;
		justify-content: center;
		justify-self: end;
		width: 44px !important;
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 !important;
		border: 1px solid #cbdde6 !important;
		border-radius: 5px !important;
		background: #fff !important;
		box-shadow: none !important;
		color: #0a2c3d !important;
		cursor: pointer;
	}

	#mobile-menu-toggle span {
		display: block !important;
		position: absolute;
		left: 11px;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background: #0a2c3d !important;
		transition: transform 0.18s ease, opacity 0.18s ease;
	}

	#mobile-menu-toggle span:nth-child(1) {
		top: 13px;
	}

	#mobile-menu-toggle span:nth-child(2) {
		top: 20px;
	}

	#mobile-menu-toggle span:nth-child(3) {
		top: 27px;
	}

	#mobile-menu-toggle em,
	body.mobile-menu-open #mobile-menu-toggle em:before,
	body.mobile-menu-open #mobile-menu-toggle em:after {
		display: none !important;
		content: none !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(1) {
		top: 20px;
		transform: rotate(45deg) !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(2) {
		opacity: 0 !important;
	}

	body.mobile-menu-open #mobile-menu-toggle span:nth-child(3) {
		top: 20px;
		transform: rotate(-45deg) !important;
	}

	nav {
		position: fixed !important;
		top: 70px !important;
		left: 0;
		right: 0;
		z-index: 1001;
		background: transparent !important;
		box-shadow: none !important;
		pointer-events: none;
	}

	body.mobile-menu-open nav {
		pointer-events: auto;
	}

	nav .container {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 12px !important;
		background: transparent !important;
	}

	nav .container:before,
	nav .container:after {
		content: none !important;
	}

	nav ul {
		display: none !important;
		max-height: calc(100vh - 86px) !important;
		margin: 0 !important;
		padding: 6px 0 !important;
		overflow-y: auto;
		border: 1px solid #d6e4eb !important;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 16px 32px rgba(10, 44, 61, 0.22);
	}

	body.mobile-menu-open nav ul {
		display: block !important;
	}

	nav li {
		float: none !important;
		width: 100% !important;
		min-height: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	nav li a,
	nav .current-menu-item a {
		display: flex !important;
		align-items: center;
		justify-content: space-between !important;
		min-height: 46px !important;
		padding: 13px 16px !important;
		border-bottom: 1px solid #edf3f6;
		background: transparent !important;
		color: #123447 !important;
		font-size: 14px !important;
		font-weight: bold;
		text-align: left !important;
		text-decoration: none;
	}

	nav li a:after {
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid #167cae;
		border-right: 2px solid #167cae;
		transform: rotate(45deg);
	}

	nav li:last-child a {
		border-bottom: 0;
	}

	#slider {
		display: block !important;
		position: relative;
		height: 232px !important;
		min-height: 232px !important;
		margin: 0 0 16px !important;
		padding: 0 !important;
		overflow: hidden;
		background: #0a2c3d !important;
	}

	#slider .container,
	#slider #thumbnail,
	#slider .flexslider {
		display: none !important;
	}

	#slider:before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("../images/index/img-slide02.jpg");
		background-position: center;
		background-size: cover;
		animation: gits-mobile-hero 16s infinite;
		transform: scale(1.01);
	}

	#slider:after {
		content: "";
		position: absolute;
		inset: 0;
		border-left: 0;
		border-radius: 0;
		background: linear-gradient(180deg, rgba(5, 22, 32, 0.05), rgba(5, 22, 32, 0.26));
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
		color: transparent;
		font-size: 0;
		text-shadow: none;
		white-space: normal;
	}

	#top.container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	#top #main > h2:first-child {
		height: auto !important;
		margin: 0 0 16px !important;
		padding: 13px 14px 13px 16px !important;
		border-left: 4px solid #167cae;
		border-radius: 6px;
		background: #fff !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07);
		color: #123447 !important;
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	#top #main > ul#top-box {
		display: grid !important;
		width: 100% !important;
		gap: 14px !important;
		margin: 0 0 22px !important;
		padding: 0 !important;
	}

	#top #main > ul#top-box > li {
		display: flex !important;
		float: none !important;
		position: relative;
		flex-direction: column;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 14px !important;
		overflow: hidden;
		border: 1px solid #d6e4eb !important;
		border-radius: 6px !important;
		background: #fff !important;
		box-shadow: 0 5px 16px rgba(10, 44, 61, 0.08) !important;
	}

	#top #main > ul#top-box:first-of-type > li:before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 290 / 110;
		margin: 0 0 12px;
		border: 1px solid #e0ebf1;
		border-radius: 5px;
		background-color: #f8fbfd;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(1):before {
		background-image: url("../images/sub-2/img-plan01.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(2):before {
		background-image: url("../images/sub-2/img-plan02.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(3):before {
		background-image: url("../images/sub-2/img-plan03.png");
	}

	#top #main > ul#top-box:first-of-type > li:nth-child(4):before {
		background-image: url("../images/sub-2/img-plan04.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:before {
		content: "";
		display: block;
		width: 84px;
		height: 86px;
		margin: 0 0 10px;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(1):before {
		background-image: url("../images/index/ico-box05.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(2):before {
		background-image: url("../images/index/ico-box06.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(3):before {
		background-image: url("../images/index/ico-box07.png");
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(4):before {
		background-image: url("../images/index/ico-box08.png");
	}

	#top #main > ul#top-box > li h3 {
		margin: 0 0 8px !important;
		padding: 0 !important;
		color: #126f9c !important;
		font-size: 17px !important;
		line-height: 1.35 !important;
	}

	#top #main > ul#top-box > li h3 span {
		display: block;
		margin-top: 3px;
		color: #4e606a !important;
		font-size: 12px !important;
		line-height: 1.45 !important;
	}

	#top #main > ul#top-box > li p {
		display: -webkit-box;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
		overflow: hidden;
		background-image: none !important;
		color: #334b57;
		font-size: 13px !important;
		line-height: 1.65 !important;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}

	#top #main > ul#top-box > li .more-btn {
		width: 100% !important;
		height: auto !important;
		margin: auto 0 0 !important;
		background: none !important;
	}

	#top #main > ul#top-box > li .more-btn a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-height: 42px;
		padding: 11px 12px !important;
		border-radius: 5px;
		background: #0a2c3d !important;
		color: #fff !important;
		font-size: 13px !important;
		text-align: center;
		text-decoration: none;
	}

	#top #main > p {
		margin: 0 0 22px !important;
		padding: 14px !important;
		border: 0 !important;
		border-radius: 6px !important;
		background: #fff !important;
		box-shadow: 0 3px 12px rgba(10, 44, 61, 0.07) !important;
		color: #334b57;
		font-size: 13px !important;
		line-height: 1.75 !important;
	}
}

@media screen and (max-width: 380px) {
	header > .container {
		grid-template-columns: 74px minmax(0, 1fr) 44px !important;
		column-gap: 7px;
		padding: 0 9px !important;
	}

	header #logo img {
		width: 70px !important;
	}

	header #tel .banner a {
		min-height: 40px;
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 12px !important;
	}

	#mobile-menu-toggle {
		width: 42px !important;
		height: 40px !important;
		min-height: 40px !important;
	}

	#slider {
		height: 214px !important;
		min-height: 214px !important;
	}
}
/* Codex final hero calm-down. */
@media screen and (max-width: 760px) {
	#slider {
		height: 136px !important;
		min-height: 136px !important;
		margin-bottom: 14px !important;
		background: #fff !important;
		background-image: none !important;
	}

	#slider:before {
		background-color: #fff !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		transform: none !important;
	}

	#slider:after {
		display: none !important;
		content: none !important;
	}
}

@media screen and (max-width: 380px) {
	#slider {
		height: 126px !important;
		min-height: 126px !important;
	}
}
/* Codex final design service price images. Keep this block last. */
@media screen and (max-width: 760px) {
	#top #main > ul#top-box:nth-of-type(2) > li:before {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 290 / 110;
		margin: 0 0 12px !important;
		border: 1px solid #e0ebf1;
		border-radius: 5px;
		background-color: #f8fbfd;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(1):before {
		background-image: url("../images/index/design-plan01.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(2):before {
		background-image: url("../images/index/design-plan02.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(3):before {
		background-image: url("../images/index/design-plan03.png") !important;
	}

	#top #main > ul#top-box:nth-of-type(2) > li:nth-child(4):before {
		background-image: url("../images/index/design-plan04.png") !important;
	}
}