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

.lead {
		font-size: 1.2rem;
		margin: 0 10% 5%;
	}
	.lead.centerblue {
		text-align: center;
		color: #004098;
		font-weight: bold;
		font-size: 1.5em;
		margin: 1.5em 0;
	}
	h3.middle {
		font-size: 1.6em;
		color: #004098;
		font-weight: 700;
		margin-bottom: 1%;
	}
	p.small {
		font-size: 1.3em;
		color: #004098;
		font-weight: 700;
	}
	.margin_tb3per {
		margin: 3% 0;
	}
	.seminarttlBox {
		padding: 2.03% 3.13% 2.34% 5.47%;
	}
	.markerOnline {
		display: inline-block;
		background-color: #ceff9e;
		padding: 1px 3px;
	}
	.markerReal {
		display: inline-block;
		background-color: #87ceeb;
		padding: 1px 3px;
	}
	.markerHybrid {
		display: inline-block;
		background-color: #9e9eff;
		padding: 1px 3px;
	}
	.marker4schedule {
			margin: 2%;
			font-size: 1.2em;
	}
	.problems {
		display: flex;
		justify-content: space-around;
	}
	.problems>li {
		position: relative;
		display: inline-block;
		background-color: #fff;
		border: solid 2px #525252;
		padding: 16px;
		width: 100%;
		text-align: center;
		font-size: 1.2em;
		color: #004098;
		font-weight: bold;
		margin: 1%;
		}
	.problems>li::before,
	.problems>li::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.problems>li::before {
		border: solid 12px transparent;
		border-top: solid 12px #525252;
	}
	.problems>li::after {
		border: solid 14px transparent;
		border-top: solid 14px #fff;
		margin-top: -5px;
	}
	.box16{
		padding: 0.5em 1em;
		margin: 2em 0;
		background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
		background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	}
.number {
  background-color: #004098;
  color: #ffffff;
  padding: 10px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
}
	.ribbon12-wrapper {  
  position: relative;
  }

.ribbon12 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 5px 5px 12px;
  margin: 0 0 0 -12px;
  width: calc(100% + 12px);
  font-size: 1rem;
  color: white;
  background: #87ceeb;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}
.ribbon12.purplerbn {
	background: #9e9eff;
}
.ribbon12.greenrbn {
	background: #99ff33;
}
.ribbon12:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 8px transparent;
  border-right: solid 12px #6081b7;
}
.ribbon12.purplerbn:before {
  border-right: solid 12px #5f5f99;	
}
.ribbon12.greenrbn:before {
  border-right: solid 12px #a5cc7e;	
}
.flexbox {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 768px){	
.pagelinl_sp_l {
    width: 100% !important;
}
.lead {
		font-size: 1.0rem;
		margin: 0 5% 5%;
	}
.serviceBoxWrap .noLinkBtn .txtBox {
    padding: 7.18% 7.18% 15% !important;
}	
}
/*======================
   メタバースコンテンツ
======================*/
.f-container {
    display: flex;
    margin-top: 3%;
    flex-wrap: wrap;
}
.item {
  width: 50%;
  justify-content: space-between;
  padding: 1%;
}
.item_48per {
  width: 49%;
  justify-content: space-between;
  padding: 1%;
}
.item_60per {
  width: 60%;
  justify-content: space-between;
  padding: 1%;
}
.item_33per {
  width: 33.3%;
  justify-content: space-between;
  padding: 1%;
}
.item_31per {
  width: 32.3%;
  justify-content: space-between;
  padding: 2%;
}
.item_25per {
  width: 25%;
  justify-content: space-between;
  padding: 1%;
}
.item_23per {
  width: 24.5%;
  justify-content: space-between;
  padding: 0.5%;
}
.item_40per {
  width: 40%;
  justify-content: space-between;
  padding: 1%;
}
.item_100per {
  width: 100%;
  justify-content: space-between;
  padding: 1%;
}
.item-img {
  padding: 0;
}
.item-body {
  padding: 0;
}
.item-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #003f8e;
}
.item-body p {
  line-height: 1.5em;
  text-align: left;
}
.sub_title {
 margin: 0 0 8px;
 font-size: 50px;
  font-weight: 700;
  color: #003f8e;	
}
.shadowBox {
  background: #fff;
  box-shadow: 0 0 8px rgba(102, 102, 102, 0.3);
}
.number {
    background-color: #004098;
    color: #ffffff;
    padding: 10px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.shadowBox .txtBox {
    padding: 3.5%;
}
.textsize {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 26px;
}
.txtBox h2.sub {
    text-align: left;
    font-weight: 700;
    font-size: 24px;
    color: #004098;
    line-height: 2;
    margin-bottom: 1em;
}
.shadowBox .txtBox h3 {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: #004098;
    line-height: 1;
    margin-bottom: 1em;
}
.textsize h3 {
    text-align: left;
    font-weight: 700;
    font-size: 24px;
    color: #004098;
    line-height: 2;
    margin-bottom: 1em;
}
.font_120per {
    font-size: 120%;
}
.reason {
  background: #dff1ef;
  padding: 15px 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 1.6rem;
}
.reason h4 {
  display: inline-block;
  margin: -1.5rem;
  padding: 0 15px;
  border-radius: 50px;
  background: #59bab2;
  line-height: 1.7;
  color: white;
  position: absolute;
}

.reason ul {
  margin-top: 0.6rem;
}
.reason ul li:before {
  content: "\f046";
  color: #59bab2;
  font-family: FontAwesome;
  margin-right: 0.55em;
}
.reason ul li {
  line-height: 1.5;
}
.detail {
    margin: 1rem 0 3rem;
    height: 4rem;
    /* color: #a4894b; */
    color: #666;
}
.marker_yellow {
    background: linear-gradient(transparent 60%, #ffff75 60%);
}
.f-container .textsize .em {
    font-size: 1.2rem;
    font-weight: 700;
    color: #004098;
}
.item figure.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;
}
.item figure.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;
}
.item figure.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
p.totop {
    text-align: right !important;
    margin: 3%;
    font-size: 120%;
}
p.totop a, a.link {
    color: #555;
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
		h3.middle {
			font-size: 128.57%;
		}
		.problems {
			display: block;
		}
		.problems>li {
			margin-bottom: 30px;
		}
.item {
    width: 100%;
    padding: 0;
    margin-bottom: 5%;
}
.detail {
    height: 6.5rem;
}
.item figure.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	}