/* index.html */
.top-spacer {
  height:50px;
  width: 100%;
  background-color: #c0c0f0;
}
      #mainvisual {
        height: 550px;
        /* background-image:  radial-gradient(ellipse, rgba(64,64,64,0.5), rgba(192,192,192,0.5)) ; */
        background-image: linear-gradient(140deg,
          #f8f8f8A0 , 
          #706060a0 20%, 
          #605050c0 80%, 
          #6b6b91a0 ), 
          url(../img/top_bg.jpg);
        background-size:cover;
        animation: zoom 10s 1;
         /* animation: zoom 20s infinite both; */ 
        animation-fill-mode: forwards;
        padding: 50px 10px;
        text-align: center;
      }
      @keyframes zoom{
        0% {
          background-size:160% auto;
        }
        100% {
          background-size: 115% auto;
        }
        /* 50% {
          background-size:100% auto;
        } */
      }

      #mainvisual h2 {
        font-size: 34px;
        color: white;
        letter-spacing: 0.25em;
        text-shadow: black 2px 2px 4px;
        margin: 100px 0 50px;
      }
      #mainvisual h2 span {
        display: none;
      }
      #mainvisual img {
        /* margin-bottom: 2px; */
        width: 75%;
      }
      #mainvisual p {
        color: white;
        text-shadow: black 1px 1px 3px;
      }
      .servicename {
        letter-spacing: 0.5em;
        font-size: 22px;
        font-style: italic;
        padding: 0 0 60px 0;
      }
      .mainmessage {
        letter-spacing: 0.2em;
        font-size: 32px;
        font-weight: bold;
      }

      #maincontents {
        background-color: white;
        height: auto;
        padding: 10px 10px;
        text-align: center;
        letter-spacing: 0.1em;
        /* display: inline-block; */
      }
      #maincontents h3 {
        margin: 40px 0 30px 0;
        font-size: 1.5em;
      }
      .spbr {
        display: none;
      }
      .service {
        padding: 0 0 30px 0;
        line-height: 1.8em;
      }

      .feelfree {
        color: #a00000;
        font-weight: bold;
        font-size: 1.4em;
        letter-spacing: 0.2em;
        padding-top: 1.5em;
      }

      #arrow {
        display: flex;
        justify-content: space-around;
        margin: 0 0 20px 0;
        color: #606060;
        line-height: 40px;
      }
      .leftarrow {
        width:180px;
        height:60px;
        background:linear-gradient(to top right, transparent 50%, #f8cfcf 50%) bottom left/ 50% 100% no-repeat,
        linear-gradient(to top left, transparent 50%, #f8cfcf 50%) bottom right / 50% 100% no-repeat;        
      }
      .rightarrow, .rightarrow-s {
        width:180px;
        height:60px;
        background:linear-gradient(to top right, transparent 50%, #cfcff8 50%) bottom left/ 50% 100% no-repeat,
        linear-gradient(to top left, transparent 50%, #cfcff8 50%) bottom right / 50% 100% no-repeat;        
      }
      .rightarrow-s {
        color: #606060;
        line-height: 40px;
        display: none;
      }

      #btn {
        display: flex;
          /* display:inline-flex; */
          flex-wrap: wrap;
          justify-content: space-around;
          /* padding: 0 20%; */
          margin: 0 0 60px;
      }
      #btn a {

        display: inline-flex;
        /* flex-wrap: wrap; */
        /* justify-content: space-between; */
        text-decoration: none;
        color: white;
        padding: 10px 36px;
        letter-spacing: 0.1em;
        
      }
      .btns {
        /* border-radius: 0px; */
        /* margin-right: 10%; */
        box-shadow: 4px 4px darkgray;
      }
      .leftbtn {
        background-color: maroon;
        opacity: 0.8;
      }
      .rightbtn {
        background-color: navy;
        opacity: 0.8;
      }
      /* #btn p { */
      .btn-p {
        font-weight: bold;
        font-size: 1.2em;
      }
      #btn p span {
        font-weight: 100;
        font-size: 12px;
      }
      /* .btns :hover {
        border-radius: 8px;
      } */
      .leftbtn:hover {
        border-radius: 0px;
        background-color: #df1010;
        opacity: 1.0;
        /* color: maroon; */
        transition: 0.5s;
      }
      .rightbtn:hover {
        border-radius: 0px;
        background-color: #2020ff;
        opacity: 1.0;
        /* color: navy; */
        transition: 0.5s;
      }
      .btns:active {
        position: relative;
        top: 4px;
        box-shadow: none;
        
      }

      #news {
        text-align: center;
        margin-bottom: 20px;
      }
      #news h4 {
        padding: 40px 0 20px 0;
      }

      #news p {
        padding: 10px 0 0;

      }

      .follow-me {
        display: inline-flex;
        list-style: none;
        justify-content: center;
        margin: 10px ;
      }
      .sns {
        /* display: inline-flex; */
        /* height: 30px;
        line-height: 30px; */
        display: inline-block;
        color:white;
        text-decoration: none;
        width: 8em;
        height: 24px;
        margin-left: 20px;
        border-radius: 4px;
      }
      .tw {
        background-color: #1da1f2;
      }
      .fb {
        background-color: #1877f2;
      }
#maincontents .service .resources {
  padding: 50px 20px;
}
#maincontents .service .resources ul {
  list-style: none;
  text-align: left;
}
#maincontents .service .resources .r_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#maincontents .service .resources .r_list .p_list {
  width: 40%;
}

#maincontents .service .resources ul li .person {
  display: flex;
  margin: 15px 15px;
  justify-content: center;
}
#maincontents .service .resources ul li .person .res_img {
  display: block;
  width: 19%;
  object-fit: contain;
}
#maincontents .service .resources ul li .person .res_txt {
  width: 75%;
  margin-left: 15px;
  padding: 5px 10px;
  background-color: #f0f0ff;
  border-radius: 10px;
}

@media all and (max-width: 960px) {
  #maincontents .service .resources .r_list .p_list {
    width: 48%;
  }
  #maincontents .service .resources ul li .person .res_txt {
    width: 80%
  }
}