@charset "utf-8"; 

button{background:none; padding:0; outline:none;}

#std .top-intro { color: #fff; } 

.container-4{width:1410px; margin:0 auto;}

/* section-2 */
#std .section-2{margin-top:250px;}
#std .section-2 .section-tit { text-align: center; margin-bottom: 100px; opacity: 0; transform: translateY(80px);} 
#std .section-2 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; line-height: 1; display: block;} 
#std .section-2 .typeTabs{display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; width:830px; margin:0 auto 20px auto; opacity: 0; transform: translateY(80px);}
#std .section-2 .typeTabs button{display:inline-block; font-size:19px; font-weight:400; letter-spacing:-0.025em; line-height:1; color:#333; margin-right:19px; padding:0 5px; margin-bottom:20px;}
#std .section-2 .typeTabs button:nth-child(7), #std .section-2 .typeTabs button:last-child{margin-right:0;}
#std .section-2 .typeTabs button.on{color:#900021; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:2px;}
#std .section-2 .typeSlideBg{width:100%; height:auto; padding:0 87px; position:relative; opacity: 0; transform: translateY(80px);}
#std .section-2 .typeSlideBg .typeSlideBox{width:100%; height:462px; overflow:hidden;}
#std .section-2 .typeSlideBg .typeSlideBox .typeSlide{width:100%; height:100%;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem{display:flex; align-items:center; width:100%; height:100%; border:1px solid #d4d4d4; border-radius:15px; overflow:hidden;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem img{display:inline-block; flex-shrink:0;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox{display:inline-block; flex-grow:1; padding:15px 70px; text-align:left;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dl{width:100%;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dt{display:inline-flex; justify-content:center; align-items:center; width:auto; height:55px; border-radius:27.5px; background:#900021; padding:0 40px; font-size:28px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#fff;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dd{margin-top:25px; color:#333;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dd strong{display:block; font-size:22px; font-weight:700; letter-spacing:-0.025em; line-height:1.454; margin-bottom:20px;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dd p{font-size:18px; font-weight:400; letter-spacing:-0.025em; line-height:1.666;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dd p + p{margin-top:12px;}
#std .section-2 .typeSlideBg .typeSlideBox .slideItem .textBox dd p .colorType2{color:#900021;}
#std .section-2 .typeSlideBg .typePrev, #std .section-2 .typeSlideBg .typeNext{display:inline-block; width:45px; height:86px; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:50%; transform:translateY(-50%); z-index:2;}
#std .section-2 .typeSlideBg .typePrev{background-image:url("/images/std/con02_prev.png"); left:0;}
#std .section-2 .typeSlideBg .typeNext{background-image:url("/images/std/con02_next.png"); right:0;}
#std .section-2.viewing .section-tit {opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#std .section-2.viewing .typeTabs{opacity: 1; transform: translateY(0px); transition: all 1s ease;}
#std .section-2.viewing .typeSlideBg{opacity: 1; transform: translateY(0px); transition: all 1s ease;}

.subText1{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.5; color:#333; opacity: 0; transform: translateY(80px); margin-top:65px; text-align:center;}
.subText1 .colorType2{color:#900021;}
.viewing .subText1{opacity: 1; transform: translateY(0px); transition: all 1s ease;}

/* section-3 */
#std .section-3 { margin-top: 240px;}
#std .section-3 .section-tit { text-align: center; opacity:0; transform:translateY(50px); } 
#std .section-3 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1;} 
#std .section-3 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px;} 
#std .section-3 .change-step-wrapper { margin-top: 90px; } 
#std .section-3 .change-step-wrapper .step { float: left; opacity: 0; transform: translateX(90px); } 
#std .section-3 .change-step-wrapper .step > p { margin-top: 30px; font-size: 30px; font-weight: bold; letter-spacing: -1px; line-height: 1; margin-bottom: 20px; } 
#std .section-3 .change-step-wrapper .step > span { font-size: 16px; color: #666; } 
#std .section-3 .change-step-wrapper .step-01, #std .section-3 .change-step-wrapper .step-02 { width: 429px; position: relative; } 
#std .section-3 .change-step-wrapper .step-01:after, #std .section-3 .change-step-wrapper .step-02:after { content: ""; position: absolute; width: 18px; height: 35px; background: url("/images/urolift_next_step_arrow.png"); right: 15px; top: 115.5px; } 
#std .section-3 .change-step-wrapper.viewing .step { opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#std .section-3 .change-step-wrapper.viewing .step-02 { transition-delay: 0.4s; } 
#std .section-3 .change-step-wrapper.viewing .step-03 { transition-delay: 0.8s; } 
#std .section-3.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }

/* section-4 */
#std .section-4 { margin-top: 180px; background:#f6f6f6; padding:95px 0 110px 0;}
#std .section-4 .section-tit { text-align: center; margin-bottom: 70px;  opacity: 0; transform: translateY(80px);} 
#std .section-4 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px; } 
#std .section-4 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1; } 
#std .section-4 .section-tit .lrg-txt .colorType2{color:#900020;}
#std .section-4 .imgBox1{display:flex; justify-content:center; width:100%; height:auto; margin-bottom:80px; opacity: 0; transform: translateY(80px);}
#std .section-4 .step-lists-wrap { position: relative; height: 238px; } 
#std .section-4 .step-lists-wrap .step-lists { position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 110px; } 
#std .section-4 .step-lists-wrap .step-lists span {position: absolute;top: 50%;transform: translateY(-50%); right: 70px; font-size: 18px; font-weight:400; letter-spacing:-0.025em; color: #fff; text-align: center; padding-top: 74px;} 
#std .section-4 .step-lists-wrap .step-lists span strong{display:inline-block; font-size:20px; font-weight:700; letter-spacing:-0.025em; line-height:1; margin-top:10px;}
#std .section-4 .step-lists-wrap .step-lists-1 { z-index: 500; background: #f47b96; max-width: 269px; } 
#std .section-4 .step-lists-wrap .step-lists-1 span { background: url("/images/std/con04_1.png") no-repeat center top;} 
#std .section-4 .step-lists-wrap .step-lists-2 { z-index: 400; background: #e85d7c; max-width: 506px; width: 269px; } 
#std .section-4 .step-lists-wrap .step-lists-2 span {background: url("/images/std/con04_2.png") no-repeat center top;right: 48px;}
#std .section-4 .step-lists-wrap .step-lists-3 { z-index: 300; background: #db2c53; max-width: 742px; width: 269px; } 
#std .section-4 .step-lists-wrap .step-lists-3 span { background: url("/images/std/con04_3.png") no-repeat center top; } 
#std .section-4 .step-lists-wrap .step-lists-4 { z-index: 200; background: #a71032; max-width: 999px; width: 269px; } 
#std .section-4 .step-lists-wrap .step-lists-4 span { background: url("/images/std/con04_4.png") no-repeat center top;} 
#std .section-4 .step-lists-wrap .step-lists-5 { z-index: 100; background: #900020; width: 269px; } 
#std .section-4 .step-lists-wrap .step-lists-5 span { background: url("/images/std/con04_5.png") no-repeat center top; right: 50px; } 
#std .section-4 .step-lists-wrap.viewing .step-lists { width: 100%; transition: width 1s linear;} 
#std .section-4 .step-lists-wrap.viewing .step-lists-2 {transition-delay: 0.2s;} 
#std .section-4 .step-lists-wrap.viewing .step-lists-3 {transition-delay: 0.4s;} 
#std .section-4 .step-lists-wrap.viewing .step-lists-4 {transition-delay: 0.6s;} 
#std .section-4 .step-lists-wrap.viewing .step-lists-5 {transition-delay: 0.8s;} 
#std .section-4 .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }
#std .section-4.viewing .imgBox1{ opacity:1; transform:translateY(0px); transition: all 1.5s ease; }


/* section-5 */
#std .section-5 {background:#f6f6f6; padding:110px 0 95px 0;}
#std .section-5 .section-tit { text-align: center; margin-bottom: 70px; opacity:0; transform:translateY(50px); } 
#std .section-5 .section-tit .lrg-txt { display: block; font-size: 48px; font-weight: bold; line-height: 1;} 
#std .section-5 .section-tit .sml-txt-2 { line-height: 1; margin-top: 50px; display: block; font-size: 22px;} 
#std .section-5 .treatmentList1{display:flex; justify-content:space-between; width:100%; margin:0 auto;}
#std .section-5 .treatmentList1 .listItem{display:inline-flex; flex-wrap:wrap; align-content:center; justify-content:center; width:calc(25% - 15px); background:#fff; padding:70px 10px; border-radius:16px; text-align:center; opacity:0; transform:translateY(50px); }
#std .section-5 .treatmentList1 .listItem img{display:block; margin-bottom:40px;}
#std .section-5 .treatmentList1 .listItem dl{width:100%; height:auto; color:#333;}
#std .section-5 .treatmentList1 .listItem dl dt{font-size:23px; font-weight:700; letter-spacing:-0.025em; line-height:1;}
#std .section-5 .treatmentList1 .listItem dl dd{font-size:20px; font-weight:400; letter-spacing:-0.025em; line-height:1; margin-top:12px;}
#std .section-5.viewing .treatmentList1 .listItem { opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#std .section-5.viewing .treatmentList1 .lists-2 { transition-delay: 0.25s; } 
#std .section-5.viewing .treatmentList1 .lists-3 { transition-delay: 0.5s; } 
#std .section-5.viewing .treatmentList1 .lists-4 { transition-delay: 0.75s; } 
#std .section-5.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }

/* section-6 */
#std .section-6 { margin-top: 260px;} 
#std .section-6 .section-tit { text-align: center; opacity: 0; transform: translateY(80px);} 
#std .section-6 .section-tit .lrg-txt { font-size: 48px; font-weight: bold; } 
#std .section-6 .section-tit .sml-txt-2 { line-height:1; margin-top: 50px; display: block; font-size: 22px; margin-bottom: 85px; } 
#std .section-6 .numberList{display:flex; flex-wrap:wrap; align-content:flex-start; width:100%; text-align:center; margin-top:85px;}
#std .section-6 .numberList .listItem{display:flex; align-items:center; width:100%; flex-direction:row-reverse; opacity:0; transform:translateY(50px);}
#std .section-6 .numberList .listItem + .listItem{margin-top:90px;}
#std .section-6 .numberList .listItem:nth-child(2n){flex-direction:row;}
#std .section-6 .numberList .listItem .textBox{width:50%;}
#std .section-6 .numberList .listItem .textBox dt{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; width:100%; height:auto;}
#std .section-6 .numberList .listItem .textBox dt span{display:inline-flex; justify-content:center; align-items:center; width:60px; height:32px; border-radius:16px; background:#900020; font-size:18px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#fff; margin-bottom:19px;}
#std .section-6 .numberList .listItem .textBox dt p{width:100%; font-size:42px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#333;}
#std .section-6 .numberList .listItem .textBox dd{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.636; color:#666; margin-top:32px;}
#std .section-6 .numberList .listItem .imgBox{width:50%;}
#std .section-6.viewing .section-tit { opacity:1; transform:translateY(0px); transition: all 1.5s ease; }
#std .section-6 .numberList.viewing .listItem{ opacity: 1; transform: translateX(0px); transition: all 1s ease; } 
#std .section-6 .numberList.viewing .lists-2{ transition-delay: 0.25s; } 
#std .section-6 .numberList.viewing .lists-3{ transition-delay: 0.5s; } 
#std .section-6 .numberList.viewing .lists-4{ transition-delay: 0.75s; }

/* section-7 */
#std .section-7 { margin-top: 260px;} 
#std .section-7 .imgTextBox1{display:flex; align-items:flex-start; width:1236px; height:auto; text-align:left;}
#std .section-7 .imgTextBox1 img{width:50%; opacity:0; transform:translateY(50px);}
#std .section-7 .imgTextBox1 .textBox{width:50%; box-sizing:border-box; padding:60px; opacity:0; transform:translateY(50px);}
#std .section-7 .imgTextBox1 .textBox h2{font-size:51px; font-weight:700; letter-spacing:-0.025em; line-height:1; color:#333; margin-bottom:58px;}
#std .section-7 .imgTextBox1 .textBox p{font-size:22px; font-weight:400; letter-spacing:-0.025em; line-height:1.5; color:#666;}
#std .section-7 .imgTextBox1 .textBox p + p{margin-top:30px;}
#std .section-7 .imgTextBox1 .textBox p span{background:#900020; color:#fff; padding:4px 2px; line-height:1; display:inline-block;}
#std .section-7.viewing .imgTextBox1 img{opacity: 1; transform: translateX(0px); transition: all 1s ease;}
#std .section-7.viewing .imgTextBox1 .textBox{opacity: 1; transform: translateX(0px); transition: all 1s ease;}


.youtubeBox{width:100%; height:auto; position:relative; padding-top:56.25%; overflow:hidden; margin-top:260px; transform:translateY(50px); opacity:0;}
.youtubeBox iframe{width:100%; height:100%; position:absolute; top:0; left:0;}
.viewing .youtubeBox{opacity:1; transform:translateY(0px); transition: all 1.5s ease .3s; }