.c_intr, .con_roo_tra, .con_en_cere .box_prog, .con_en_cere .box_photo, .con_follow_tra {
    width: 90%;
    max-width: 1200px;
    margin: auto
}
@media only screen and (max-width: 1199px) {
    .c_intr, .con_roo_tra, .con_en_cere .box_prog, .con_en_cere .box_photo, .con_follow_tra {
        width: 83%
    }
}
.c_intr {
    position: relative;
    margin-bottom: 5rem
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .c_intr {
        margin-bottom: 2.5rem
    }
}
@media only screen and (max-width: 767px) {
    .c_intr {
        margin-bottom: 2em
    }
}
.c_intr .t {
    max-width: 630px;
    width: 52.5%;
    margin-top: 2.5rem
}
@media only screen and (max-width: 767px) {
    .c_intr .t {
        max-width: none;
        width: 100%;
        margin-top: 1.5em
    }
}


#contents .sec {
  position: relative;
  padding-bottom: 6.25rem;
  margin-top: 7.5rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .sec {
    margin-top:3.75rem;
    padding-bottom: 3.125rem
  }
}

@media only screen and (max-width: 767px) {
  #contents .sec {
    margin-top:3.5em;
    padding-bottom: 3em
  }
}

#contents .sec::before {
  content: '';
  width: 91.66667%;
  height: 100%;
  display: block;
  position: absolute;
  top: 180px;
  z-index: -1;
  background: #f6f6f6
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .sec::before {
    width:95%
  }
}

@media only screen and (max-width: 767px) {
  #contents .sec::before {
    width:100%;
    display: none;
  }
}

#contents .sec1::before {
  right: 0
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #contents .sec1::before {
    height:92%
  }
}

@media only screen and (max-width: 767px) {
  #contents .sec1::before {
    height:94%
  }
}

#contents .sec2::before {
  left: 0
}

@media only screen and (max-width: 767px) {
  #contents .sec2::before {
    height:92.5%
  }
}
#contents .sec3::before {
  display: none;
}


*[data-view=pc] {
    display: block !important;
}
*[data-view=sp] {
    display: none !important;
}
@media screen and (max-width: 767px) {
    *[data-view=pc] {
        display: none !important;
    }
    *[data-view=sp] {
        display: block !important;
    }
}

#contents img {
  display: block;
}

#contents a {
  text-decoration: none;
  transition: 0.5s ease all;
}

#contents a:hover {
  opacity: 0.75;
}

#contents .text {}
#contents .text strong {color: #0E69AF;}

#contents .c_intr .img {
	position: absolute;
	left: calc(50%);
	width: 650px;
	top: -30px;
}
#contents .sec .inner {
  max-width: 1200px;
  margin: 140px auto 0 auto;
  width: 70%;
  position: relative;
}
#contents .sec1 {margin-top: 230px;}
#contents .sec1 .fbox {display: flex;justify-content: space-between;}
#contents .sec1 .box1 {}
#contents .sec1 .box1 .text {width: 46%;}
#contents .sec1 .box1 .img {width: 34%;margin: -9vw 7% 0 0;}
#contents .sec1 .box2 {flex-direction: row-reverse;margin-top: 80px;}
#contents .sec1 .box2 .text {width: 46%;}
#contents .sec1 .box2 .img {width: 49%;margin: 0 0 0 -3%;}
#contents .sec1 .box3 {margin-top: 80px;margin-bottom: 20px;}
#contents .sec1 .box3 .text {text-align: center;}
#contents .sec1 .box3 .text > span {display: flex;margin: 30px 0;justify-content: center;}
#contents .sec1 .box3 .text > span span {font-size: 26px;background: linear-gradient(transparent 70%, #D6E3EC 70%);display: block;line-height: 1.5em;}
#contents .sec2 {
}
#contents .sec2 > .inner {padding: 100px 0 0 0;}
#contents .sec2 .img {position: absolute;right: calc(50% - 220px);width: 863px;top: 0;}
#contents .sec2 .text {width: 44%;margin: 100px 0 0 auto;}
#contents .sec3 {
	padding-bottom: 0;
}
#contents .sec3 > .inner {
	margin-top: 70px;
}
#contents .sec3 .c_title strong {color: #0E69AF;}
#contents .sec3 .c_title strong span {display: block;font-size: 28px;color: #000;line-height: 2em;}
#contents .sec3 .text {
	text-align: center;
}

@media screen and (max-width: 767px) {
	#contents a:hover {
	  opacity: 1;
	}


	#contents .text {}
	#contents .text strong {color: #0E69AF;}

	#contents .c_intr .img {
		position: relative;
		left: -8.5vw;
		width: 100vw;
		top: auto;
		margin-top: 30px;
	}
	#contents .sec .inner {
	  max-width: 1200px;
	  margin: 40px auto 0 auto;
	  width: 90%;
	  position: relative;
	}
	#contents .sec1 {margin-top: 40px;}
	#contents .sec1 .fbox {display: block;}
	#contents .sec1 .box1 {}
	#contents .sec1 .box1 .text {width: auto;}
	#contents .sec1 .box1 .img {width: 70%;margin: 35px auto 0 auto;}
	#contents .sec1 .box2 {flex-direction: row-reverse;margin-top: 36px;}
	#contents .sec1 .box2 .text {width: auto;}
	#contents .sec1 .box2 .img {width: 100vw;position: relative;left: -5vw;margin: 34px 0 0 0;}
	#contents .sec1 .box3 {margin-top: 50px;}
	#contents .sec1 .box3 .text {text-align: left;}
	#contents .sec1 .box3 .text > span {display: block;margin: 23px 0;justify-content: center;}
	#contents .sec1 .box3 .text > span span {font-size: 18px;background: linear-gradient(transparent 70%, #D6E3EC 70%);display: inline;line-height: 1.8em;}
	#contents .sec2 {
	margin-top: 20px;
	}
	#contents .sec2 > .inner {padding: 0;}
	#contents .sec2 .img {position: relative;right: auto;width: 126vw;top: auto;left: -14vw;margin-top: 20px;}
	#contents .sec2 .text {width: auto;margin: 0px 0 0 auto;}
	#contents .sec3 {
		padding-bottom: 0;
		margin-top: 10px;
	}
	#contents .sec3 > .inner {
		margin-top: 40px;
	}
	#contents .sec3 .c_title strong {color: #0E69AF;line-height: 1.3em;}
	#contents .sec3 .c_title strong span {display: block;font-size: 20px;color: #000;line-height: 1.8em;}
	#contents .sec3 .text {
		text-align: left;
	}

}