@import url("https://fonts.googleapis.com/css2?family=Estedad:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* リード */
#read{line-height:2.5}
#read .ttl{font-weight:600;font-size:4rem;margin-bottom:20px;line-height:1.7}
@media (max-width: 991px){#read .ttl{font-size:2.6rem}}

/* お悩み */
#problem .checkList{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width: 991px){#problem .checkList{grid-template-columns:1fr;gap:10px}}
#problem .checkList li{position:relative;background:#F3F6F7;padding:25px 30px 25px 70px;line-height:1.6}
@media (max-width: 991px){#problem .checkList li{padding:15px 15px 15px 50px;font-size:1.6rem}}
#problem .checkList li::before{content:"";position:absolute;left:30px;top:50%;width:20px;height:20px;border-radius:50%;background:#04A345;transform:translateY(-50%)}
#problem .checkList li::after{content:"";position:absolute;left:37px;top:50%;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-65%) rotate(45deg)}
@media (max-width: 991px){#problem .checkList li::before{left:15px}#problem .checkList li::after{left:22px}}
#problem .answer{margin-top:50px;text-align:center;font-size:2.4rem;font-weight:600;color:#04A345}
@media (max-width: 991px){#problem .answer{margin-top:30px;font-size:1.8rem;text-align:left}}

/* 開発できるシステム */
#solution .cardList{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width: 991px){#solution .cardList{grid-template-columns:1fr;gap:15px}}
#solution .cardList li{border:1px solid #CFD2D3;border-top:4px solid #04A345;padding:35px 30px;background:#fff}
@media (max-width: 991px){#solution .cardList li{padding:20px}}
#solution .cardList h5{font-size:2.2rem;font-weight:600;margin-bottom:15px;line-height:1.5}
@media (max-width: 991px){#solution .cardList h5{font-size:1.9rem;margin-bottom:10px}}
#solution .cardList p{font-size:1.6rem;color:#555}

/* 特長 */
#feature .featureList{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
@media (max-width: 991px){#feature .featureList{grid-template-columns:1fr;gap:15px}}
#feature .featureList li{position:relative;background:#F3F6F7;padding:50px 50px 45px;overflow:hidden}
@media (max-width: 991px){#feature .featureList li{padding:25px 20px}}
#feature .featureList .num{position:absolute;right:25px;bottom:10px;font-family:"Roboto",sans-serif;font-style:italic;font-weight:700;font-size:7rem;line-height:1;color:rgba(255,255,255,0.9)}
@media (max-width: 991px){#feature .featureList .num{font-size:5rem;right:15px}}
#feature .featureList h5{position:relative;font-size:2.4rem;font-weight:600;margin-bottom:15px;padding-left:20px;border-left:5px solid #04A345;line-height:1.4}
@media (max-width: 991px){#feature .featureList h5{font-size:1.9rem;padding-left:12px}}
#feature .featureList p{position:relative;z-index:1}

/* 開発の流れ */
#flow .flowList{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px;counter-reset:none}
@media (max-width: 991px){#flow .flowList{grid-template-columns:1fr;gap:0}}
#flow .flowList li{position:relative;border-top:2px solid #1B1C1D;padding-top:25px}
@media (max-width: 991px){#flow .flowList li{border-top:none;border-left:2px solid #CFD2D3;padding:0 0 30px 25px}#flow .flowList li:last-child{padding-bottom:0}#flow .flowList li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:#04A345}}
#flow .flowList .step{display:block;font-family:"Estedad",sans-serif;font-size:1.6rem;font-weight:600;color:#04A345;margin-bottom:5px}
#flow .flowList h5{font-size:2.2rem;font-weight:600;margin-bottom:10px;line-height:1.5}
@media (max-width: 991px){#flow .flowList h5{font-size:1.9rem}}
#flow .flowList p{font-size:1.6rem;color:#555}

/* よくあるご質問 */
#faq .acMenu{margin-bottom:15px;border:1px solid #CFD2D3}
#faq .acMenu dt{position:relative;padding:25px 80px 25px 70px;font-size:2rem;font-weight:500;cursor:pointer;line-height:1.6;transition:.3s}
@media (max-width: 991px){#faq .acMenu dt{padding:15px 50px 15px 45px;font-size:1.7rem}}
#faq .acMenu dt:hover{background:#F3F6F7}
#faq .acMenu dt::before{content:"Q";position:absolute;left:30px;top:25px;font-family:"Estedad",sans-serif;font-weight:600;color:#04A345;font-size:2.2rem;line-height:1.4}
@media (max-width: 991px){#faq .acMenu dt::before{left:15px;top:15px;font-size:1.8rem}}
#faq .acMenu dt::after{content:"";position:absolute;right:30px;top:50%;width:10px;height:10px;border-right:2px solid #1B1C1D;border-bottom:2px solid #1B1C1D;transform:translateY(-75%) rotate(45deg);transition:.35s}
@media (max-width: 991px){#faq .acMenu dt::after{right:20px}}
#faq .acMenu.open dt::after{transform:translateY(-25%) rotate(-135deg)}
#faq .acMenu dd{display:none;position:relative;padding:0 80px 25px 70px;color:#555}
@media (max-width: 991px){#faq .acMenu dd{padding:0 20px 15px 45px;font-size:1.6rem}}
#faq .acMenu dd::before{content:"A";position:absolute;left:30px;top:0;font-family:"Estedad",sans-serif;font-weight:600;color:#92979D;font-size:2.2rem;line-height:1.4}
@media (max-width: 991px){#faq .acMenu dd::before{left:15px;font-size:1.8rem}}
#faq .btnArea{margin-top:80px}
#faq .mainBtn{margin:0 auto}
@media (max-width: 991px){#faq .btnArea{margin-top:50px}}