#visual { position: relative; }
#visual figure img { z-index: 0; width: 100%; height: auto; }
#visual .title-area { position: absolute; z-index: 1; top: 0; left: 50px; }
#visual .title-area span { position: absolute; bottom: 34px; left: 60px; display: inline-block; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; }

#intro { position: relative; overflow: hidden; padding: 70px 0; }
#intro::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #eee; transform: translate(53%) rotate(-35deg); }
#intro p { position: relative; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 2; text-align: center; }

#picture,
#acoustic,
#ict { z-index: 0; position: relative; min-height: 1400px; padding-bottom: 30px; background: #eee; }

#service h2 { display: flex; justify-content: center; align-items: center; height: 80px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 3.8rem; color: #fff; line-height: 1; }

#service #picture h2 { background: #e198b4; }
#service #acoustic h2 { background: #1da9b7; }
#service #ict h2 { background: #c6a60e; }

#picture figure,
#acoustic figure
#ict figure { z-index: 1; position: relative; }

#picture figure img,
#acoustic figure img,
#ict figure img { width: 100%; }

#service section dl { z-index: 2; position: relative; width: 870px; margin: -100px auto 0; padding: 60px; background: #fff; border-top: 4px solid transparent; }
#service section dl + dl { margin-top: 20px; }
#service section dt { width: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 2.4rem; }
#service section dd { display: flex; justify-content: flex-start; align-items: flex-start; margin-top: 40px; }
#service section > dl:nth-child(odd) dd { flex-direction: row-reverse; }
#service section dd figure { width: 340px; height: auto; }
#service section dl:nth-child(odd) figure { margin-left: 30px; }
#service section dl:nth-child(even) figure { margin-right: 30px; }
#service section dd figure img { max-width: 100%; height: auto; }
#service section dd p { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.6rem; line-height:L 1.8;  }
#service section dd ul { display: flex; flex-wrap: wrap; margin-top: 20px; padding: 20px; border: 1px solid transparent; }
#service section dd li { position: relative; width: calc( 100% / 2 ); margin-top: 20px; padding-left: 15px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1; }
#service section dd ul li:first-of-type,
#service section dd ul li:nth-of-type(2) { margin-top: 0; }
#service section dd li::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 10px; height: 10px; margin: auto; border-radius: 5px; }

#service .columns-text { width: 380px; }

#service #picture dl { border-color: #e198b4; }
#service #acoustic dl { border-color: #1da9b7; }
#service #ict dl { border-color: #c6a60e; }
#service #picture dt { color: #e198b4; }
#service #acoustic dt { color: #1da9b7; }
#service #ict dt { color: #c6a60e; }
#service #picture dd ul { border-color: #e198b4; }
#service #acoustic dd ul { border-color: #1da9b7; }
#service #ict dd ul { border-color: #c6a60e; }
#service #picture dd li::before { background: #e198b4; }
#service #acoustic dd li::before { background: #1da9b7; }
#service #ict dd li::before { background: #c6a60e; }

#service main > .link-box { margin: 50px auto 0; text-align: center; }

@media (max-width: 767px) {
  #intro { padding: 35px 0; }
  #intro::before { bottom: -125px; right: 40px; }
  #service .title-area { left: 20px; }
  #service .title-area img { width: 60%; }
  #visual .title-area span { left: 0; bottom: -10px; font-size: 1.4rem; }

  #picture,
  #acoustic,
  #ict { min-height: 1350px; }

  #service h2 { height: 60px; font-size: 2.6rem; }

  #service section dl {width: calc(100% - 40px); margin: -30px auto 0; padding: 25px; }
  #service section dl:nth-child(odd) figure { margin-right: 0; margin-top: 20px; }
  #service section dl:nth-child(even) figure { margin-left: 0; margin-top: 20px; }
  #service section dd,
  #service section dl:nth-child(odd) dd { flex-direction: column-reverse; }
  #service section dd { margin-top: 20px; }
  #service section dd figure { width: 100%; }
  #service section dd p { font-size: 1.4rem; }
  #service .columns-text { width: 100%; }
  #service section dd ul { padding: 10px; }
  #service section dd li { font-size: 1.4rem; }

  #service main > .link-box { margin: 60px 0; }
  #service main > .link-box a { width: 300px; }
}