@charset "UTF-8";

header nav > ul > li:nth-of-type(2) > a          { color: #C00; font-weight: 400;}
header nav > ul > li:nth-of-type(2) > a::before  { background-color: #c00;}
.page #hd_image                 { background: url(../images/app/hd_image.jpg) center no-repeat; background-size: 100% auto; padding: 0 1em;}

section ol                  { margin: 2em 0; padding-left: 0;}
section ol li               { list-style: none; position: relative; padding-left: 2em;}
section ol li:before        { content: "0"; width: 1.5em; line-height: 1.5em; background-color: #333; color: #FFF; text-align: center; position: absolute; left: 0; top: 0.3em; border-radius: 50%;}
section ol li:nth-child(1):before { content: "1";}
section ol li:nth-child(2):before { content: "2";}
section ol li:nth-child(3):before { content: "3";}
section ol li:nth-child(4):before { content: "4";}
section ol li:nth-child(5):before { content: "5";}

section ul                  { padding-left: 2em;}
section ul li               { list-style: disc outside; position: relative;}


#introduction               { overflow: hidden;}
#introduction img           { width: 531px; height: auto; float: right; margin-left: 2em;}

#problem                    { background-color: #f5e9ee; padding: 1.5em; margin-top: 5em;}
#problem h3                 { margin-top: 0;}

main article:nth-of-type(1) { margin-bottom: 0;}

#solution                   { background-color: #e9f6ff; padding: 1em 0;}
#solution h3                { padding-top: 1em; margin-top: 0; font-size: 1.7em;}
#solution div               { background: url(../images/solution/common/doctor.png) left top no-repeat; min-height: 218px; padding-left: 250px; box-sizing: border-box;}

#faq                        {}
#faq h3                     { padding-top: 1em; border-top: 3px solid #e5e5e5; position: relative; margin-bottom: 2em;}
#faq h3:before              { content: ""; height: 3px; width: 20%; background-color: #666; position: absolute; top: -3px;}
#faq dl dt                  { position: relative; padding-left: 2.5em; font-size: 1.1em; font-weight: 400; margin-bottom: 1em;}
#faq dl dt::before          { content: "Ｑ"; background-color: #000; height: 2em; width: 2em; display: block; color: #FFF; position: absolute; top: 0; left: 0; border-radius: 50%; text-align: center; font-weight: bold;}
#faq dl dd                  { position: relative; padding-left: 2.5em; margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #e5e5e5;}


#solLink                    { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5em; padding: 1em; background-color: #f4f4f4;}
#solLink a                  { background-color: #00a0e9; color: #FFF; text-align: center; padding: 0.5em 0; transition: .2s;}
#solLink a:hover            { background-color: #23aaf3; transform: scale(102%);}


@media screen and ( max-width: 767px) {

  #solution h3                { padding-top: 1em; margin-top: 0; font-size: 1.5em;}
  #solution div               { background: url(../images/solution/common/doctor.png) center top no-repeat; background-size: 50vw; min-height: auto; padding-left: 0; padding: 45vw 0 1em;}
  
  #solLink                    { grid-template-columns: repeat(1,1fr); }
}