html, body{ margin: 0; padding: 0;}
.cLanding *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.cLanding{ width: 100%; margin: 0 auto; font-size: 3.2vw; line-height: 1; font-weight: 300; color: #000000; font-family: -apple-system, "Hiragino Sans", "ヒラギノ角ゴ StdN", sans-serif;}
.cLanding img{ width: 100%; height: auto; margin: auto; display: block; border: none;}
.cLanding a,
.cLanding a:hover { text-decoration: none; color: #000000; display: block;}
.cLanding ul, .cLanding ol{ list-style: none;}
.cLanding em, .cLanding i{ font-style: normal;}
.cLanding span{ display: block;}
.cLanding small{ font-size: 1em;}
.cLanding button{ border: none; text-decoration: none; background: none;}
.cLanding .sp{ display: block;}
.cLanding .pc{ display: none;}

@media screen and (min-width: 721px){
.cLanding .sp{ display: none;}
.cLanding .pc{ display: block;}
.cLanding{ font-size: 1.2vw;}
}
@media screen and (min-width: 1001px){
.cLanding{ font-size: 12px;}
}

/* 看板 */
.cMV{ width: 100%; height: max-content; display: block; position: relative; background: linear-gradient(90deg, #75e0e0,#3cc6e6); overflow: hidden;}
.cMV h1{ max-width: 1000px; margin: auto; position: relative; z-index: 3;}
canvas { display: block; aspect-ratio: unset !important; z-index: 0;}
#particles { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.cBtn{ display: none;}

@media screen and (min-width: 721px){
.cBtn{ width: max-content; display: flex; gap: 1em; position: absolute; top: 2%; right: 1%; z-index: 5;}
.cBtn a{ width: max-content; position: relative; transition: .3s ease-in-out;}
.cBtn a img{ width: auto; height: 3vw;}
.cBtn a:nth-child(2)::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/kanban_btn02_hover.webp") no-repeat 50% 50% / 100% auto; opacity: 0; transition: .3s ease-in-out;}
.cBtn a:nth-child(2):hover::after{ opacity: 1;}
.cBtn a:first-child:hover{ filter: brightness(1.1);}
}
@media screen and (min-width: 1001px){
.cBtn a img{ height: 30px;}
}

/*広告媒体*/
.cMedia span{ width: 82.4%; margin: auto; padding: 5% 0;}

@media screen and (min-width: 721px){
.cMedia{ max-width: 1000px; margin: auto;}
.cMedia span{ width: 90.2%; padding: 3% 0;}
}

/*ここがすごい*/
.cStrength{ padding: 0 0 10%; background: repeating-linear-gradient( -45deg,#c9eaff,#c9eaff 15px,#b5e7ff 15px,#b5e7ff 30px);}
.cStrength h2{ padding: .7em 0; font-size: 3.7vw; font-weight: 600; text-align: center; color: #ffffff; background: #f56b6c;}
.cPoint{ margin: 6% 0;}
.cPoint02{ margin-top: 10%;}
.cPoint .cMidashi{ width: 80%; margin: 0 auto 4%;}
.cPoint01 h4{ width: 19.11%; margin: 0 auto 3%;}

.cPoint01 .cWork01{ padding: 6% 0; position: relative; overflow: hidden; background: #ffffff;}
.cPoint01 .loopList{ width: max-content; display: flex; animation : scroll-left 20s infinite linear 0.5s both;}
.cPoint01 .loopItem{ width: 50vw; margin: 0 4% 0 0; aspect-ratio: 1/1;}
.cPoint01 .loopWrap{ display: flex; overflow: hidden;}
@keyframes scroll-left { from { transform: translateX(0);} to { transform: translateX(-100%);}}

.cPoint01 .cWork02{ width: 93.33%; margin: 2% auto 0; display: flex; justify-content: space-between; gap: 1.5%;}
.cPoint01 .cWork02 li{ padding: 2%; background: #ffffff;}
.cPoint01 .cWork02 li:hover{ background: #eaf4fb}
.cPoint01 .cWork02 li img:nth-child(2){ width: 50%; margin: 5% 0;}
.cPoint01 .cWork02 li p{ font-size: 3.3vw; font-weight: 500; line-height: 1.3;}
.cPoint01 .cWork02 li em{ margin-left: -.5em;}
.cPoint01 .cTxt{ padding: 1em 0; font-size: 3.2vw; font-weight: 500; text-align: center; line-height: 1.4; color: #4d4d4d;}

.cPoint02 .cWork{ width: 93.33%; margin: auto;}
.cPoint02 .cWork:not(.cQR){ margin-top: 8%;}
.cPoint02 .cTtl{ width: 100%; margin: 0 0 2.5%; padding: 1em; font-size: 3.7vw; line-height: 1.3; text-align: center; background: #009fd9; color: #ffffff; font-weight: 500; border-radius: 2.2vw;}
.cPoint02 .cTtl em,
.cPoint02 .cTtl i{ color: #ffe100; font-style: normal; font-weight: 700;}
.cPoint02 .cTtl em{ font-size: 1.4em;}
.cPoint02 .cTtl span{ margin: .4em 0 0; padding: .6em 0 0; border-top: 1px solid #ffffff;}
.cPoint02 .cTtl span small{ font-size: .86em; display: block;}
.cPoint02 .cTtl02{ background: #004ab9;}
.cPoint02 .cTtl02 em{ margin-left: -.5em;}
.cPoint02 .cTtl02 b{ font-size: 1.29em; font-weight: 600;}
.cPoint02 .cContent{ width: 100%; padding: 1.3em 5%; background: #ffffff; border-radius: 2.2vw;}
.cPoint02 .cContent p{ font-size: 3.2vw; line-height: 1.3; display: block;}
.cPoint02 .cContent p em{ font-size: 1.25em; font-weight: 700; color: #4d4d4d; text-align: center; display: block;}
.cPoint02 .cContent p i{ margin-left: -.5em;}
.cPoint02 .cQR .cContent ul{ margin: 5% 0 0 0; display: flex; flex-wrap: wrap; gap: 5%;}
.cPoint02 .cQR .cContent li{ width: 21.25%; margin: 0 0 5% 0;}
.cPoint02 .cLottery .cContent{ padding: 5% 5.5%;}

.cPoint02 .cSNS .cContent{ margin-top: 5%; padding-bottom: 7%;}
.cPoint02 .cSNS .cLine{ margin-top: 0 !important;}
.cPoint02 .cSNS .cnt{ position: relative;}
.cPoint02 .cSNS .cnt.matter{ padding-bottom: 7vw;}
.cPoint02 .cSNS .cnt.solution{ padding-bottom: 12vw;}
.cPoint02 .cSNS .cnt:not(.result)::after{ content: ''; margin: 0 0 -3vw; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 6vw solid transparent; border-top: 6vw solid #b2e2f4;}
.cPoint02 .cSNS .mds{ padding: 3% 0; background: #15b535; border-radius: 1.5vw;}
.cPoint02 .cYt .mds{ background: #e83820;}
.cPoint02 .cGg .mds{ background: #3f82e3;}
.cPoint02 .cSNS .mds img{ width: auto; height: 4.4vw;}
.cPoint02 .cSNS .solution ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.cPoint02 .cSNS .solution li{ width: 47.89%; margin: 4.22% 0 0; position: relative;}
.cPoint02 .cSNS .solution li:not(:last-child)::after{ content: '';  display: block; position: absolute; top: 50%; right: -5.9vw; transform: translateY(-50%); border: 2.8vw solid transparent; border-left: 3.4vw solid #b3e7bd;}
.cPoint02 .cYt .solution li:not(:last-child)::after{ border-left-color: #f8c5ac;}
.cPoint02 .cGg .solution li:not(:last-child)::after{ border-left-color: #a0c1f1;}

.cPoint02 .cTotal .cTtl{ padding: .6em;}
.cPoint02 .cTotal .cTtl span{ margin: 0; padding: 0; font-size: 1.29em; border: none;}
.cPoint02 .cTotal .cContent{ padding: 1em 14% 0; background: none;}
.cPoint02 .cTotal .cContent p{ padding: 0 0 .4em; font-size: 3.7vw; font-weight: 700; text-align: center; color: #4d4d4d;}
.cPoint02 .cTotal .cContent li:not(:first-child){ margin: 1.4em 0 0;}

.cButton{ width: 93.33%; margin: auto;}

@media screen and (min-width: 721px){
.cStrength{ padding: 0 0 5%;}
.cStrength h2{ font-size: 3.4vw;}
.cPoint{ margin: 4% auto 5%;}
.cPoint .cMidashi{ width: 67.2%; max-width: 672px; margin: 0 auto 2.5%;}
.cPoint01 h4{ width: 14.4%; max-width: 144px; margin: 0 auto 2%;}

.cPoint01 .cWork01{ padding: 2% 0;}
.cPoint01 .loopItem{ width: 22vw; margin: 0 3.5% 0 0;}
.cPoint01 .cWork02{ width: 100%; max-width: 1000px;}
.cPoint01 .cWork02 li img:nth-child(2){ width: 30%; margin: 4% 0 2%;}
.cPoint01 .cWork02 li p{ font-size: 1.8vw;}
.cPoint01 .cTxt{ font-size: 2.2vw;}

.cPoint02 .cWork{ width: 98%; max-width: 1000px;}
.cPoint02 .cWork:not(.cQR){ margin-top: 5%;}
.cPoint02 .cTtl{ margin: 0 0 1%; padding: .5em 5.9% .8em; font-size: 2vw; border-radius: 2vw;}
.cPoint02 .cTtl em{ margin: 0 0 0 .8em; font-size: 1.3em;}
.cPoint02 .cTtl span{ font-size: .73em;}
.cPoint02 .cTtl02 em{ margin: 0;}
.cPoint02 .cTtl02 b{ font-size: 1em;}
.cPoint02 .cContent{ padding: 3% 5%;}
.cPoint02 .cContent p{ font-size: 1.7vw; line-height: 1.4;}
.cPoint02 .cContent p em{ font-size: 1.29em; line-height: 1.5;}
.cPoint02 .cQR .cContent ul{ margin: 2.5% 0 0 0; gap: 2.5%;}
.cPoint02 .cQR .cContent li{ width: calc(87.5% / 6); margin: 0 0 2.5%;}
.cPoint02 .cLottery .cContent{ padding: 5% 6%;}

.cPoint02 .cSNS .cContent{ margin-top: 4%; padding: 4% 5.9% 5%;}
.cPoint02 .cSNS .matter{ width: 72.3%; margin: auto;}
.cPoint02 .cSNS .cYt .matter{ width: 73.8%;}
.cPoint02 .cSNS .cnt:not(.result){ padding-bottom: 4.5vw;}
.cPoint02 .cSNS .cnt.solution{ padding-bottom: 8vw;}
.cPoint02 .cSNS .cnt:not(.result)::after{ margin: 0 0 -1.5vw; border-width: 4vw; border-top-width: 3.5vw;}
.cPoint02 .cSNS .mds{ padding: 1.5% 0; border-radius: 1vw;}
.cPoint02 .cSNS .mds img{ height: 2vw;}
.cPoint02 .cSNS .cGg .mds img{ height: 2.2vw;}
.cPoint02 .cSNS .solution li{ width: 23.46%; margin: 2% 0 0}
.cPoint02 .cSNS .solution li:not(:last-child)::after{ right: -2.9vw; border-width: 1.4vw; border-left-width: 1.7vw;}
.cPoint02 .cSNS .result{ width: 66.4%; margin: auto;} 

.cPoint02 .cTotal .cTtl span{ font-size: .73em;}
.cPoint02 .cTotal .cContent{ padding: 1.4em 0 0;}
.cPoint02 .cTotal .cContent p{ font-size: 1.7vw;}
.cPoint02 .cTotal .cContent ul{ display: flex; gap: 1.4%; justify-content: space-between;}
.cPoint02 .cTotal .cContent li:not(:first-child){ margin: 0;}

.cButton{ width: 49%; max-width: 490px;}
.cButton a{ position: relative;}
.cButton a::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/button_hover.webp") no-repeat 50% 50% / 100% auto; opacity: 0; transition: .3s ease-in-out;}
.cButton a:hover::after{ opacity: 1;}
}
@media screen and (min-width: 1001px){
.cStrength h2{ font-size: 34px;}
.cPoint01 .cWork02 li p{ font-size: 18px;}
.cPoint01 .cTxt{ font-size: 22px;}
.cPoint02 .cTtl{ font-size: 30px; border-radius: 20px;}
.cPoint02 .cContent p,
.cPoint02 .cTotal .cContent p{ font-size: 17px;}
.cPoint02 .cSNS .cnt:not(.result){ padding-bottom: 45px;}
.cPoint02 .cSNS .cnt.solution{ padding-bottom: 80px;}
.cPoint02 .cSNS .cnt:not(.result)::after{ border-width: 40px; border-top-width: 35px;}
.cPoint02 .cSNS .mds{ border-radius: 10px;}
.cPoint02 .cSNS .mds img{ height: 20px;}
.cPoint02 .cSNS .cGg .mds img{ height: 22px;}
}

/*お悩み*/
.cNayami{ padding: 8% 0 10%; background-image: radial-gradient(#e2f7e8 20%, transparent 0); background-size: 5vw 5vw;}
.cNayami h2{ width: 89.55%; margin: auto;}
.cNayami .nayami{ width: 93.33%; max-width: 1000px; margin: 6% auto 10%; padding: 4% 2% 5%; background: #fff; border-radius: 15vw; border: .6vw solid #3cc864; position: relative;}
.cNayami .nayami::before,
.cNayami .nayami::after{ content: ''; margin: 0 0 -5vw; display: block; position: absolute; bottom: -4.4vw; left: 50%; transform: translateX(-50%); border: 4vw solid transparent; border-top: 6vw solid #ffffff; z-index: 3;}
.cNayami .nayami::before{ margin: 0 0 -5.9vw; border-top-color: #3cc864;}
.cNayami .kaiketsu span{ width: 78.2%; margin: auto;}
.cNayami .kaiketsu span:nth-child(2){ width: 39.11%; margin-top: 3%;}
.cNayami .txt{ width: 93%; margin: 5% auto 6.25%; font-size: 4.8vw; font-weight: 400; line-height: 1.3;} 
.cNayami .txt span{ margin: .3em 0 0; display: flex; align-items: baseline; color: #4d4d4d; letter-spacing: -.03em;}
.cNayami .txt span::before{ content: ''; height: .9em; aspect-ratio: 1/1; margin: 0 .5em 0 0; background: url("../img/ico_check.webp") no-repeat 50% / 100%;}

@media screen and (min-width: 721px){
.cNayami{ padding: 4% 0 5%; background-image: radial-gradient(#e2f7e8 20%, transparent 0); background-size: 2.5vw 2.5vw;}
.cNayami h2{ width: 67.4%; max-width: 674px;}
.cNayami .nContent{ max-width: 1000px; margin: auto;}
.cNayami .nayami{ margin: 4% auto; padding: 3% 5.45%; border-radius: 18vw; border-width: .5vw;}
.cNayami .nayami::before,
.cNayami .nayami::after{ margin: 0 0 -2.6vw; bottom: -1.75vw; border-width: 2vw; border-top-width: 3vw;}
.cNayami .nayami::before{ margin: 0 0 -3.5vw;}
.cNayami .kaiketsu{ width: 81.2%; margin: auto; display: flex; justify-content: space-between; align-items: center;}
.cNayami .kaiketsu span{ width: 58%; margin: 0;}
.cNayami .kaiketsu span:nth-child(2){ width: 25.36%; margin: 0 5% 0 0;}
.cNayami .txt{ width: 95%; margin: 3% auto 6%; font-size: 2.5vw;}
.cNayami .txt span::before{ height: 1em; margin: 0 .35em 0 0;}
}

@media screen and (min-width: 1001px){
.cNayami{ background-size: 25px 25px;}
.cNayami .nayami{ width: 100%; border-radius: 188px; border-width: 5px;}
.cNayami .nayami::before,
.cNayami .nayami::after{ margin: 0 0 -26px; bottom: -17.5px; border-width: 20px; border-top-width: 30px;}
.cNayami .nayami::before{ margin: 0 0 -35px;}
.cNayami .txt{ font-size: 25px;}
}

/*流れ*/
.cNagare{ padding: 10% 0; background: #f7f7b5;}
.cNagare h2{ width: 65.55%; margin: 0 auto 5%;}
.cNagare ul{ width: 91.3%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.cNagare li{ width: 48%; margin: 5% 0 0; position: relative;}
.cNagare li::after{ content: ''; width: 9.1vw; aspect-ratio: 1/1; display: block; position: absolute; top: -5%; left: -5%; background: url("../img/no01.webp") no-repeat 50% / 100%;}
.cNagare li:nth-child(2):after{ background: url("../img/no02.webp") no-repeat 50% / 100%;}
.cNagare li:nth-child(3):after{ background: url("../img/no03.webp") no-repeat 50% / 100%;}
.cNagare li:nth-child(4):after{ background: url("../img/no04.webp") no-repeat 50% / 100%;}
.cNagare li img{ overflow: hidden; border-radius: 3vw;}

@media screen and (min-width: 721px){
.cNagare{ padding: 4% 0;}
.cNagare h2{ width: 49.4%; max-width: 494px; margin: 0 auto 3.5%;}
.cNagare ul{ width: 93.3%; max-width: 1000px;}
.cNagare li{ width: 23.8%; margin: 0;}
.cNagare li::after{ width: 4.9vw;}
.cNagare li img{ border-radius: 2vw;}
}
@media screen and (min-width: 1001px){
.cNagare li::after{ width: 49px;}
.cNagare li img{ border-radius: 20px;}
}

/*実績*/
.cJisseki{ padding: 10% 0; background: repeating-linear-gradient( 45deg,#ffffff, #ffffff 12px,#fdf6fa 12px,#fdf6fa 15px);}
.cJisseki h2{ width: 29.33%; margin: 0 auto 5%;}
.cJisseki ul{ width: 93.3%; margin: auto;}
.cJisseki li:not(:first-child){ margin: 4% 0 0;}

@media screen and (min-width: 721px){
.cJisseki{ padding: 4% 0; background: repeating-linear-gradient( 45deg,#ffffff, #ffffff 16px,#fdf6fa 16px,#fdf6fa 20px);}
.cJisseki h2{ width: 22.2%; max-width: 222px; margin: 0 auto 3%;}
.cJisseki ul{ max-width: 1000px; display: flex; justify-content: space-between;}
.cJisseki li{ width: 32.3%; margin: 0 !important;}
}

/*お申し込みフォーム*/
.form{
	background-color: #e6e6e6;
	padding: 55px 15px;	
}
.form .wrap{
	max-width: 1000px;
	margin: 0 auto;
}

/*コンタクト　＋　Footer*/
.cContact{ padding: 10% 0 6%;}
.cContact p{ padding: 7% 0 0; font-size: 4.2vw; font-weight: 500; line-height: 1.4; text-align: center; color: #464646;}
.cContact span{ margin: .3em 0 0; font-size: 2.1em; font-weight: 700; display: flex; justify-content: center; gap: 3%;}
.cContact span::before{ content: ''; width: 12.4vw; aspect-ratio: 1/1; background: url("../img/ico_phone.webp") no-repeat 50% / 100% auto;}
.cFooter span{ padding: 1.2em 0; font-size: 4.2vw; text-align: center; color: #fff; background: #000;}

@media screen and (max-width: 720px){
.cFooter::after{ content: ''; width: 100vw; aspect-ratio: 450/120; display: block; background: #fff;}
.cBanner{ width: 100%; aspect-ratio: 450/120; position: fixed; bottom: 0; left: 0; display: flex; z-index: 9;}
.cBanner a{ width: 50%;}
}
@media screen and (min-width: 721px){
.cContact{ padding: 5% 0;}
.cContact p{ padding: 2% 0 0; font-size: 2.6vw;}
.cContact span::before{ width: 8vw;}
.cFooter span{ font-size: 1.9vw;}
.cBanner{ display: none;}
}
@media screen and (min-width: 1001px){
.cContact p{ font-size: 26px;}
.cContact span::before{ width: 80px;}
.cFooter span{ font-size: 19px;}
}