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

html{scroll-behavior: smooth;}
a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;}
.cb {clear: both;}
.marker {font-weight: 600; background:linear-gradient(transparent 60%, #ffff7c 60%);}
.stripe-marker {font-weight: 600; background-image: repeating-linear-gradient(-45deg, #55565a 0, #55565a 1px, transparent 2px, transparent 3px); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 0.2em;}
sup {font-size: 40%; font-weight: 400;}
.plg_Raku2_LC_Page_Products_Detail #container {width: 100%; max-width: 100%; min-width: 1000px;}
.teiki_second_total {display:none;}
#logo_area_lp img {width: 130px; max-height: 190px; margin: 30px auto 0;}
.uservoice {width: 100%; margin: 70px auto 0; padding: 50px 0; text-align: center; background-color: #EEEDE6;}
.uservoice>.uservoice_inner {width: 600px; margin: 0 auto; padding: 0;}
.uservoice>.uservoice_inner>img {width: 100%;}
.photo img, .sub_photo img {border: none;}
#fixed_link {right: 0; transition: 0.5s;}
ul#fixed_link li a {border-radius: 0;　font-size: 14px;}

.pcbr {display: block;}/* PC改行*/
.spbr {display: none;}/* スマホ改行解除*/

@media screen and (max-width: 1300px) {
.pcbr {display: none;}/* PC改行解除*/
.spbr {display: block;}/* スマホ改行*/
}

/*////////////// Design //////////////*/
#wdretinallp {width: 100%; margin: 0 auto 80px; padding: 0; background-color: #d5dde3;}
.notesWrap {width: 800px; margin: 0 auto 0; padding: 0;}
.notesWrap>.notes {margin: 0 auto 0; color: #55565a; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 400; font-size: 10px; line-height: 1.4; text-align: center;}
#wdretinallp>section {width: 800px; margin: 0 auto; padding: 0; text-align: center; background-color: #ffffff;}
#wdretinallp>section>img,
#wdretinallp>section>div>img {width: 100%; margin: 0 auto;}

#wdretinallp>#fv {width: 800px; margin: 0 auto; padding: 0; text-align: center;}
#wdretinallp>#fv>img {width: 100%;; margin: 0 auto;}
.top_offerArea {width: 100%; margin: 0 auto; padding: 0 0 0; background-color: #ffffff; /*background-color: #A1BBD1;*/}
.top_offerArea>a>img {width: 500px; margin: 0 auto;}
.top_offerArea>a:hover>img,
.level-select>a:hover>img {transform: scale(1.05); transition: transform 0.2s ease-in-out;}
.offerArea {width: 800px; margin: 0 auto; padding: 40px 0 100px !important;}
.offerArea>.content {width: 90%; margin: 0 auto; padding: 80px 0 0; border: 2px solid #6A8BB1; text-align: center; background-image: url(https://with-dr.influencer-d.com/user_data/packages/raku2pc/img/lp/wdretinal/offer_bg.webp); background-repeat: no-repeat; background-position: top; background-size: 100%;}
.offerArea>.content>img {width: 100%;; margin: 0 auto;}
.offerArea>.content>a>img {width: 500px; margin: 0 auto;}
.offerArea>.content>a:hover>img {transform: scale(1.05); transition: transform 0.2s ease-in-out;}
.level-select {width: 90%; margin: 0 auto; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center;}
.level-select>a>img {width: 100%;; margin: 0 auto;}

#doctor {width: 95%; margin: 0 auto 100px; padding: 0; text-align: center;}
/*//////// doctorSlider ////////*/
#doctor>.doctortop {width: 840px; margin: 0 auto 20px;}
#doctor>.doctoretc {width: 70%; margin: 20px auto 0;}
#doctor>.content-pc {display: block; width: 100%; max-width: 100%; margin: 0 auto; align-items: center; justify-content: center;}
#doctor>.content-pc>img {width: 100%; margin: 0 auto;}
#doctor>.content-sp {display: none;}
.dr-slide>img {width: 100%; margin: 0 auto; align-items: center; justify-content: center;}
/* arrow */
#doctor>.content-sp>.dr-slider>.slick-arrow {z-index: 2; top: 50%; margin-top: -10px; width: 10px; height: 10px; border-top: 2px solid #000000; border-right: 2px solid #000000; opacity: .8;}
#doctor>.content-sp>.dr-slider>.slick-arrow::before {content: '';}
#doctor>.content-sp>.dr-slider>.slick-prev {left: 0; transform: rotate(-135deg);}
#doctor>.content-sp>.dr-slider>.slick-next {right: 0; transform: rotate(45deg);}
/* dots */
#doctor>.content-sp>.dr-slider>.slick-dots {bottom: -25px;}
#doctor>.content-sp>.dr-slider>.slick-dots li,
#doctor>.content-sp>.dr-slider>.slick-dots li button,
#doctor>.content-sp>.dr-slider>.slick-dots li button::before{width: 10px; height: 10px;}
#doctor>.content-sp>.dr-slider>.slick-dots li {margin: 0 7px;}
#doctor>.content-sp>.dr-slider>.slick-dots li button {background-color: #6A8BB1; opacity: .4; border-radius: 100%;}
#doctor>.content-sp>.dr-slider>.slick-dots li.slick-active button {opacity: 1.0;}
#doctor>.content-sp>.dr-slider>.slick-dots li button::before {content: '';}

@media only screen and (max-width: 1200px) {
#doctor {width: 100%;}
#doctor>.doctortop {width: 90%; margin: 0 auto 20px;}
#doctor>.content-pc {display: none;}
#doctor>.content-sp {display: block; width: 100%; max-width: 100%; margin: 0 auto; align-items: center; justify-content: center;}
.slick-slide img {display: block; margin: 0 2% 20px;}
.dr-slide>img {width: 95%;}
}

/* スライドアニメーションの設定 */
@keyframes dr-animation {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
}
/* スライダーを表示する親コンテナ */
#doctor>.dr-smoothslide {display: flex; overflow: hidden;}
/* スライダー本体 */
#doctor>.dr-smoothslide>.slider-wrapper {display: flex; animation: dr-animation 90s linear infinite;}
/* スライドコンテンツ */
#doctor>.dr-smoothslide>.slider-wrapper>.slide {width: 450px; margin: 0 auto;}
#doctor>.dr-smoothslide>.slider-wrapper>.slide img {width: 100%; height: auto; vertical-align: bottom;}
#doctor>.dr-smoothslide>.slider-wrapper>.slide>p {margin: 5px auto 0; padding: 0; color: #000000; font-size: 16px; font-family: "Montserrat", "Noto Sans JP", sans-serif; font-weight: 400; letter-spacing: 0.05em; line-height: 1.6; text-align: center;}
#doctor>.dr-smoothslide>.slider-wrapper>.slide>p>span {display: block; margin: 0 auto 0; padding: 0; font-size: 70%;}
/* ホバー時の一時停止用 ※任意 */
@media (hover: hover) {
#doctor>.dr-smoothslide:hover .slider-wrapper {animation-play-state: paused;}
}

@media only screen and (max-width: 1000px) {
#doctor>.dr-smoothslide>.slider-wrapper>.slide {width: 380px;}
}

.offerbtn_box {width: 400px; position: fixed; bottom: 0; opacity: 0; z-index: -1; transition: 0.3s; right: 2%;}
.offerbtn_box.fixed {opacity: 1; z-index: 9;}
.offerbtn_box>a>img {width: 100%;}
.offerbtn_box>a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;}