@charset "UTF-8";
#contents04 ._about {
  display: none;
}

header {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
}

header .logo_box {
  position: absolute;
  top: 20px;
  left: 30px;
  margin: auto;
  width: 128px;
  height: 48px;
}

.f_nav {
  background: #5b5136;
  padding: 40px;
}

.f_nav li a {
  margin: 0 20px;
  color: #fff;
}

.f_nav li a:hover {
  text-decoration: underline;
}

.copy {
  background: #fff;
  line-height: 50px;
  font-size: 12px;
  text-align: center;
}

#contents01 .box03 li {
  width: 167px;
  height: 175px;
  background: url(../img/maru_og.png) 50% 50% no-repeat;
  background-size: auto 175px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  color: #fff;
  margin: 0 10px;
}

#contents01 .box03 li span {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}

#contents02 h3.stit_fuki {
  background: url(../img/fuki_bg.png) 50% 0 no-repeat;
  background-size: 675px auto;
  height: 189px;
  padding-top: 40px;
  line-height: 1.4;
}

#contents02 h3.stit_fuki.pt25 {
  padding-top: 25px;
}

#contents02 .media img {
  border-radius: 10px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

#contents03 {
  background: #f08200;
  margin: 42px auto 104px;
  padding: 60px 0 20px;
}

#contents03 h2 {
  font-size: 40px;
  line-height: 55px;
  margin-bottom: 45px;
}

#contents03 h2 span {
  padding: 0 48px;
  background: url(../img/guruguru.png) no-repeat;
  background-position: right 0px bottom 10px;
  background-size: auto 36px;
}

#contents03:before {
  display: block;
  content: "";
  width: 100%;
  height: 42px;
  top: -42px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/or_top.png) 0 top no-repeat;
  background-size: 100% 42px;
}

#contents03:after {
  display: block;
  content: "";
  width: 100%;
  height: 104px;
  bottom: -104px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/or_btm.png) 50% bottom no-repeat;
  background-size: 100% 104px;
}

.clm3.flex-center li {
  position: relative;
  z-index: 2;
  margin: 0 10px 0;
  background-color: #fff;
  width: 360px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}

.clm3.flex-center li .txt_box {
  background-color: #fff;
  padding: 16px 25px 18px;
}

.clm3.flex-center li .txt_box p {
  line-height: 1.5;
  margin-top: 5px;
}

.clm3.flex-center li:nth-child(2) {
  transition-delay: 0.3s;
}

.clm3.flex-center li:nth-child(3) {
  transition-delay: 0.6s;
}

#contents04 {
  padding: 70px 0 40px;
}

#contents04 h2 {
  margin-bottom: 45px;
  background: url(../img/fuwa.png) 50% 0 no-repeat;
  background-size: auto 62px;
}

#contents04 h2 .txt20 {
  line-height: 1.5;
}

#contents04 h2 .bb {
  border-bottom: 2px solid #8caf00;
  line-height: 1.4;
  margin-bottom: 5px;
}

#contents04 h3.stit_fuki {
  background: url(../img/fuki_bg.png) 50% 0 no-repeat;
  background-size: 675px auto;
  height: 189px;
  padding-top: 40px;
  line-height: 1.4;
}

#contents04 h3.stit_fuki.pt25 {
  padding-top: 25px;
}

#contents04 .box01 {
  margin-bottom: 72px;
}

#contents04 .box01 .img {
  width: 50%;
}

#contents04 .box01 .txt_box {
  background: url(../img/maru3.png) 5px 0 no-repeat;
  background-size: 92px auto;
  width: 49%;
  padding-left: 26px;
  padding-top: 25px;
  box-sizing: border-box;
}

#contents04 .tech li .img {
  width: 540px;
  height: 326px;
  margin-top: 30px;
  position: relative;
}

#contents04 .tech li .img::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 15px;
  left: 15px;
  margin: auto;
  position: absolute;
  background: #ffbf74;
  border-radius: 10px;
  z-index: 2;
}

#contents04 .tech li .img img {
  position: relative;
  z-index: 3;
  border-radius: 10px;
}

#contents04 .tech li .txt_box {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 40px 50px 40px 100px;
  z-index: 0;
}

#contents04 .tech li .txt_box h3 {
  background: url(../img/fuwa2.png) 0 50% no-repeat;
  background-size: 22px auto;
  padding-left: 30px;
}

#contents05 {
  margin-top: 42px;
  padding: 70px 0 60px;
  /*-----------------------------*/
}

#contents05:before {
  display: block;
  content: "";
  width: 100%;
  height: 41px;
  top: -41px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/wh_top.png) 50% 50% no-repeat;
  background-size: 100% 41px;
}

#contents05:after {
  display: block;
  content: "";
  width: 100%;
  height: 39px;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/wh_btm.png) 50% 50% no-repeat;
  background-size: cover;
}

@media screen and (min-width: 1440px) {
  #contents05 {
    /*-----------------------------*/
  }
  #contents05 #contents05:before {
    background-size: 100% 41px;
  }
  #contents05 #contents05:after {
    background-size: 100% 40px;
  }
}

#contents05 ol li {
  border-radius: 10px;
  max-width: 90%;
  width: 855px;
  margin: 0 auto 80px;
  position: relative;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);
  padding: 60px 78px 50px;
}

#contents05 ol li i {
  width: 100px;
  height: 98px;
  background: url(../img/maru_or.png) 50% 50% no-repeat;
  background-size: 100px auto;
  color: #fff;
  font-size: 56px;
  text-align: center;
  line-height: 98px;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}

#contents05 ol li .bg_w {
  margin-top: 36px;
  padding: 30px 54px 30px;
  border-radius: 10px;
}

#contents05 ol li .bg_w .img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}

#contents05 ol li .bg_w .name {
  display: inline-block;
  font-weight: 600;
  line-height: 50px;
  padding-left: 23px;
}

#contents05 ol li .bg_w .name:before {
  display: block;
  content: "";
  width: 60px;
  height: 60px;
  top: 0px;
  left: 0;
  margin: auto;
  position: absolute;
  background: url(../img/maru3.png) 0 50% no-repeat;
  background-size: 100% auto;
  opacity: 0.25;
  z-index: 1;
}

#contents05 ol li .bg_w dt {
  color: #8caf00;
  border-bottom: 1px solid #8caf00;
  padding-bottom: 3px;
  margin: 20px 0 8px;
}

#contents06 {
  padding: 100px 0 60px;
}

#contents06 h2 {
  padding-top: 20px;
  margin-bottom: 25px;
  background: url(../img/fuwa3.png) 50% 0 no-repeat;
  background-size: auto 62px;
}

#contents06 h2 .txt20 {
  line-height: 1.5;
}

#contents06 h2 .bb {
  border-bottom: 2px solid #8caf00;
  line-height: 1.4;
  margin-bottom: 5px;
}

#contents06 h4.txt20 span {
  width: 420px;
  background: url(../img/stit_or.png) 50% 50% no-repeat;
  background-size: auto 53px;
}

#contents06 .bg_w {
  border-radius: 10px;
  width: 885px;
  margin: 0 auto 50px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

#contents06 .bg_w h3 {
  line-height: 80px;
  background: #f08200;
  border-radius: 10px 10px 0px 0px;
}

#contents06 .bg_w .in_box {
  padding: 27px 95px 30px;
}

#contents06 .bg_w .in_box .justify .img {
  width: 328px;
}

#contents06 .bg_w .in_box .justify p {
  width: 328px;
}

#contents06 .bg_w .stit_gray {
  line-height: 40px;
  background: #e3e3e3;
  border-radius: 20px;
  margin: 30px auto 14px;
}

#contents06 .bg_w .check li {
  color: #8caf00;
  width: 25.7%;
  background: url(../img/check.png) 0 50% no-repeat;
  background-size: 18px auto;
  text-align: left;
  padding-left: 24px;
}

#contents06 .bg_w .check li.no_check {
  background: url(../img/check2.png) 0 50% no-repeat;
  background-size: 18px auto;
  color: #e8efcd;
}

#contents06 .box_btm {
  width: 544px;
  margin: 30px auto 0;
}

#contents06 .box_btm ul {
  padding: 10px 15px;
}


#contents06 .box_btm ul li {
  background: url(../img/avtor.png) 0 50% no-repeat;
  background-size: 13px auto;
  padding-left: 18px;
  margin-bottom: 3px;
}

/*work*/
#work {
  margin-top: 42px;
  padding: 70px 0 60px;
}

#work:before {
  display: block;
  content: "";
  width: 100%;
  height: 41px;
  top: -41px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/wh_top.png) 50% 50% no-repeat;
  background-size: 100% 41px;
}

#work:after {
  display: block;
  content: "";
  width: 100%;
  height: 39px;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background: url(../img/wh_btm.png) 50% 50% no-repeat;
  background-size: cover;
}

/*graduate*/
#graduate h2 {
  padding-top: 20px;
  margin-bottom: 60px;
  background: url(../img/fuwa3.png) 50% 0 no-repeat;
  background-size: auto 62px;
}
#graduate h2 .txt20 {
  line-height: 1.5;
}
#graduate h2 .bb {
  border-bottom: 2px solid #8caf00;
  line-height: 1.4;
  margin-bottom: 5px;
}
#graduate h3 {
  width: 100%;
  border-bottom: 2px solid #8caf00;
  padding-bottom: 10px;
}
#graduate .inbox {
  margin-bottom: 60px;
}
#graduate .inbox .txt_box .txt40 {
  line-height: 1.3;
  margin-bottom: 24px;
}
#graduate .inbox .img {
  max-width: 52%;
  padding-right: 10px;
}
#graduate .inbox02 {
  margin-bottom: 85px;
}
#graduate .inbox02 .txt_box {
  width: 58%;
  max-width: 58%;
}
#graduate .inbox02 .img {
  max-width: 40%;
}
#graduate .img {
  padding-right: 10px;
  padding-bottom: 10px;
}
#graduate .img span {
  position: relative;
  display: inline-block;
}
#graduate .img span:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  bottom: -10px;
  right: -10px;
  margin: auto;
  position: absolute;
  background: #ffbf74;
  border-radius: 10px;
}
#graduate .img span img {
  border-radius: 10px;
  position: relative;
  z-index: 3;
}
#graduate .img span.g02 {
  float: left;
}
#graduate .img span.g03 {
  float: right;
  margin-top: -10%;
}

@media screen and (min-width: 1440px) {
  #work #work:before {
    background-size: 100% 41px;
  }
  #work #work:after {
    background-size: 100% 40px;
  }
}

#work h2 {
  margin-bottom: 45px;
}

#work li {
  margin-bottom: 40px;
  border-radius: 10px;
  overflow: hidden;
}

#work li h3 {
  font-size: 20px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  height: 80px;
  background: #8caf00;
}

.acd-check{
    display: none;
}
.acd-label{
    padding: 2.5rem 1rem;
    background: #fff8df;
	color: #f08200;
	border: 1px solid #f08200;
	font-weight: bold;
    display: block;
    position: relative;
	cursor: pointer;
	border-radius: 10px;
}
.acd-label:before{
	width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.label1:before{
    content: 'オンラインコースの詳細を見る';
}
.acd-label:after{
    content: '▼';
    display: block;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.acd-content{
	padding: 0 0 5rem 0;
    display: none;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
}
.acd-content h4 {
    margin: 3rem 0 1rem;
    font-weight: 700;
    color: #f08200;
}
.acd-check:checked + .acd-label:after{
    content: '▲';
}
.acd-check:checked + .acd-label + .acd-content{
	display: block;
    opacity: 1;
    visibility: visible;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media screen and (min-width: 737px) {
  /*-----------------------------*/
  .justify .btn01 {
    max-width: 49%;
  }
  #container:before {
    display: block;
    content: "";
    width: 50%;
    height: 240px;
    top: 0;
    right: 0;
    margin: auto;
    position: absolute;
    background: url(../img/maru1.png) right bottom no-repeat;
    background-size: auto 300px;
    z-index: 5;
  }
  #contents01:before {
    display: block;
    content: "";
    width: 50%;
    height: 220px;
    bottom: -30px;
    left: 0;
    margin: auto;
    position: absolute;
    background: url(../img/maru2.png) no-repeat;
    background-size: 210px auto;
    background-position: right 540px bottom 0;
    z-index: 5;
  }
  .main_img {
    height: auto;
  }
  .main_img .img img {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    /*height: 677px;
    object-fit: cover;
    font-family: "object-fit: cover; object-position: center top;"; 
    object-position: 50% 50%;*/
  }
  .main_img h2 {
    position: absolute;
    left: 0;
    top: 82px;
    margin: auto;
    color: #f08200;
    line-height: 70px;
    font-size: 50px;
    /*font-weight: 500px;*/
  }
  .main_img h2 span {
    display: inline-block;
    height: 70px;
    background: #fff8df;
    border-radius: 0 25px 25px 0;
    padding: 0 24px;
    margin-bottom: 20px;
  }
  .main_img .box02 {
    width: 1110px;
    height: 240px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 120px;
    margin: auto;
  }
  .main_img .box02 .txt01 {
    background-color: #8daf00;
    color: #fff;
    line-height: 56px;
    font-size: 34px;
    text-align: center;
    border-radius: 25px;
    padding: 0 25px;
  }
  .main_img .box02 .txt01:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 16px solid #8daf00;
  }
  .main_img .box02 .lead_h1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
  }
  .main_img .box02 .lead_h1::before {
    content: "";
    position: absolute;
    top: 90px;
    left: -100px;
    width: 100%;
    height: 100%;
    background: url(../img/foot.png) 0 50% no-repeat;
    background-size: 69px auto;
    border-radius: 25px;
  }
  /*---*/
}

@media screen and (min-width: 737px) and (max-width: 1270px) {
  /*---*/
  .main_img {
    height: 677px;
  }
  .main_img .img img {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 677px;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: "object-fit: cover; object-position: center top;";
    /*IE対策*/
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
  }
}

@media screen and (min-width: 737px) {
  #contents01 .box03 {
    margin: -100px auto 30px;
  }
}

@media screen and (min-width: 737px) {
  #contents02 {
    margin-bottom: 100px;
  }
  #contents02 h2 {
    padding-top: 64px;
    font-size: 40px;
    line-height: 55px;
    color: #f08200;
    margin-bottom: 45px;
    background: url(../img/hand.png) 50% 0 no-repeat;
    background-size: 124px auto;
  }
  #contents02 .box01 .img {
    width: 50%;
  }
  #contents02 .box01 .txt_box {
    background: url(../img/maru3.png) 5px 0 no-repeat;
    background-size: 92px auto;
    width: 49%;
    padding-left: 26px;
    padding-top: 25px;
    box-sizing: border-box;
  }
  #use {
    margin: 100px 0;
  }
  #use h2 {
    font-size: 40px;
    line-height: 55px;
    color: #f08200;
    margin-bottom: 45px;
  }
  #use .box01 .img {
    width: 50%;
  }
  #use .box01 .txt_box {
    background: url(../img/maru3.png) 5px 0 no-repeat;
    background-size: 92px auto;
    width: 49%;
    padding-left: 26px;
    padding-top: 25px;
    box-sizing: border-box;
  }
  #system {
    margin: 100px 0;
  }
  #system h2 {
    padding-top: 20px;
    margin-bottom: 60px;
    background: url(../img/fuwa3.png) 50% 0 no-repeat;
    background-size: auto 62px;
  }
  #system h2 .txt20 {
    line-height: 1.5;
  }
  #system h2 .bb {
    border-bottom: 2px solid #8caf00;
    line-height: 1.4;
    margin-bottom: 5px;
  }  
  #system .box01 .img {
    width: 50%;
  }
  #system .box01 .txt_box {
    width: 49%;
    padding-left: 26px;
    padding-top: 25px;
    box-sizing: border-box;
  }
}

@media screen and (min-width: 737px) {
  #contents03 box1200 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 737px) {
  .contents06_wrap:before {
    display: block;
    content: "";
    width: 50%;
    height: 300px;
    top: 170px;
    right: 0;
    margin: auto;
    position: absolute;
    background: url(../img/maru4.png) no-repeat;
    background-position: right -110px bottom 50%;
    background-size: 300px auto;
    z-index: 1;
  }
  .contents06_wrap:after {
    display: block;
    content: "";
    width: 50%;
    height: 320px;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    background: url(../img/maru5.png) -110px 0 no-repeat;
    background-size: 320px auto;
    z-index: 1;
  }
}

@media screen and (min-width: 737px) {
  #contents04 .tech li {
    clear: both;
    margin-bottom: 30px;
  }
  #contents04 .tech li .txt_box {
    position: absolute;
    top: 0;
    right: 0;
    width: 610px;
    height: 230px;
    z-index: 0;
  }
  #contents04 .tech li .txt_box h3 {
    background: url(../img/fuwa2.png) 0 50% no-repeat;
    background-size: 22px auto;
    padding-left: 30px;
    font-size: 24px;
  }
  #contents04 .tech li .img {
    transition: transform 3s, opacity 2s;
    transform: translate(0, 30px);
    transition-delay: 0.3s;
    clear: both;
    margin-bottom: 30px;
  }
  #contents04 .tech li .img img {
    border-radius: 12px;
  }
  #contents04 .tech li:nth-child(even) {
    flex-direction: row-reverse;
  }
  #contents04 .tech li:nth-child(even) .img {
    float: right;
  }
  #contents04 .tech li:nth-child(even) .txt_box {
    left: 0;
    right: auto;
    padding: 40px 90px 40px 50px;
  }
}

@media screen and (min-width: 737px) {
  #contents06 .bg_w .check li:nth-child(3) {
    width: 22%;
  }
}

@media screen and (min-width: 737px) {
  .fadein {
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform 2s, opacity 2s;
  }
}

@media screen and (min-width: 737px) {
  .fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0) !important;
  }
}

@media screen and (min-width: 737px) {
  .fadein.delay {
    transition-delay: 0.5s;
  }
}

@media screen and (min-width: 737px) {
  .fadein.delay2 {
    transition-delay: 0.7s;
  }
}

@media screen and (min-width: 737px) {
  .fadein.delay3 {
    transition-delay: 1s;
  }
}

@media screen and (min-width: 737px) {
  .fadein.delay4 {
    transition-delay: 1.3s;
  }
}


/*-----------------------------*/

@media screen and (max-width: 737px) {
  /*-----------------------------*/
  header {
    position: absolute !important;
    top: 14px;
    left: 12px;
    margin: auto;
    width: 40%;
    height: auto;
  }
  header .logo_box {
    top: 0px;
    left: 0px;
    width: 28vw;
    max-width: 110px;
    height: auto;
  }
  header .logo_box img {
    width: 100%;
    height: auto;
    z-index: 999;
  }
  .btn01_wrap {
    padding: 0 5%;
    text-align: center;
  }
  .btn01 a {
    margin-left: auto;
    margin-right: auto;
  }
  #contents01 .box02 {
    width: 90%;
    margin: -100px auto 0;
  }
  #contents01 .box03 {
    margin-top: 30px;
  }
  #contents01 .box03 .flex-end {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #contents01 .box03 .flex-end li {
    width: 113px;
    max-width: 31%;
    height: 115px;
    background: url(../img/maru_og.png) 50% 50% no-repeat;
    background-size: auto 100%;
    font-size: 15px;
    line-height: 1.3;
    margin: 0 1%;
    font-weight: bold;
  }
  #contents02 {
    padding-top: 32px;
  }
  #contents02 h2 {
    padding-top: 38px;
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 25px;
    background: url(../img/hand.png) 50% 0 no-repeat;
    background-size: 78px auto;
    color: #f08200;
  }
  #contents02 .txt_box {
    padding: 20px 5% 15px;
    background: url(../img/maru3.png) 4px 0 no-repeat;
    background-size: 50px auto;
  }
  #contents02 .img img {
    /*max-width: 480px;*/
  }
  #contents02 h3.stit_fuki {
    margin: 0 auto;
    background: url(../img/sp/fuki_bg.png) 50% 0 no-repeat;
    background-size: 92% auto;
    height: 48vw;
    max-height: 250px;
    padding-top: 12%;
    line-height: 1.4;
    box-sizing: border-box;
  }
  #contents02 h3.stit_fuki.pt25 {
    padding-top: 12%;
  }
  #contents02 h3.stit_fuki .txt20 {
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 8px;
  }
  #contents02 .media img {
    max-width: 90%;
  }
  #contents03 {
    margin: 30px auto 54px;
    padding: 35px 0 5px;
  }
  #contents03 h2 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 40px;
  }
  #contents03 h2 span {
    padding: 0 40px;
    background: url(../img/guruguru.png) no-repeat;
    background-position: right 0px bottom 5px;
    background-size: auto 30px;
  }
  #contents03:before {
    width: 100%;
    height: 13px;
    top: -13px;
    background: url(../img/sp/or_top.png) 0 top no-repeat;
    background-size: 100% 13px;
  }
  #contents03:after {
    width: 100%;
    height: 72px;
    bottom: -72px;
    background: url(../img/sp/or_btm.png) 50% bottom no-repeat;
    background-size: 100% 72px;
  }
  .clm3.flex-center li {
    position: relative;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 400px;
    z-index: 3;
  }
  .clm3.flex-center li .txt_box {
    padding: 14px 20px 18px;
  }
  .clm3.flex-center li .txt_box h3 {
    font-size: 18px;
  }
  .clm3.flex-center li .txt_box p {
    line-height: 1.5;
    margin-top: 5px;
  }
  .clm3.flex-center li:last-child {
    margin: 0 auto;
  }
  .clm3.flex-center li:last-child .txt_box {
    padding: 24px 0 24px;
  }
  #contents03 .box1200 {
    margin-bottom: 20px;
  }
  #contents03 .box1200:before {
    display: block;
    content: "";
    width: 125px;
    height: 230px;
    top: 300px;
    right: 0;
    margin: auto;
    position: absolute;
    background: url(../img/maru4.png) 0 50% no-repeat;
    background-size: 230px auto;
    z-index: 1;
  }
  #contents03 .box1200:after {
    display: block;
    content: "";
    width: 290px;
    height: 290px;
    bottom: 130px;
    left: -85px;
    margin: auto;
    position: absolute;
    background: url(../img/sp/maru5.png) right bottom no-repeat;
    background-size: 270px auto;
    z-index: 1;
  }
  #contents04 {
    padding: 45px 0;
  }
  #contents04 h2 {
    margin-bottom: 32px;
    background: url(../img/sp/fuwa.png) 50% 0 no-repeat;
    background-size: 285px auto;
    padding-top: 15px;
  }
  #contents04 h2 .txt20 {
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 10px;
  }
  #contents04 h2 .bb {
    line-height: 1.3;
    margin-bottom: 3px;
    font-size: 24px;
  }
  #contents04 h3.stit_fuki {
    margin: 0 auto;
    background: url(../img/sp/fuki_bg.png) 50% 0 no-repeat;
    background-size: 92% auto;
    height: 48vw;
    max-height: 250px;
    padding-top: 12%;
    line-height: 1.4;
    box-sizing: border-box;
  }
  #contents04 h3.stit_fuki.pt25 {
    padding-top: 12%;

  }
  #contents04 h3.stit_fuki .txt20 {
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 8px;
  }
  #contents04 .box01 {
    margin-bottom: 5px;
  }
  #contents04 .box01 .img {
    width: 100%;
    text-align: center;
  }
  #contents04 .box01 .txt_box {
    width: 100%;
    padding: 15px 5%;
    background: url(../img/maru3.png) 5px 0 no-repeat;
    background-size: 50px auto;
  }
  #contents04 .btn01_wrap {
    margin-bottom: 45px;
  }
  #contents04 .tech li {
    overflow: hidden;
    padding: 10px 0 10px;
    /*display: flex;
    flex-direction: column;*/
    margin-bottom: 10px;
  }
  #contents04 .tech li .img {
    /*max-width: 480px;*/
    clear: both;
    width: 86%;
    height: auto;
    margin-top: 0;
  }
  #contents04 .tech li .img::before {
    top: 9px;
    left: 9px;
  }
  #contents04 .tech li .img img {
    position: relative;
    z-index: 3;
    border-radius: 10px;
  }
  #contents04 .tech li .txt_box {
    float: right;
    width: 100%;
    margin: 0px -12.5% -30px 15%;
    order: 1;
    padding: 20px 67px 45px 18px;
    z-index: 0;
  }
  #contents04 .tech li .txt_box h3 {
    margin-bottom: 5px;
    font-size: 18px;
  }
  #contents04 .tech li:nth-child(even) .img {
    float: right;
    margin-right: 9px;
  }
  #contents04 .tech li:nth-child(even) .txt_box {
    float: none;
    margin: 0px 18px -30px -12.5%;
    padding: 20px 15px 45px 67px;
  }
  #contents05 {
    margin-top: 10px;
    padding: 30px 0 18px;
  }
  #contents05:before {
    height: 18px;
    top: -18px;
    background: url(../img/sp/wh_top.png) 50% 50% no-repeat;
    background-size: 100% 18px;
  }
  #contents05:after {
    height: 16px;
    bottom: -16px;
    background: url(../img/sp/wh_btm.png) 50% 50% no-repeat;
    background-size: 100% 16px;
  }
  #contents05 ol li {
    max-width: 90%;
    margin: 0 auto 60px;
    padding: 55px 18px 25px 18px;
  }
  #contents05 ol li:last-child {
    margin: 0 auto 40px;
  }
  #contents05 ol li i {
    width: 82px;
    height: 80px;
    background: url(../img/maru_or.png) 50% 50% no-repeat;
    background-size: 100% auto;
    font-size: 46px;
    line-height: 78px;
  }
  #contents05 ol li .bg_w {
    margin-top: 16px;
    padding: 20px;
    border-radius: 10px;
  }
  #contents05 ol li .bg_w .img {
    transform: translateY(-30%);
  }
  #contents05 ol li .bg_w .name {
    display: inline-block;
    font-weight: 600;
    line-height: 30px;
    padding-left: 23px;
  }
  #contents05 ol li .bg_w .name:before {
    width: 40px;
    height: 40px;
    top: 0px;
    background: url(../img/maru3.png) 0 50% no-repeat;
    background-size: 100% auto;
  }
  #contents05 ol li .bg_w p {
    line-height: 1.7;
  }
  #contents05 ol li .bg_w dt {
    line-height: 1.64;
  }
  #contents06 {
    padding: 45px 0 30px;
  }
  #contents06 .box1200 {
    padding-bottom: 10px;
  }
  #contents06 h2 {
    padding-top: 5px;
    margin-bottom: 25px;
    background: url(../img/sp/fuwa3.png) 50% 0 no-repeat;
    background-size: auto 48px;
  }
  #contents06 h2 .txt20 {
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 10px;
  }
  #contents06 h2 .bb {
    border-bottom: 2px solid #8caf00;
    line-height: 1.4;
    margin-bottom: 5px;
  }
  #contents06 h4.txt20 span {
    width: auto;
    padding: 0 50px;
    background: url(../img/sp/stit_or.png) 50% 50% no-repeat;
    background-size: auto 40px !important;
    font-size: 14px;
    box-sizing: border-box;
  }
  #contents06 .box_btm {
    width: 100%;
    margin: 30px auto 0;
  }
  #contents06 .box_btm img {
    margin-left: -10px;
  }
  #contents06 .box_btm ul {
    padding: 10px 5px;
  }
  #contents06 .box_btm ul li {
    background: url(../img/avtor.png) 0 2px no-repeat;
    background-size: 13px auto;
    padding-left: 18px;
    margin-bottom: 7px;
    line-height: 1.4;
  }
  #contents06 .bg_w {
    border-radius: 10px;
    max-width: 90%;
    margin: 0 auto 35px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  }
  #contents06 .bg_w h3 {
    line-height: 80px;
    background: #f08200;
    border-radius: 10px 10px 0px 0px;
  }
  #contents06 .bg_w .in_box {
    padding: 20px 18px 20px;
  }
  #contents06 .bg_w .in_box .justify .img {
    width: 100%;
  }
  #contents06 .bg_w .in_box .justify p {
    width: 100%;
    margin-bottom: 15px;
  }
  #contents06 .bg_w .stit_gray {
    line-height: 32px;
    margin: 20px auto 14px;
  }
  #contents06 .bg_w .check {
    max-width: 420px;
    margin: 0 auto;
  }
  #contents06 .bg_w .check li {
    width: 50%;
    background: url(../img/check.png) 0 5px no-repeat;
    background-size: 14px auto;
    padding-left: 18px;
    margin-bottom: 4px;
  }
  #contents06 .bg_w .check li.no_check {
    background: url(../img/check2.png) 0 5px no-repeat;
    background-size: 14px auto;
  }
  #work {
    margin-top: 10px;
    padding: 30px 0 18px;
  }
  #work:before {
    height: 18px;
    top: -18px;
    background: url(../img/sp/wh_top.png) 50% 50% no-repeat;
    background-size: 100% 18px;
  }
  #work:after {
    height: 16px;
    bottom: -16px;
    background: url(../img/sp/wh_btm.png) 50% 50% no-repeat;
    background-size: 100% 16px;
  }
  #work ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #work h2 {
    margin-bottom: 40px;
  }
  #work li {
    width: 47.5%;
    margin-bottom: 16px;
  }
  #work li h3 {
    font-size: 1.4rem;
    line-height: 50px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    color: #fff;
    height: 50px;
    background: #8caf00;
  }
  #graduate .inbox {
    margin-bottom: 20px;
  }
  #graduate .inbox02 .txt_box {
    width: 100%;
    max-width: 100%;
  }
  #graduate .inbox .txt_box .txt40 {
    font-size: 21px;
    line-height: 1.5;
    margin-bottom: 15px;
  }
  #graduate .inbox .txt_box p {
    line-height: 1.6;
    font-size: 13px;
  }
  #graduate .inbox .img {
    max-width: 420px;
    margin: 15px auto 20px;
    padding-right: 5px;
  }
  #graduate .inbox02 {
    margin-bottom: 45px;
  }
  #graduate .inbox02 .img {
    max-width: 100%;
  }
  #graduate .img {
    overflow: hidden;
    display: block;
    max-width: 420px;
    margin: 15px auto 20px;
    padding-right: 5px;
    padding-bottom: 5px;
  }
  #graduate .img span {
    position: relative;
    display: inline-block;
  }
  #graduate .img span:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    bottom: -5px;
    right: -5px;
    margin: auto;
    position: absolute;
    background: #f9bb82;
    border-radius: 15px;
  }
  #graduate .img span img {
    border-radius: 15px;
    position: relative;
    z-index: 3;
  }
  #graduate .img span.g02 {
    width: 60%;
    float: left;
  }
  #graduate .img span.g03 {
    width: 60%;
    float: right;
    margin-top: -10%;
  }
  #graduate h2 {
    padding-top: 5px;
    margin-bottom: 25px;
    background: url(../img/sp/fuwa3.png) 50% 0 no-repeat;
    background-size: auto 48px;
  }
  #graduate h2 .txt20 {
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 10px;
  }
  #graduate h3 {
    line-height: 1.3;
  }
  #graduate h3 span {
    font-size: 18px;
  }   
  #use {
    margin-top: 10px;
	padding: 30px 0 18px;
  }
  #use h2 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 25px;
  }
  #use .box01 .txt_box {
    width: 100%;
    padding: 15px 5%;
    background: url(../img/maru3.png) 5px 0 no-repeat;
    background-size: 50px auto;
  }
  #system {
    margin-top: 10px;
	padding: 30px 0 18px;
  }
  #system h2 {
    padding-top: 5px;
    margin-bottom: 25px;
    background: url(../img/sp/fuwa3.png) 50% 0 no-repeat;
    background-size: auto 48px;
  }
  #system h2 .txt20 {
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 10px;
  }
  #system h2 .bb {
    border-bottom: 2px solid #8caf00;
    line-height: 1.4;
    margin-bottom: 5px;
  }  
  #system .box01 .txt_box {
    width: 100%;
    padding: 15px 5%;
  }
  .acd-content h4 {
    margin: 2rem 0 1rem;
  }
  .f_nav {
    background: #5b5136;
    padding: 0px;
  }
  .f_nav li {
    padding: 13px 10px;
    text-align: center;
    border-bottom: 1px solid #fff;
  }
  footer {
    padding-bottom: 45px;
  }
  #fix_btn {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
  }
  #fix_btn li {
    width: 50%;
    background: #177400;
  }
  #fix_btn li span {
    background: url(../img/sodan_btn.png) 0 53% no-repeat;
    background-size: 20px auto !important;
    padding-left: 24px;
  }
  #fix_btn li#siryo_btn {
    width: 50%;
    background: #e45200;
  }
  #fix_btn li#siryo_btn span {
    background: url(../img/siryo_btn.png) 0 53% no-repeat;
  }
  #fix_btn li a {
    font-size: 14px;
    display: block;
    line-height: 45px;
    width: 100%;
    color: #fff;
    text-decoration: none;
  }
  /*----------------------------------------------------
  	fadein
  ----------------------------------------------------*/
  .fadein_sp {
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform 2s, opacity 2s;
  }
  .fadein_sp.scrollin {
    opacity: 1;
    transform: translate(0, 0);
  }
  .fadein_sp.delay {
    transition-delay: 0.5s;
  }
  .fadein_sp.delay2 {
    transition-delay: 0.75s;
  }
  .fadein_sp.delay3 {
    transition-delay: 0.85s;
  }
  .fadein_sp.delay4 {
    transition-delay: 1.05s;
  }
  .fadein_sp.lead01 {
    transition-delay: 0.4s;
  }
  /*-----------------------------*/
}

@media screen and (max-width: 737px) and (min-width: 481px) {
  .main_img img {
    margin-top: -7vw;
  }
  #contents02 h3.stit_fuki {
    padding-top: 70px;
    height: 300px;
  }
  #contents02 h3.stit_fuki.pt25 {
    padding-top: 12%;
  }
  #contents02 .h3.stit_fuki {
    margin: 0 auto;
    max-width: 480px;
  }
  #contents04 h3.stit_fuki {
    padding-top: 70px;
    height: 300px;
  }
  #contents04 h3.stit_fuki.pt25 {
    padding-top: 12%;
  }
  #contents04 .h3.stit_fuki {
    margin: 0 auto;
    max-width: 480px;
  }
  #contents04 .about .box01 img {
    max-width: 480px;
  }
  #contents04 .tech {
    overflow: visible;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  #contents04 .tech li {
    overflow: visible;
    margin-bottom: 30px;
  }
  #contents04 .tech li .txt_box {
    clear: both;
    width: 90%;
    margin: 0px -5% -30px 15%;
    padding: 20px 30px 45px 18px;
  }
  #contents04 .tech li:nth-child(even) .txt_box {
    margin: 0px 18px -30px -5%;
    padding: 20px 15px 45px 30px;
  }
  #contents04 .tech li:nth-child(even) .img {
    margin-bottom: 40px;
  }
  #contents04 .tech li:last-child .img {
    margin-bottom: 60px;
  }
}


/*-----------------------------*/


/*# sourceMappingURL=style.css.map */