@charset "UTF-8";
/* CSS Document */

.hubport_01 {
	margin-top: 3em;
	align-items: center;
	display: flex;
	
}

.hubport_01 .text-box {
	width: 70%;
	margin-left: 1em;
}

.hubport_01 h2 {
	margin-bottom: 1em;
}


.hubport_02 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_02 .image {
	order: 1;
	width: 50%;
	margin-left: 1em;
}

.hubport_02 .text-box {
	width: 46%;
}

.hubport_02 h2 {
	margin-bottom: 1em;
}

.hubport_03 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_03 h2 {
	margin-bottom: 1em;
}

.hubport_03 .text-box {
	width: 45%;
	margin-left: 1.3em;
}

.hubport_03 .image {
	width: 50%;
}

.hubport_04 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_04 h2 {
	margin-bottom: 1em;
}

.hubport_04 .image {
	order: 1;
	width: 50%;
}

.hubport_04 .text-box {
	width: 45%;
	margin-right: 1.5em;
}

.hubport_05 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_05 h2 {
	margin-bottom: 1em;
}

.hubport_05 .text-box {
	width: 50%;
	margin-left: 1em;
}

.hubport_05 .image {
	width: 50%;
}

.hubport_06 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_06 h2 {
	margin-bottom: 1em;
}

.hubport_06 .text-box {
	width: 50%;
	margin-left: 1em;
}

.hubport_06 .image {
	order: 1;
	width: 55%;
}

.hubport_07 {
	display: flex;
	align-items: center;
	margin-top: 5em;
}

.hubport_07 h2 {
	margin-bottom: 1em;
}

.hubport_07 .text-box {
	width: 50%;
	margin-left: 1em;
}

.hubport_07 .image {
	width: 50%;
}




.hubport_gallery {
	margin-top: 2em;
	margin-bottom: 3em;
  display:flex;
	width: 710px;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}

.hubport_gallery .item  {
	width: 25%;
}

.hubport_spec  li {
	list-style: none;
}

@media screen and (max-width:599px) {
/*smartphone*/
	.hubport_01 {
	margin-top: 3em;
	align-items: center;
	display: flex;
	flex-direction: column;
	
}

.hubport_01 .text-box {
	width: 100%;
	margin-left: 1em;
}

.hubport_01 h3 {
	margin-bottom: 1em;
}

.hubport_02 {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 2em;
}

.hubport_02 .image {
	order: 0;
	width: 100%;
}

.hubport_02 .text-box {
	width: 100%;
}

.hubport_02 h3 {
	margin-bottom: 1em;
}

.hubport_03 {
	display: flex;
	align-items: center;
	margin-top: 2em;
	flex-direction: column;
}

.hubport_03 .text-box {
	width: 100%;
	margin-left: 1em;

}
	
	.hubport_03 .image {
			width: 100%;
	}

.hubport_04 {
	display: flex;
	align-items: center;
	margin-top: 2em;
	flex-direction: column;
}

.hubport_04 .image {
	order: 0;
	width: 100%;
}

.hubport_04 .text-box {
	width: 100%;
}

.hubport_05 {
	display: flex;
	align-items: center;
	margin-top: 2em;
	flex-direction: column;
}

.hubport_05 .text-box {
	width: 100%;
	margin-left: 2em;
}

.hubport_05 .image {
	width: 100%;
}
	
.hubport_06 {
	display: flex;
	align-items: center;
	margin-top: 2em;
	flex-direction: column;
}	
	
.hubport_06 .text-box {
	width: 100%;
	margin-left: 2em;
}

.hubport_06 .image {
	width: 100%;
		order: 0;
}
	
.hubport_07 {
	display: flex;
	align-items: center;
	margin-top: 2em;
	flex-direction: column;
}

.hubport_07 .text-box {
	width: 100%;
	margin-left: 2em;
}

.hubport_07 .image {
	width: 100%;
}

.hubport_gallery {
	margin-top: 2em;
	margin-bottom: 3em;
  display:flex;
	width: 300px;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}

.hubport_gallery .item  {
	width: 50%;
}
}