@charset "utf-8";

main    { min-height: 1193px; margin-top: 0; padding-top: 32%; background: url(../../images/top/mv.gif) no-repeat; line-height: 1.5; background-size: 100% auto; }
main h1 { position: relative; margin-bottom: 0; padding: 0 30px; font-size: max(2.5vw, 30px); font-weight: 500; text-align: left; }

section .sub-title        { display: inline-block; position: relative; padding: 0 20px; color: #78af03; font-weight: 700; }
section .sub-title:before,
section .sub-title:after  { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #78af03; transform: translateY(-50%); }
section .sub-title:before { left: 0; }
section .sub-title:after  { right: 0; }
section h2 i        { display: inline-block; position: relative; padding: 0 20px; font-style: normal; font-size: 2rem; }
section h2 i:before,
section h2 i:after  { content: ''; position: absolute; top: 50%; width: 2px; height: 20px; background: #333; }
section h2 i:before { left: 0; transform: rotate(-30deg) translateY(-50%); }
section h2 i:after  { right: 0; transform: rotate(30deg) translateY(-50%); }
.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%); }

#news          { min-height: 459px; margin-top: 19vw; background: url(../../images/top/bg_news.png) no-repeat center 0; }
#news .inner   { display: flex; justify-content: space-between; }
#news h2       { width: calc(100% - 900px); font-size: 4rem; font-weight: 700; }
#news .entries              { width: 870px; border-top: 2px solid #000; }
#news .entries li           { display: none; position: relative; padding: 20px 130px 25px 20px; border-bottom: 2px solid #000; cursor: pointer; }
#news .entries li:nth-child(-n+3) { display: block; }
#news .entries li:after     { content: '続きを見る \f061'; position: absolute; top: 50%; right: 20px; color: #78af03; font-family: 'Font Awesome 6 Pro'; font-weight: 400; transform: translateY(-50%); }
#news .entries li a         { pointer-events: none; }
#news .entries li time      { color: #9c9c9c; }
#news .entries .entry-title { margin-top: 2px; font-size: 2rem; }
#news .link-btn             { width: 1170px; margin: 60px auto 0; text-align: right; }

@media (min-width: 768px) and (max-width: 1217px) {
	#news { margin-top: 230px; }
}

#thought           { min-height: 910px; padding-top: 130px; background: url(../../images/top/bg_thought.png) no-repeat center 0; font-size: 1.8rem; line-height: 2.7; }

@media (max-width: 767px) {
  #thought .top-txt  { font-size: 1.5rem; line-height: 2.5; }
}

#thought-inner     { width: 750px; }
#thought h2        { margin: -40px 0 20px; font-size: 7rem; font-weight: 700; line-height: 1.5; }
#thought .link-btn { margin-top: 40px; }

#service      { min-height: 1412px; padding-top: 60px; background: url(../../images/top/bg_service.png) no-repeat center 0; text-align: center; line-height: 2.4; }
#service h2   { margin-bottom: 30px; font-size: 4rem; font-weight: 700; line-height: 1.5; }
#service h2 i { margin-bottom: 15px; }

.scroll-inner { height: 850px; }

.pin-list                 { position: relative; margin-top: 25px; }
.pin-list li              { position: absolute; left: 50%; cursor: pointer; transition: .5s all; }
.pin-list li:nth-child(1) { top: 193px; margin-left: 274px; }
.pin-list li:nth-child(2) { top: 0; margin-left: -113px; }
.pin-list li:nth-child(3) { top: 128px; margin-left: -113px; }
.pin-list li:nth-child(4) { top: 388px; margin-left: -79px; }
.pin-list li:nth-child(5) { top: 506px; margin-left: 92px; }
.pin-list li:nth-child(6) { top: 322px; margin-left: -429px; }
.pin-list li:nth-child(7) { top: 587px; margin-left: 32px; }
.pin-list li:hover        { opacity: .7; transform: translateY(-10px); }
.btn-list                 { display: flex; justify-content: space-between; padding: 15px; }
.btn-list li              { width: 223px; }
.btn-list .home-battery a { padding: 27px 50px 27px 20px; }

.iziModal-wrap     { padding: 30px 55px !important; }
.modal             { font-size: 1.6rem; line-height: 2; }
.modal .close-icon { cursor: pointer; }
.modal .fa-xmark   { position: absolute; top: -75px; right: 0; color: #fff; font-size: 6rem; }
.modal .sub-title  { color: #78af03; font-size: 2rem; }
.modal .sub-title:before { content: '\f0eb'; margin-right: 5px; font-family: 'Font Awesome 6 Pro'; }
.modal .title      { margin: 10px 0; font-size: 3rem; line-height: 1.5; }
.modal figure      { margin-top: 25px; }
.modal figure img  { width: 100%; height: auto; }
.modal .link-btn   { margin-top: 30px; padding-bottom: 60px; text-align: center; }

#future           { min-height: 1154px; padding-top: 350px; background: url(../../images/top/bg_future.png) no-repeat center 0; text-align: center; line-height: 2.4; }
#future h2        { margin-bottom: 30px; font-size: 4rem; font-weight: 700; line-height: 1.5; }
#future .link-btn { margin-top: 40px; }

#company          { min-height: 866px; margin-top: -243px; padding-top: 410px; background: url(../../images/top/bg_company.png) no-repeat center 0; text-align: center; }
#company h2       { margin-bottom: 100px; font-size: 4rem; font-weight: 700; }
#company .col3    { display: flex; justify-content: space-between; }
#company .col3 li { font-size: 3rem; font-weight: 700; }
#company .col3 i  { display: block; margin-bottom: 20px; }

@media (max-width: 767px) {
  #company .col3 li img { width: 70%; height: auto;}
}

@media (max-width: 767px) {  
  main    { min-height: initial; margin-top: 70px; padding-top: 50px; background: url(../../images/top/mv_sp.gif) no-repeat center 18px; background-size: 768px auto; }
	main h1 { padding: 0; font-size: 3rem; text-align: center; letter-spacing: 2px; }
  
  section .sub-title { font-size: 1.4rem; }
  .link-btn a        { width: 100%; padding: 12px 40px 12px 20px; }
  .link-btn a:after  { right: 10px; }
  
  #service      { min-height: initial; margin-top: 30px; padding: 50px 0 110px;
                  background-image: url(../../images/top/bg_service_sp.png), url(../../images/top/bg_service_btm_sp.png);
                  background-position: center 0, center bottom;
                  background-repeat: no-repeat, no-repeat; }
  #service h2   { margin-bottom: 20px; font-size: 3rem; }
  #service h2 i { margin-bottom: 10px; }
  
  #service .scroll       { margin-top: 30px; }
  #service .scroll-inner { width: 756px; height: 500px; }
  
  #service-map     { position: relative; width: 100%; margin-top: 15px; overflow: hidden; }
  .pin-map         { padding-top: 10px; }
  .pin-map img     { width: 440px; margin-left: -20px; }
  .win_landscape .pin-map img { margin-left: 20px; }
  .pin-list        { position: absolute; top: 0; left: 0; width: 100%; margin-top: 0; }
  .pin-list li img { width: 25px; height: auto; }
  .pin-list li:nth-child(1)  { top: 60px; margin-left: 100px; }
  .pin-list li:nth-child(2)  { top: 0; margin-left: -26px; }
  .pin-list li:nth-child(3)  { top: 41px; margin-left: -26px; }
  .pin-list li:nth-child(4)  { top: 127px; margin-left: -17px; }
  .pin-list li:nth-child(5)  { top: 166px; margin-left: 40px; }
  .pin-list li:nth-child(6)  { top: 107px; margin-left: -130px; }
  .pin-list li:nth-child(7)  { top: 193px; margin-left: 22px; }
  .btn-list                  { display: block; padding: 0; }
  .btn-list li               { width: auto; }
  .btn-list .home-battery a  { padding: 20px 50px 20px 20px; }
  .modal .btn-list .link-btn { margin-top: 20px; padding-bottom: 0 !important; }
  .modal .btn-list li:first-child .link-btn { margin-top: 30px; }
  
  .iziModal-wrap     { padding: 20px !important; }
  .modal             { height: 99.9% !important; font-size: 1.4rem; }
  .modal .fa-xmark   { top: 17px; right: 20px; color: #333; font-size: 4rem; }
  .modal .sub-title  { font-size: 1.8rem; }
  .modal .title      { font-size: 2.4rem; }
  
  #news           { min-height: initial; margin: 400px 0 40px; background: none; }
  #news .inner    { display: block; }
  #news h2        { width: auto; margin-bottom: 30px; font-size: 3rem; text-align: center; }
  #news .entries  { width: auto; }
  #news .entries li           { padding: 15px 10px 10px; }
  #news .entries li:after     { display: block; position: static; margin-top: 15px; }
  #news .entries .entry-title { font-size: 1.9rem; }
  #news .link-btn { width: auto; margin-top: 40px; padding: 0 20px; text-align: center; }
  
  #thought           { min-height: initial; padding: 0 0 270px; background: url(../../images/top/bg_thought_sp.png) no-repeat center bottom; text-align: center; }
	#thought-inner     { width: auto; }
  #thought h2        { margin-top: -20px; font-size: 4.4rem; }
  #thought p         { text-align: left; }
  #thought .link-btn { font-size: 1.4rem; }
  
  #future    { min-height: 1025px; margin-top: 20px; padding-top: 270px; background: url(../../images/top/bg_future_sp.png) no-repeat center 0; }
  #future h2 { font-size: 3rem; }
  
  #company       { min-height: initial; margin-top: 20px; padding-top: 150px; background: url(../../images/top/bg_company_sp.png) no-repeat center 0; }
  #company h2    { margin-bottom: 40px; font-size: 3rem; }
  #company .col3 { display: block; }
  #company .col3 li:not(:last-child) { margin-bottom: 50px; }
}