.img_center {
text-align: center;	
}

.fbox {
    box-shadow: inset 0px 0px 0px 10px rgb(106 154 189 / 29%);
    border: 1px solid #6a9abd;
    margin-bottom: 20px;
    border-radius: 10px;
    min-height: 100px;
    position: relative;
    margin-top: 20px;
    padding: 40px;
    background-color: #6a9abd0f;
    color:#222;
}
.fbox h3 {
color: #000;
    font-size: 18px;
    position: relative;
    padding-left: 55px;
    margin: 0;
}
.fbox h3 span {
    background-color:#cc3939;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 4px;
    position: absolute;
    top: 0;
    left: 0;
}
.btn-subsp {
	position: relative;
	left: calc(50% - 176px);
	display: block;
	width: 352px;
	padding: 5px 10px;
	text-align: center;
	background-color: #4375aa;
	border-radius: 15px;
	border: none;
}
.btn-subsp:hover {
	background-color: #25415e;
}
.ul-suspk {
	 list-style-type: '・' !important;
	 margin-left: 30px;
	 border: 0;
}
.ul-suspk>li {
	display: list-item !important;
	border: none !important;
	padding: 3px 0 !important;
}
.breadcrumb {
	margin-top: 20px !important;
}
.pore {
	position: relative;
}
.skgridbox {
	display: grid;
	margin: 0 auto;
	width: 80%;
	grid-auto-rows: minmax(48px,auto);
	grid-template-columns: repeat(4,23%);
	grid-gap:20px;
	position: relative;
	z-index: 2;
}
.skgridbox > div {
	border: none;
	border-radius: 8px;
	text-align: center;
	font-size: small;
	font-weight: bold;
	vertical-align: middle;
}
.skgi1 {
	background-color: #00426b;
	color: #fff;
	grid-column: 1;
	line-height: 20px;
}
.skgi2 {
	background-color: #0096d1;
	color: #fff;
	grid-column: 2;
	line-height: 20px;
}
.skgi3 {
	background-color: #00bcd1;
	grid-column: 3;
	line-height: 20px;
}
.skgi4 {
	background-color: #00d6b3;
	grid-column: 4;
	line-height: 20px;
}
.skgif {
	grid-column: 1/5;
}
.skgih {
	grid-column: 3/5;
}
.skgidotted {
	border: #00426b dotted !important;
	background-color: #fff;
	grid-column: 1;
}
.aw {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	line-height: 20px;
}
.aw:hover {
	color: #fff;
}
.ab {
	display: block;
	width: 100%;
	height: 100%;
	color: #000;
	line-height: 20px;
}
.ab:hover {
	color: #000;
}
.arrowbox {
	display: grid;
	width: 80%;
	margin: 0 10%;
	grid-template-columns: repeat(4,23%);
	grid-auto-rows: minmax(48px,auto);
	z-index: 0;
	grid-gap:20px;
	position: absolute;
	top: 0;
}
.arrowbox > div {
	border: none;
	border-radius: 8px;
	text-align: center;
	font-size: small;
	font-weight: bold;
	vertical-align: middle;
}
.arrowb1 {
	position: relative;
	z-index: 0;
	top: 48px;
	left: 0;
}
.arrowb1::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: calc(50% - 8px);
	width: 16px;
	height: calc(1280px - 5vw);
	background: #ddd;
}
.arrowb1::after {
	content: "";
	display: block;
	position: absolute;
	top:  calc(1280px - 5vw);
	left: calc(50% - 20px);
	width: 0;
	height: 0;
	border: 20px solid;
	border-color: #ddd transparent transparent transparent;
}
.arrowl1 {
	position: relative;
	z-index: 0;
	top: calc(50% - 16px);
	left: -30px;
	grid-column: 4;
	grid-row: 4;
}
.arrowl2 {
	position: relative;
	z-index: 0;
	top: calc(50% - 16px);
	left: -30px;
	grid-column: 3;
	grid-row: 5;
}
.arrowl1::before,
.arrowl2::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent #444 transparent transparent;
}
.arrowl1::after,
.arrowl2::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: 16px;
	background: #444;
}
.arrowl3box {
	position: relative;
	z-index: 0;
	top: 0;
	left: -30px;
	grid-column: 2/3;
}
.arrowl3 {
	position: relative;
	top: calc(50% - 6px);
}
.arrowl3::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent #444 transparent transparent;
}
.arrowl3::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: calc(200% + 40px + 16px);
	background: #444;
}
.arrowl4 {
	position: relative;
	z-index: 0;
	top: calc(50% - 24px);
	left: -16px;
	grid-column: 2/3;
}
.arrowl4::before {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: calc(200% + 40px + 20px);
	background: #444;
}
.arrowl4::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: calc(200% + 60px + 16px);
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent transparent transparent #444;
}
.arrowl5box {
	position: relative;
	z-index: 0;
	top: 0;
	left: -30px;
}
.arrowl5 {
	position: relative;
	top: calc(50% - 6px);
}
.arrowl5::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent #444 transparent transparent;
}
.arrowl5::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: 16px;
	background: #444;
}
.arrowl6 {
	position: relative;
	z-index: 0;
	top: calc(50% - 24px);
	left: -8px;
}
.arrowl6::before {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: 20px;
	background: #444;
}
.arrowl6::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 30px;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent transparent transparent #444;
}
.arrowl7box {
	position: relative;
	z-index: 0;
	top: 0;
	left: -30px;
	grid-column: 2;
}
.arrowl7 {
	position: relative;
	top: calc(50% - 6px);
}
.arrowl7::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent #444 transparent transparent;
}
.arrowl7::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: calc(100% + 56px);
	background: #444;
}
.arrowl8 {
	position: relative;
	z-index: 0;
	top: calc(50% - 24px);
	left: -16px;
	grid-column: 2;
}
.arrowl8::before {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: calc(100% + 40px);
	background: #444;
}
.arrowl8::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: calc(100% + 56px);
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent transparent transparent #444;
}
.arrowl9box {
	position: relative;
	z-index: 0;
	top: 0;
	left: -30px;
	grid-column: 2;
}
.arrowl9 {
	position: relative;
	z-index: 0;
	top: calc(50% - 24px);
	left: -16px;
	grid-column: 2;
}
.arrowl9::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 16px;
	height: 4px;
	width: calc(200% + 60px);
	background: #444;
}
.arrowl9::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 8px);
	left: calc(200% + 60px + 16px);
	width: 0;
	height: 0;
	border: 10px solid;
	border-color:  transparent transparent transparent #444;
}
.arrowl10 {
	position: relative;
	top: calc(50% - 6px);
}
.arrowl10::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border: 10px solid;
	border-color: transparent #444 transparent transparent;
}
.arrowl10::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	height: 4px;
	width: calc(200% + 56px);
	background: #444;
}
.arrowtext {
	position: relative;
	padding-top: 20px;
	 grid-row: 14;
	 z-index: 2;
	 grid-column: 2/4;
	 background-color: #00d18b;
	 line-height: 20px;
}
.arrowtext::before{ 
	content: "";
	display: block;
	position: absolute;
	top: 99%;
	left: calc(50% - 25px);
	bottom: 0;
	width: 0;
	height: 0;
	border: 50px solid;
	border-color:  #00d18b transparent transparent transparent;
}
.news-n::after {
	content: "NEW";
	display: inline-block;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 100%;
  background-color: #de4d4d;
  color: #fff;
  border-radius: 4px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  text-transform: none !important;
	text-align: center;
	vertical-align: middle;
	margin-top: -3px;
  margin-left: 5px;
}
@media (max-width:1200px) {
	.arrowb1::before {
		height: calc(1280px - 1vw);
	}
	.arrowb1::after {
		top: calc(1280px - 1vw);
	}
}
@media (max-width:999px) {
	.skgridbox {
		width: 100%;
		margin-left: -15px;
	}
	.arrowbox {
		width: 100%;
		margin-left: -15px;
		left: 0;
	}
	.arrowb1::before {
		height: calc(1280px - 8vw);
	}
	.arrowb1::after {
		top: calc(1280px - 8vw);
	}
}
@media (max-width:768px) {
	.arrowb1::before {
		height: calc(1280px + 5vw);
	}
	.arrowb1::after {
		top: calc(1280px + 5vw);
	}
}
@media (max-width:550px) {
	.arrowb1::before {
		height: calc(1280px + 10vh);
	}
	.arrowb1::after {
		top: calc(1280px + 10vh);
	}
}