@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------
***                                                                  wrap
----------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------
***                                                                  contents
----------------------------------------------------------------------------*/
/* fvSec */
#fvSec{background: url(../images/top/bg_fv.jpg) no-repeat center; background-size: cover;}
#fvSec .sectionInner{padding-top: 2rem;}
#fvSec .logo{margin: -2rem auto 3rem; }
#fvSec h2{font-size: 3.4rem; line-height: 1.2em; margin: 0 auto;}
#fvSec .lead{color: #45A8B2; font-size: 1.16rem; font-weight: 600; margin: 0 auto;}
#fvSec .lead span{font-size: 1.05em;}
#fvSec .btnBox{margin-top: 3rem;}
#fvSec .gradBtn:link{font-size: 1.7rem;}
#fvSec .txt{color: #F7AB00;font-size: 1.3rem; font-weight: 600; margin-bottom: 5rem;}

/* linkSec_nav */
#linkSec_nav{background: #45A8B2;}
#linkSec_nav li{ margin: 0 0.5em;}
#linkSec_nav .commonBtn{margin: 0 auto;}
#linkSec_nav .commonBtn:link{background: repeating-linear-gradient(45deg, #37414F, #37414F 7px, #2C343F 7px, #2C343F 10px); font-size: 1.5rem; width: 260px;}

/* topSec */
#topSec{position: relative; padding-bottom: 5rem;}
#topSec::before{background: #45A8B2; content: ""; width: 100%; height: 5rem; position: absolute; bottom: -1px; left: 0; right: 0; margin: 0 auto; clip-path: polygon(47% 0%, 50% 70%, 53% 0, 100% 0, 100% 100%, 0 100%, 0 0);}

/* serviceSec */
#serviceSec{background: #45A8B2;}
#serviceSec .sectionInner{padding-top: 0;}
#serviceSec h2{color: #fff; margin-bottom: 0.4rem;}
#serviceSec .sectionInner > .lead{color: #fff; font-weight: 600; font-size: 1.2rem; margin-bottom: 2rem;}
#serviceSec .serviceBox > ul > li{ background: #fff; padding: 2rem 1.6rem 1.4rem; width: 33.2%;  margin-bottom: 2px; position: relative;}
#serviceSec .serviceBox > ul > li p{text-align: center;}
#serviceSec .serviceBox > ul > li .imgBox{height: 115px; margin-bottom: 1rem;}
#serviceSec .serviceBox > ul > li .ttl{color: #45A8B2; font-size: 1.3rem; font-weight: 600; line-height: 1em;}
#serviceSec .serviceBox > ul > li .lead{font-weight: 600; font-size: 0.9rem; line-height: 1.4em;}
#serviceSec .serviceBox > ul > li .txt{text-align: left;}
#serviceSec .serviceBox > ul > li .categoryList{margin-bottom: 1.4rem;}
#serviceSec .serviceBox > ul > li:nth-child(2) .categoryList,
#serviceSec .serviceBox > ul > li:nth-child(6) .categoryList{height: 3.1rem;}
#serviceSec .serviceBox > ul > li .categoryList li{background: #eee; border-radius: 20px; padding: 0.1em 1em; margin: 0.1em; font-size: 0.8rem;}
#serviceSec .serviceBox > ul > li .txt_price{border: solid 2px #eee; font-size: 1.5rem; font-weight: 600; padding-top: 0.3em; line-height: 1.2em; padding: 0.5em 0 0.3em;}
#serviceSec .serviceBox > ul > li .txt_price span{font-size: 1.4em; color: #45A8B2;}
#serviceSec .serviceBox > ul > li .txt_price .txt_tax{font-size: 1.3rem;}

/* workSec */
#workSec{}
#workSec .sectionInner{position: relative;}
#workSec .sectionInner::before{content:""; position: absolute; top: -10rem; left: 0; width: 304px; height: 245px; background: url(../images/common/bg_dot01.png) no-repeat; z-index: -1;}
#workSec .sectionInner::after{content:""; position: absolute; bottom: -5rem; right: 0; width: 304px; height: 245px; background: url(../images/common/bg_dot01.png) no-repeat; z-index: -1;}
#workSec .workBox ul li{width: 32%;}
#workSec .workBox p{font-size: 1rem;}
#workSec .workBox .ttl{font-weight: 600; margin: 1rem auto 0;}

/* priceSec */
#priceSec{}
#priceSec .priceBox{}
#priceSec .priceBox > ul > li{width: 32%; background: #fff; margin-bottom: 1.2rem; padding: 2rem 2.4rem;}
#priceSec .priceBox > ul > li p{text-align: center; font-weight: 600;}
#priceSec .priceBox > ul > li .ttl{font-size: 1rem; height: 3rem; line-height: 1.4em;}
#priceSec .priceBox > ul > li .imgBox{height: 110px;}
#priceSec .priceBox > ul > li:nth-child(10) .imgBox{height: 80px;}
#priceSec .priceBox > ul > li .txt{font-weight: 500; margin: 0; height: 20px;}
#priceSec .priceBox > ul > li .txt span{color: #45A8B2;}
#priceSec .priceBox > ul > li .priceList{height: 10rem;/*height: 6rem;*/}
#priceSec .priceBox > ul > li .priceList li{border-bottom: dashed 1px #45A8B2; width: 100%; padding: 0.4rem;}
#priceSec .priceBox > ul > li .priceList li:last-child{border: none;}
#priceSec .priceBox > ul > li:nth-child(14) .priceList li,
#priceSec .priceBox > ul > li:nth-child(15) .priceList li{border-bottom: dashed 1px #45A8B2;}
#priceSec .priceBox > ul > li .priceList li p{font-size: 1rem; margin: 0; line-height: 1.2em;}
#priceSec .priceBox > ul > li .priceList li span{color: #45A8B2;}
#priceSec .priceBox > ul > li .priceList li .txt_tax{font-size: 0.9em; font-weight: 500;}
#priceSec .priceBox > ul > li .priceList li .txt_other{font-size: 0.7rem; width: 100%; margin: 0 auto;}
#priceSec .priceBox > ul > li .commonBtn{background: #EAA200;  display: inline-block; font-size: 1rem; padding: 0.4em 0; margin: 1.4rem auto 0;}

/* aboutSec */
#aboutSec{}
#aboutSec .sectionInner{position: relative;}
#aboutSec .sectionInner::before{content:""; position: absolute; top: -5rem; left: 0; width: 233px; height: 274px; background: url(../images/common/bg_dot02.png) no-repeat; transform: rotate(180deg); z-index: -1;}
#aboutSec .sectionInner::after{content:""; position: absolute; bottom: -5rem; right: 0; width: 233px; height: 274px; background: url(../images/common/bg_dot02.png) no-repeat; z-index: 0;}
#aboutSec .lead{font-size: 0.9rem;}
#aboutSec .mainBox{width: 100%; margin: 3rem auto;}
#aboutSec .mainBox p{font-size: 1.6rem;font-weight: 600; color: #45A8B2; margin: 0 3rem;}
#aboutSec .mainBox p span{ font-size: 3em;line-height: 1em;}

/* faqSec */
#faqSec{background: url(../images/top/bg_faq.jpg) no-repeat center; background-size: cover;}
#faqSec .faqBox {}
#faqSec .faqBox .questionS li {background:rgba(255,255,255, 0.9); margin-bottom:1.6rem;}
#faqSec .faqBox label {display: block;font-size: 1rem;font-weight: bold;color: #314f4d;transition: all .5s;width: auto;position: relative; padding: 1.6rem 2rem;}
#faqSec .faqBox label:hover {cursor:pointer;}
#faqSec .faqBox input {display: none;}
#faqSec .faqBox label:before {content: '';display: block;width: 20px;height: 2px;border-radius: 5px;background-color: #000; position: absolute;right: 3em;top: 50%;transform: translateY(-50%) rotate(90deg);transition: all ease 0.3s;}
#faqSec .faqBox label:after {content: '';display: block;width: 20px;height: 2px;border-radius: 5px;background-color: #000; position: absolute;right: 3em;top: 50%;transform: translateY(-50%);}
#faqSec .faqBox li .answer {height: 0; overflow: hidden; visibility: hidden; position:relative;}
#faqSec .faqBox li .answer .txt{font-size: 0.9rem; overflow-wrap: break-word;}
#faqSec .faqBox .question:checked + label{ }
#faqSec .faqBox .question:checked + label + .answer {height: auto; padding: 0 2rem 1rem 10rem; visibility: visible; width: auto;}
#faqSec .faqBox .question:checked + label:before { transform: translateY(-50%) rotate(0); }
#faqSec .faqBox .question:checked + label:after {}
#faqSec .faqBox .question:checked + label .qNo { border-bottom: solid 2px #000;}
#faqSec .faqBox .question:checked + label .qTtl { border-bottom: solid 2px #999;}
#faqSec .faqBox .questionS .qNo {display: inline-block; padding: 0.1rem 2rem; width: 12%; font-size: 1.3rem; text-align: center;}
#faqSec .faqBox .questionS .qTtl {display: inline-block; padding: 0.1rem 1rem; width: 88%; font-size: 1.3rem;}

/* linkSec_contact */
#linkSec_contact{background: #37414F;}
#linkSec_contact p{color: #fff; font-weight: 600; font-size: 1.2rem;}
#linkSec_contact .gradBtn{padding: 0.8em 2em; font-size: 1.9rem; margin-top: 1rem;}

/* flowSec */
#flowSec{}
#flowSec .flowBox{}
#flowSec .flowBox ul{}
#flowSec .flowBox ul li{width: 25%; position: relative; height: 160px;}
#flowSec .flowBox ul li:before{content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 100%; background-image: url(../images/top/img_flow_line.png); background-repeat: no-repeat;}
#flowSec .flowBox ul li:last-child:before{content: none;}
#flowSec .flowBox ul li p{text-align: center; font-weight: 600; }  
#flowSec .txt{margin-top: 2rem; font-size: 0.9rem; padding: 0 3rem;}



/* 800px以下*/
@media screen and (max-width:800px){
    #linkSec_nav li:last-child{margin-top: 1rem;}
    #topSec::before{height: 3rem;}
    #priceSec .priceBox > ul > li{width: 48%;}
    #serviceSec .sectionInner .commonBtn:link{margin-bottom: 0;}
}