@charset "utf-8";
/**********************************************
 * 
 * BUSINESS
 *
***********************************************/
h3       { position: relative; margin: 100px 0 80px; padding-bottom: 30px; color: #007e43; font-weight: 700; font-size: 3.6rem; text-align: center; }
h3:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 2px; margin-left: -30px; background: #007e43; }
.inner   { overflow-x: hidden; }

.note-box         { margin-bottom: 100px; padding: 50px 20px; border-radius: 20px; background: #f0f7ea; font-size: 2rem; text-align: center; line-height: 2; }
.note-box dt      { margin-bottom: 20px; font-size: 2.6rem; font-weight: 700; }
.note-box dt span { color: #007e43; }
.incineration .note-box { margin-bottom: 50px; }
.incineration .table > .row .item { background: #f5f5f5; }

.aspect { margin: 0 auto 100px auto; aspect-ratio: 16 / 9; width:768px; }
.aspect > video { width: 768px; }

.lead         { padding: 0 20px; font-weight: 400; font-size: 2rem; text-align: center; line-height: 2; }
.lead h2      { margin-bottom: 50px; font-weight: 500; font-size: 4rem; line-height: 1.5; }
.lead h2 span { color: #007e43; }
.lead p       { text-align: center; }

.recycling       { position: relative; margin-top: 40px; text-align: center; }
.recycling:after { content: ''; position: absolute; bottom: 150px; left: 0; z-index: -1; width: 100%; height: 420px; background: #f0f7ea; }

.features               { display: flex; margin-top: 100px; font-size: 2rem; text-align: center; line-height: 2; }
.features li            { width: calc(100% / 3); padding: 0 30px; border-right: 2px solid #dedede; }
.features li:last-child { border-right: 0; }
.features i             { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 10px; }
.features h4            { color: #007e43; font-size: 3rem; font-weight: 700; }
.features h5            { margin: 10px 0 40px; color: #007e43; font-size: 6rem; font-weight: 700; line-height: 1; }
.features h5 span       { font-size: 3.6rem; }
.features li:last-child h5 span { font-size: 3rem; }
.features p             { text-align: left; }
.features .parallel         { display: flex; justify-content: center; }
.features .parallel h5      { margin-right: 20px; font-size: 3.8rem; }
.features .parallel h5:last-child { margin-right: 0; }
.features .parallel h5 em   { display: block; margin-bottom: 10px; color: #000; font-size: 1.8rem; }
.features .parallel h5 span { font-size: 1.8rem; }
.features .parallel + p     { margin-top: -6px; }

.preparation                             { text-align: center; font-size: 2rem; }
.strength ol                             { counter-reset: item; }
.strength ol > li                        { position: relative; margin-bottom: 60px; padding: 90px 0; }
.strength ol > li:last-of-type           { margin-bottom: 0; }
.strength ol > li:before                 { content: ''; position: absolute; top: 0; right: 0; left: auto; z-index: -1; width: 64.84vw; height: 100%; border-radius: 411px 0 0 0; background: #e5f3fb; }
.strength ol > li:nth-of-type(2n):before { right: auto; left: 0; border-radius: 0 411px 0 0; background: #f0f7ea; }
.strength ol > li .inner                 { padding: 0 100px 0 200px; }
.strength ol > li:nth-of-type(2n) .inner { padding: 0 20px 0 300px; }
.strength ol > li .numset                { position: relative; }
.strength ol > li .numset:before         { counter-increment: item; content: '0'counter(item); position: absolute; top: -22px; left: -190px; width: 175px; color: rgba(0, 139, 213, .2); font-family: 'Barlow', sans-serif; font-size: 15rem; font-weight: 600; line-height: 1; text-align: right; }
.strength ol > li:nth-of-type(2n) .numset:before { color: rgba(97, 169, 39, .2); }
.strength ol > li h4                     { position: relative; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #dedede; font-size: 3rem; font-weight: 500; line-height: 1.3; }
.strength ol > li h4:before              { content: ''; position: absolute; bottom: -2px; left: 0; width: 120px; height: 2px; background: #008bd5; }
.strength ol > li:nth-of-type(2n) h4:before { background: #007e43; }
.strength ol > li h5                     { margin-top: 120px; color: #007e43; font-weight: 700; font-size: 3rem; text-align: center; }
.strength ol > li h6                     { position: relative; margin: 40px 0; padding-left: 30px; color: #007e43; font-weight: 700; font-size: 2.6rem; }
.strength ol > li h6:before              { content: ''; position: absolute; top: 12px; left: 0; width: 20px; height: 20px; border-radius: 50%; border-top-right-radius: 0; background: #007e43; }
.strength ol > li figure                 { margin-top: 40px; }
.strength ol > li figure ul:after        { content: ''; display: block; clear: both; height: 0; }
.strength ol > li figure ul > li         { float: left; width: calc((100% - 30px) / 2); margin: 30px 30px 0 0; }
.strength ol > li figure ul > li:nth-of-type(2n) { margin-right: 0; }
.strength ol > li figure ul > li:nth-of-type(1),
.strength ol > li figure ul > li:nth-of-type(2)  { margin-top: 0; }
.strength ol > li figure figcaption      { margin-top: 15px; }
.strength ol > li figure img             { width: 100%; height: auto; /*border-radius: 16px;*/ }

.strength .handled       { display: flex; flex-wrap: wrap; font-weight: 500; }
.strength .handled dt    { width: 170px; margin-top: 60px; border-right: 2px solid #dedede; color: #007e43; font-size: 2rem; }
.strength .handled dd    { display: flex; flex-wrap: wrap; width: calc(100% - 170px); margin-top: 60px; padding: 0 30px; }
.strength .handled dt:first-of-type,
.strength .handled dd:first-of-type { margin-top: 0; }
.strength .handled dd ul { width: 50%; }
.strength .handled dd li { position: relative; margin-top: 5px; padding-left: 16px; }
.strength .handled dd li:first-child { margin-top: 0; }
.strength .handled dd li:before { content: ''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #007e43; }

.other            { margin-top: 100px; text-align: center; }
.other h4         { font-size: 3.6rem; font-weight: 700; }
.other ul         { display: flex; margin-top: 50px; }
.other li         { width: calc((100% - 30px) / 2); margin-right: 30px; }
.other li:last-child { margin-right: 0; }
.other li a       { display: flex; flex-direction: column; justify-content: center; position: relative; width: 100%; height: 135px; padding: 0 70px 0 30px; border: 1px solid #007e43; border-radius: 100px; border-top-right-radius: 0; color: #000; font-size: 3.6rem; font-weight: 700; }
.other li a:after { content: ''; position: absolute; top: 50%; right: 30px; width: 32px; height: 15px; background: url(../../images/ar_green.png) no-repeat; background-size: 32px 15px; transition: .3s; transform: translateY(-50%); }
.other li a span  { display: block; color: #007e43; font-family: 'Barlow', sans-serif; font-size: 1.6rem; }
.other li a:hover:after { right: 20px; }

@media (max-width: 767px) {
  main img { width: 100%; height: auto; }
  h3       { margin: 50px 0 40px; padding-bottom: 15px; font-size: 3rem; }
  h3:after { width: 40px; height: 1px; margin-left: -20px; }
  
  .note-box    { margin-bottom: 40px; padding: 20px; font-size: 1.6rem; line-height: 1.75; }
  .note-box dt { margin-bottom: 10px; font-size: 2rem; }
  .note-box dd { text-align: left; }
  .incineration .note-box { margin-bottom: 40px; }
  .preparation { font-size: 1.6rem; }
  .aspect { margin-bottom: 60px; width:100%; }
  
  .lead    { padding: 0 15px; font-size: 1.6rem; text-align: left; }
  .lead h2 { margin-bottom: 25px; font-size: 2.6rem; }
  .lead p  { text-align: left; }
  
  .recycling       { margin-top: 40px; }
  .recycling:after { bottom: 50px; height: 130px; }
  
  .features               { display: block; margin-top: 20px; font-size: 1.6rem; }
  .features li            { width: auto; padding: 30px 0; border-right: 0; border-bottom: 1px solid #dedede; }
  .features li:last-child { border: 0; }
  .features i img         { width: 50px; }
  .features h4            { font-size: 2.4rem; }
  .features h5            { margin: 0 0 20px; font-size: 3.2rem; }
  .features h5 span       { font-size: 2.6rem; }
  .features li:last-child h5 span { font-size: 2.4rem; }
  .features .parallel         { margin-top: 10px; }
  .features .parallel h5      { font-size: 3.2rem; }
  .features .parallel h5 span { font-size: 1.8rem; }
  .features .parallel + p     { margin-top: 0; }

  .strength ol > li                        { margin-bottom: 30px; padding: 20px 0; }
  .strength ol > li:before                 { width: 75%; border-radius: 100px 0 0 0; }
  .strength ol > li:nth-of-type(2n):before { border-radius: 0 100px 0 0; }
  .strength ol > li .inner,
  .strength ol > li:nth-of-type(2n) .inner { padding: 0 15px; }
  .strength ol > li .numset:before         { position: relative; top: -5px; left: 0; width: auto; font-size: 6rem; text-align: left; }
  .strength ol > li h4                     { margin-bottom: 20px; padding-bottom: 20px; border-bottom-width: 1px; font-size: 2.4rem; }
  .strength ol > li h4:before              { bottom: -1px; width: 60px; height: 1px; }
  .strength ol > li h5                     { margin-top: 40px; font-size: 2rem; }
  .strength ol > li h6                     { margin: 20px 0; font-size: 2rem; }
  .strength ol > li h6:before              { top: 7px; }
  .strength ol > li figure                 { margin-top: 25px; }
  .strength ol > li figure ul > li         { width: calc((100% - 15px) / 2); margin: 15px 15px 0 0; }
  .strength ol > li figure figcaption      { margin-top: 10px; font-size: 1.4rem; }
  
  .strength .handled       { display: block; }
  .strength .handled dt    { width: auto; margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #dedede; border-right: 0; font-size: 1.6rem; }
  .strength .handled dd    { justify-content: space-between; width: auto; margin-top: 15px; padding: 0; }
  .strength .handled dd:first-of-type { margin-top: 15px; }
  .strength .handled dd ul { width: calc((100% - 10px) / 2); }
  
  .other           { margin-top: 40px; }
  .other h4        { font-size: 2rem; }
  .other ul        { display: block; margin-top: 20px; }
  .other li        { width: auto; margin: 0 0 20px; }
  .other li:last-child { margin: 0; }
  .other li a      { height: 100px; font-size: 2.4rem; }
  .other li a span { font-size: 1rem; }
  .aspect > video { width: 100%; padding: 0 15px;}
}