@charset "utf-8";

main      { background: url(../../images/thought/bg.png) no-repeat center 0; font-size: 2rem; }
main h1   { position: relative; left: 50%; margin: 60px 0 0 10px; font-size: 5.4rem; text-align: left; line-height: 1.25; writing-mode: vertical-rl; transform: translateX(-50%); }
main h1 i { position: relative; top: 3px; left: -10px; font-style: normal; font-size: 2.6rem; }

main h2    { color: #333; font-size: 4.4rem; font-weight: 700; text-align: center; line-height: 1.5; }
main h2 i  { display: block; margin-bottom: 5px; font-style: normal; font-size: 2.4rem; }
main h2 em { position: relative; top: -8px; color: #78af03; font-size: 5.4rem; vertical-align: top; }

main h3      { margin-bottom: 30px; color: #78af03; font-size: 3.6rem; font-weight: 700; line-height: 1.25; }
main h3 i    { display: block; margin-bottom: 10px; color: #333; font-style: normal; font-size: 2rem; }
main h3 span { display: block; margin-top: 10px; font-size: 2.8rem; }

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; }

#intro { padding-bottom: 260px; background: url(../../images/thought/bg_intro.png) no-repeat center bottom; text-align: center; }

#belief                { margin-top: 100px; counter-reset: item; }
#belief section        { position: relative; margin-top: 70px; padding-top: 170px; }
#belief section:before { counter-increment: item; content: counter(item); position: absolute; top: -43px; left: 50%; z-index: 2; color: #8ec31f; font-size: 10rem; font-weight: 700; -webkit-text-stroke: 2px #333; transform: translateX(-50%); }
#belief section:after  { content: ''; position: absolute; top: 0; left: 50%; width: 130px; height: 130px; border-radius: 50%; background: #fff; transform: translateX(-50%); }
#belief figure img     { width: 100%; height: auto; }

#belief ul         { width: 970px; margin: 50px auto 0; }
#belief li         { display: flex; align-items: center; margin-top: 20px; }
#belief li .exp h4 { font-size: 3rem; font-weight: 700; }
#belief li figure  { width: 470px; margin-right: 30px; }
#belief li:nth-of-type(2n) figure { order: 1; margin: 0 0 0 30px; }
#belief li:nth-of-type(2n) .exp   { order: 0; text-align: right; }

#belief section:not(:first-of-type)        { display: flex; }
#belief section:not(:first-of-type) figure { order: 1; width: 570px; margin-left: 30px; }
#belief section:not(:first-of-type) .exp   { order: 0; }
#belief section:not(:first-of-type):nth-of-type(2n) figure { order: 0; margin: 0 30px 0 0; }
#belief section:not(:first-of-type):nth-of-type(2n) .exp   { order: 1; }

#for-everyone    { display: flex; flex-direction: column; justify-content: center; height: 487px; margin: 115px auto 130px; padding-top: 30px; background: url(../../images/thought/bg_for-everyone.svg) no-repeat center 0; text-align: center; }
#for-everyone h3 { line-height: 1.5; }

.motto                  { 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: 40px; background: none; font-size: 1.6rem; }
  main h1   { margin-top: 30px; font-size: 4rem; }
  main h1 i { font-size: 1.9rem; }
  
  main .sub-title { font-size: 1.8rem; }
  
  main h2    { font-size: 2rem; letter-spacing: -.04em; }
  main h2 i  { font-size: 2rem; }
  main h2 em { top: -5px; font-size: 2.6rem; }
  
  main h3      { margin-bottom: 15px; font-size: 2.2rem; }
  main h3 i    { margin-bottom: 15px; font-size: 1.8rem; }
  main h3 span { font-size: 2rem; }
  
  #intro { padding-bottom: 115px; background-size: auto 220px; }
  
  #belief                { margin-top: 50px; }
  #belief section        { margin-top: 40px; padding-top: 100px; }
  #belief section:before { top: -16px; font-size: 5rem; }
  #belief section:after  { width: 80px; height: 80px; }
  
  #belief ul         { width: auto; margin: 30px auto 0; }
  #belief li         { display: block; margin-top: 40px; }
  #belief li .exp h4 { font-size: 2.2rem; }
  #belief li figure,
  #belief li:nth-of-type(2n) figure { width: auto; max-width: 400px; margin: 0 auto; }
  #belief li:nth-of-type(2n) .exp   { text-align: left; }
  
  #belief section:not(:first-of-type) { display: block; }
  #belief section:not(:first-of-type) figure,
  #belief section:not(:first-of-type):nth-of-type(2n) figure { width: auto; max-width: 400px; margin: 0 auto 20px; }
  
  #for-everyone { margin: 30px auto; }
  
  .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; }
}