* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 p {
     font-size: 16px;
     color: #01102C;
 }

 .web-content-1 {
     background: url(/images/makefriend/1.jpg) no-repeat 100% 100%;
     background-size: 100% 100%;
     background-position: center;
     padding: 154px 0px 79px 0px;
     color: #fff;
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 .web-content-1 h1,
 .web-content-1 h2,
 .web-content-1 p {
     width: 749px;
     text-align: center;
 }

 .web-content-1 p {
     color: #fff;
     margin-top: 14px;
     font-size: 19px;
     font-weight: 400;
     line-height: 31px;
     font-family: LINESeedJP_TTF, LINESeedJP_TTF;
 }

 .web-content-1 h1 {
     font-size: 39px;
     line-height: 57px;
 }

 .web-content-1 h2,
 .web-content-1 h3,
 .web-content-1 h4 {
     margin-top: 64px;
 }

 .web-content-2 {
     background: #FFFDF5;
     position: relative;
     padding: 79px 0px 89px 0px;
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 .web-content-2 * {
     z-index: 1;
     position: relative;
     text-align: center;
 }

 .web-content-2::before {
     content: "";
     display: block;
     width: 100%;
     height: 370px;
     position: absolute;
     top: 0;
     background: url(/images/makefriend/2-0.png) no-repeat;
     background-size: 100% 370px;
     z-index: 0;
 }

 .web-content-2::after {
     content: "";
     display: block;
     width: 100%;
     height: 370px;
     position: absolute;
     bottom: 0;
     background: url(/images/makefriend/2-2.png) no-repeat;
     background-size: 100% 370px;
     z-index: 0;
 }

 .web-content-2 p,
 .web-content-2 h2,
 .web-content-2 h3,
 .web-content-2 h4 {
     width: 785px;
     text-align: left;
 }

 .web-content-2 h2,
 .web-content-2 h3,
 .web-content-2 h4 {
     margin-top: 26px;
     font-size: 36px;
 }

 .web-content-2 p {
     margin-top: 20px;
     line-height: 20px;
     font-size: 16px;
 }

 .web-content-3 {
     background: url(/images/makefriend/4.jpg) no-repeat 100% 100%;
     background-size: 100% 100%;
     background-position: center;
     color: #fff;
     display: flex;
     align-items: center;
     flex-direction: column;
     padding: 101px 0px 240px 0px;
 }

 .web-content-3 ul {
     border-radius: 30px;
     display: grid;
     grid-template-columns: 400px 400px;
     overflow: hidden;
     font-size: 16px;
     gap: 1px;
     /* border-top: 1px solid; */
     /* border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1; */
 }

 .web-content-3 ul li {
     padding: 21px;
     list-style: none;
     margin-bottom: 1px;
     background: rgba(255, 255, 255, 0.1);
 }

 .web-content-3 ul li em,
 .web-content-3 ul li a {
     color: mediumorchid;
 }

 .web-content-3 ul li:nth-child(1),
 .web-content-3 ul li:nth-child(2) {
     background: rgba(255, 255, 255, 0.18);
     font-weight: bold;
 }

 .web-content-3 .loop-container {
     display: grid;
     grid-template-columns: 100% 100%;
     overflow: hidden;
     gap: 13px;
     /* padding: 0px 10px; */
 }

 .web-content-3 .loop-container img {
     animation: loop 10s infinite linear;
 }

 @keyframes loop {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-100% - 13px));
     }
 }

 .web-content-3 .loop-container img {
     width: 100%;
 }

 .web-content-3 h2,
 .web-content-3 h3,
 .web-content-3 h4 {
     margin-top: 90px;
     margin-bottom: 47px;
 }

 .login-btn-box {
     display: flex;
     align-items: center;
     justify-content: center;
     position: sticky;
     bottom: 80px;
     z-index: 2;
     margin-top: -160px;
     margin-bottom: 40px;
 }

 .login-btn {
     display: block;
     border: none;
     background: linear-gradient(180deg, #FFE808 0%, #FFEF10 100%);
     box-shadow: inset 0px 0px 2px 6px rgba(255, 255, 255, 0.76);
     border-radius: 52px;
     padding: 28px 109px;
     font-size: 30px;
     font-weight: bold;
     /* left: 50%; */
     /* transform: translateX(-50%); */
 }

 .inner {
     max-width: 1000px;
     margin: 0 auto;
 }

 .pbox-1 {
     background: url(/images/about/pic-4.jpg) no-repeat center;
     background-size: cover;
     padding-top: 100px;
 }

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

     .web-content-1 {
         padding: 125px 0px 55px 0px;
         background-size: auto 100%;
     }

     .web-content-1 h1,
     .web-content-1 h2,
     .web-content-1 p {
         width: unset;
         max-width: 90%;
     }

     .web-content-1 h1 {
         font-size: 32px;
         line-height: 42px;
     }

     .web-content-1 h2 {
         font-size: 20px;
         line-height: 27px;
         margin-top: 52px;
     }

     .web-content-1 p {
         font-size: 12px;
         line-height: 20px;
         margin-top: 12px;
     }

     .web-content-2 {
         padding: 28px 0px 70px 0px;
         overflow: hidden;
     }

     .web-content-2 img {
         width: 160%;
     }

     .web-content-2 p,
     .web-content-2 h2,
     .web-content-2 h3,
     .web-content-2 h4 {
         width: unset;
         max-width: 90%;
         text-align: center;
     }

     .web-content-2 h2,
     .web-content-2 h3,
     .web-content-2 h4 {
         font-size: 24px;
         line-height: 29px;
         margin-top: 22px;
     }

     .web-content-2 p {
         font-size: 14px;
         margin-top: 13px;
     }

     .web-content-2 .img1 {
         width: 95%;
     }

     .web-content-3 {
         padding: 37px 0 160px 0;
         background-size: auto 100%;
     }

     .web-content-3 .loop-container img {
         width: unset;
         height: 148px;
     }

     .web-content-3 .loop-container {
         width: 100%;
         display: flex;
         overflow: hidden;
         gap: 6px;
     }

     .web-content-3 h2 {
         max-width: 90%;
         font-size: 24px;
         line-height: 29px;
         margin-top: 33px;
         margin-bottom: 37px;
         text-align: center;
     }

     .web-content-3 ul {
         width: 100%;
         grid-template-columns: 50% 50%;
         border-radius: 0;
     }

     .web-content-3 ul li {
         font-size: 14px;
         line-height: 19px;
         padding: 15px;
     }

     .login-btn-box {
         margin-top: -165px;
         margin-bottom: 40px;
     }

     .login-btn {
         margin-top: 54px;
         /* margin-bottom: 87px; */
         font-size: 19px;
         padding: 21px 85px;
     }
 }

 .web-content-faq {
     background: #FFFDF5;
     padding: 100px 0 220px;
     display: flex;
     align-items: center;
     flex-direction: column;
 }

 .web-content-faq .inner {
     max-width: 860px;
     width: 100%;
     padding: 0 20px;
 }

 .web-content-faq h2 {
     font-size: 48px;
     text-align: center;
     margin-bottom: 60px;
     color: #01102C;
 }

 .web-content-faq .faq-list {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .web-content-faq .faq-list {
     gap: 0;
 }

 .web-content-faq details {
     border-bottom: 1px solid #ECE3C2;
 }

 .web-content-faq summary {
     list-style: none;
     cursor: pointer;
     padding: 20px 44px 20px 6px;
     font-size: 18px;
     font-weight: bold;
     color: #01102C;
     position: relative;
 }

 .web-content-faq summary::-webkit-details-marker {
     display: none;
 }

 .web-content-faq summary::after {
     content: "+";
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 28px;
     font-weight: 400;
     color: #01102C;
     line-height: 1;
 }

 .web-content-faq details[open] {
     background: #FFE808;
     border-radius: 18px;
     border-bottom: none;
     margin-bottom: 8px;
 }

 .web-content-faq details[open] summary {
     padding: 20px 44px 14px 22px;
 }

 .web-content-faq details[open] summary::after {
     content: "–";
     right: 24px;
 }

 .web-content-faq .ans {
     padding: 0 22px 22px;
     font-size: 16px;
     line-height: 1.65;
     color: #3a3522;
 }

 .web-content-faq .ans a {
     color: #008bff;
     text-decoration: underline;
 }

 .web-content-faq details:not([open]) .ans {
     display: none;
 }

 @media screen and (max-width:680px) {
     .web-content-faq summary {
         font-size: 16px;
     }

     .web-content-faq .ans {
         font-size: 14px;
     }
 }

 .web-content-faq .faq-item h3 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 12px;
     color: #01102C;
 }

 .web-content-faq .faq-item p {
     font-size: 16px;
     line-height: 1.6;
     color: #333;
 }

 .web-content-faq .faq-item p a {
     color: #008bff;
     text-decoration: underline;
 }

 @media screen and (max-width: 680px) {
     .web-content-faq {
         padding: 60px 0 180px;
     }

     .web-content-faq h2 {
         font-size: 32px;
         margin-bottom: 40px;
     }

     .web-content-faq .faq-item h3 {
         font-size: 18px;
     }

     .web-content-faq .faq-item p {
         font-size: 14px;
     }
 }