@charset "UTF-8";



/* --------------------
   Service
-------------------- */
/* -- #about -- */
#about{
   padding: 80px 0 80px;
   position: relative; }

#about .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 40px; }
#about .photo{
    width: 100%; }
#about .photo figure{
   border-radius: 10px;
   overflow: hidden; }
#about .photo img{  width: 100%; }
#about .tag{ margin-bottom: 10px; }
#about h2{ line-height: 1.25; margin-bottom: 30px; }
@media screen and (min-width: 769px){
   #about{padding: 180px 0 140px; }
   #about .tag{ margin-bottom: 20px; }
   #about h2{ margin-bottom: 40px; }
   #about .flex{ gap: 40px; }
   #about .photo{ width: calc(50% - 40px); }
   #about .text{ width: 50%; }
   #pglink .sp{ display: none; }
}
@media screen and (min-width: 1080px){
   #about .flex{ gap: 80px; }
   #about .photo{ width: calc(50% - 80px); }
}

/* -- #service-list -- */
#service-list{ margin-top: 80px; }
#service-list .area{
   margin: auto;
   background-color: #fff;
   width: 90%;
   border-radius: 10px; }
#service-list .wrap{ padding: 40px 0; }

#service-list .item{
   display: flex;
   flex-wrap: wrap;
   gap: 30px; }
#service-list .item+.item{ margin-top: 50px; }
#service-list .item .photo{
   border-radius: 10px;
   overflow: hidden; }
#service-list .item .photo,
#service-list .item .photo img,
#service-list .item .text{ width: 100%; }
#service-list .item .text p{ margin-top: 1em; margin-bottom: 1.25em; }
@media screen and (max-width: 480px){}
@media screen and (min-width: 481px){
   #service-list .wrap{ padding: 60px 0; }} 
@media screen and (min-width: 769px){
   #service-list{ margin-top: 120px; }
   #service-list .area{
      border-radius: 20px;
      width: calc(100% - 80px); }
   #service-list .wrap{ padding: 120px 0 140px; }
   #service-list .item { gap: 30px; }
   #service-list .item+.item{ margin-top: 60px; }
   #service-list .item .photo,
   #service-list .item .text{ width: calc(50% - 15px); }
   #service-list .item .text{ padding-top: 20px; }
}
@media screen and (min-width: 1080px){
   #service-list .item { gap: 80px; }
   #service-list .item .photo,
   #service-list .item .text{ width: calc(50% - 40px); }
   #service-list .item .text p{ margin-bottom: 3.75em; }
}
/* -- #lisence -- */

#lisence{ padding-top: 80px; }
#lisence h1{ margin-bottom: 30px; }
#lisence h1 span{
   display: block;
   line-height: 2.5;  }
#lisence .item{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
   border-top: solid #E4F3F5 1px;
   margin-top: 40px;
   padding-top: 40px; }
#lisence .item h2{ margin-bottom: 15px; }
#lisence .item .text a{ text-decoration: underline; color: #00A4E0; }
#lisence .item .button{
   border-radius: 10px;
   display: flex;
   gap: 0 0.5em;
   align-items: center;
   justify-content: center;
   background-color: #fff;
   color: #00A4E0;
   width: 100%; }
#lisence .item .button .icon{ position: relative; }
#lisence .item .button .icon .off{
   position: relative;
   z-index: 1; }
#lisence .item .button .icon .on{
   z-index: 0;
   top: 0;
   opacity: 0;
   position: absolute; }
@media screen and (min-width: 481px){}
@media screen and (min-width: 769px){
   #lisence .item{
      margin-top: 60px;
      padding-top: 60px; }
   #lisence .item h2{ margin-bottom: 20px; }
   #lisence .item .button{
      width: 120px;
      height: 120px;
      flex-direction: column; }
}
@media screen and (min-width: 1080px){
   #lisence{ padding-top: 160px; }
   #lisence h1{ margin-bottom: 40px; }
   #lisence .item .text a:hover{ text-decoration: none; }
   #lisence .item .button:hover{ color: #fff; background-color: #00A4E0; }
   #lisence .item .button:hover .icon .off{ opacity: 0; }
   #lisence .item .button:hover .icon .on{ opacity: 1; }
}