@charset "UTF-8";

.sp {
  display: none;
}

@media all and (max-width: 1080px) {
/*----------------------------------------------------------------------
	header
----------------------------------------------------------------------*/
	header {
		height:55px!important;
		position:fixed;
		top:0;
	}
	
	header .logo img {
		height:40px;
	}
	
	header nav {
		float:none;
		padding-top:55px;
		background:#000;
		font-size:1.16em;
		position:fixed;
		right:-100%;
		transition:.3s;
		overflow-y:scroll;
		min-width:270px;
		height:100%;
	}
	
	header.open nav {
		right:0;
		box-shadow:-1px 0 20px #333;
	}
	
	html.open {
		overflow:hidden;
		position:relative;
	}
	
	html.open::after {
		content:'';
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background:rgba(0,0,0,.3);
	}
	
	header nav > ul {
		display:block;
	}
	
	header nav > ul > li {
		border-bottom:solid 1px #fff;
		position:relative;
		padding:0 3em 0 2em;
	}
	
	header nav > ul > li:last-child {
		border-bottom:none;
	}
	
	header nav > ul > li:nth-child(-n+3) > span,
	header nav > ul > li:first-child > ul > li > span {
		position:absolute;
		right:0;
		top:0;
		width:3em;
		height:3.2em;
		background:#e7eaed;
	}
	
	header nav > ul > li:first-child > ul > li > span {
		background:none;
	}
	
	header nav > ul > li:nth-child(-n+3)::before,
	header nav > ul > li:nth-child(-n+3)::after,
	header nav > ul > li:first-child > ul > li::before,
	header nav > ul > li:first-child > ul > li::after {
		content:'';
		width:1em;
		height:2px;
		background:#000;
		position:absolute;
		right:1em;
		top:1.65em;
		transition:.3s;
		z-index:1;
	}
	
	header nav > ul > li:first-child > ul > li::before,
	header nav > ul > li:first-child > ul > li::after {
		background:#fff;
		top:.85em;
	}

	header nav > ul > li:not(.open)::after,
	header nav > ul > li:first-child > ul > li:not(.open)::after {
		transform:rotate(-270deg);
	}
	
	header nav > ul > li.open::before,
	header nav > ul > li:first-child > ul > li.open::before {
		transform:rotate(180deg);
	}
	
	header nav > ul > li > a {
		padding:1em 0;
		text-align:left;
		color:#fff!important;
		line-height:1.2em;
	}
	
	header nav > ul > li > a::after,
	header nav > ul > li > ul li a::before,
	header nav > ul > li:first-child > ul > li > a::after {
		display:none;
	}
	
	header nav > ul > li > a > br {
		display:none;
	}
	
	header nav > ul > li > a > span {
		margin-left:2em;
	}

	header nav > ul > li > a > span::before,
	header nav > ul > li > a > span::after {
		content:'－'
	}
	
	header nav > ul > li > ul {
		position:relative;
		visibility:visible;
		padding-top:0!important;
		opacity:1;
		z-index:1;
		display:none;
	}
	
	header nav > ul > li > ul > li > a {
		background:none;
		padding:0 3em 1em 0;
	}
	
	header nav > ul > li:first-child > ul > li > a {
		display:inline-block;
		padding-right:0;
	}
	
	header nav > ul > li:first-child > ul > li ul {
		position:relative;
		left:0;
		visibility:visible;
		opacity:1;
		display:none;
	}

	header nav > ul > li:first-child > ul > li li a {
		background:none;
		padding-top:0;
		padding-right:4em;
	}
	
	header nav > ul > li:first-child > ul > li li a::after {
		right:2em;
	}
	
	.menubtn {
		position:absolute;
		right:20px;
		top:50%;
		transform:translateY(-50%);
		width:36px;
		height:27px;
		cursor:pointer;
		transition:.3s;
	}
	
	.menubtn span {
		position:absolute;
		width:100%;
		height:3px;
		background:#0f344d;
		transition:.3s;
	}
	
	header.index .menubtn span {
		background:#fff;
	}
	
	.menubtn span.top {
		top:0;
	}
	
	.menubtn span.middle {
		top:50%;
		transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
	}
	
	.menubtn span.bottom {
		bottom:0;
	}
	
	.menubtn span.menuclick1 {
		-webkit-transform:translateY(12px) rotate(-315deg);
		transform:translateY(12px) rotate(-315deg);
		background:#fff!important;
	}
	
	.menubtn span.menuclick2 {
		background:transparent!important;
	}
	
	.menubtn span.menuclick3 {
		-webkit-transform:translateY(-12px) rotate(315deg);
		transform:translateY(-12px) rotate(315deg);
		background:#fff!important;
	}
	
	header.scroll .menubtn span {
		background:#0f344d;
	}

.howgo {
display: block;
}

.howgo div.p {
display: block;
width: 90%;
margin: 0 auto 2em;
}

.howgo div.p div img {
max-width: 100%;
height: auto;
}

}

@media all and (max-width: 1024px) {
	body {
		font-size:1.2em;
	}
	
	.container {
		width:94%;
	}
	
	.submenu {
		width:94%;
	}
	
	footer .logo img {
		height:40px;
	}

	footer .pagetop {
		width:100px;
	}
	
	footer .pagetop img {
		width:100%;
	}
}

@media all and (max-width: 768px) {
	#index .com-rec {
		display:block;
	}
	
	#index .com-rec a {
		width:calc(100% - 3em);
	}
	
	#index .com-rec a:first-child {
		margin:3em 1.5em 1.5em 1.5em;
	}
	
	#index .com-rec a:last-child {
		margin:1.5em 1.5em 3em 1.5em;
	}
	
	#company.outline .representative img.picture {
		float:none;
		display:block;
		margin:0 auto 3em;
		max-width:100%;
	}
	
}

@media all and (max-width: 425px) {
	.pc {
		display: none;
	}
	
	.sp {
		display:block;
	}
	
	.main {
		margin-top:55px;
		padding:3em 0;
	}
	
	.main .keyword {
		left:5%;
	}
	
	.main h1 .en,
	.main .keyword .en {
		font-size:2.2em;
		font-size:7vw;
	}
	
	.main h1 .en {
		letter-spacing:inherit;
	}

	.main .keyword .ja {
		font-size:1em;
	}
	
	div:not(#index) .content .container > div {
		padding:4em 0;
	}
	
	.submenu {
		width:100%;
		position:relative;
		bottom:-3em;
		left:0;
		transform:none;
		flex-wrap:wrap;
	}
	
	.submenu li {
		width:50%;
		border-left:none;
	}
	
	.submenu li:last-child {
		border-right:none;
	}
	
	.submenu li:nth-child(2n+1) {
		border-right:solid 1px;
	}
	
	#service.domain .submenu li:nth-child(2) {
		border-bottom:solid 1px;
	}
	
	.submenu li a {
		padding:1em;
	}
	
	h2 {
		font-size:2em;
		letter-spacing:inherit;
	}
	
	h2 span {
		display:block;
		font-size:.5em;
		margin:.5em 0 0;
	}
	
	h3 {
		font-size:1.2em;
		margin-bottom:.5em;
	}
	
	div:not(#index):not(.index) .content h3 {
		border-bottom:solid 1px #0f344d;
	}
	
	div:not(#index):not(.index) .content h3::after {
		display:none;
	}
	
	.feature div {
		display:block;
	}
	
	.feature div dl {
		width:100%;
		padding:0 1em 1em 0;
	}
	
	.feature dt {
		font-size:1.2em;
	}
	
	.tablewrap {
		overflow-x:scroll;
	}
	
	.tablewrap::before {
		content:'※横にスクロールしてご覧ください。';
		position:relative;
		top:1.5em;
	}
	
	.tablewrap table {
		white-space:nowrap;
	}
		
/*----------------------------------------------------------------------
	index
----------------------------------------------------------------------*/
	#index .main {
		overflow:visible;
	}
	
	#index h2 span {
		margin:0;
	}
	
	.news li p {
		display:block;
		width:100%;
	}
	
	#index .service .menu {
		display:block;
	}
	
	#index .service .menu div {
		width:100%;
		height:300px;
	}
	
	.support .menu a {
		width:50%;
	}
	
	#index .com-rec img {
		width:auto;
		height:180px;
		position:relative;
		transform:translateX(-50%);
		left:50%;
	}
	
	#index .contact .contact-wrap {
		display:block;
	}
	
	#index .contact .contact-wrap div {
		width:100%;
	}
	
	#index .contact .contact-wrap .tel {
		border-right:none;
	}
	
	#index .contact .contact-wrap .tel img {
		height:1em;
	}
	
/*----------------------------------------------------------------------
	service
----------------------------------------------------------------------*/
	#service .menu div ul {
		display:block;
	}
	
	#service .menu div li {
		width:100%;
	}
	
	#service .menu div li:not(:first-child) {
		margin-top:3em;
	}
	
/*----------------------------------------------------------------------
  service second
----------------------------------------------------------------------*/
	#service.shared .plan tr.sp {
		display:table-row;
	}
	
	#service.shared th,
	#service.shared td {
		padding:.5em;
	}
	
	#service.shared .plan > table td {
		width:25%;
	}
	
	#service.shared .plan th:first-child,
	#service.shared .plan tr:not(.sp) td:first-child:not(.separator) {
		display:none;
	}
	
	#service.shared .option table {
		width:100%;
	}
	
	#service .flow .tab {
		display:block;
	}
	
	#service .flow .tab li {
		width:100%!important;
	}
	
	#service .flow .tab li:not(:first-child) {
		margin-top:1em;
	}
	
	#service .flow .tab li::after {
		display:none;
	}
	
	#service .flow .tab-content li div {
		padding:0 1em 3em 4em;
	}
	
	#service .flow .tab-content li div::before {
		font-size:3em;
	}
	
	#service .flow .tab-content li div span {
		font-size:1.2em;
	}

	#service.shared .payment .figure {
		min-width:auto;
		width:100%;
		border:none;
		padding:20px 0 40px;
	}
	
	#service.shared .payment .figure2 li:nth-child(2) span {
		font-size:11px;
	}
	
	.application li a {
		display:flex;
	}
	
	#service.dns table {
		width:100%;
	}
	
	#service.web .skill ul {
		display:block;
	}
	
	#service.web .skill ul li {
		width:100%;
	}
	
	#service.web .skill ul li h3 {
		margin-top:3em;
	}
	
	#service.system .lang div:last-child {
		margin-top:3em;
	}
	
	#service.translation .lang {
		width:100%;
	}
	
	#service.translation .lang li {
		width:40%;
	}
	
	#service.translation .lang li:nth-child(n+3) {
		margin-top:1em;
	}
	
	#service.translation .lang li img {
		max-width:100%;
	}
	
/*----------------------------------------------------------------------
	support
----------------------------------------------------------------------*/
	#support .manual h3 {
		display:block!important;
	}
	
	#support .manual h3::after {
		display:none!important;
	}
	
	#support .accordion dd th,
	#support .accordion dd td {
		padding:.5em;
	}
	
	#support .accordion dd td:nth-child(3) {
		width:30%;
	}
	
	#support .accordion dd img {
		float:none!important;
		display:block;
		margin:1em auto;
	}
		
	#support .accordion dd span.sp {
		display:inline;
	}

/*----------------------------------------------------------------------
	company
----------------------------------------------------------------------*/
	#company.outline table th,
	#company.outline table td,
	#transaction table th,
	#transaction table td {
		display:block;
		width:100%;
		padding:1em;
	}
	
	#company.outline table th,
	#transaction table th {
		padding-bottom:0;
	}
	
	#company.outline table td,
	#transaction table td {
		padding-top:0;
	}
	
	#company.message .introduce {
		display:block;
	}
	
	#company.message .introduce .profile {
		width:100%;
	}
	
	#company.history table th {
		padding-left:0;
	}
	
	#company.history table tr:first-child th::before {
		height:33px;
	}
	
	#company.history table td {
		padding-right:0;
	}
	
	#company.dc .about p {
		display:flex;
		flex-direction:column-reverse;
	}
	
	#company.dc .about p img {
		float:none;
		display:block;
		margin:1em auto 0;
		max-width:100%;
	}
	
	#company.dc .about strong {
		margin-top:3em;
		display:block;
	}
	
	#company.dc .special a img {
		max-width:100%;
	}
	
/*----------------------------------------------------------------------
	news
----------------------------------------------------------------------*/
	#news .categories {
		flex-wrap:wrap;
	}
	
	#news .categories a {
		margin:0;
		width:48%;
		text-align:center;
	}
	
	#news .categories a:nth-child(n+3) {
		margin-top:1em;
	}


/*----------------------------------------------------------------------
	contact
----------------------------------------------------------------------*/
	#contact table {
		width:100%;
	}
	
	#contact table th,
	#contact table td {
		display:block;
		width:100%;
	}
	
	#contact table th {
		padding-bottom:0;
	}
	
	#contact table tr:first-child td {
		height:calc(42px + 2em);
	}
	
	#contact button {
		margin:0 1em;
	}

/*----------------------------------------------------------------------
	sitemap
----------------------------------------------------------------------*/
	#sitemap .content .container {
		display:block;
	}
	
	#sitemap .content .container > ul {
		width:100%;
	}
	
	#sitemap .content .container > ul > li {
		margin-top:3em;
	}

/*----------------------------------------------------------------------
	footer
----------------------------------------------------------------------*/
  footer ul {
		display:block;
	}
	
	footer li {
		border:none!important;
		display:inline-block;
	}
	
	footer li a {
		display:inline;
	}
	
}