body {
  color:#333;
  background:url(./image/body_bg.jpg) repeat 0 0;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

@media (min-width : 768px) {
  .size-l {
    font-size: 2.0em;
    font-family: 'Noto Sans JP', sans-serif;font-weight:900;
  }
  .banner1 { margin-top: 0em;margin-bottom: 0em;padding: 3em; background-color: #0C377C;color: #fff;text-align:center;}/*#DCE8F2*/
  .banner1 h2 { margin-bottom:0; padding-bottom:0;font-size:2.25em;font-family: 'Noto Sans JP', sans-serif;font-weight:900;color:#fff;}
  .banner1 p { font-size: 2.0em;}
  .banner2 { margin-top: 0em;margin-bottom: 0em;padding: 3em; background-color: #ccc;color: #fff;text-align:center;}/*#DCE8F2*/
  .banner2 h2 { margin-bottom:0; padding-bottom:0;font-size:2.25em;font-family: 'Noto Sans JP', sans-serif;font-weight:900;color:#fff;}
  .banner2 p { font-size: 1.25em;}

  .space-1 {
    margin-top: 2em;
    margin-bottom: 3em;
  }
  .space-2 {
    margin-top: 3em;
    margin-bottom: 4em;
  }

  .padding-1 {
    padding-top: 5em;
    padding-bottom: 5em;
  }

}

/* スマホサイズ */
@media (max-width : 768px) {
  .size-l {
    font-size: 1.50em;
    font-family: 'Noto Sans JP', sans-serif;font-weight:900;
  }

  .banner1 { margin-top: 0em;margin-bottom: 0em;padding: 1.0em; background-color: #0C377C;color: #fff;text-align:center;}
  .banner1 h2 { margin-bottom:0; padding-bottom:0;font-size:1.75em;font-family: 'Noto Sans JP', sans-serif;font-weight:900;color: #fff;}
  .banner1 p { font-size: 0.75em;}
  .banner2 { margin-top: 0em;margin-bottom: 0em;padding: 1.0em; background-color: #0C377C;color: #fff;text-align:center;}
  .banner2 h2 { margin-bottom:0; padding-bottom:0;font-size:1.75em;font-family: 'Noto Sans JP', sans-serif;font-weight:900;color: #fff;}
  .banner2 p { font-size: 0.75em;}

  .space-1 {
    margin-top: 2em;
    margin-bottom: 1em;
  }
  .space-2 {
    margin-top: 2em;
    margin-bottom: 3em;
  }

  .padding-1 {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .card {
    margin-bottom:15px;
  }

  tbody p { font-size:0.75em;}
}

.bg1 { background-color: #cfeffa;}
.bg2 { background-color: #fff;}
.bg4 { background-color: #cfeffa;}

footer {
  background-color: #444;
  color: #fff;
  height: 10em;
  text-align: center;
}

P {
  font-size: 1.25em;
}

H2 {
  margin-top: 1em;
  margin-bottom: 1em;
  color: #0C377C;
}

H3 {
  margin-top: 1em;
  margin-bottom: 1em;
  color: #B41400;
}

H4 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

H4::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

H5 {
  font-size: 1.5em;
}

.marker {
  background: linear-gradient(transparent 60%, yellow 0%);
}

.marker2 {
  background: linear-gradient(transparent 60%, yellow 0%);
}

.box1 {
  background-color: #fff;
  padding: 2em;
}

.box3 {
  background-color: #fff;
  padding: 2em;
  border-radius: 30px;
  box-shadow: 3px 3px 3px 3px #ccc;
}

.centered {
  text-align: center;
}
.righted {
  text-align: right;
}

/* point1 */
	
.point1{
	width:100%;
	text-align:center;
}
.point1 h2{
        font-size: 1.25em;
	position:relative;
	display:inline-block;
        margin-bottom: 0;
        padding-bottom: 0;
}
.point1 h2:before, .point1 h2:after{
	content:"";
	display:block;
	width:80px;
	height:4px;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	position:absolute;
	top:50%;
	margin-top:-2px;
}
.point1 h2:before{left:-120px;}
.point1 h2:after{right:-120px;}

.point2 {
  background-color: #B41400;
  display: inline-block;
  padding:8px;
  padding-left:30px;
  padding-right:30px;
  border-radius: 30px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto;
}


/* flow */

ul {
  padding: 0;
}
li {
  list-style-type: none;
}
dd {
  margin-left: 0;
}

.flow {
  padding-left: 120px;
  position: relative;
}
.flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}
.flow > li {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 8vh;
}
.flow > li .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(107,144,219);
  background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
  background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
  padding: 8px 20px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}
.flow > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #66d5e9;
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.flow > li dl {
  padding-left: 70px;
  position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}
.flow > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #6b90db;
  border-radius: 50%;
  left: -4px;
}
.flow > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(107,144,219);
  margin-bottom: 1vh;
}

/* */
.box2 {
  background: #fff;
  position: relative;
  margin-bottom: 80px;  
  border-radius: 30px;
  padding: 30px;
}
.box2 :after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 50px);
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 50px solid #fff;
  border-style: solid;
  border-color: #fff transparent transparent transparent;  
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
}

.navbar-light .navbar-toggler {
  border-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  outline: none;
}
 
#offcanvas {
  transition: all 0.4s;
  background-color: #444;
  color: #fff;
}

#offcanvas a {
  color: #fff;
}

/**  **/
/* 画面幅が1170px以上になった場合に背景色をつける */
.main-v {
    position: relative;
    background-color: #fff;
}
 
/* メインcontainerを最大1170pxに指定 */
/* Bootstrapのコンテンツエリアが最大1170pxのため */
.main-container{
    position:relative;
    max-width: 1170px;
    margin-left:auto;margin-right:auto;
}
 
img{
    max-width: 100%;
    height: auto;
}
 
.main-img{
    display: block;
}