@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

h1.copy-tit {
    position: relative;
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 60px;
    font-size: 6.0rem;
  line-height: 1;
  letter-spacing: 0.4rem;
     color: #fff;
     text-transform:uppercase;
}

h1.copy-tit span:nth-of-type(10) {
    margin-left: 1.8rem;
}

h1.copy-tit span:nth-of-type(14) {
    margin-left: 1.8rem;
}

h1.copy-tit span:nth-of-type(18) {
    margin-left: 1.8rem;
}


h1.copy-jp {
      display: block;
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 24px;
  font-size: 2.4rem;
   padding-top: 20px;
  letter-spacing: 0.2rem; 
    color: #fff;
    margin-bottom: 60px;
}

h1.copy-sub {
    position: relative;
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 15px;
    font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
     color: #fff;
     text-transform:uppercase;
}
h1.copy-sub span:nth-of-type(6) {
    margin-left: 0.9rem;
}
h1.copy-sub span:nth-of-type(18) {
    margin-left: 0.9rem;
}

.sub-tit {
      display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.1rem; 
}

h2 {
    position: relative;
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 45px;
    font-size: 4.5rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
     margin-bottom: 15px;
}


h2.copy {
      display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 75px;
    font-size: 7.5rem;
  line-height: 1.2;
  letter-spacing: 0.47rem; 
     color: #89cb23;
}
h2.copy span {
    display: block;
    font-weight: 700;
    font-size: 15px;
    font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.1rem; 
     color: #2a2a2a;
     text-transform:uppercase;
}

h3 {
      display: block;
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.7;
  letter-spacing: 0.25rem; 
     margin-bottom: 15px;
}

h3.top-green {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
h3.top-green:after {
  content: '';
  position: absolute;
  top: -15px;
  display: inline-block;
  width: 130px;
  height: 7px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #89cb23;
  /*border-radius: 2px;*/
}

@media screen and (max-width: 1120px) {
h1.copy-tit span:nth-of-type(10) {
    margin-left: 1.3rem;
}

h1.copy-tit span:nth-of-type(14) {
    margin-left: 1.3rem;
}

h1.copy-tit span:nth-of-type(18) {
    margin-left: 1.3rem;
}
}
@media screen and (max-width: 1100px) {
h1.copy-tit {
    font-weight: 700;
    font-size: 50px;
    font-size: 5.0rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
}


h1.copy-jp {
  font-weight: bold;
  font-size: 20px;
  font-size: 2.0rem;
   padding-top: 20px;
  letter-spacing: 0.2rem; 
}

h1.copy-sub {
    font-weight: 400;
    font-size: 15px;
    font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.30rem; 
}

.sub-tit {
    font-weight: 400;
    font-size: 12px;
    font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.04rem; 
}

h2 {
    font-size: 38px;
    font-size: 3.8rem;
  line-height: 1;
  letter-spacing: 0.35rem; 
     margin-bottom: 10px;
}

h3 {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.2rem; 
     margin-bottom: 15px;
}
}
@media screen and (max-width: 910px) {
h1.copy-tit {
    font-weight: 700;
    font-size: 40px;
    font-size: 4.0rem;
  line-height: 1;
  letter-spacing: 0.35rem; 
}
h1.copy-jp {
  font-weight: bold;
  font-size: 20px;
  font-size: 2.0rem;
   padding-top: 20px;
  letter-spacing: 0.2rem; 
  margin-bottom: 40px;
}

h1.copy-sub {
    font-weight: 400;
    font-size: 14px;
    font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.30rem; 
}
h2.copy {
    font-size: 60px;
    font-size: 6.0rem;
  line-height: 1.1;
  letter-spacing: 0.3rem; 
}
h2.copy span {
    font-weight: 400;
    font-size: 11px;
    font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.05rem; 
}
h3.top-green:after {
  width: 100px;
  height: 7px;
}
}
@media screen and (max-width: 768px) {
h1.copy-tit {
    font-size: 30px;
    font-size: 3.0rem;
  line-height: 1;
  letter-spacing: 0.25rem; 
}
h1.copy-jp {
     margin-bottom: 35px;
}

h1.copy-tit span:nth-of-type(10) {
    margin-left: 0.9rem;
}

h1.copy-tit span:nth-of-type(14) {
    margin-left: 0.9rem;
}

h1.copy-tit span:nth-of-type(18) {
    margin-left: 0.9rem;
}

h1.copy-sub span:nth-of-type(6) {
    margin-left: 0.4rem;
}
h1.copy-sub span:nth-of-type(18) {
    margin-left: 0.4rem;
}

.sub-tit {
    font-weight: 400;
    font-size: 11px;
    font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.03rem; 
}

h2 {
    font-size: 28px;
    font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.2rem; 
     margin-bottom: 5px;
}

h3 {
  font-size: 19px;
  font-size: 1.9rem;
  line-height: 1.4;
  letter-spacing: 0.04rem; 
     margin-bottom: 10px;
}
}

@media screen and (max-width: 540px) {
h1.copy-tit {
    font-size: 24px;
    font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.05rem; 
}
h1.copy-tit span:nth-of-type(10) {
    margin-left: 0.7rem;
}

h1.copy-tit span:nth-of-type(14) {
    margin-left: 0.7rem;
}

h1.copy-tit span:nth-of-type(18) {
    margin-left: 0.7rem;
}

h1.copy-jp {
  font-weight: bold;
  font-size: 15px;
  font-size: 1.5rem;
   padding-top: 10px;
  letter-spacing: 0.07rem; 
  margin-bottom: 40px;
}

h1.copy-sub {
    font-weight: 400;
    font-size: 10px;
    font-size: 1.0rem;
  line-height: 1;
  letter-spacing: 0.1rem; 
}
.sub-tit {
    font-weight: 400;
    font-size: 10px;
    font-size: 1.0rem;
  line-height: 1.2;
  letter-spacing: 0;
}
h2.copy {
    font-size: 50px;
    font-size: 5.0rem;
  line-height: 1.1;
  letter-spacing: 0.2rem; 
}
h2.copy span {
    font-weight: 400;
    font-size: 10px;
    font-size: 1.0rem;
  line-height: 1;
  letter-spacing: 0;
}
h3.top-green:after {
  width: 75px;
  height: 4px;
}
}


.btn {
  position: relative;
  width: 90%;
  max-width: 320px;
  margin: 0 auto;
  /*display: inline-block;*/
  display: block;
  background: #89cb23;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  letter-spacing: 0.2rem; 
 border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
}

.btn i {
  position: absolute;
  right: 20px;
  line-height: 50px;
  font-weight: 400;
  font-size: 90%;
}

.btn:hover {
     background: #e4f2e1;
     color: #89cb23;
      letter-spacing: 0.1rem; 
}
@media screen and (max-width: 1100px) {
  .btn {
    font-size: 15px;
    font-size: 1.5rem;
     letter-spacing: 0.1rem; 
    max-width: 280px;
  }
.btn:hover {
      letter-spacing: 0.05rem; 
}
}

@media screen and (max-width: 768px) {
  .btn {
    max-width: 240px;
     height: 40px;
  line-height: 40px;
}
.btn i {
  position: absolute;
  right: 30px;
  line-height: 40px;
}
.btn:hover {
     background: #89cb23;
     color: #fff;
     letter-spacing: 0.1rem; 
}
}

@media screen and (max-width: 540px) {
  .btn {
    max-width: 200px;
}
.btn i {
  position: absolute;
  right: 20px;
   font-size: 75%;
}
}


.btn1 {
  position: relative;
  width: 90%;
  max-width: 450px;
  margin: 0 auto;
  display: block;
  background: #333;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  height: 70px;
  line-height: 70px;
  color: #fff;
  letter-spacing: 0.2rem; 
 border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.btn1 i {
  position: absolute;
  right: 20px;
  line-height: 70px;
  font-weight: 400;
  font-size: 90%;
}

.btn1:hover {
     background: #000;
      letter-spacing: 0.1rem; 
}
@media screen and (max-width: 1100px) {
  .btn1 {
    font-size: 15px;
    font-size: 1.5rem;
     letter-spacing: 0.1rem; 
    max-width: 360px;
  }
.btn1:hover {
      letter-spacing: 0.05rem; 
}
}

@media screen and (max-width: 768px) {
  .btn1 {
    max-width: 320px;
     height: 50px;
  line-height: 50px;
}
.btn1 i {
  position: absolute;
  right: 20px;
  line-height: 50px;
}
.btn1:hover {
     background: #000;
     letter-spacing: 0.1rem; 
}
}

@media screen and (max-width: 540px) {
  .btn1 {
    max-width: initial;
    width: 80%;
}
.btn1 i {
  position: absolute;
  right: 20px;
   font-size: 75%;
}
}


.more-b {
       position: relative;
       display: block;
       margin: 40px auto 0;
}
@media screen and (max-width: 960px) {
.more-b {
       margin: 20px auto 0;
}
}


.more-c {
       position: absolute;
       top: 50%;
      right: 40px;
      margin-top: -19px;
}
@media screen and (max-width: 960px) {
.more-c {
       position: absolute;
       top: 20px;
       right: 20px;
       margin-top: 0;
}
}


.more-f {
       position: relative;
       display: block;
       margin: 20px auto 0;
}
@media screen and (max-width: 960px) {
.more-f {
       margin: 10px auto 0;
}
}


.btn2 {
     position: relative;
     display: block;
     width: 38px;
     height: 38px;
     line-height: 34px;
     background: rgba(61, 190, 35, 1.0); 
     border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    text-align: center;
     border: solid 2px #3dbe23;
     letter-spacing: 0;
}
.btn2 span {
       color: #fff;
     font-weight: 400;
     font-size: 16px;
      padding-left: 3px;
}

.btn2:hover {
      border: dotted 2px #fff;
      background: rgba(61, 190, 35, 0.7); 
}
@media screen and (max-width: 960px) {
.btn2 {
     width: 30px;
     height: 30px;
     line-height: 30px;
     border: none
}
.btn2 span {
     font-size: 13px;
      padding-left: 2px;
}

.btn2:hover {
      border: none;
      background: rgba(61, 190, 35, 1.0); 
}
}

.btn3 {
  position: relative;
  width: 90%;
  max-width: 320px;
  margin: 0 auto;
  /*display: inline-block;*/
  display: block;
  background: #ffc63c;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  letter-spacing: 0.2rem; 
 border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
}

.btn3 i {
  position: absolute;
  right: 20px;
  line-height: 50px;
  font-weight: 400;
  font-size: 90%;
}

.btn3:hover {
     background: #FFEBBC;
     color: #ffc63c;
      letter-spacing: 0.1rem; 
}
@media screen and (max-width: 1100px) {
  .btn3 {
    font-size: 15px;
    font-size: 1.5rem;
     letter-spacing: 0.1rem; 
    max-width: 280px;
  }
.btn3:hover {
      letter-spacing: 0.05rem; 
}
}

@media screen and (max-width: 768px) {
  .btn3 {
    max-width: 240px;
     height: 40px;
  line-height: 40px;
}
.btn3 i {
  position: absolute;
  right: 30px;
  line-height: 40px;
}
.btn3:hover {
     background: #ffc63c;
     color: #fff;
     letter-spacing: 0.1rem; 
}
}

@media screen and (max-width: 540px) {
  .btn3 {
    max-width: 200px;
}
.btn3 i {
  position: absolute;
  right: 20px;
   font-size: 75%;
}
}

.btn4 {
     position: relative;
     display: block;
     width: 38px;
     height: 38px;
     line-height: 34px;
     background: rgba(61, 190, 35, 1.0); 
     border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    text-align: center;
     border: solid 2px #3dbe23;
    letter-spacing: 0;
}
.btn4 span {
       color: #fff;
     font-weight: 400;
     font-size: 16px;
}

.btn4:hover {
      border: dotted 2px #fff;
      background: rgba(61, 190, 35, 0.7); 
}
@media screen and (max-width: 960px) {
.btn4 {
     width: 30px;
     height: 30px;
     line-height: 30px;
     border: none
}
.btn4 span {
     font-size: 13px;
}

.btn2:hover {
      border: none;
      background: rgba(61, 190, 35, 1.0); 
}
}



.fv-index {
     position: relative;
     display: block;
     width: 100%;
}


.fv-img {
     position: relative;
     display: block;
     width: 100%;
     height: 95vh;
       background: url("../img/index/mv.jpg");
       background-size: cover;
       background-position: 50% 50%;
       /*padding: 350px 0;*/
}
.gradation {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 95vh;
       background: linear-gradient( 45deg, rgba(137, 203, 35, 0.6), rgba(8, 167, 233, 0.6)); /*129, 190, 35*/
       background-size: 200% 200%;
       animation: Gradient 6s ease infinite;
}


@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


.fv-index .copy-txt {
      position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 80%;
    max-width: 1000px;
}
.fv-index .copy-txt .logo-mark {
       position: relative;
       display: block;
       width: 35%;
       max-width: 320px;
       margin: 0 auto 45px;
       opacity: 0.4;
}
.fv-index .copy-right {
      position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 40px;
    -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

          font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 10px;
    font-size: 1.0rem;
  line-height: 1;
  letter-spacing: 0.1rem; 
     color: #fff;
     text-transform:uppercase;
}     

@media screen and (max-width: 1190px) {
.fv-index .copy-txt {
    top: 50%;
}
.fv-index .copy-txt .logo-mark {
       width: 60%;
}
}

@media screen and (max-width: 870px) {
.fv-index .copy-txt {
    width: 86%;
}
.fv-index .copy-txt .logo-mark {
       width: 50%;
}
.fv-index .copy-right {
      /*position: absolute;
    top: 50%;
    left: 6px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 20px;

    font-size: 8px;
    font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.03rem; 
     color: #fff;
     text-transform:uppercase;*/
      display: none;
}    

.gradation {
       background: linear-gradient( 45deg, rgba(137, 203, 35, 0.6), rgba(8, 167, 233, 0.6));
       background-size: 300% 300%;
} 
}


.point {
     -webkit-animation: ani-fukidashi 3s ease-out infinite;
    -webkit-transform-origin: 50% 100%;
    animation: ani-fukidashi 3s ease-out infinite;
    transform-origin: 50% 100%;
}

@keyframes ani-fukidashi{
    0%{transform:rotateZ(-1.5deg)}
    50%{transform:rotateZ(1.5deg)}
    100%{transform:rotateZ(-1.5deg)}
}
@-webkit-keyframes ani-fukidashi{
    0%{-webkit-transform:rotateZ(-1.5deg)}
    50%{-webkit-transform:rotateZ(1.5deg)}
    100%{-webkit-transform:rotateZ(-1.5deg)}
}


@media screen and (max-width: 540px) {
.fv-img, .gradation {
     height: 75vh;
}
.fv-index .copy-txt {
    width: 96%;
}
.fv-index .copy-txt .logo-mark {
       position: relative;
       display: block;
       width: 40%;
       max-width: 200px;
       margin: 0 auto 30px;
       opacity: 0.6;
      
}
}



/*** 共通 ***/
.inner {
    position: relative;
    display: block;
    width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
}

@media screen and (max-width: 960px) {
.inner {
    position: relative;
    width: 80%;
     display: block;
     margin: 0 auto;
     padding: 0
}
}

@media screen and (max-width: 768px) {
.inner {
    width: 90%;
}
}

.memo {
      border-top: 1px solid #dcdcdc;
      padding: 15px 0 0;
}
/******/





.sec-02 {
     position: relative;
       display: block;
       width: 100%;
       padding: 100px 0;
       background-image:url("../img/index/bg02.png");
       background-size:cover;
       background-position: right center;
}


.sec-02 .inner .left {
      width: 43%;
      float: left;
      padding: 50px 80px;
      border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
      /*background: -moz-linear-gradient(top, #f3f3f3, #fff);
  background: -webkit-linear-gradient(top, #f3f3f3, #fff);
  background: linear-gradient(to bottom, #f3f3f3, #fff);*/
          background: #fff;
         width: 50%;
          -webkit-box-shadow: 0 8px 6px -6px #bfbfbf;
    -moz-box-shadow: 0 8px 6px -6px #bfbfbf;
     box-shadow: 0 8px 6px -6px #bfbfbf;
      border: solid 2px #f9f9f9;
}


@media screen and (max-width: 1540px) {
.sec-02 .inner .left {
      padding: 50px;
}
}
@media screen and (max-width: 960px) {
.sec-02 {
     background-image:url("../img/index/bg02.svg");
     padding: 50px 0 50px;
     background-position: center bottom;
}

.sec-02 .inner .left {
      width: 100%;
      float: none;
      padding: 20px;
      background-color: rgba(255,255,255,0.9);
      border: solid 1px #f9f9f9;
}
}

@media screen and (max-width: 767px) {
.sec-02 {
     padding: 40px 0;
}

.sec-02 .inner .left {
      width: 100%;
      float: none;
      padding: 20px;
      background-color: rgba(255,255,255,0.9);
}
}


.sec-03 {
     position: relative;
     display: block;
     width: 100%;
     padding: 70px 0;
     background: linear-gradient(180deg,#fff 0%,#fff 60%,#89cb23 60%,#89cb23 100%);
     margin: 70px auto 0;
}

.sec-03 .sec03-images {
      position: absolute;
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
    width: 80%;
}


.tit-block {
     display: block;
     margin: 50px auto 30px;
     width: 100%;
     text-align: left;
     margin-left: 1.5%;
}

ul.sec03-box {
      position: relative;
      display: block;
      width: 100%;
      margin: 40px auto 0;
}

ul.sec03-box li {
       position: relative;
       width: 30.3%;
       margin: 1.5%;
       float: left;
       background: #fff;
       border: solid 1px #f0f0f0;
       padding: 30px 40px;
       border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
       /*min-height: 587px;*/
}

ul.sec03-box li .category {
        display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 35px;
    font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
     margin-bottom: 15px;
     color: #89cb23;
}
ul.sec03-box li .category span {
      display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.sec03-box li .illust {
      width: 80%;
      margin: 10px auto 0;
      text-align: center;
}

ul.sec03-box li .links03 {
    position: absolute;
    top: 30px;
    right: 40px;
}

@media screen and (max-width: 960px) {
.sec-03 {
     padding: 40px 0;
     margin: 40px auto 0;
     /*background: #89cb23;*/
     background: linear-gradient( 45deg, rgba(129, 190, 35, 0.5), rgba(61, 190, 35, 0.8));
}
.sec-03 .sec03-images {
    width: 100%;
}
.tit-block {
     display: block;
     margin: 20px auto;
     width: 100%;
     text-align: left;
     margin-left: 0.5%;
}
ul.sec03-box li {
       position: relative;
       width: 32.3%;
       margin: 0.5%;
       float: left;
       background: #fff;
       border: solid 1px #f0f0f0;
       padding: 20px;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
       /*min-height: 587px;*/
}

ul.sec03-box li .category {
    font-weight: 700;
    font-size: 27px;
    font-size: 2.7rem;
  line-height: 1;
  letter-spacing: 0.12rem; 
     margin-bottom: 15px;
     color: #89cb23;
}
ul.sec03-box li .category span {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.sec03-box li .illust {
      width: 100%;
      margin: 5px auto 0;
      text-align: center;
}
ul.sec03-box li .links03 {
    position: absolute;
    top: 20px;
    right: 20px;
}
}
@media screen and (max-width: 768px) {
ul.sec03-box {
      position: relative;
      display: block;
      width: 90%;
      margin: 20px auto 0;
}
ul.sec03-box li {
       position: relative;
       width: 100%;
       margin: 0 auto 20px;
       float: none;
       background: #fff;
       border: none;
       padding: 20px 25px;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      webkit-box-shadow: 0 6px 8px -4px #3dbe23;
    -moz-box-shadow: 0 6px 8px -4px #3dbe23;
     box-shadow: 0 6px 8px -4px #3dbe23;
}
}
.sec-04 {
     position: relative;
     display: block;
     width: 100%;
     padding: 70px 0;
     background:#fff url("../img/index/bg04.png") no-repeat  center bottom / 100% auto;
     margin: 120px auto 0;
}

.tit-block2 {
     display: block;
     width: 100%;
     position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.sec-04 .image {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 auto;
      text-align: center;
}


.box-4 {
      position: relative;
     display: block;
     width: 80%;
     padding: 35px;
     background: #fff;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
      margin: -60px auto 40px;
}

.box-4 .memo2 {
        text-align: center;
}

@media screen and (min-width: 1900px) {
.sec-04 {
      padding: 150px 0 70px;
}
}

@media screen and (max-width: 1400px) {
.sec-04 {
     margin: 80px auto 0;
}
}
@media screen and (max-width: 960px) {
.sec-04 {
     position: relative;
     display: block;
     width: 100%;
     padding: 40px 0;
     background:#fff url("../img/index/bg04.png") no-repeat  center bottom / 100% auto;
     margin: 60px auto 0;
}

.tit-block2 {
     display: block;
     width: 100%;
     position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.box-4 {
      position: relative;
     display: block;
     width: 90%;
     padding: 20px;
     background: #fff;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      margin: -60px auto 20px;
}

.box-4 .memo2 {
        text-align: left;
}
}

@media screen and (max-width: 640px) {
.sec-04 {
     margin: 30px auto 0;
}
.box-4 {
      position: relative;
     display: block;
     width: 100%;
     padding: 30px 15px 15px;
     background: #fff;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      margin: 0 auto 1px;
}
}


/***WORKS TAB***/
.tabs {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}

.tabs .first-box {
    display: block;
    margin: 30px auto 60px;
}

.tabs .second-box {
    display: block;
}

.tabs label {
      position: relative;
      width: 18%;
      margin: 1%;
      /*margin-bottom: 80px;*/
      float: left;
      text-align: center;
      padding: 15px 0;
      background: #fff;
      border: solid 1px #eee;
      border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      z-index: 20;
}


.tabs label.tab-L {
      width: 23%;
      margin: 1%;
}

.tabs label.tab-XL {
     width: 30.3%;
     margin: 1%;
}

.tabs label.mb40 {
     margin-bottom: 40px;
}

.tabs label.mb80 {
     margin-bottom: 100px;
}



.tabs .tab-label {
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
      font-weight: bold;
      font-size: 90%;
      line-height: 30px;
      letter-spacing: 0;
      -webkit-transition: .5s ease all;
  -o-transition: .5s ease all;
  transition: .5s ease all;
}


.tabs .tab-label span {
     /*display: inline-block;*/
     width: 30px;
     /*margin-right: 10px;*/
      position: absolute;
     top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}




/************************************
** CSSでタブ表示
************************************/

/* タブにマウスカーソルがのったときフッター */
.tabs .tab-label:hover {
  /*opacity: 0.7;*/
  background-color: #f8f8f8;
  cursor: pointer;
}

/* ラジオボタンと内容を非表示 */
.tabs input[name="tab-radio"],
.tabs .tab-content {
  display: none;
}

/* タブ内容のスタイル */


/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content,
.tabs #tab-3:checked ~ .tab-3-content,
.tabs #tab-4:checked ~ .tab-4-content,
.tabs #tab-5:checked ~ .tab-5-content,
.tabs #tab-6:checked ~ .tab-6-content,
.tabs #tab-7:checked ~ .tab-7-content,
.tabs #tab-8:checked ~ .tab-8-content,
.tabs #tab-9:checked ~ .tab-9-content,
.tabs #tab-10:checked ~ .tab-10-content,
.tabs #tab-11:checked ~ .tab-11-content,
.tabs #tab-12:checked ~ .tab-12-content,
.tabs #tab-13:checked ~ .tab-13-content,
.tabs #tab-14:checked ~ .tab-14-content,
.tabs #tab-15:checked ~ .tab-15-content,
.tabs #tab-16:checked ~ .tab-16-content {
      position: relative;
      width: 100%;
      display: block;
}

/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #f0f0f0;
  color: rgba(61, 190, 35, 1.0);
}

@media screen and (max-width: 1120px) {
.tabs label {
      position: relative;
      width: 19%;
      margin: 0.5%;
      /*margin-bottom: 80px;*/
      float: left;
      text-align: center;
      padding: 12px 0;
      border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      z-index: 20;
}


.tabs label.tab-L {
      width: 23%;
      margin: 1%;
}
.tabs label.tab-XL {
     width: 30.3%;
     margin: 1%;
}

.tabs label.mb40 {
     margin-bottom: 35px;
}

.tabs label.mb80 {
     margin-bottom: 80px;
}

.tabs .tab-label {
      font-size: 85%;
      line-height: 25px;
      letter-spacing: 0;
}


.tabs .tab-label span {
     /*display: inline-block;*/
     width: 25px;
     /*margin-right: 10px;*/
      position: absolute;
     top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
}
@media screen and (max-width: 960px) {
.tabs label.mb40 {
     margin-bottom: 1.5%;
}

.tabs label.mb80 {
     margin-bottom: 1.5%;
}
.tabs label {
      position: relative;
      width: 30.3%;
      margin: 1.5%;
      /*margin-bottom: 80px;*/
      float: left;
      text-align: center;
      padding: 12px 0;
      border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      z-index: 20;
}

.tabs label.mb80.mb-last {
     margin-bottom: 40px;
}

.tabs label.tab-L,
.tabs label.tab-XL {
      width: 30.3%;
      margin: 1.5%;
}

.tabs .tab-label {
      font-size: 12px;
      font-size: 1.2rem;
      line-height: 20px;
}


.tabs .tab-label span {
     width: 20px;
      position: absolute;
     top: 50%;
    left: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
}
@media only screen and (max-width: 768px) {
.tabs label {
      width: 48%;
      margin: 0 1%;
      margin-bottom: 10px;
      float: left;
      text-align: center;
      padding: 6px 0;
      border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.tabs label.tab-L,
.tabs label.tab-XL {
      width: 48%;
      margin: 0 1%;
      margin-bottom: 10px;
}

.tabs label.mb40 {
     margin-bottom: 1.0%;
     margin-bottom: 10px;
}

.tabs label.mb80 {
     margin-bottom: 1.0%;
     margin-bottom: 10px;
}
  
.tabs .tab-label {
      font-size: 11px;
      font-size: 1.1rem;
      line-height: 17px;
}


.tabs .tab-label span {
     width: 17px;
      position: absolute;
    left: 5px;
}
}

@media only screen and (max-width: 640px) {
.tabs label.mb80.mb-last.mr50 {
     margin-right: 100px;
}

.tabs label.txt-small3 {
      font-size: 70%;
}

}

 /****sec-works****/

.sec-works {
       position: relative;
       display: block;
       width: 100%;
       padding: 70px 0;
       margin: 0 auto;
        background: #fff;
}

ul.works-boxs {
         position: relative;
         display: flex;
         flex-wrap: wrap;
         width: 100%;
         height: auto;
         margin: 50px auto;
     
}

ul.works-boxs li {
         position: relative;
         width: 22%;
         margin: 0 1.5% 3%;
}

ul.works-boxs li .image {
        position: relative;
        display: block; 
        width: 100%;
        border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
       overflow:hidden;
}

ul.works-boxs li .image.no-round {
        border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

ul.works-boxs li .image img {
         -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}

ul.works-boxs li .image:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 40px; height: 40px; font-family: 'FontAwesome'; content: "\f0fe"; color: rgba(255,255,255,0.0);font-size: 40px; line-height: 40px; font-weight: normal; opacity: 1; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 2; }

ul.works-boxs li .image:hover:before {color: rgba(255,255,255,0.6);opacity: 1;}





ul.works-boxs li .name {
    display: block;
    margin-top: 10px;
    padding-left: 10px;
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 95%;
}

ul.works-boxs li .name span {
     font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
     padding-left: 3px;
     font-size: 80%;
}

ul.works-boxs li .tag {
    display: block;
    /*margin-top: 2px;*/
    padding-left: 10px;
}

ul.works-boxs li .tag span {
      display: inline-block;
      background: #ececec;
      padding: 4px 10px;
      font-size: 10px;
    font-size: 1.0rem;
  letter-spacing: 0;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
      line-height: 1;
}

ul.works-boxs li .tag span + span {
      margin-left: 5px;
}

ul.works-boxs li .site-link {
      position: relative;
      display: block;
      /*margin-top: 2px;*/
}
ul.works-boxs li .site-link a.links {
        font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 10px;
    font-size: 1.0rem;
  line-height: 1.0;
  letter-spacing: 0;
       padding-left: 10px;
}

ul.works-boxs li .site-link a:hover {
      color: #3dbe23;
}


ul.works-boxs li .site-link::after {
  content: '';
  display: inline-block;
  background-image: url(../img/common/link.svg);
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 4px;
}

@media screen and (max-width: 1100px) {
ul.works-boxs li {
         position: relative;
         width: 30.3%;
         margin: 1.5%;
         float: left;
}
ul.works-boxs li .image {
        width: 100%;
        border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
       overflow:hidden;
}
}

@media screen and (max-width: 960px) {
.sec-works {
       padding: 40px 0;
}
ul.works-boxs {
         margin: 20px auto 40px;
     
}

ul.works-boxs li {
         position: relative;
         width: 46%;
         margin: 0 2% 3%;
         float: left;
}
}


@media screen and (max-width: 768px) {
ul.works-boxs li {
         position: relative;
         width: 47%;
         margin: 0 1.5% 4%;
         float: left;
}
ul.works-boxs li .image:before { 
         content: none;
}


ul.works-boxs li .name {
    display: block;
    margin-top: 6px;
    padding-left: 3px;
    font-size: 12px;
    font-size: 1.2rem;
     letter-spacing: 0;
     line-height: 1.0;
}

ul.works-boxs li .name span {
     padding-left: 2px;
     font-size: 80%;
}

ul.works-boxs li .tag {
    display: block;
    /*margin-top: 2px;*/
    padding-left: 3px;
     line-height: 1;
}

ul.works-boxs li .tag span {
      display: inline-block;
      background: #ececec;
      padding: 2px 11px 1px;
      font-size: 9px;
    font-size: 0.9rem;
  letter-spacing: 0;
       border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
       line-height: 1;
}

ul.works-boxs li .tag span + span{
      display: none;
}

ul.works-boxs li .site-link {
      position: relative;
      display: block;
      line-height: 1.0;
      /*margin-top: 2px;*/
}
ul.works-boxs li .site-link a.links {
        font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 9px;
    font-size: 0.9rem;
  line-height: 1.0;
  letter-spacing: 0;
       padding-left: 3px;
}

ul.works-boxs li .site-link::after {
  content: '';
  display: inline-block;
  background-image: url(../img/common/link.svg);
  width: 9px;
  height: 9px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 4px;
}
}

@media screen and (max-width: 540px) {
ul.works-boxs li {
         min-height: 150px;
}
ul.works-boxs li .name {
    font-size: 11px;
    font-size: 1.1rem;
    padding-left: 0;
}

ul.works-boxs li .name.txt-small {
      font-size: 10px;
    font-size: 1.0rem;
    height: 12px;
}
ul.works-boxs li .tag {
    padding-left: 0;
}
ul.works-boxs li .tag span {
      padding: 2px 10px 1px;
      font-size: 8px;
    font-size: 0.8rem;
  letter-spacing: 0;
       border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
       line-height: 1;
}
ul.works-boxs li .site-link a.links {
       font-size: 8px;
    font-size: 0.8rem;
       padding-left: 0;
       letter-spacing: -0.02rem;
}
ul.works-boxs li .site-link a.links.txt-small2 {
     font-size: 5px;
    font-size: 0.5rem;
    letter-spacing: -0.05rem;
    padding-left: 0;
}
}

.modal{
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
   z-index: 90000;
}
.modal__bg{
    position: absolute;
    background: rgba(0,0,0,0.6);
    height: 100vh;
    width: 100%;
}
.modal__content{
    background: #fff;
    width: 90%;
    max-width: 1100px;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     max-height: calc(100vh - 210px);
    overflow-y: auto;
    border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
    webkit-box-shadow: 0 10px 10px -2px #404040;
    -moz-box-shadow: 0 10px 10px -2px #404040;
     box-shadow: 0 10px 10px -2px #404040;
}

.modal__content .inner-box-list4 {
       position: relative;
       display: flex;
  justify-content: center;
  align-items: center;
       margin: 20px auto 0;
}

.modal__content .left {
      width: 60%;
      float: left;  
}

.modal__content .right {
      width: 40%;
      float: right;  
      padding: 20px 30px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
}

.modal__content .right .name {
    display: block;
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 20px;
    font-size: 2.0rem;
     letter-spacing: 0.15rem;
}

.modal__content .right .name span {
     padding-left: 3px;
     font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
     font-size: 15px;
    font-size: 1.5rem;
}

.modal__content .right .tag {
    display: block;
    margin-top: 5px;
}

.modal__content .right .tag span {
      display: inline-block;
      background: #ececec;
      padding: 1px 13px;
      margin-right: 8px;
      font-size: 11px;
    font-size: 1.1rem;
  letter-spacing: 0;
       border-radius: 11px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
}
.modal__content .right .site-link {
      position: relative;
      display: block;
      margin-top: 10px;
}
.modal__content .right .site-link a {
        font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0;
      color: #333;
}

.modal__content .right .site-link a:hover {
      color: #3dbe23;
}


.modal__content .right .site-link::after {
  content: '';
  display: inline-block;
  background-image: url(../img/common/link.svg);
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 4px;
}



.modal__content .right .memo-txt {
     display: block;
     margin: 15px auto;
     font-size: 96%;
}


a.js-modal-close {
     display: block;
      width: 240px;
     margin: 30px auto 0;
     background: #333;
     color: #fff;
     text-align: center;
     font-family: 'Karla', sans-serif;
       font-weight: 400;
       font-size: 14px;
       font-size: 1.4rem;
       letter-spacing: 0.36rem;
       line-height: 1;
       padding: 12px 0;
       border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}


@media screen and (max-width: 960px) {
.modal__content .left {
      width: 55%;
      float: left;  
}

.modal__content .right {
      width: 45%;
      float: right;  
      padding: 10px 10px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
}
a.js-modal-close {
     display: block;
      width: 200px;
     margin: 30px auto 0;
       font-size: 13px;
       font-size: 1.3rem;
       letter-spacing: 0.3rem;
       padding: 9px 0;
       border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}

}

@media screen and (max-width: 768px) {
.modal__content{
    background: #fff;
    width: 90%;
    padding: 30px;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     max-height: calc(100vh - 200px);
    overflow-y: auto;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.modal__content .inner-box-list4 {
       position: relative;
       display: block;
       margin: 0 auto;
}
.modal__content .left {
      width: 100%;
      float: none;  
      margin: 0 auto 20px;
}

.modal__content .right {
      width: 100%;
      float: none;  
      padding: 10px;
      border-top: 1px solid #f7f7f7;
      border-bottom: 1px solid #f7f7f7;
      /*text-align: center;*/
}

.modal__content .right .name {
    display: block;
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem;
     letter-spacing: 0.04rem;
}

.modal__content .right .name.txt-small {
     font-size: 16px;
    font-size: 1.6rem;
}


.modal__content .right .name span {
     padding-left: 3px;
     font-size: 13px;
    font-size: 1.3rem;
}

.modal__content .right .tag {
    display: block;
    margin-top: 0;
}

.modal__content .right .tag span {
      display: inline-block;
      background: #ececec;
      padding: 1px 10px;
      margin-right: 5px;
      font-size: 10px;
    font-size: 1.0rem;
  letter-spacing: 0;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.modal__content .right .site-link {
      margin-top: 5px;
}

.modal__content .right .memo-txt {
     display: block;
     margin: 15px auto;
     font-size: 100%;
}

a.js-modal-close {
     display: block;
      width: 130px;
     margin: 20px auto 0;
       font-size: 12px;
       font-size: 1.2rem;
       letter-spacing: 0.18rem;
       padding: 7px 0 7px 2px;
       border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
}
}

/***PAGES下層共通***/
.mv {
     position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     padding: 100px 0;
     background-size: 200% 200%;
     animation: Gradient 10s ease infinite;
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.mv .pages-tit {
        display: block;
        font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 130px;
       font-size: 13.0rem;
       letter-spacing: 1rem;
       line-height: 1;
       color: rgba(255, 255, 255, 0.2);
       -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.mv .pages-sub {
        display: block;
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 24px;
        font-size: 2.4rem;
        letter-spacing: 0.6rem;
        line-height: 1;
        color: rgba(255, 255, 255, 1.0);
        margin-top: -30px;
}

.breadcrumbs {
      position: relative;
     display: block;
     max-width: 1200px;
     margin: 0 auto;
     z-index: 3;
}
.breadcrumbs ul {
         position: absolute;
         top: -13px;
         left: 0;
         background: #fff;
         display: inline-block;
         padding: 8px 15px;
         border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
         -webkit-box-shadow: 0 6px 6px -6px #888;
    -moz-box-shadow: 0 6px 6px -6px #888;
     box-shadow: 0 6px 6px -6px #888;
}
.breadcrumbs ul li {
     display: inline-block;
     padding: 0 10px;
     float: left;
     font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 12px;
       font-size: 1.2rem;
       letter-spacing: 0.1rem;
       line-height: 1;
}
.breadcrumbs ul li .active {
      color: #89cb23;
}
.breadcrumbs ul li::before {
padding: 0 10px 0 0;
content: "\f105";
font-family: FontAwesome;
font-size: 14px;
font-weight: 400;
}
.breadcrumbs ul li:first-child {
    padding: 0 0 0 10px;
}
.breadcrumbs ul li:first-child::before {
padding: 0;
content: " ";
}

.pages-title-boxs {
     display: block;
     margin: -55px auto 0;
     text-align: center;
}

.round-box {
      position: relative;
     display: block;
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     background: #fff;
     padding: 70px;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.round-box + .round-box {
     margin-top: 70px;
}

@media screen and (max-width: 1200px) {
.breadcrumbs ul {
         position: absolute;
         top: -10px;
         left: 5px;
         background: #fff;
         display: inline-block;
         padding: 5px 10px;
         border-radius: 11px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
         -webkit-box-shadow: 0 6px 6px -6px #888;
    -moz-box-shadow: 0 6px 6px -6px #888;
     box-shadow: 0 6px 6px -6px #888;
}
.breadcrumbs ul li {
     display: inline-block;
     padding: 0 7px;
     float: left;
       font-size: 10px;
       font-size: 1.0rem;
       letter-spacing: 0.05rem;
}
.breadcrumbs ul li::before {
padding: 0 7px 0 0;
content: "\f105";
font-family: FontAwesome;
font-size: 12px;
font-weight: 400;
}
}
@media screen and (max-width: 1190px) {
.mv {
     /*margin-top: 62px;*/
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     padding: 112px 0 65px;
     background-size: 210% 210%;
     animation: Gradient 10s ease infinite;
}
.mv .pages-tit {
       font-size: 75px;
       font-size: 7.5rem;
       letter-spacing: 0.8rem;
       line-height: 1;
}
.mv .pages-sub {
        font-size: 20px;
        font-size: 2.0rem;
        letter-spacing: 0.3rem;
        margin-top: -30px;
}
}

@media screen and (max-width: 1100px) {
.pages-title-boxs {
     margin: -15px auto 0;
}

.round-box {
     padding: 30px;
}
}
@media screen and (max-width: 960px) {
.round-box {
     width: 100%;
}
.round-box + .round-box {
     margin-top: 40px;
}
}
@media screen and (max-width: 768px) {
.mv {
     padding: 87px 0 35px;/*25+62*/
     background-size: 220% 220%;
     animation: Gradient 10s ease infinite;
}
.mv .pages-tit {
       font-size: 45px;
       font-size: 4.5rem;
       letter-spacing: 0.3rem;
       line-height: 1;
}
.mv .pages-sub {
        font-size: 17px;
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        margin-top: -15px;
}
.pages-title-boxs {
     margin: -5px auto 0;
}
.round-box {
     width: 100%;
     padding: 20px;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.round-box + .round-box {
     margin-top: 30px;
}
}
@media screen and (max-width: 640px) {
.mv .pages-sub {
        font-size: 14px;
        font-size: 1.4rem;
}
}
@media screen and (max-width: 540px) {
.mv {
     /*margin-top: 54px;*/
     padding: 79px 0 35px;/*25+54*/
     background-size: 230% 230%;
     animation: Gradient 10s ease infinite;
}
}

.pages {
    position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     padding: 70px 0;
}

.pages2 {
    position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     padding: 70px 0 0;
}

.bg-gray {
    background: #efefef;
}

.bg-white {
    background: #fff;
}

@media screen and (max-width: 960px) {
.pages {
     padding: 50px 0;
}
.pages2 {
     padding: 50px 0 0;
}
}

@media screen and (max-width: 768px) {
.pages {
     padding: 40px 0;
}
.pages2 {
     padding: 40px 0 0;
}
}


.normal-box1 {
     position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
  justify-content: center;
  align-items: center;
}

.normal-box1 .left {
     width: 50%;
     float: left;
}

.normal-box1 .right {
     width: 50%;
     float: right;
     padding: 0 40px;
}

.box-border {
   display: block;
   width: 100%;
   border-top: 1px solid #dcdcdc;
   padding-top: 10px;
   margin-top: 10px;
}

@media screen and (max-width: 990px) {
.normal-box1 {
    display: block;
}

.normal-box1 .left {
     width: 100%;
     float: none;
}

.normal-box1 .right {
     width: 100%;
     float: none;
     padding: 20px 20px 0;
}
}
@media screen and (max-width: 640px) {
.normal-box1 .right {
     padding: 15px 10px 0;
}

.box-border {
   border-top: 1px solid #dcdcdc;
   padding-top: 5px;
   margin-top: 5px;
}
}

.notes {
     text-align: center;
     margin: 0 auto 15px;
}

@media screen and (max-width: 960px) {
.notes {
     text-align: left;
     margin: 0 auto 10px;
}
}

.intro {
     position: relative;
     display: block;
     width: 100%;
     margin: 0 auto 70px;
}

.intro .intro-bg {
      position: relative;
     display: block;
     width: 100%; 
}

.intro .intro-box {
     position: absolute;
    top: 50%;
    right: 5%;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
     width: 45%;
    background: #fff;
    padding: 50px;
}

.intro2 {
     position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     background: linear-gradient(#fff 50%, #dbefbd 50%);
      padding: 0 0 100px;
}

.intro2 .intro-bg2 {
      position: relative;
     display: block;
     width: 80%;
     float: right;
}

.intro2 .intro-box2 {
     position: absolute;
    bottom: 10%;
    left: 5%;
     /*transform: translateY(-50%);
  -webkit- transform: translateY(-50%);*/
     width: 45%;
     max-width: 800px;
    background: #fff;
    padding: 30px 50px 50px;
}

h1.ex-copy {
     width: 150%;
     position: absolute;
     top: -70px;
    left: 0;
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 55px;
    font-size: 5.5rem;
  line-height: 1;
  letter-spacing: 0.4rem;
  background: linear-gradient(to right, rgba(137, 203, 35, 1.0), rgba(8, 167, 233, 1.0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     text-transform:uppercase;
     padding-left: 50px;
}
@media all and (-ms-high-contrast: none){
  h1.ex-copy {
    background: transparent;
    color: #08a7e9;
  }
}
@media screen and (min-width: 1600px) {
.intro2 .intro-box2 {
     position: absolute;
    bottom: 15%;
    left: 15%;
}
h1.ex-copy {
    font-size: 70px;
    font-size: 7.0rem;
  letter-spacing: 0.3rem;
}
}
@media screen and (max-width: 1500px) {
.intro2 .intro-box2 {
     position: absolute;
    bottom: 10%;
    left: 3%;
     width: 45%;
    background: #fff;
    padding: 20px 30px 30px;
}
h1.ex-copy {
     width: 150%;
     position: absolute;
     top: -70px;
    left: 0;
    font-size: 47px;
    font-size: 4.7rem;
    letter-spacing: 0.3rem;
    padding-left: 30px;
}
}
@media screen and (max-width: 1200px) {
.intro2 .intro-box2 {
     position: absolute;
    bottom: 10%;
    left: 3%;
     width: 55%;
    background: #fff;
    padding: 20px 30px 30px;
}
h1.ex-copy {
     top: -50px;
}
}

@media screen and (max-width: 1000px) {
.intro2 .intro-box2 {
     position: absolute;
    bottom: 10%;
    left: 3%;
     width: 60%;
    background: #fff;
    padding: 10px 15px 20px 20px;
}
h1.ex-copy {
     top: -40px;
     font-size: 42px;
    font-size: 4.2rem;
    letter-spacing: 0.2rem;
    padding-left: 20px;
}
}
@media screen and (max-width: 768px) {
.intro2 {
     position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     background: linear-gradient(#fff 20%, #dbefbd 80%);
      padding: 0 0 30px;
}

.intro2 .intro-bg2 {
      position: relative;
     display: block;
     width: 94%;
     margin: 0 auto;
     float: none;
}

.intro2 .intro-box2 {
     position: relative;
     display: block;
    bottom: auto;
    left: auto;
    width: 100%;
     margin: 0 auto;
    background: transparent;
    padding: 15px 20px 0;
}

h1.ex-copy {
     width:  inherit;
     position: absolute;
     top: -100px;
    left: 0;
    display: block;
    font-size: 48px;
    font-size: 4.8rem;
  line-height: 1;
  letter-spacing: 0.3rem;
     padding-left: 20px;
}
}

@media screen and (max-width: 640px) {
h1.ex-copy {
     top: -70px;
    font-size: 33px;
    font-size: 3.3rem;
  letter-spacing: 0.2rem;
     padding-left: 20px;
}
}



@media screen and (max-width: 1310px) {
.intro .intro-box {
     position: absolute;
    top: 50%;
    right: 30px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
     width: 48%;
    background: #fff;
    padding: 40px;
}
}

@media screen and (max-width: 1190px) {
.intro .intro-box {
     position: absolute;
    top: 50%;
    right: 30px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
     width: 58%;
    background: #fff;
    padding: 30px;
}
}

@media screen and (max-width: 900px) {
.intro .intro-box {
     position: relative;
     display: block;
    top: auto;
    right: auto;
     transform: none;
  -webkit- transform: none;
     width: 100%;
     background: transparent;
     margin: 0 auto 0;
    padding: 0 30px;
}
}
@media screen and (max-width: 768px) {
.intro {
     margin: 0 auto 40px;
}
.intro .intro-box {
    padding: 0 20px;
}
}

@media screen and (min-width: 1480px) {
.intro .intro-box {
      position: absolute;
    top: 50%;
    right: 6%;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
     width: 40%;
    background: #fff;
    padding: 50px;
}
}
@media screen and (min-width: 1700px) {
.intro .intro-box {
     width: 35%;
}
}

.intro-sub {
      display: block;
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 15px;
  font-size: 1.5rem;
   padding-top: 15px;
  letter-spacing: 0.06rem; 
   line-height: 1.5
   margin: 0;
}

.intro-copy {
      display: block;
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 25px;
  font-size: 2.5rem;
   padding-bottom: 30px;
  letter-spacing: 0.2rem; 
   line-height: 1.3;
   margin: 0;
}

.intro-copy span {
     display: inline-block;
     font-size: 115%;
     border-bottom: 6px solid #89cb23;
     padding-right: 3px;
}
@media screen and (max-width: 900px) {
.intro-sub {
  font-size: 13px;
  font-size: 1.3rem;
   padding-top: 15px;
  letter-spacing: 0.06rem; 
   line-height: 1.5;
   /*color: #fff;*/
}

.intro-copy {
  font-size: 21px;
  font-size: 2.1rem;
   padding-bottom: 25px;
  letter-spacing: 0.2rem; 
   line-height: 1.3;
   /*color: #fff;*/
}

.intro-copy span {
     display: inline-block;
     font-size: 115%;
     border-bottom: 4px solid #89cb23;
     padding-right: 3px;
}
}
@media screen and (max-width: 768px) {
.intro-sub {
  font-size: 11px;
  font-size: 1.1rem;
   padding-top: 5px;
  letter-spacing: 0;
   line-height: 1.5
}

.intro-copy {
  font-size: 19px;
  font-size: 1.9rem;
   padding-bottom: 15px;
  letter-spacing: 0.1rem; 
   line-height: 1.3;
}

.intro-copy span {
     display: inline-block;
     font-size: 115%;
     border-bottom: 4px solid #89cb23;
     padding-right: 1px;
}
}
@media screen and (max-width: 640px) {
.intro-sub {
  font-size: 10px;
  font-size: 1.0rem;
}
}

.box-tit {
      display: block;
      font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 25px;
  font-size: 2.5rem;
   padding: 15px 0;
  letter-spacing: 0.18rem; 
   line-height: 1.5;
}
.box-tit span {
      display: block;
      font-size: 85%;
}

@media screen and (max-width: 768px) {
.box-tit {
  font-size: 20px;
  font-size: 2.0rem;
   padding: 5px 0;
  letter-spacing: 0.1rem; 
   line-height: 1.4;
}
}
/******/


/***COMPANY***/
.company {
    position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
}
.company table {
    width: 90%;
    margin: 30px auto;
}
.company table th {
   border-bottom: 3px solid #aaa;
    vertical-align: middle;
    text-align: left;
    width: 25%;
    overflow: visible;
    position: relative;
    font-weight: bold;
    letter-spacing: 0.1rem; 
   padding: 15px 0 15px 20px;
         -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
.company table td {
   border-bottom: 3px solid #dcdcdc;
    padding: 15px 0 15px 20px;
    text-align: left;
}
.company table td i {
     padding-right: 3px;
}
.company table td span {
     color: #89cb23;
     font-size: 80%;
     padding-right: 5px;
}
@media screen and (max-width: 960px) {
.company table {
    width: 100%;
    margin: 20px auto;
}
}
@media screen and (max-width: 768px) {
.company table {
    margin: 10px auto;
}
}
@media screen and (max-width: 640px) {
.company table th {
    display: block;
   border-bottom: 1px solid #dcdcdc;
    width: 100%;
   padding: 3px 0 3px 5px;
   /*text-align: center;*/
   border-left: 3px solid #aaa;
}
.company table td {
   border-bottom: none;
    width: 100%;
    display: block;
    padding: 5px 0 15px 5px;
}
.company table td i {
     padding-left: 5px;
}
.company table td span i {
    padding: 0;
}
.company table td span {
    padding-left: 0;
}
}

.company .tl {
    display: block;
    width: 80%;
    margin: 40px auto 0;
}

.main-bdr{
  border-color: #89cb23;
}
 
.tl-content {
  position: relative;
  padding: 0 0 20px 25px;
}
 
.tl-content:before {
  content: "";
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
  width: 3px;
  background: #aaa;
}
 
.tl-content:not(:first-of-type):not(:last-of-type) .tl_marker {
  background: transparent;
}
 
.tl-content:last-of-type:before {
  content: none;
}
 
.tl-content img{
  max-width: 100%;
  height: auto;
}
 
.tl_label {
  padding-top: 2px;
}
 
.tl_title {
 font-size: 13px;
    font-size: 1.3rem;
}
.tl_title span {
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 17px;
    font-size: 1.7rem;
     letter-spacing: 0;
}
.tl_main {
  padding: 0 0 10px;
  border-bottom: dashed 1px #dcdcdc;
}
.main-bc {
  background-color: #89cb23;
}
 
.tl_marker {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #89cb23;
}

@media screen and (max-width: 1000px) {
.company .tl {
    display: block;
    width: 100%;
    margin: 30px auto 0;
}
}
@media screen and (max-width: 960px) {
.company .tl {
    margin: 20px auto 0;
}
}
@media screen and (max-width: 768px) {
.company .tl {
    margin: 10px auto 0;
}
.tl_title {
 font-size: 11px;
    font-size: 1.1rem;
}
.tl_title span {
    font-size: 15px;
    font-size: 1.5rem;
}
}


/***NEWS***/
.news {
    position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
}

.news .date {
     display: block;
    text-align: right;
     font-family: 'Karla', sans-serif;
       font-weight: 400;
       font-size: 11px;
       font-size: 1.1rem;
       letter-spacing: 0.06rem;
       line-height: 1;
       color: #89cb23;
}

.news h3 {
     line-height: 1.4;
}


/***WORKS***/
ul.works-btn {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 auto 50px;
}

ul.works-btn li {
       position: relative;
       width: 30.3%;
       margin: 1.5%;
       float: left;
       background: #fff;
       border: solid 2px #f2f2f2;
       padding: 20px 0;
       padding-left: 80px;
       border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
       /*min-height: 587px;*/
         -webkit-box-shadow: 0 8px 8px -6px #888;
    -moz-box-shadow: 0 8px 8px -6px #888;
     box-shadow: 0 8px 8px -6px #888;
}

ul.works-btn li.active {
       /*background: #f7f5f4;*/
       border: solid 2px rgba(61, 190, 35, 0.9); 
        -webkit-box-shadow: 0 6px 8px -6px rgba(61, 190, 35, 0.9); 
    -moz-box-shadow: 0 6px 8px -6px rgba(61, 190, 35, 0.9); 
     box-shadow: 0 6px 8px -6px rgba(61, 190, 35, 0.9); 
}


ul.works-btn li .category {
        display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 35px;
    font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
     color: #89cb23;
}
ul.works-btn li .category span {
      display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.works-btn li .icon {
      position: absolute;
      top: 50%;
      left: 20px;
      width: 40px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

ul.works-btn li .links03 {
    position: absolute;
    top: 50%;
    right: 30px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
ul.works-btn {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 auto 50px;
}

ul.works-btn li {
       position: relative;
       width: 30.3%;
       margin: 1.5%;
       float: left;
       background: #fff;
       border: solid 2px #f2f2f2;
       padding: 20px 0;
       padding-left: 80px;
       border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
       /*min-height: 587px;*/
         -webkit-box-shadow: 0 8px 8px -6px #888;
    -moz-box-shadow: 0 8px 8px -6px #888;
     box-shadow: 0 8px 8px -6px #888;
}

ul.works-btn li .category {
    font-size: 30px;
    font-size: 3.0rem;
  line-height: 1;
  letter-spacing: 0.2rem; 
}
ul.works-btn li .category span {
      display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.works-btn li .icon {
      position: absolute;
      top: 50%;
      left: 20px;
      width: 35px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

ul.works-btn li .links03 {
    position: absolute;
    top: 50%;
    right: 20px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}
}
@media screen and (max-width: 960px) {
ul.works-btn {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 auto 35px;
}

ul.works-btn li {
       position: relative;
       width: 31.3%;
       margin: 1.0%;
       float: left;
       background: #fff;
       border: solid 2px #f2f2f2;
       padding: 10px 0;
       padding-left: 45px;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
         -webkit-box-shadow: 0 8px 8px -6px #888;
    -moz-box-shadow: 0 8px 8px -6px #888;
     box-shadow: 0 8px 8px -6px #888;
}


ul.works-btn li .category {
    font-size: 25px;
    font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.1rem; 
}
ul.works-btn li .category span {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: 0;
}
ul.works-btn li .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      width: 25px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

ul.works-btn li .links03 {
    position: absolute;
    top: 50%;
    right: 10px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}
}

@media screen and (max-width: 768px) {
ul.works-btn li {
       padding: 10px 0;
       padding-left: 40px;
}
ul.works-btn li .category {
    font-size: 21px;
    font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.05rem; 
}
ul.works-btn li .category span {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: normal;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0;
}
}
@media screen and (max-width: 680px) {

ul.works-btn li {
       position: relative;
       width: 80%;
       margin: 0 auto 20px;
       float: none;
       background: #fff;
       border: solid 2px #f2f2f2;
       padding: 10px 0;
       padding-left: 60px;
       border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
         -webkit-box-shadow: 0 8px 8px -6px #888;
    -moz-box-shadow: 0 8px 8px -6px #888;
     box-shadow: 0 8px 8px -6px #888;
}
ul.works-btn li .category {
    font-size: 22px;
    font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.05rem; 
}
ul.works-btn li .icon {
      position: absolute;
      top: 50%;
      left: 20px;
      width: 25px;
     transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

ul.works-btn li .links03 {
    position: absolute;
    right: 20px;
}
}


/***SERVICE***/

ul.sec03-box1 {
      position: relative;
      display: block;
      width: 100%;
      margin: 40px auto 0;
}

ul.sec03-box1 li {
       position: relative;
       width: 30.3%;
       margin: 1.5%;
       float: left;
       background: #fff;
       border: solid 1px #f0f0f0;
       padding: 30px 40px;
       border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
       /*min-height: 587px;*/
      -webkit-box-shadow: 0 6px 6px -6px #888;
    -moz-box-shadow: 0 6px 6px -6px #888;
     box-shadow: 0 6px 6px -6px #888;
     min-height: 471px;
}

ul.sec03-box1 li .category {
        display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 35px;
    font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.4rem; 
     margin-bottom: 15px;
     color: #89cb23;
}
ul.sec03-box1 li .category span {
      display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.sec03-box1 li .illust {
      width: 80%;
      margin: 0 auto 10px;
      text-align: center;
}

ul.sec03-box1 li .links04 {
    position: absolute;
    bottom: -19px;
    left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}

@media screen and (max-width: 1354px) {
ul.sec03-box1 li {
     min-height: 490px;
}
}

@media screen and (max-width: 1300px) {
ul.sec03-box1 li {
     min-height: 477px;
}
}
@media screen and (max-width: 960px) {
ul.sec03-box1 li {
       position: relative;
       width: 32.3%;
       margin: 0.5%;
       float: left;
       background: #fff;
       border: solid 1px #f0f0f0;
       padding: 20px;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
       min-height: inherit;
}

ul.sec03-box1 li .category {
    font-weight: 700;
    font-size: 27px;
    font-size: 2.7rem;
  line-height: 1;
  letter-spacing: 0.12rem; 
     margin-bottom: 15px;
     color: #89cb23;
}
ul.sec03-box1 li .category span {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.05rem; 
    color: #989898;
}
ul.sec03-box1 li .illust {
      width: 100%;
      margin: 0 auto 5px;
      text-align: center;
}
ul.sec03-box1 li .links04 {
    position: absolute;
    bottom: -15px;
}
}
@media screen and (max-width: 768px) {
ul.sec03-box1 {
      position: relative;
      display: block;
      width: 90%;
      margin: 20px auto 0;
}
ul.sec03-box1 li {
       position: relative;
       width: 100%;
       margin: 0 auto 40px;
       float: none;
       background: #fff;
       padding: 20px 25px;
       border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
     /* webkit-box-shadow: 0 6px 8px -4px #3dbe23;
    -moz-box-shadow: 0 6px 8px -4px #3dbe23;
     box-shadow: 0 6px 8px -4px #3dbe23;*/
}
}

.service {
       position: relative;
       width: 100%;
       margin: 0 auto;
       padding: 70px 0 30px;
}

.box-titles {
      position: relative;
       width: 100%;
       display: block;
       margin: 0 auto;
       text-align: center;
}

.box-titles .pages-tit {
        display: block;
        font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 130px;
       font-size: 13.0rem;
       letter-spacing: 1rem;
       line-height: 1;
       color: rgba(200, 200, 200, 0.2);
       -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.box-titles .pages-sub {
        display: block;
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 24px;
        font-size: 2.4rem;
        letter-spacing: 0.3rem;
        line-height: 1;
        margin-top: -30px;
}
@media screen and (max-width: 1190px) {
.box-titles .pages-tit {
       font-size: 90px;
       font-size: 9.0rem;
       letter-spacing: 0.3rem;
       line-height: 1;
}
.box-titles .pages-sub {
        font-size: 18px;
        font-size: 1.8rem;
        letter-spacing: 0.1rem;
        margin-top: -30px;
}
}
@media screen and (max-width: 768px) {
.service {
       position: relative;
       width: 100%;
       margin: 0 auto;
       padding: 30px 0 0;
}
.box-titles .pages-tit {
       font-size: 70px;
       font-size: 7.0rem;
       letter-spacing: 0.3rem;
       line-height: 1;
       color: rgba(160, 160, 160, 0.1);
}
.box-titles .pages-sub {
        font-size: 15px;
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        margin-top: -20px;
}
}
@media screen and (max-width: 640px) {
.box-titles .pages-tit {
       font-size: 65px;
       font-size: 6.5rem;
       letter-spacing: 0.3rem;
       line-height: 1;
       color: rgba(160, 160, 160, 0.1);
}
.box-titles .pages-sub {
        font-size: 14px;
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        margin-top: -20px;
}
}
.ex-block {
     position: relative;
     display: block;
     width: 100%;
     margin: 100px auto 0;
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     padding: 50px 0 100px;
     background-size: 200% 200%;
     animation: Gradient 10s ease infinite;
}
@media screen and (max-width: 1190px) {
.ex-block {
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     background-size: 210% 210%;
}
}
@media screen and (max-width: 960px) {
.ex-block {
      margin: 50px auto 0;
      padding: 50px 0 70px;
}
}
@media screen and (max-width: 768px) {
.ex-block {
     margin: 10px auto 0;
     padding: 20px 0 50px;
     background-size: 220% 220%;
}
}

.service-box {
       position: relative;
     display: block;
     width: 90%;
     max-width: 1400px;
     margin: 0 auto;
}
.service-box .left {
        width: 48%;
        float: left;
}
.service-box .right {
        width: 50%;
        float: right;
        margin-top: -120px;
}

.round-box2 {
      position: relative;
     display: block;
     width: 90%;
     max-width: 1200px;
     margin: -90px auto 50px;
     background: #fff;
     padding: 70px;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
      -webkit-box-shadow: 0 6px 7px -1px #ccc;
    -moz-box-shadow: 0 6px 7px -1px #ccc;
     box-shadow: 0 6px 7px -1px #ccc;
}
@media screen and (max-width: 1450px) {
.service-box .right {
        margin-top: -90px;
}
.round-box2 {
     margin: -70px auto 50px;
     background: #fff;
     padding: 50px;
}
}

@media screen and (max-width: 960px) {
.service-box .left {
        width: 100%;
        float: none;
}
.service-box .right {
        width: 80%;
        float: none;
        margin: 30px auto 0;
}
.round-box2 {
     margin: -70px auto 50px;
     background: #fff;
     padding: 30px;
}
}

@media screen and (max-width: 768px) {
.service-box .right {
        width: 100%;
        margin: 20px auto 0;
}
.round-box2 {
     margin: -50px auto 30px;
     background: #fff;
     padding: 20px;
}
}


h4.tit4 {
       display: block;
        margin: 20px auto;
       text-align: center;
}
h4.tit4 span {
        display: inline-block;  
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 22px;
        font-size: 2.2rem;
        letter-spacing: 0.1rem;
        line-height: 1.4;
       background: linear-gradient(transparent 60%, #89cb23 60%);
}

.s01-box {
       position: relative;
     display: block;
     width: 100%;
         margin: 55px auto 70px;
         border-top: 1px dashed #dcdcdc;
         border-bottom: 1px dashed #dcdcdc;
}

.s01-box .left {
           width: 40%;
           float: left;
           padding: 30px;
}

.s01-box .left .image {
       display: block;
      width: 100%;
       margin: 25px auto 0;
}

.s01-box .right {
           width: 60%;
           float: right;
           padding: 30px;
           border-left: 1px dashed #dcdcdc;
}
.s01-box .right ul.web {
      position: relative;
     display: block;
     width: 100%;
         margin: 25px auto 0;
}

.s01-box .right ul.web li {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
  justify-content: center;
  align-items: center;
}

.s01-box .right ul.web li .left-img {
      width: 20%;
      float: left;
}

.s01-box .right ul.web li .right-txt {
      width: 80%;
      padding-left: 20px;
      float: right;
}

.s01-box .right ul.web li + li {
        margin-top: 30px;
}
.pages h5 {
       display: block;
       font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 25px;
       font-size: 2.5rem;
       letter-spacing: 0.15rem;
       margin-bottom: 20px;
       line-height: 1.4;
}

.pages h5:before {
    background-color: #89cb23;
    border-radius: 4px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    height: 30px; /* 線の長さ */
    margin-right: 10px; /* 線右の余白 */
    vertical-align: middle;
    width: 8px; /* 線幅 */
}

h6 {
       font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        padding-bottom: 5px;
        font-size: 107%;
}


@media screen and (max-width: 768px) {
h4.tit4 {
       display: block;
        margin: 0 auto;
       text-align: center;
}
h4.tit4 span {
        display: inline-block;  
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 19px;
        font-size: 1.9rem;
        letter-spacing: 0.04rem;
        line-height: 1.4;
       /*background: transparent;
       border-bottom: 2px solid #89cb23;
       text-align: center;*/
}

h4.tit4.ex-line span {
        display: block;  
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 17px;
        font-size: 1.7rem;
        letter-spacing: 0;
        line-height: 1.3;
       background: transparent;
       /*color: #89cb23;*/
}

.mt20 {
    margin-top: 10px;
}
.s01-box {
       position: relative;
     display: block;
     width: 100%;
         margin: 20px auto;
         border-top: 1px dashed #dcdcdc;
         border-bottom: 1px dashed #dcdcdc;
}

.s01-box .left {
           width: 100%;
           float: none;
           padding: 15px 0;
}

.s01-box .left .image {
       display: block;
      width: 100%;
       margin: 10px auto 5px;
}

.s01-box .right {
           width: 100%;
           float: none;
           padding: 15px 0;
           border-left: none;
           border-top: 1px dashed #dcdcdc;
}
.s01-box .right ul.web {
      position: relative;
     display: block;
     width: 100%;
         margin: 10px auto 0;
}

.s01-box .right ul.web li {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
  justify-content: center;
  align-items: center;
}

.s01-box .right ul.web li .left-img {
      width: 24%;
      float: left;
}

.s01-box .right ul.web li .right-txt {
      width: 76%;
      padding-left: 13px;
      float: right;
}

.s01-box .right ul.web li + li {
        margin-top: 25px;
}
.pages h5 {
       display:
       font-size: 20px;
       font-size: 2.0rem;
       letter-spacing: 0.1rem;
       margin-bottom: 3px;
       line-height: 1.3;
}

.pages h5:before {
    background-color: #89cb23;
    border-radius: 2px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    height: 27px; /* 線の長さ */
    margin-right: 7px; /* 線右の余白 */
    vertical-align: middle;
    width: 5px; /* 線幅 */
}

h6 {
       font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        padding-bottom: 2px;
        font-size: 106%;
}

}


ul.web2 {
     position: relative;
        display: block;
        width: 100%;
        margin: 95px auto 0;
}
ul.web2 li {
     position: relative;
     width: 48%;
     margin: 0 1%;
     margin-bottom: 80px;
     float: left;
     padding: 70px 30px 30px;
     background: #f5f5f5;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
    min-height: 560px;
}

ul.web2 li:nth-child(3), ul.web2 li:nth-child(4) {
     margin-bottom: 0;
}

ul.web3 {
     position: relative;
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 20px 0 70px;
}
ul.web3 li {
     position: relative;
     width: 32.3%;
     margin: 0.5%;
     float: left;
     padding: 70px 30px 30px;
     background: #f5f5f5;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}


li .icon4 {
     position: absolute;
    top: -50px;
    left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
     width: 100px;
     height: 100px;
     padding: 20px;
     background: #fff;
     border: solid 1px #f9f9f9;
     border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px #ddd;
    -moz-box-shadow: 0 2px 4px #ddd;
     box-shadow: 0 2px 4px #ddd;
}
h3.topic-tit {
         display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.5;
  letter-spacing: 0.15rem; 
      margin-bottom: 15px;
}
h3.topic-tit span {
      display: block;
       font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
      font-size: 15px;
  font-size: 1.5rem;
      line-height: 1;
      letter-spacing: 0;
      color: #89cb23;
}
li .pic {
     width: 90%;
     margin: 0 auto 20px;
}
@media screen and (max-width: 1165px) {
ul.web3 li {
     position: relative;
     width: 46%;
     margin: 2%;
     float: left;
     padding: 70px 30px 30px;
     background: #f5f5f5;
     border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
ul.web3 li:last-child {
      margin-top: 40px;
}
}
@media screen and (max-width: 1100px) {
ul.web2 li {
    min-height: 540px;
}
}
@media screen and (max-width: 990px) {
ul.web2 li {
    min-height: inherit;
}
}


@media screen and (max-width: 768px) {
ul.web2 {
     position: relative;
        display: block;
        width: 100%;
        margin: 50px auto 0;
}

ul.web2 li {
     position: relative;
     width: 100%;
     margin-bottom: 0;
     margin: 0 auto 50px;
     float: none;
     padding: 50px 20px 20px;
     background: #f5f5f5;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

ul.web2 li:nth-child(3) {
     margin-bottom: 60px;
}
ul.web2 li:nth-child(4) {
     margin-bottom: 0;
}
ul.web3 {
        padding: 30px 0 30px;
}
ul.web3 li {
     position: relative;
     width: 100%;
     margin-bottom: 0;
     margin: 0 auto 50px;
     float: none;
     padding: 50px 20px 20px;
     background: #f5f5f5;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
ul.web3 li:last-child {
      margin-top: 0;
      margin: 0 auto;
}



li .icon4 {
     position: absolute;
    top: -35px;
    left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
     width: 70px;
     height: 70px;
     padding: 15px;
     background: #fff;
     border: solid 1px #f9f9f9;
     border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px #ddd;
    -moz-box-shadow: 0 2px 4px #ddd;
     box-shadow: 0 2px 4px #ddd;
}
h3.topic-tit {
         display: block;
         font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.07rem; 
      margin-bottom: 7px;
}
h3.topic-tit span {
      display: block;
       font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
      font-size: 12px;
  font-size: 1.2rem;
      line-height: 1;
      letter-spacing: 0;
      color: #89cb23;
}
li .pic {
     width: 100%;
     margin: 0 auto 10px;
}

}




ul.list-12 {
     position: relative;
     display: block;
     width: 100%;
     margin: 50px auto 0;
}


ul.list-12 li {
     width: 14.6%;
     margin: 1%;
     float: left;
     padding: 10px;
     border: solid 1px #dcdcdc;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

ul.list-12 li .product-img {
        width: 80%;
        margin: 0 auto;
}

ul.list-12 li .product-name {
        display: block;
        text-align: center;
        margin: 0 auto;       
}
ul.list-12 li .product-name span {
        display: inline-block;
       font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: 400;
     font-size: 80%;
      line-height: 1;
      letter-spacing: 0;
      color: #fff;
      background: #333;
      padding: 5px 12px 3px;
      text-align: center;
      border-radius: 11px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
        vertical-align: middle;
}
@media screen and (max-width: 1210px) {
ul.list-12 li {
     width: 15.6%;
     margin: 0.5%;
     float: left;
     padding: 10px 5px;
     border: solid 1px #dcdcdc;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
}
@media screen and (max-width: 1065px) {
ul.list-12 li {
     width: 22%;
     margin: 1.5%;
     float: left;
     padding: 10px 5px;
     border: solid 1px #dcdcdc;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
}
@media screen and (max-width: 768px) {
ul.list-12 {
     position: relative;
     display: block;
     width: 100%;
     margin: 20px auto 0;
}

ul.list-12 li {
     width: 32.3%;
     margin: 0.5%;
     float: left;
     padding: 0 0 10px;
     border: solid 1px #dcdcdc;
     border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
ul.list-12 li .product-img {
        width: 100%;
        margin: 0 auto;
}
ul.list-12 li .product-name span {
        display: inline-block;
       font-size: 12px;
  font-size: 1.2rem;
      padding: 5px 10px 4px;
      text-align: center;
      border-radius:11px;
	-webkit-border-radius: 11px;
	-moz-border-radius:1px;
        vertical-align: middle;
}
}
@media screen and (max-width: 640px) {
ul.list-12 li {
     width: 32.3%;
     margin: 0.5%;
     float: left;
     padding: 0 0 7px;
     border: solid 1px #f0f0f0;
     border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
ul.list-12 li .product-name span {
        display: inline-block;
       font-size: 9px;
  font-size: 0.9rem;
      padding: 3px 6px;
      text-align: center;
      border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
        vertical-align: middle;
}
}

.dtp02 {
      position: relative;
     display: block;
     width: 100%;
     margin: 70px auto 0;
}


.dtp02-box {
      position: relative;
     width: 100%;
     margin:  35px auto 0;
     padding: 30px;
     background: #f5f5f5;
     display: flex;
  justify-content: center;
  align-items: center;
      border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.dtp02-box + .dtp02-box {
     margin-top: 40px;
}

.dtp02-box .left {
     width: 50%;
     float: left;
}

.dtp02-box .right {
     width: 50%;
     float: right;
     padding: 0 40px;
}
.dtp02-box .right .icon3 {
     position: absolute;
    top: 30px;
    right: 30px;
     /*transform: translateX(-50%);
  -webkit- transform: translateX(-50%);*/
     width: 100px;
     height: 100px;
     padding: 20px;
     background: #fff;
    border: solid 1px #f5f5f5;
     border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px #ddd;
    -moz-box-shadow: 0 2px 4px #ddd;
     box-shadow: 0 2px 4px #ddd;
}
@media screen and (max-width: 1200px) {
.dtp02-box {
     margin:  35px auto 0;
     padding: 20px;
}
.dtp02-box .right .icon3 {
     position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
     height: 80px;
     padding: 15px;
}
}
@media screen and (max-width: 1100px) {
.dtp02-box .right {
     padding: 0 0 0 20px;
}
.dtp02-box .right .icon3 {
     position: absolute;
    top: -20px;
    right: -10px;
    width: 80px;
     height: 80px;
     padding: 15px;
}
}
@media screen and (max-width: 900px) {
.dtp02 {
     margin: 30px auto 0;
}
.dtp02-box {
      margin:  35px auto 0;
     padding: 20px;
     display: block;
      border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.dtp02-box + .dtp02-box {
     margin-top: 40px;
}

.dtp02-box .left {
     width: 100%;
     float: none;
}
.dtp02-box .right {
     width: 100%;
     float: none;
     padding: 10px 10px 0;
}
.dtp02-box .left img {
      border-radius: 20px 20px 0 0;
      -webkit-border-radius: 20px 20px 0 0;
      -moz-border-radius: 20px 20px 0 0;
}
.dtp02-box .right .icon3 {
     -webkit-box-shadow: none;
    -moz-box-shadow: none;
     box-shadow: none;
}
}
@media screen and (max-width: 768px) {
.dtp02-box {
     margin:  35px auto 0;
     padding: 10px;
     border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.dtp02-box .right {
     padding: 10px 0 0;
}
.dtp02-box .right .icon3 {
     top: -20px;
    right: -10px;
    width: 60px;
     height: 60px;
     padding: 10px;
}
.dtp02-box + .dtp02-box {
     margin-top: 30px;
}
.dtp02-box .left img {
      border-radius: 10px 10px 0 0;
      -webkit-border-radius: 10px 10px 0 0;
      -moz-border-radius: 10px 10px 0 0;
}
}

.movie-last {
    position: relative;
     display: block;
     width: 100%;
     margin: 50px auto 0;
}

.flow-img {
    display: block;
    width: 100%;
}

ul.fukidashi {
      display: block;
      width: 100%;
      margin: 30px auto 0;
}

ul.fukidashi li {
      width: 19%;
      margin: 0.5%;
      float: left;
      padding: 15px;
      border: solid 3px #f0f0f0;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
}
/*ul.fukidashi li:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #fff;
}*/

ul.fukidashi li:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

ul.fukidashi li:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #f0f0f0;
  z-index: 1;
}

@media screen and (max-width: 960px) {
.movie-last {
    position: relative;
     display: block;
     width: 100%;
     margin: 30px auto 0;
}
.service .tl5 .d-illsut {
       width: 60px;
        position: absolute;
        top: 0;
        left: 20px;
}
.service .tl5 {
    display: block;
    width: 100%;
    margin: 20px auto 0;
}

.service .tl5 .main-bdr{
  border-color: #3dbe23;
}
 
.service .tl5 .d-illsut {
       width: 60px;
        position: absolute;
        top: 0;
        left: 20px;
}
.service .tl5 .tl-content {
  position: relative;
  padding: 0 0 20px 90px;
}

.service .tl5 .tl-content:before {
  content: "";
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
  width: 3px;
  background: #f0f0f0;
}
 

.service .tl5 .tl-content .tl_marker {
  background: #3dbe23;
}
 
.service .tl5 .tl-content:last-of-type:before {
  content: none;
}
 
.service .tl5 .tl-content img{
  max-width: 100%;
  height: auto;
}
 
.service .tl5 .tl_label {
  padding-top: 2px;
}
 
.service .tl5 .tl_title {
 font-size: 13px;
    font-size: 1.3rem;
}
.service .tl5 .tl_title span {
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 17px;
    font-size: 1.7rem;
     letter-spacing: 0;
}
.service .tl5 .tl_main {
  padding: 0 0 10px;
  border-bottom: none;
}
.service .tl5 .main-bc {
  background-color: #3dbe23;
}
.service .tl5 .tl_marker {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #3dbe23;
}
}
@media screen and (max-width: 768px) {
.movie-last {
     margin: 20px auto 0;
}
.service .tl5 .tl-content {
  position: relative;
  padding: 0 0 10px 90px;
}

.service .tl5 {
    margin: 10px auto 0;
}
.service .tl5 .tl_title {
 font-size: 11px;
    font-size: 1.1rem;
}
.service .tl5 .tl_title span {
    font-size: 15px;
    font-size: 1.5rem;
}
}

/***ABOUT***/

.about-01 {
     position: relative;
     display: block;
     width: 100%;
     background-image:url("../img/about/about-bg.jpg");
       /*background-size:cover;*/
       background-position: left top;
       background-repeat: repeat;
       padding: 70px 0;
}
.about-01 .about-01-ex {
        position: relative;
     display: block;
     width: 100%;
      margin: 100px auto;
}
.about-image {
       position: relative;
     display: block;
     width: 80%;
      max-width: 740px;
      margin: 0 auto;
}

.about-01-ex .ab01 {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
       width: 690px;
}
.about-01-ex .ab01 .left {
       width: 240px;
       margin-right: 20px;
       float: left;
}
.about-01-ex .ab01 .right {
       width: 430px;
       float: right;
}

.about-01-ex .ab02 {
       position: absolute;
       top: 55%;
       left: 15%;
       /*transform: translateY(-50%);
  -webkit- transform: translateY(-50%);*/
}
.about-01-ex .ab02 .left {
       display: block;
       width: 240px;
       margin: 0 auto 10px;
}
.about-01-ex .ab02 .right {
       display; block;
       width: 340px;
}

.about-01-ex .ab03 {
       position: absolute;
       top: 55%;
       right: 15%;
       /*transform: translateY(-50%);
  -webkit- transform: translateY(-50%);*/
}
.about-01-ex .ab03 .left {
       display: block;
       width: 240px;
       margin: 0 auto 10px;
}
.about-01-ex .ab03 .right {
       display; block;
       width: 340px;
}

.about-01-ex .category {
      font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 27px;
       font-size: 2.7rem;
       letter-spacing: 0.3rem;
       line-height: 1;
       padding-bottom: 10px;
}

@media screen and (max-width: 1200px) {
.about-01-ex .ab02 {
       position: absolute;
       top: auto;
       left: 40px;
       bottom: -30px;
}
.about-01-ex .ab03 {
       position: absolute;
       top: auto;
       right: 40px;
       bottom: -30px;
}
}
@media screen and (max-width: 960px) {
.about-01 .about-01-ex {
      margin: 50px auto;
}
.about-01-ex .ab02 {
       position: absolute;
       top: auto;
       left: -70px;
       bottom: -50px;
}
.about-01-ex .ab03 {
       position: absolute;
       top: auto;
       right: -70px;
       bottom: -50px;
}
}
.about-image-860 {
    display: none;
}
@media screen and (max-width: 860px) {
.about-01 {
     position: relative;
     display: block;
     width: 100%;
     background-image:url("../img/about/about-bg.jpg");
       /*background-size:cover;*/
       background-position: left top;
       background-repeat: repeat;
       padding: 30px 0 70px;
}
.about-01 .about-01-ex {
        position: relative;
     display: block;
     width: 100%;
      margin: 0 auto 30px;
}
.about-image {
     display: none;
     /*position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
     width: 90%;*/
}
.about-image-860 {
     display: block;
     width: 100%;
     margin: 10px auto 20px;
}


.about-01-ex .ab01 {
       position: relative;
     display: block;
       top: auto;
       left: auto
       transform: none
  -webkit- transform: none;
       width: 100%;
        margin: 10px auto 0;
}
.about-01-ex .ab01 .category, .about-01-ex .ab01 h6 {
     text-align: center;
}

.about-01-ex .ab01 .left {
       display: block;
       width: 80%;
       margin-right: 0;
       margin: 0 auto;
       float: none;
}
.about-01-ex .ab01 .right {
       display: block;
       width: 100%;
       float: none;
       margin: 0 auto;
       padding: 0 5px;
}

.about-01-ex .ab02 {
       position: relative;
     display: block;
       top: auto;
       left: auto;
       width: 100%;
        margin: 0 auto 50px;
}
.about-01-ex .ab02 .left {
       display: block;
       width: 80%;
       margin: 0 auto;
}
.about-01-ex .ab02 .right {
       display: block;
       width: 100%;
       margin: 0 auto;
       padding: 0 5px;
}

.about-01-ex .ab03 {
       position: relative;
     display: block;
       top: auto;
       right: auto;
       width: 100%;
        margin: 0 auto;
}
.about-01-ex .ab03 .left {
       display: block;
       width: 80%;
       margin: 0 auto;
}
.about-01-ex .ab03 .right {
       display: block;
       width: 100%;
       margin: 0 auto;
       padding: 0 5px;
}

.about-01-ex .category {
      font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 22px;
       font-size: 2.2rem;
       letter-spacing: 0.15rem;
       line-height: 1;
       padding-bottom: 5px;
}
}

.about-02 {
     position: relative;
     display: block;
     width: 100%;
     background-image:url("../img/about/aboutbg02.jpg");
     background-size:cover;
       background-position: center center;
       background-repeat: no-repeat;
       padding: 70px 0;
}

/***数字カウンター***/
ul.numer-boxs {
    display: block;
    margin: 50px auto 100px;
    width: 100%;
    max-width: 1100px;
}

ul.numer-boxs li {
      width: 25%;
      float: left;
      padding: 25px 20px 10px;
      color: #fff;
      text-align: center;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
}

ul.numer-boxs li:nth-child(4), ul.numer-boxs li:nth-child(7) {
     border-right: none;
}
ul.numer-boxs li:nth-child(5), ul.numer-boxs li:nth-child(6), ul.numer-boxs li:nth-child(7) {
     width: 33.3%;
}

ul.numer-boxs li .num-jp {
     display: block;
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
  font-weight: bold;
    font-size: 15px;
    font-size: 1.5rem;
     letter-spacing: 0;
     line-height: 1.2;
     height: 60px;
}

ul.numer-boxs li .num-txt {
       display: block;
    font-size: 14px;
    font-size: 1.4rem;
     letter-spacing: 0;
     line-height: 1;
}

ul.numer-boxs li .num-txt span {
      font-family: 'Roboto Condensed', sans-serif;
       font-weight: 700;
       font-size: 63px;
       font-size: 6.3rem;
       padding: 0 5px;
        letter-spacing: 0;
     line-height: 1;
}

.typo-img {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}

@media screen and (max-width: 1150px) {
ul.numer-boxs li {
      padding: 10px 10px 0;
      color: #fff;
}
ul.numer-boxs li .num-txt span {
     letter-spacing: 0;
     padding: 0 2px;
     font-size: 50px;
       font-size: 5.0rem;
}
}

@media screen and (max-width: 980px) {
.about-02 {
       padding: 40px 0;
}

ul.numer-boxs {
    margin: 70px auto;
}
ul.numer-boxs li {
      width: 33.3%;
      float: left;
      padding: 20px 10px 5px;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
}
ul.numer-boxs li .num-jp {
    font-size: 14px;
    font-size: 1.4rem;
     letter-spacing: 0;
     line-height: 1.2;
     height: 35px;
}
ul.numer-boxs li .num-txt {
    font-size: 13px;
    font-size: 1.3rem;
}
ul.numer-boxs li:nth-child(4) {
     border-right: 1px solid #fff;
}
ul.numer-boxs li:nth-child(3), ul.numer-boxs li:nth-child(7) {
     border-right: none;
}
ul.numer-boxs li:nth-child(4), ul.numer-boxs li:nth-child(5), ul.numer-boxs li:nth-child(6), ul.numer-boxs li:nth-child(7) {
     width: 25%;
}
}
@media screen and (max-width: 830px) {
.about-02 {
       padding: 30px 0;
}
ul.numer-boxs {
    margin: 25px auto 50px;
}
ul.numer-boxs li {
      width: 50%;
      float: left;
      padding: 20px 10px 5px;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
}
ul.numer-boxs li .num-jp {
    font-size: 12px;
    font-size: 1.2rem;
     line-height: 1.2;
     height: 30px;
}
ul.numer-boxs li .num-txt {
    font-size: 11px;
    font-size: 1.1rem;
}
ul.numer-boxs li .num-txt span {
     letter-spacing: 0;
     padding: 0 4px;
     font-size: 35px;
       font-size: 3.5rem;
}
ul.numer-boxs li:nth-child(1) {
     width: 100%;
     border-right: none;
    border-top: 1px solid #fff;
}

ul.numer-boxs li:nth-child(3), ul.numer-boxs li:nth-child(5), ul.numer-boxs li:nth-child(7) {
     border-right: none;
}
ul.numer-boxs li:nth-child(4), ul.numer-boxs li:nth-child(5), ul.numer-boxs li:nth-child(6), ul.numer-boxs li:nth-child(7) {
     width: 50%;
}
}
/****DIRECTION***/
.direction-01 {
      position: relative;
     display: block;
     width: 100%;
     background-image:url("../img/direction/bg-01.png");
     background-size:cover;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 50px 0 120px;
       margin: 0 auto 50px;
}
@media screen and (max-width: 1400px) {
.direction-01 {
        padding: 0 0 40px;
}
}

@media screen and (max-width: 960px) {
.direction-01 {
        padding: 0;
        background-position: 40% 50%;
}
}
.block-sub {
       position: relative;
  display: inline-block;
  padding: 0 55px;
      font-family: 'Karla', sans-serif;
       font-weight: 400;
       font-size: 20px;
       font-size: 2.0rem;
       letter-spacing: 0.05rem;
       line-height: 1;
       color: #cccec8;
       margin-bottom: 25px;
}
.block-sub:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #cccec8;
}
.block-sub:before {
  left:0;
}

.direc-p + .direc-p {
     margin-top: 30px;
}

.about-direction {
    position: absolute;
  top: -300px;
  right: 0;
     width: 80%;
}

.about-direction .images {
       position: relative;
       display: block;
       width: 100%;
}

h1.ex-copy2 {
     position: absolute;
     top: -50px;
    right: 50px;
    display: block;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 85px;
    font-size: 8.5rem;
  line-height: 1;
  letter-spacing: 0.4rem;
  background: linear-gradient(to right, rgba(137, 203, 35, 0.3), rgba(8, 167, 233, 0.3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
     text-transform:uppercase;
}
@media all and (-ms-high-contrast: none){
  h1.ex-copy2 {
    background: transparent;
    color: #08a7e9;
  }
}
.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 150px 0 70px;
       margin: 300px auto 0;
}


@media screen and (min-width: 2400px) {
.about-direction {
  top: -400px;
}
.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 100px 0 70px;
       margin: 500px auto 0;
}
}

@media screen and (max-width: 1900px) {
.about-direction {
    position: absolute;
  top: -250px;
  right: 0;
     width: 80%;
}
.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 100px 0 70px;
       margin: 300px auto 0;
}
}
@media screen and (max-width: 1700px) {
.about-direction {
    position: absolute;
  top: -200px;
}
.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 100px 0 70px;
       margin: 250px auto 0;
}
h1.ex-copy2 {
    font-size: 75px;
    font-size: 7.5rem;
  line-height: 1;
  letter-spacing: 0.4rem;
}
}
@media screen and (max-width: 1300px) {
.about-direction {
    position: absolute;
  top: -150px;
}
.direction-a1 {
       padding: 70px 0 70px;
       margin: 200px auto 0;
}
}



.direction-a2 {
      position: relative;
     display: block;
     width: 100%;
     background:#fff  url("../img/direction/a2.png");
     background-size: 60% auto;
       background-position: left center;
       background-repeat: no-repeat;
       padding: 70px 0;
       margin: 0 auto;
}
.direction-a3 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a3.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 70px 0;
       margin: 0 auto;
}
.direction-a1 .left, .direction-a2 .left, .direction-a3 .left {
     width: 40%;
     float: left;
}
.direction-a1 .right, .direction-a2 .right, .direction-a3 .right {
     width: 60%;
     float: right;
     padding: 30px;
}
@media screen and (max-width: 1100px) {
.direc-p + .direc-p {
     margin-top: 20px;
}

.about-direction {
    position: absolute;
  top: -70px;
      width: 55%;
}
h1.ex-copy2 {
    font-size: 40px;
    font-size: 4.0rem;
  letter-spacing: 0.15rem;
   top: -30px;
   right: 10px;
   text-align: right;
}

.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 50px 0;
       margin: 130px auto 0;
}
.direction-a2 {
      position: relative;
     display: block;
     width: 100%;
     background:#fff  url("../img/direction/a2.png");
     background-size: 60% auto;
       background-position: left center;
       background-repeat: no-repeat;
       padding: 50px 0;
       margin: 0 auto;
}
.direction-a3 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a3.png");
     background-size: 60% auto;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 50px 0;
       margin: 0 auto;
}
.direction-a1 .left, .direction-a2 .left, .direction-a3 .left {
     width: 100%;
     float: none;
     margin: 0 auto;
     padding-left: 30px;
}
.direction-a1 .right, .direction-a2 .right, .direction-a3 .right {
     width: 100%;
     float: none;
     margin: 0 auto;
     padding: 30px 30px 0;
}
}
@media screen and (max-width: 860px) {
.block-sub {
  padding: 0 40px;
       font-size: 16px;
       font-size: 1.6rem;
       letter-spacing: 0.05rem;
       margin-bottom: 15px;
}
.block-sub:before {
  width: 35px;
  height: 1px;
}
.about-direction {
    position: absolute;
  top: -30px;
      width: 55%;
}
h1.ex-copy2 {
    font-size: 34px;
    font-size: 3.4rem;
  letter-spacing: 0.1rem;
   top: -20px;
   right: 10px;
   text-align: right;
}
.direction-a1 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a1.png");
     background-size: cover;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 70px 0 50px;
       margin: 80px auto 0;
}
.direction-a2 {
      position: relative;
     display: block;
     width: 100%;
     background:#fff  url("../img/direction/a2.png");
     background-size: cover;
       background-position: left center;
       background-repeat: no-repeat;
       padding: 50px 0;
       margin: 0 auto;
}
.direction-a3 {
      position: relative;
     display: block;
     width: 100%;
     background:#eceee8  url("../img/direction/a3.png");
     background-size: cover;
       background-position: right center;
       background-repeat: no-repeat;
       padding: 50px 0;
       margin: 0 auto;
}
.direction-a1 .left, .direction-a2 .left, .direction-a3 .left {
     width: 100%;
     float: none;
     margin: 0 auto;
     padding-left: 0;
}
.direction-a1 .right, .direction-a2 .right, .direction-a3 .right {
     width: 100%;
     float: none;
     margin: 0 auto;
     padding: 10px 0 0;
}
}
@media screen and (max-width: 640px) {
.block-sub {
       font-size: 14px;
       font-size: 1.4rem;
       letter-spacing: 0.03rem;
       margin-bottom: 10px;
}
.direc-p + .direc-p {
     margin-top: 15px;
}
.about-direction {
    position: absolute;
  top: -60px;
      width: 100%;
}
h1.ex-copy2 {
    font-size: 25px;
    font-size: 2.5rem;
  letter-spacing: 0.03rem;
   top: -15px;
   right: 5px;
   text-align: right;
}
.direction-a1, .direction-a2, .direction-a3 {
       padding: 30px 0;
}
.direction-a1 {
       margin: 100px auto 0;
}
}

.ex-block2 {
     position: relative;
     display: block;
     width: 100%;
     margin: 0 auto;
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     padding: 70px 0 150px;
     background-size: 200% 200%;
     animation: Gradient 10s ease infinite;
}
@media screen and (max-width: 1190px) {
.ex-block2 {
     background: linear-gradient( 45deg, rgba(137, 203, 35, 0.7), rgba(8, 167, 233, 0.7));
     background-size: 210% 210%;
     padding: 50px 0 100px;
}
}

@media screen and (max-width: 768px) {
.ex-block2 {
     padding: 30px 0 70px;
     background-size: 220% 220%;
}
}


.tl4 {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}
 
.tl4 .tl-content {
  position: relative;
  padding: 0 0 70px 125px;
}
.tl4 .tl-content:last-of-type {
  position: relative;
  padding: 0 0 0 125px;
}

.tl4 .tl-content .flow-box {
     position: relative;
     display: block;
     width: 70%;
     padding: 30px 60px 30px 25px;
     margin: 0;
     background: #f1f1f1;
     border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
}
.tl4 .tl-content .flow-box:before {/*吹き出し*/
  content: "";
  position: absolute;
  top: 50px;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #f1f1f1;
}

.tl4 .tl-content .flow-box.green {
      border-top: 7px solid #33ae1a
}
.tl4 .tl-content .flow-box.blue {
      border-top: 7px solid #1791e6
}
.tl4 .tl-content .flow-box.yellow{
      border-top: 7px solid #ffc63c
}
.tl4 .tl-content .flow-box.red {
      border-top: 7px solid #e94b20
}
.tl4 .tl-content .flow-box.green .sub-tit {
      color: #33ae1a
}
.tl4 .tl-content .flow-box.blue .sub-tit {
      color: #1791e6
}
.tl4 .tl-content .flow-box.yellow .sub-tit {
      color: #ffc63c
}
.tl4 .tl-content .flow-box.red .sub-tit {
      color: #e94b20
}

.tl4 .tl-content .flow-img {
     position: absolute;
     right: 0;
     bottom: 20px;
     width: 30%;
}
.tl4 .tl_marker {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
 background-color: transparent;
}
.tl4 .tl-content:before {/*たて線*/
  content: "";
  display: block;
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 46px;
  width: 8px;
  background: #eee;
}
.tl4 .tl-content:last-of-type:before {/*最後のたて線なし*/
  content: none;
}

@media screen and (max-width: 1100px) {
.tl4 .tl-content .flow-img {
     bottom: auto;
     top: 70px;
}
}
@media screen and (max-width: 640px) {
.tl4 {
    margin: 10px auto 0;
}
.tl4 .tl-content {
  position: relative;
  padding: 0 0 160px 50px;
}
.tl4 .tl-content:last-of-type {
  position: relative;
  padding: 0 0 170px 50px;
}

.tl4 .tl-content .flow-box {
     position: relative;
     display: block;
     width: 100%;
     padding: 10px;
     background: #f1f1f1;
     border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
}
.tl4 .tl-content .flow-box:before {/*吹き出し*/
  content: "";
  position: absolute;
  top: 25px;
  left: -10px;
  margin-top: -15px;
  border: 5px solid transparent;
  border-right: 5px solid #f1f1f1;
}
.tl4 .tl-content .flow-img {
     position: absolute;
     right: 0;  
     top: auto;
     bottom: 20px;
     width: 80%;
     /*left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);*/
}
.tl4 .tl_marker {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
 background-color: transparent;
}
.tl4 .tl-content:before {/*たて線*/
  content: "";
  display: block;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 18px;
  width: 4px;
  background: #eee;
}
}

ul.flow-9 {
    position: relative;
     display: block;
     width: 100%;
     margin: 50px auto 0;
}

ul.flow-9 li {
    position: relative;
    width: 30.3%;
    margin: 1.5%;
    float: left;
}
ul.flow-9 li .flow-9-img {
  position: relative;
     display: block;
     width: 100%;
     text-align:center;
     background: #fff;
     border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
       -webkit-box-shadow: 0 2px 4px #ccc;
    -moz-box-shadow: 0 2px 4px #ccc;
     box-shadow: 0 2px 4px #ccc;
}

ul.flow-9 li h6 {
      position: absolute;
     width: 100%;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
     text-align:center;
    line-height: 1;
}
@media screen and (max-width: 1100px) {
ul.flow-9 li h6 {
     top: 15px;
}
}

@media screen and (max-width: 768px) {
ul.flow-9 {
     margin: 30px auto 0;
}

ul.flow-9 li {
    position: relative;
    width: 49%;
    margin: 0.5%;
    margin-bottom: 25px;
    float: left;
}
ul.flow-9 li:last-child {
    margin-bottom: 0;
}
ul.flow-9 li h6 {
     top: 10px;
     font-size: 80%;
}
}

/***追記0710***/
.pages-tit-s {
        position: relative;
        display: block;
        font-family: 'Karla', sans-serif;
       font-weight: 700;
       font-size: 50px;
       font-size: 5.0rem;
       letter-spacing: 0.2rem;
       line-height: 1;
       color: #e0e0e0;
       -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
      text-align:center;
}
.pages-sub-s {
        position: relative;
        display: block;
        font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 20px;
        font-size: 2.0rem;
        letter-spacing: 0.06rem;
        line-height: 1;
        margin-top: -20px;
        text-align:center;
        padding-bottom: 70px;
}

.pages-sub-s:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  display: inline-block;
  width: 1px;
  height: 60px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #e0e0e0;
}

.col-gray2 {
    color: #a0a0a0;
    font-weight: bold;
    padding-right: 6px;
}

.box-company {
       display: block;
       width: 100%;
       max-width: 840px;
       margin: 40px auto 0;
}

.box-company-in + .box-company-in {
        margin-top: 70px;
}

ul.company5 {
       display: block;
       width: 90%;
       max-width: 620px;
       margin: 25px auto 0;
}

ul.company5 li + li {
      margin-top: 10px;
}
.ceo {
     margin-top: 35px;
     text-align:right;
     font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 18px;
        font-size: 1.8rem;
        letter-spacing: 0.07rem;
        line-height: 1;
}
.ceo span {
     font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;
        font-size: 1.4rem;
        letter-spacing: 0;
        padding-right: 10px;
}
@media screen and (max-width: 840px) {
.pages-tit-s {
       font-size: 40px;
       font-size: 4.0rem;
       letter-spacing: 0.07rem;
}
.pages-sub-s {
        font-size: 15px;
        font-size: 1.5rem;
        letter-spacing: 0;
        margin-top: -10px;
        text-align:center;
        padding-bottom: 50px;
}

.pages-sub-s:after {
  width: 1px;
  height: 45px;
}

.col-gray2 {
    padding-right: 5px;
}

.box-company {
       margin: 20px auto 0;
}

.box-company-in + .box-company-in {
        margin-top: 50px;
}

ul.company5 {
       display: block;
       width: 100%;
       max-width: initial;
       margin: 10px auto 0;
}

ul.company5 li p {
      line-height: 1.4;
}
ul.company5 li + li {
      margin-top: 10px;
}
.ceo {
     margin-top: 20px;
        font-size: 16px;
        font-size: 1.6rem;
        letter-spacing: 0.07rem;
        line-height: 1;
}
.ceo span {
        font-size: 12px;
        font-size: 1.2rem;
        letter-spacing: 0;
        padding-right: 6px;
}  
}

/*****追記0807*****/

.sec-news {
    position: relative;
        display: block;
    width: 100%;
    background: #F6FAF4;
    padding: 70px 0;
}

ul.top-news {
     position: relative;
        display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

ul.top-news li {
    padding: 30px 40px;
    border: solid 1px #ddd;
    border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
    background: #fff;
}


.date-cate {
        font-family: 'Karla', sans-serif;
       font-weight: 700;
        font-size: 17px;
       font-size: 1.7rem;
       letter-spacing: 0.05rem;
        display: flex;
        padding-bottom: 10px;
        margin-bottom: 10px;
        align-items: center;
        line-height: 1;
        border-bottom: dashed 1px #E7F2E2;
        color: #999;
    }

.date-cate small {
        display: inline-block;
        color: #fff;
        font-size: 14px;
       font-size: 1.4rem;
       letter-spacing: 0.05rem;
        background: #9DE27C;
        line-height: 1;
        padding: 4px 6px 3px;
        margin-left: 10px;
        text-transform: uppercase;
        border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    }




ul.top-news li .title {
     display: block;
     font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro", "Noto Sans JP", Arial, sans-serif;
        font-weight: bold;
        font-size: 18px;
        font-size: 1.8rem;
     margin-bottom: 7px;
     
}
@media screen and (max-width: 960px) {
.sec-news {
    padding: 50px 0;
}
ul.top-news {
     position: relative;
        display: block;
    width: 100%;
    max-width: auto;
    margin: 0 auto;
}

ul.top-news li {
    padding: 30px;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
}

@media screen and (max-width: 768px) {
.sec-news {
    padding: 30px 0;
}

ul.top-news li {
    padding: 20px;
}

.date-cate {
        font-family: 'Karla', sans-serif;
       font-weight: 700;
        font-size: 15px;
       font-size: 1.5rem;
       letter-spacing: 0.05rem;
        display: flex;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

.date-cate small {
        display: inline-block;
        color: #fff;
        font-size: 13px;
       font-size: 1.3rem;
       letter-spacing: 0;
        background: #9DE27C;
        line-height: 1;
        padding: 2px 6px 1px;
        margin-left: 5px;
        text-transform: uppercase;
        border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    }




ul.top-news li .title {
        font-size: 16px;
        font-size: 1.6rem;
     margin-bottom: 0;
     
}
}