@charset "utf-8";


main { padding-bottom: 20px; background: url(../../images/future/bg.png) no-repeat center 70px; }

main h1    { display: flex; justify-content: center; align-items: flex-end; margin-top: 25px; font-size: 2.6rem; line-height: 1.25; }
main h1 em { display: block; margin-top: 15px; padding: 5px 0 15px; font-size: 10rem; line-height: 1; letter-spacing: 5px; }
main h1 span:last-of-type em { padding: 5px 35px 14px; border: 1px solid #333; background: #fff; }

main h2    { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; font-size: 7rem; font-weight: 700; text-align: center; }
main h2 em { display: inline-block; padding: 10px 20px 18px; background: #333; color: #fff; line-height: 1; }
main h2 i  { font-style: normal; margin: 0 15px 0 10px; }

main h3          { position: relative; margin-bottom: 40px; padding-bottom: 40px; font-size: 4rem; font-weight: 700; text-align: center; line-height: 1.5; }
main h3:after    { content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 6px; border-radius: 3px; background: #8ec31f; transform: translateX(-50%); }
main h3 i        { display: inline-block; position: relative; padding: 0 20px; font-style: normal; font-size: 2rem; }
main h3 i:before,
main h3 i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
main h3 i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
main h3 i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }

main .sub-title        { display: inline-block; position: relative; padding: 0 20px; color: #78af03; font-weight: 700; }
main .sub-title:before,
main .sub-title:after  { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #78af03; transform: translateY(-50%); }
main .sub-title:before { left: 0; }
main .sub-title:after  { right: 0; }

.detail section      { margin-top: 120px; }
.detail section:first-of-type { margin-top: 80px; }
.detail h4           { margin-bottom: 20px; font-size: 3rem; font-weight: 700; line-height: 1.5; }
.detail figure       { position: relative; }
.detail figure img   { width: 100%; height: auto; border-radius: 30px; }
.detail figure i     { position: absolute; top: 50%; width: 140px; height: 140px; transform: translateY(-50%); }
.detail figure i img { border-radius: 0; }

.detail .type01          { display: flex; justify-content: space-between; align-items: center; }
.detail .type01 .exp     { order: 1; width: 670px; }
.detail .type01 figure   { order: 0; width: 470px; }
.detail .type01 figure i { left: -20px; }

.detail .type02          { display: flex; justify-content: space-between; align-items: center; }
.detail .type02 .exp     { width: 670px; }
.detail .type02 figure   { width: 470px; }
.detail .type02 figure i { right: -20px; }

.detail .type03 .list    { display: flex; flex-wrap: wrap; }
.detail .type03 .list li { width: calc((100% - 30px) / 2); margin: 30px 30px 0 0; }
.detail .type03 .list li:nth-child(2n) { margin-right: 0; }
.detail .type03 .list li:nth-child(2n-1) i { left: -20px; }
.detail .type03 .list li:nth-child(2n) i   { right: -20px; }

.link-btn a       { display: inline-block; position: relative; padding: 15px 50px 15px 20px; border: 2px solid #333; border-radius: 10px; background: #fff; font-weight: 700; line-height: 1.5; }
.link-btn a:after { content: '\f061'; position: absolute; top: 50%; right: 20px; font-family: 'Font Awesome 6 Pro'; font-size: 2rem; font-weight: 400; transform: translateY(-48%); }

#intro         { text-align: center; }
#intro .lead   { font-size: 1.8rem; font-weight: 700; }
#intro .lead p { margin-top: 1em; }

#sdgs, #farm, #carbon, #social { margin-top: 160px; }

.motto                  { margin-top: 130px; font-size: 2rem; font-weight: 700; text-align: center; }
.motto ul               { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 60px; font-size: 3rem; }
.motto li               { position: relative; width: 500px; height: 170px; margin-right: 30px; }
.motto li:last-child    { margin-right: 0; }
.motto li:before,
.motto li:after         { content: ''; position: absolute; top: 0; z-index: 2; width: 34px; height: 100%; border: 2px solid #333; pointer-events: none; }
.motto li:before        { left: 0; border-right: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.motto li:after         { right: 0; border-left: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.motto li a             { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; border-radius: 20px; background: #fff; }
.motto li a:after       { content: '\f061'; position: absolute; top: 50%; right: 60px; color: #333; font-family: 'Font Awesome 6 Pro'; font-weight: 400; transform: translateY(-50%); transition: .3s; }
.motto li a:hover:after { right: 50px; color: #78af03; }
.motto li a i           { position: absolute; bottom: 0; left: 38px; }

@media (max-width: 767px) {
  main   { padding-bottom: 0; background: none; }
  
  main h1    { font-size: 1.4rem; }
  main h1 em { margin-top: 15px; padding: 5px 0 15px; font-size: 4rem; }
  main h1 span:last-of-type em { padding: 6px 20px 12px; }
  
  main h2    { margin-bottom: 30px; font-size: 3rem; }
  main h2 em { padding: 5px 15px 10px; line-height: 1.25; }
  
  main h3          { margin-bottom: 20px; padding-bottom: 20px; font-size: 2.4rem; }
  main h3:after    { width: 30px; height: 3px; }
  main h3 i        { margin-bottom: 0; font-size: 1.6rem; }
  main h3 i:before,
  main h3 i:after  { top: auto; bottom: 0; }
  main h3 i:before { transform: rotate(-30deg) translateY(0); }
  main h3 i:after  { transform: rotate(30deg) translateY(0); }

  main .sub-title { font-size: 1.8rem; }
  
  .detail section      { margin-top: 60px; }
  .detail section:first-of-type { margin-top: 40px; }
  .detail h4           { margin-bottom: 10px; font-size: 1.8rem; }
  .detail figure img   { border-radius: 15px; }
  .detail figure i     { width: 100px; height: 100px; }
  
  .detail .type01,
  .detail .type02          { flex-direction: column; }
  .detail .type01 .exp,
  .detail .type02 .exp     { order: 0; width: 100%; }
  .detail .type01 figure,
  .detail .type02 figure   { order: 1; width: calc(100% - 40px); margin-top: 20px; }
  
  .detail .type03 .list    { display: block; }
  .detail .type03 .list li { width: 100%; /*max-width: 335px;*/ margin: 30px auto 0; }
  .detail .type03 .list li:first-child { margin-top: 30px; }
  .detail .type03 .list li:nth-child(2n) { margin-right: auto; }
  .detail .type03 figure{ left: 20px; width: calc(100% - 40px); }
  
  #intro .lead { font-size: 1.6rem; text-align: left; }
  
  #sdgs, #farm, #carbon, #social { margin-top: 80px; }
  
  .motto               { margin-top: 50px; font-size: 1.6rem; text-align: left; }
  .motto ul            { display: block; margin-top: 30px; font-size: 1.8rem; }
  .motto li            { width: 100%; height: 100px; margin-right: 0; }
  .motto li:last-child { margin-top: 20px; }
  .motto li a i img    { width: 60px; height: auto; }
}