@charset "UTF-8";
/****************************************
contents
*****************************************/
.mincho{
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
.noto-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

#sidebt{display: none}

#side{position:absolute;right: 1%;bottom: -86px;width:320px;z-index: 99999}
#side img{width: 100%;height: auto}
#side.fixed{position: fixed;top: 160px;}
@media screen and (max-width:768px){/*sp*/
#side.fixed{position: fixed;top: 70px;}
#side{position:absolute;right: 0%;bottom: -170px;width:20%;z-index: 99}
#side li{width:100%}
}

#main{text-align: center;color: #000}
#main img{width: 100%;height: auto;vertical-align: bottom}
#main .inner {
margin: 0 auto;width: 960px;position: relative;}
@media screen and (max-width:768px){/*sp*/
#main .inner {width: 96%}
}

#mv{position: relative;z-index: 2}

#Intro{padding: 100px 0;position: relative}
#Intro h2{font-size: 3rem;line-height: 2.3;font-weight: normal;position: relative}
#Intro h2::before {
  position: absolute;
  content: "";
  width: 300px;
  height: 300px;
  background:url("../society2/images/img1.png") no-repeat left top;
  background-size:contain;
  top: -130px;
  left: -30px;
}
#Intro::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 300px;
  background:url("../society2/images/img2.png") no-repeat right bottom;
  background-size:contain;
  bottom:0px;
  right: 0px;
}
@media screen and (max-width:768px){/*sp*/
#Intro h2::before{
  width: 130px;
  height: 130px;
}
#Intro::after{
  width: 100px;
  height: 130px;
}
#Intro h2{font-size: 1.6rem;line-height: 2.3;}
.img3 img{object-fit: cover;width: 100%;height: 200px!important;}
}


#strong{background: url("../society2/images/strong_bg.jpg");padding: 60px 0;margin: 60px 0}
#strong h2{width: 900px;margin: 0 auto 40px}
#strong li{width: 30%}

@media screen and (max-width:768px){/*sp*/
#strong{padding: 30px 0;margin: 30px 0}
#strong h2{width: 100%;margin: 0 auto 30px}
#strong li{width: 48%;margin: 12px auto}
}

#voice{position: relative}
#voice::before {  position: absolute;  content: "";  width: 260px;  height: 260px;  background:url("../society2/images/img4.png")no-repeat left top;  background-size:contain;  top: -80px;  left: 30px;}
#voice::after {  position: absolute;  content: "";  width: 300px;  height: 300px;  background:url("../society2/images/img5.png")no-repeat right top;  background-size:contain;  top:160px;  right:0px;}
#voice h2{width: 960px;margin:auto}
#voice h3{font-size: 3rem;line-height: 1.8;margin: 20px 0;font-weight: 800;}
#voice .bt{width: 300px;margin: auto}
#voice .bt2{width: 400px;margin: 40px auto 0}
.vaC{align-items: center;}.vaB{align-items: flex-end;}
#voice dt{font-size: 3rem;line-height: 1.6; font-weight: 800;text-align: left;}
#voice .person1{background: #fcebf3;padding: 40px 0;}
#voice .person2{background: #e6f4fd;padding: 40px 0}
#voice .person3{background: #fde9d9;padding: 40px 0;margin-top: 60px}
#voice .comment{margin-top: 40px;text-align: left;font-size: 1.8rem;line-height: 2;letter-spacing: 0.1em}
.coution{text-align: left;margin-top: 12px;}

@media screen and (max-width:768px){/*sp*/
#voice::before {width: 110px;  height: 130px; top: -60px;  left: 0px;}
#voice::after {width: 100px;  height: 100px;  top:230px;  right:0px;}
#voice h2{width: 100%;margin: 0 auto 30px}
#voice h3{font-size: 1.8rem;line-height: 1.8;}
#voice .bt{width: 60%;margin: auto}
#voice .bt2{width: 70%;margin: 40px auto}
#voice .person1{padding: 20px;}
#voice .person2{padding:20px;}
#voice .person3{padding:20px;margin-top: 40px}

#voice dt,
#voice dd{width: 48%; font-size: 1.8rem;}
#voice dd img{object-fit: cover;height: 130px!important;}

#voice .person2 dd img{height: 260px!important;}

#voice .comment{margin-top: 20px;font-size: 1.4rem;}
#voice .person2 li:nth-child(2){-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
#voice .person2 li:nth-child(1){-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}
#voice .person2 dt,
#voice .person2 dd{width: 100%}
}


#nagare{position: relative;margin-top: 60px}
#nagare::before {  position: absolute;  content: "";  width: 260px;  height: 260px;  background:url("../society2/images/img6.png") no-repeat left top;  background-size:contain;  top: -80px;  left: 30px;}

#nagare h2{width: 960px;margin:auto}
#nagare h3{font-size: 3rem;line-height: 1.8;margin: 20px 0 0;font-weight: 800;}
#nagare ul{border: 1px solid #00a73c;margin-top: 30px;}
#nagare ul li.col3_2{width: 66%}
#nagare ul li{text-align: left;font-size: 3rem;line-height: 1.8;font-weight: 800;}
#nagare .bt{width: 300px;margin: 40px auto 0}
@media screen and (max-width:768px){/*sp*/
#nagare{margin-top: 70px}
#nagare::before {width: 100px;  height:100px; top: -40px;  left: 0px;}
#nagare h2{width: 100%;margin: 0 auto 30px}
#nagare h3{font-size: 1.8rem;line-height: 1.8;}
#nagare ul li.col3_2{width: 100%;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding: 20px;}
#nagare ul li.col3{width: 100%}
#nagare ul li{font-size: 1.5rem;text-align: center}
#nagare .bt{width: 60%;margin: 20px auto 0}
}


#shikaku{position: relative;background: url("../society2/images/strong_bg.jpg");padding: 60px 0;margin: 60px 0}
#shikaku h2{width: 960px;margin:0px auto 12px}
#shikaku ul.merit{margin-top: 40px}
#shikaku .merit li{padding: 0px 20px 0px;}
#shikaku .bt{width: 300px;margin: 40px auto 0}
#shikaku::before {  position: absolute;  content: "";  width: 300px;  height: 300px;  background:url("../society2/images/img7.png") no-repeat right top;  background-size:contain;  top: -130px;  right: 0px;}
#shikaku .merit2::before {  position: absolute;  content: "";  width: 300px;  height: 300px;  background:url("../society2/images/img8.png") no-repeat left top;  background-size:contain;  top: -180px;  left: 0px;}
#shikaku .merit2{width: 1200px;margin: 60px auto; position: relative;}
#shikaku .merit2 li{width: 50%;z-index: 2}
#shikaku .merit2 li .box{padding: 30px}
@media screen and (max-width:768px){/*sp*/
#shikaku{padding: 40px 0;margin: 40px 0}
#shikaku h2{width: 100%;margin: 0 auto 30px}
#shikaku::before {width: 120px;  height: 120px;top: -50px;  right: 0px;}
#shikaku .merit li{width: 40%;padding: 12px}
#shikaku .bt{width: 60%;margin: 20px auto 0}
#shikaku .merit2{width: 100%;margin: 70px auto 0; position: relative;}
#shikaku .merit2::before {width: 110px;  height: 110px; top: -50px;  left: 0px;}
#shikaku .merit2 li{width: 100%;}

#shikaku .merit2 li:nth-child(4){-webkit-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;}
#shikaku .merit2 li:nth-child(3){-webkit-box-ordinal-group:4;-ms-flex-order:4;-webkit-order:4;order:4;}
#shikaku .merit2 li .box{padding: 20px 0}
}


.arrow_box {
  position: absolute;
  width: 100%;
  height: 50px;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.prev-arrow,
.next-arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #00a73c;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  top: 0;
}
.prev-arrow{left: 20px;}
.next-arrow{right: 20px}
.prev-arrow {
  transform: rotate(180deg);
}

.prev-arrow::before,
.next-arrow::before{
  position:absolute;
  content: "";
  width:10px;
  height:10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}
@media screen and (max-width:768px){/*sp*/
.prev-arrow{left: 3px;}
.next-arrow{right: 3px}
.prev-arrow,
.next-arrow {
  width: 30px;
  height: 30px;
}
.prev-arrow::before,
.next-arrow::before{
  width:6px;
  height:6px;
}
}