@charset "utf-8";

/* ====================
   .common
   ==================== */
@media only screen and (max-width: 767px) {
	.hero {
		padding: 65px 0 5vw 0;
	}
}

.title-area{
   text-align: center;
   margin-bottom: 50px;
}

.title-area .m-text{
   font-size: 31px;
   line-height: 1.4;
   border-bottom: 5px solid #dc000c;
   padding-bottom: 15px;
   margin-bottom: 20px;
}

.title-area .l-text{
   font-size: 44px;
   line-height: 1.4;
}

.cl-text{
   color: #dc000c;
}

.text{
   font-size: 16.5px;
   line-height: 2.2;
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {
	.title-area{
      margin-bottom: 25px;
   }

   .title-area .m-text{
      font-size: 5.5vw;
      border-bottom: 3px solid #dc000c;
      padding-bottom: 5px;
      margin-bottom: 5px;
   }

   .title-area .l-text{
      font-size: 6vw;
      line-height: 1.4;
   }

   .text{
      font-size: 4vw;
      line-height: 1.6;
   }
}


/* ====================
   .sec01
   ==================== */
.sec01{
  padding-bottom: 80px;
}

.sec01 .lead-area{
   padding: 60px 0;
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {
	.sec01{
     padding-bottom: 0;
   }

   .sec01 .lead-area{
      padding: 20px 0;
   }

}

/* ====================
   .sec02
   ==================== */
.sec02{
  padding-bottom: 140px;
}

.sec02 .philosophy-box {
   background: #e1e1e1;
   padding: 30px 30px;
   align-items: center;
}

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

.sec02 .philosophy-box .m-text{
   font-size: 24px;
}

.sec02 .philosophy-box dt{
   width: 30%;
   white-space: nowrap;
}

.sec02 .philosophy-box dd{
   width: 70%;
}

.sec02 .philosophy-box .text span {
   font-weight: bold;
   display: block;
}


@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {
	.sec02{
     padding-bottom: 40px;
   }

   .sec02 .philosophy-box {
      padding: 20px 20px;
      flex-flow: row wrap;
   }

   .sec02 .philosophy-box + .philosophy-box{
      margin-top: 20px;
   }

   .sec02 .philosophy-box .m-text{
      font-size: 5.5vw;
   }

   .sec02 .philosophy-box dt{
      width: 100%;
      text-align: center;
   }

   .sec02 .philosophy-box dd{
      width: 100%;
   }

   .sec02 .philosophy-box .text span {
      font-weight: bold;
      display: block;
      text-align: center;
   }
}


/* ====================
   .sec03
   ==================== */
.sec03{
  padding-bottom: 80px;
}

.sec03 .end-box,
.sec03 .miryoku-box{
   gap: 0 30px;
   align-items: center;
}

.sec03 .miryoku-box .img-area{
   width: 160px;
}

.sec03 .text-area{
   width: 70%;
}

.sec03 .miryoku-box .text-area .title{
   line-height: 1.8;
   font-weight: bold;
   display: inline-block;
   border-bottom: 2px solid #dc000c;
   margin-bottom: 10px;
}

.sec03 .miryoku-box:nth-of-type(odd) .img-area{
   order: 2;
}

.sec03 .miryoku-box + .miryoku-box{
   margin-top: 50px;
}

.sec03 .end-box{
   margin: 100px 0;
   border: 1px solid #000;
   padding: 30px;
}

.sec03 .end-box .title{
   font-weight: bold;
}

.sec03 .end-box .img-area{
   width: 180px;
}

.sec03 .link-area{
   width: 97%;
}

.sec03 .link-area .link-list{
   font-size: 25px;
   justify-content: space-between;
}

#page-wrapper .sec03 a.blank:after{
   width: 25px;
   height: 25px;
   right: -32px;
}


@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {
	.sec03{
     padding-bottom: 0px;
   }

   .sec03 .end-box,
   .sec03 .miryoku-box{
      gap: 0 30px;
      flex-flow: row wrap;
      align-items: center;
   }

   .sec03 .miryoku-box .img-area{
      width: 80px;
      position: absolute;
      top: 0;
      right: 20px;
   }
   
   .sec03 .miryoku-box:nth-of-type(odd) .img-area{
      top: -15px;
   }

   .sec03 .text-area{
      width: 100%;
   }

   .sec03 .miryoku-box .text-area .title{
      line-height: 1.6;
      font-weight: bold;
      display: inline;
      border-bottom: none;
      margin-bottom: 0;
      font-size: 5vw;
   }
   
   .sec03 .text-area .text{
      margin-top: 10px;
   }
   
   .sec03 .miryoku-box + .miryoku-box{
      margin-top: 30px;
   }

   .sec03 .end-box{
      margin: 40px 0;
      border: 1px solid #000;
      padding: 10px 20px;
      position: relative;
   }

   .sec03 .end-box .title{
      font-size: 5vw;
      margin-bottom: 15px;
   }

   .sec03 .end-box .img-area{
      width: 80px;
      position: absolute;
      right: 15px;
      top: 10px;
   }

   .sec03 .link-area{
      width: 95%;
   }

   .sec03 .link-area .link-list{
      font-size: 3.5vw;
      justify-content: space-between;
   }

   #page-wrapper .sec03 a.blank:after{
      width: 12px;
      height: 12px;
      right: -15px;
   }
}


/* ====================
   .link-area
   ==================== */
.link-area{
  padding-bottom: 80px;
}


@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 767px) {

}