@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* CSS Document */
#lp{ color:#333;}

#lp .pink{ color: #d37ca9;}

/*メイン*/
#lp section{ width:100%; margin:0 auto; padding: 60px 0;}
@media screen and (max-width:767px){
#lp section{ padding: 10% 0;}
}

/*tit*/
#lp h1,#lp h2,#lp h3,#lp h4,#lp h5,#lp h6{ line-height: 1.25em; letter-spacing: 0.1em; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
h2.tit_h2_lp{ font-size: 2.2rem; text-align: center; border-top: 4px solid #333; border-bottom: 4px solid #333; padding: 0.125em 0.25em 0.25em; margin-bottom: 40px;}
@media screen and (max-width:767px){
h2.tit_h2_lp{ font-size: 1.6em; margin-bottom: 7.5%;}
}


/*btn*/
#lp figure.btn{ margin-top: 40px;}
#lp figure.btn a{ display: flex; align-items: center; justify-content: center; background: #329632; color: #fff; width: 640px; height: 100px; border-radius: 50px; margin: auto; font-size: 2.4rem; letter-spacing: 0.1em; padding-left: 60px; padding-bottom: 0.25em; font-weight: bold; position: relative; z-index: 1;}
#lp figure.btn a:before{ content: ""; width: 100%; height: 50%; position: absolute; left: 0; right: 0; top: 0; background: rgba(255,255,255,0.1); border-radius: 50px 50px 0 0; z-index: -1;}
#lp figure.btn a i{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: #fff; color: #329632; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%;}
@media screen and (max-width:767px){
#lp figure.btn{ margin-top: 5%;}
#lp figure.btn a{ width: 100%; height: 12.5vw; border-radius: 6.25vw; font-size: 1.75rem; letter-spacing: 0em; padding-left: 5vw;}
#lp figure.btn a:before{ border-radius: 6.25vw 6.25vw 0 0;}
#lp figure.btn a i{ left: 2.5vw; width: 7.5vw; height: 7.5vw; font-size: 1.25rem;}
}


/*fv*/
#lp #fv_lp{ background: url("../images/lp/fv.jpg") center center no-repeat; background-size: auto; height: 920px; padding: 0;}
@media screen and (max-width:767px){
#lp #fv_lp{ background: none; height: auto; padding: 0;}
}


/*service*/
#service{ background: url("../images/lp/service_bg.jpg") center center no-repeat; background-size: cover; border-top: 12px solid #d37ca9; position: relative; z-index: 1;}
#service:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; z-index: -1;}
#service .maincontent{ background: #fff; border: 4px solid #d37ca9; padding: 40px; position: relative;}
#service .maincontent figure.ill{ position: absolute; right: 20px; bottom: 20px;}
#service h3{ background: #d37ca9; color: #fff; border: 8px double #fff; padding: 0.25em 0; text-align: center; font-size: 2rem; letter-spacing: 0; margin-bottom: 20px;}
#service ul li{ padding: 0.5em 0.5em 0.5em 1.75em;  font-size: 1.5rem; font-weight: bold; line-height: 1.5em; letter-spacing: 0.05em; border-bottom: 4px dotted #d37ca9; position: relative;}
#service ul li:first-child{ border-top: 4px dotted #d37ca9;}
#service ul li span{ position: absolute; left: 0.5em; top: 0.5em;}
#service ul li strong{ display: inline-block; background: #d37ca9; color: #fff; padding: 0 0.5em 0.125em; margin-right: 0.25em;}
@media screen and (max-width:767px){
#service{ border-top-width: 2.5vw;}
#service .maincontent{ padding: 2.5%;}
#service .maincontent figure.ill{ position: static; margin-top: 5%;}
#service .maincontent figure.ill img{ width: 50%;}
#service h3{ border: 1.25vw double #fff; font-size: 1.5rem; margin-bottom: 5%;}
#service ul li{ font-size: 1.25rem; letter-spacing: 0;}
}


/*lead*/
#lead{ background: #d37ca9;}
#lead .maincontent{ background: #fff; border: 8px double #d37ca9; padding: 20px;}
#lead .maincontent p{ text-align: center; font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1.5em; font-weight: bold;}
@media screen and (max-width:767px){
#lead .maincontent{ border: 1.25vw double #d37ca9; padding: 2.5%;}
#lead .maincontent p{ font-size: 1.1rem; letter-spacing: 0; text-align: left;}
#lp #lead figure.btn a{ width: 90%;}
}


/*feature*/
#feature{ background: url("../images/lp/feature_bg.jpg") center center no-repeat; background-size: cover; position: relative; z-index: 1;}
#feature:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; z-index: -1;}
#feature h3{ background: #d37ca9; color: #fff; border: 8px double #fff; padding: 0.25em 0; text-align: center; font-size: 2rem; margin-bottom: 20px;}
#feature .feature_list dl{ display: flex; justify-content: space-between; background: #fff; padding: 20px; margin: 20px auto; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
#feature .feature_list dl dt{ width: 240px;}
#feature .feature_list dl dd{ width: 700px;}
#feature .feature_list dl:nth-child(2n){ flex-direction: row-reverse;}
#feature .feature_list dl dd h4{ border: 2px solid #d37ca9; padding: 0.25em; text-align: center; font-size: 1.8rem; color: #d37ca9; margin-bottom: 10px;}
#feature .feature_list dl dd p{ font-size: 1.2rem; line-height: 1.5em; font-weight: bold;}
@media screen and (max-width:767px){
#feature h3{ border: 1.25vw double #fff; font-size: 1.75rem; margin-bottom: 5%;}
#feature .feature_list dl{ display: block; padding: 5%; margin: 5% auto;}
#feature .feature_list dl dt{ width: 60%; margin: 0 auto 2.5%;}
#feature .feature_list dl dd{ width: 100%;}
#feature .feature_list dl dd h4{ font-size: 1.5rem; margin-bottom: 2.5%;}
#feature .feature_list dl dd p{ font-size: 1rem;}
}


/*trouble*/
#trouble ul{ border: 8px solid #d37ca9; padding: 20px; margin: 40px auto; position: relative;}
#trouble ul figure.ill{ position: absolute; right: 20px; bottom: 0;}
#trouble ul li{ padding: 0.5em 0.5em 0.5em 1.75em; font-size: 1.25rem; font-weight: bold; line-height: 1.5em; letter-spacing: 0.05em; border-bottom: 4px dotted #d37ca9; position: relative;}
#trouble ul li:first-child{ border-top: 4px dotted #d37ca9;}
#trouble ul li span{ position: absolute; left: 0.5em; top: 0.5em;}
@media screen and (max-width:767px){
#trouble ul{ border: 1.25vw solid #d37ca9; padding: 2.5% 2.5% 0; margin: 5% auto;}
#trouble ul figure.ill{ position: static; margin-top: 5%;}
#trouble ul figure.ill img{ width: 25%;}
#trouble ul li{font-size: 1.2rem; letter-spacing: 0;}
}


/*qa*/
#qa h2.tit_h2_lp{ color: #d37ca9; border-color: #d37ca9;}
#qa .qa_list dl{ margin: 40px auto;}
#qa .qa_list dl dt{ background: #d37ca9; color: #fff; font-size: 1.5rem; line-height: 1.25em; padding: 0.25em 2em 0.33em 2em; position: relative; cursor: pointer;}
#qa .qa_list dl dt span{ position: absolute; left: 0.75em; top: 0.25em;}
#qa .qa_list dl dt i{ position: absolute; right: 0.75em; top: 50%; transform: translateY(-50%) rotate(0); transition: 0.3s;}
#qa .qa_list dl dd{ background: #efe1e1; padding: 20px; display: none;}
#qa .qa_list dl dd p{ line-height: 1.5em;}
#qa .qa_list dl dt.active i{ transform: translateY(-50%) rotate(45deg);}
#qa .qa_list dl dd.active{ display: block;}
@media screen and (max-width:767px){
#qa .qa_list dl{ margin: 5% auto;}
#qa .qa_list dl dt{ font-size: 1.1rem;}
#qa .qa_list dl dd{ padding: 2.5% 5%;}
#qa .qa_list dl dd p{ font-size: 0.9rem;}
}


/*point*/
#point{ background: #d37ca9;}
#point h2.tit_h2_lp{ color: #fff; border-color: #fff;}
#point ul{ display: flex; width: calc(100% + 20px); margin: 0 0 0 -20px;}
#point ul li{ width: calc(33.33% - 20px); margin: 0 10px; background: #fff; padding: 20px; border-radius: 20px;}
#point ul li h3{ font-size: 1.5rem; line-height: 1.25em; margin: 20px auto; text-align: center;}
#point ul li:nth-child(1) h3{ color: #0078b4;}
#point ul li:nth-child(2) h3{ color: #6aae50;}
#point ul li:nth-child(3) h3{ color: #b43c3c; line-height: 2.5em;}
#point ul li p{ line-height: 1.5em;}
@media screen and (max-width:767px){
#point h2{ font-size: 1.4rem; letter-spacing: 0.05em;}
#point ul{ display: block; width: 100%; margin: 0;}
#point ul li{ width: 100%; margin: 5% auto; padding: 5%; border-radius: 1.25vw;}
#point ul li figure img{ width: 33.33%;}
#point ul li h3{ font-size: 1.5rem; line-height: 1em; margin: 5% auto;}
#point ul li:nth-child(3) h3{ line-height: 1em;}
}


/*merit*/
#merit{ background: url("../images/lp/merit_bg.jpg") center center no-repeat; background-size: cover; position: relative; z-index: 1;}
#merit:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1;}
#merit .maincontent{ background: rgba(255,255,255,0.9); border-radius: 40px; padding: 40px}
@media screen and (max-width:767px){
#merit .maincontent{ border-radius: 1.25vw; padding: 5%;}
#merit .maincontent p{ font-size: 0.9rem; text-align: justify;}
}


/*voice*/
#voice{ background: url("../images/lp/old_mathematics.png");}
#voice ul li{ margin: 40px 120px 0 0; background: #d37ca9; border: 8px double #fff;}
#voice ul li:nth-child(2n){ margin: 40px 0 0 120px;}
#voice ul li dl{ display: flex; align-items: center; padding: 20px;}
#voice ul li dl dt{ width: 140px; margin-right: 20px;}
#voice ul li dl dt img{ border-radius: 50%;}
#voice ul li dl dd{ width: calc(100% - 160px);}
#voice ul li dl dd p{ color: #fff; line-height: 1.5em;}
@media screen and (max-width:767px){
#voice ul li{ margin: 5% auto 0; border: 1.25vw double #fff;}
#voice ul li:nth-child(2n){ margin: 5% auto;}
#voice ul li dl{ display: block; padding: 5%;}
#voice ul li dl dt{ width: 33.33%; margin: 0 auto 5%;}
#voice ul li dl dd{ width: 100%;}
#voice ul li dl dd p{ font-size: 0.9rem; text-align: justify;}
}


/*staff*/
#staff{ background: url("../images/lp/pink_rice.png");}
#staff h2.tit_h2_lp{ color: #d37ca9; border-color: #d37ca9;}
#staff ul{ display: flex; width: calc(100% + 40px); margin-left: -20px;}
#staff ul li{ width: calc(50% - 40px); margin: 0 20px;}
#staff ul li figure img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#staff ul li h3{ background: #d37ca9; color: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; margin: 20px auto 0;}
#staff ul li h3 span{ font-size: 1rem;}
#staff ul li h3 strong{ font-size: 1.25rem; margin-left: 1em;}
#staff ul li h4{ border: 2px solid #d37ca9; border-top: none; background: #fff; text-align: center; font-size: 0.9rem; padding: 5px; margin: 0 auto 20px;}
#staff ul li p{ background: #fff; padding: 1em; line-height: 1.5em;}
@media screen and (max-width:767px){
#staff ul{ display: block; width: 100%; margin-left: 0;}
#staff ul li{ width: 100%; margin: 7.5% auto 0;}
#staff ul li figure img{ width: 50%; padding: 1.25vw;}
#staff ul li h3{ padding: 2.5%; margin: 2.5% auto 0;}
#staff ul li h3 span{ font-size: 0.9rem;}
#staff ul li h3 strong{ font-size: 1.2rem;}
#staff ul li h4{ padding: 1.25%; margin: 0 auto 2.5%;}
#staff ul li p{ font-size: 0.9rem; text-align: justify;}
}


/*price*/
#price{ background: url("../images/lp/diamond_upholstery.png");}
#price h2.tit_h2_lp{ color: #d37ca9; border-color: #d37ca9;}
#price .price_list ul li{ margin: 40px auto 0;}
#price .price_list ul li h3{ display: flex; align-items: center; justify-content: space-between; background: #d37ca9; color: #fff; font-size: 2rem; line-height: 1em; padding: 0.25em 0.5em;}
#price .price_list ul li h3 span{ display: flex; align-items: center; justify-content: center; font-size: 1.75rem; line-height: 1em; padding: 0.125em 0.75em 0.25em; background: #fff; color: #d37ca9; border-radius: 2em;}
#price .price_list ul li p{ background: #fff; border: 8px double #d37ca9; padding: 20px; font-size: 1.25rem; line-height: 1.5em; text-align: center; font-weight: bold;}
#price .att{ text-align: center; margin-top: 60px;}
#price .att ul{ display: inline-block; text-align: left;}
#price .att ul li{ font-size: 0.8rem; padding-left: 1.25em; position: relative;}
#price .att ul li:before{ content: "＊"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#price .price_list ul li{ margin: 7.5% auto 0;}
#price .price_list ul li h3{ justify-content: space-between; font-size: 1.6rem;}
#price .price_list ul li h3 span{ font-size: 1.2rem;}
#price .price_list ul li p{ border: 1.25vw double #d37ca9; padding: 2.5%; font-size: 1rem; text-align: justify;}
#price .att{ margin-top: 10%;}
#price .att ul li{ font-size: 0.7rem;}
}


/*flow*/
#flow{ background: #d37ca9;}
#flow h2.tit_h2_lp{ color: #fff; border-color: #fff;}
#flow .step{ background: #fff; padding: 40px;}
#flow .step ul li dl{ display: flex; padding: 20px 0; border-bottom: 4px dotted #d37ca9;}
#flow .step ul li:first-child dl{ border-top: 4px dotted #d37ca9;}
#flow .step ul li dl dt{ display: flex; align-items: center; justify-content: center; background: #d37ca9; color: #fff; font-size: 1.5rem; font-weight: bold; width: 5em; min-height: 2.5em;}
#flow .step ul li dl dd{ display: flex; align-items: center; justify-content: space-between; width: calc(100% - 8rem); margin-left: 1rem; font-size: 1.2rem; font-weight: bold; line-height: 1.5em;}
#flow .step ul li dl dd p{ width: calc(100% - 160px); line-height: 1.5em; letter-spacing: 0.1em;}
#flow .step ul li dl dd p a{ color: #d37ca9; text-decoration: underline;}
#flow .step ul li dl dd p a:hover{ text-decoration: none;}
#flow .step ul li dl dd figure{ width: 160px;}
@media screen and (max-width:767px){
#flow .step{ padding: 5% 2.5%;}
#flow .step ul li dl{ display: block; padding: 2.5%;}
#flow .step ul li dl dt{ font-size: 1.25rem; width: 100%; min-height: 1.25em;}
#flow .step ul li dl dd{ display: block; width: auto; margin: 2.5%; font-size: 0.9rem; text-align: justify;}
#flow .step ul li dl dd p{ width: 100%; letter-spacing: 0;}
#flow .step ul li dl dd figure{ width: 100%; margin-top: 5%;}
#flow .step ul li dl dd figure img{ width: 33.33%;}
}


/*company*/
#company{ background: url("../images/lp/company_bg.jpg") center center no-repeat; background-size: cover; position: relative; z-index: 1;}
#company:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1;}
#company .maincontent{ background: rgba(255,255,255,0.9); border-radius: 40px; padding: 40px;}
#company table{ border-collapse: separate; border-spacing: 0.5em; font-size: 1.2rem; font-weight: bold; margin: auto;}
#company table th{ text-align: right;}
@media screen and (max-width:767px){
#company .maincontent{ border-radius: 1.25vw; padding: 5%;}
#company h2.tit_h2_lp{ margin-bottom: 5%;}
#company table{ width: 100%; font-size: 1rem; border-spacing: 0 0.5em;}
#company table th{ width: 5.5em;}
#company table td{ font-size: 0.9rem;}
}


/*cv*/
.cv{ background: url("../images/lp/brushed-alum-dark.png") #329632;}
.cv h2{ color: #fff; border-color: #fff;}
.cv ul{ display: flex; align-items: center; justify-content: center;}
.cv ul li{ width: calc(50% - 40px); margin: 0 20px;}
.cv ul li a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; background: #fff; color: #329632; font-size: 2rem; font-weight: 900; line-height: 1em; border-radius: 100px; position: relative; padding-left: 1em;}
.cv ul li a i{ line-height: 1em; position: absolute; left: 1em; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:767px){
.cv ul{ display: block;}
.cv ul li{ width: 100%; margin: 5% auto 0;}
.cv ul li a{ height: 15vw; font-size: 1.8rem; border-radius: 15vw;}
}





@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}