:root {
  --wt1 :rgba(255,255,255,1);
  --bk1 :rgba(70,70,70,1);
  --gray1 :rgba(160,160,160,1);
  --pink1 :rgba(235,130,130,1);
  --beige1 :rgba(150,125,125,1);
  --beige2 :rgba(248,245,238,1);
  --green1 :rgba(105,145,120,1);
	--orange1 :rgba(255,100,65,1);
  --line :rgba(55,192,49,1);
  --swiper-theme-color :rgba(255,255,255,0);
  --swiper-pagination-color :rgba(70,70,70,1);
}

/* ----- color ----- */
body { background-color: var(--wt1)}
#wrapper { background-color: var(--wt1)}

.color-wt1 { color: var(--wt1) !important }
.color-bk1 { color: var(--bk1) !important }
.color-gray1 { color: var(--gray1) !important }
.color-pink1 { color: var(--pink1) !important }
.color-beige1 { color: var(--beige1) !important }
.color-green1 { color: var(--green1) !important }
.color-line { color: var(--line) !important }

.bg-color-wt1 { background-color: var(--wt1) !important }
.bg-color-bk1 { background-color: var(--bk1) !important }
.bg-color-pink1 { background-color: var(--pink1) !important }
.bg-color-beige1 { background-color: var(--beige1) !important }
.bg-color-beige2 { background-color: var(--beige2) !important }
.bg-color-orange1 { background-color: var(--orange1) !important }
.bg-color-line { background-color: var(--line) !important }

.bg-grad-c1 { background: linear-gradient(to bottom, rgb(248,245,238) 0%,
	rgb(248,228,228) 50%,	rgb(248,245,238) 100% )}
.bg-grad-c2 {	background: linear-gradient(to bottom, rgb(215,209,227), rgb(248,245,238))}
.bg-grad-c3 { background: linear-gradient(135deg, rgb(235,190,115), rgb(220,100,85))}
.bg-img-c1 { background: url("../img/top-trial-bg1.webp") no-repeat; background-size: cover }

.border-c1 { border: solid 1px rgba(255,255,255,0.75)}


/* ----- unique ----- */
.sec-sp-c1 { margin: auto; width: 100%; position: relative }
@media screen and ( min-width: 576px ) { .sec-sp-c1 { margin-right: 0; width: 390px }}
@media screen and ( min-width: 1200px ) { .sec-sp-c1 { margin: auto; width: 390px }}

.icon-pill-c1 { padding: 5px 10px 4px; color: var(--wt1); background-color: var(--pink1);
	border-radius: 50px; display: inline-block; letter-spacing : 0.075rem !important }
.frame-c1 { margin-top: -10px; padding: 25px 0; border: solid 1px var(--pink1); border-radius: 10px;
	background: linear-gradient(135deg, rgb(255,240,235), rgb(255,255,240))}

.point-wrap { border-radius: 30px }
.point-logo { width: 120px }
.point-tit { display: inline-block; padding: 20px 30px; color: var(--beige1); background-color: var(--wt1);
	border: solid 1px var(--beige1); border-radius: 50px }

.btn-c1 { height: 75px; border-radius: 50px; background: linear-gradient(135deg, rgb(235,190,115), rgb(220,100,85));
	box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.2), 3px 3px 8px rgba(255,255,255,0.7) inset }
.btn-icon-c1 { width: 25px }
.pc-btn-c1 { border: solid 1px var(--line)}
.footer-btn-c1 { width: 182px; height: 44px; border-radius: 3px; box-shadow: 0px 8px 5px -6px rgba(0, 0, 0, 0.2)}
@media screen and ( max-width: 380px ) { .footer-btn-c1 { width: auto; padding: 0 15px }}

.icon-c1 { width: 25px }
.icon-qa-c1 { width: 35px }
.uline-c1 { margin: 30px 0; border-bottom: solid 1px rgba(85,80,80,0.3)}
.uline-c2 { padding-bottom: 5px; border-bottom: solid 1px rgba(85,80,80,0.3)}

.accordion-item { border: solid 2px var(--pink2)}
.accordion-button:not(.collapsed) { background-color: var(--pink3); box-shadow: none !important }
.accordion-button:focus { box-shadow: none !important; outline: none !important; border: none }

.footer-link ul li { line-height: 2.3 }
.footer-fix-c1 { width: 100%; height: 60px; position: fixed; bottom: 0; left: 0; z-index: 9999 }

.pc-logo { width: 120px }
.pc-view-c1 { position: fixed; top: 15px; right: 30px }
@media screen and ( min-width: 1400px ) { .pc-view-c1 { position: fixed; top: 30px; right: 60px }}
.pc-view-c2 { position: fixed; bottom: 30px; right: 30px }
@media screen and ( min-width: 1400px ) { .pc-view-c2 { position: fixed; bottom: 60px; right: 60px }}
.pc-nav-c1 { position: fixed; top: 30px; left: 30px }
@media screen and ( min-width: 1400px ) { .pc-nav-c1 { position: fixed; top: 60px; left: 60px }}
.pc-nav-c1 li { font-size: 15px; line-height: 2.8 }


/* ----- header + mv ----- */
.header-logo { width: 90px }
.header-nav-c1 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 0 }
.hbg-c1 { display: flex; width: 50px; height: 50px; padding-right: 12px; padding-top: 2px;
  margin-right: 12px; margin-top: 12px; justify-content: flex-end; align-items: center;
  z-index: 100; cursor: pointer; background-color: var(--pink1); border-radius: 50px }
.hbg-c1 span,
.hbg-c1 span:before,
.hbg-c1 span:after { content: ''; display: block; height: 2px; width: 28px; background: var(--wt1); transition: .3s; position: absolute; z-index: 9999 }
.hbg-c1 span { background: rgba(255,255,255,0)}
.hbg-c1 span:before { bottom: 3px }
.hbg-c1 span:after { top: 3px }
.hbg-c1.op span { background: rgba(255,255,255,0)}
.hbg-c1.op span::before { bottom: 0; transform: rotate(45deg); background: var(--wt1)}
.hbg-c1.op span::after { top: 0; transform: rotate(-45deg); background: var(--wt1)}
.gnav-c1 { position: absolute; top:100%; right: -100%; background-color: var(--pink1); height: 100vh; width: 100%; transition: .4s ease-in-out; opacity: 0 }
.gnav-c1.active { right: 0; opacity: 1 }
.gnav-c1 ul li { margin-bottom: 30px; padding-left: 50px; white-space: nowrap; color: var(--wt1); text-align: left }


/* swiper */
.swiper-button-prev, .swiper-button-next { height: 45px; width: 45px; top: 40% }
.swiper-button-prev::after, .swiper-button-next::after { background-repeat: no-repeat; background-size: contain;
  content: ""; height: 45px; margin: -20px; width: 45px }
.swiper-button-prev::after { background-image: url("../img/swiper-left.svg"); background-repeat: no-repeat }
.swiper-button-next::after { background-image: url("../img/swiper-right.svg"); background-repeat: no-repeat }