@charset "utf-8";

/* ==================================================
施術の流れスライダー（include-flow_slider.php）用 css
===================================================== */

:root {
    --font-yu-gothic: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

.flow__slider_wrap {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-top: min(75px, calc(calc(75/750) * 100vw));
    padding-bottom: min(90px, calc(calc(90/750) * 100vw));
    position: relative;
    z-index: 1;
}
.flow__slider_wrap.white_ {
    background: #fff;
}
.flow__slider_wrap.pink_ {
    background: #FEF3F3;
}
.flow__slider_wrap.blue_ {
    background: #ECF6FF;
}

.flow__slider_ttl {
    margin-bottom: min(68px, calc(calc(68/750) * 100vw));
}
.flow__slider_ttl h2 {
    text-align: center;
    color: #3D3D3D;
    font-family: var(--font-yu-gothic)!important;
    font-size: min(42px, calc(calc(42/750) * 100vw));
    font-weight: 600;
    letter-spacing: min(3px, calc(calc(3/750) * 100vw));
    margin-bottom: min(20px, calc(calc(20/750) * 100vw));
}

.flow__slider_wrap .slick-slider {
    width: 100%;
}

.flow__slider li {
    width: min(750px, calc(calc(750/750) * 100vw))!important;
    padding: 0 min(60px, calc(calc(60/750) * 100vw));
    box-sizing: border-box;
    height: min(1005px, calc(calc(1005/750) * 100vw));
}
.flow__slider li.falf_l {
    padding: 0 0 0 min(60px, calc(calc(60/750) * 100vw));
}
.flow__slider li.falf_r {
    padding: 0 min(60px, calc(calc(60/750) * 100vw)) 0 0;
}

.flow__slider_frame {
    border: 1px solid #FF7878;
    border-radius: min(30px, calc(calc(30/750) * 100vw));
    padding: min(30px, calc(calc(30/750) * 100vw));
    box-sizing: border-box;
    height: 100%;
}
.pink_ .flow__slider_frame {
    border: 1px solid #fff;
    background: #fff;
}
.blue_ .flow__slider_frame {
    border: 1px solid #fff;
    background: #fff;
}

.falf_l .flow__slider_frame {
    border-radius: min(30px, calc(calc(30/750) * 100vw)) 0 0 min(30px, calc(calc(30/750) * 100vw));
    border-right: 0;
    padding-right: min(90px, calc(calc(90/750) * 100vw));
}
.falf_r .flow__slider_frame {
    border-radius: 0 min(30px, calc(calc(30/750) * 100vw)) min(30px, calc(calc(30/750) * 100vw)) 0;
    border-left: 0;
    padding-left: min(90px, calc(calc(90/750) * 100vw));
}

.flow__slider_img {
    margin-bottom: min(69px, calc(calc(69/750) * 100vw));
}
.flow__slider_frame h3 {
    text-align: center;
    color: #3D3D3D;
    font-family: var(--font-yu-gothic)!important;
    font-size: min(36px, calc(calc(36/750) * 100vw));
    font-weight: 600;
    line-height: 1.33;
    border-bottom: 1px solid #FF7878;
    padding-bottom: min(10px, calc(calc(10/750) * 100vw));
    margin-bottom: min(40px, calc(calc(40/750) * 100vw)); 
}
.pink_ .flow__slider_frame h3 {
    border-bottom: 1px solid #FF6D86;
}
.blue_ .flow__slider_frame h3 {
    border-bottom: 1px solid #6DC0FF;
}

.flow__slider_frame p {
    font-family: var(--font-yu-gothic)!important;
    font-size: min(26px, calc(calc(26/750) * 100vw));
    font-weight: 500;
    line-height: 2.1;
    letter-spacing: min(1.8px, calc(calc(1.8/750) * 100vw));
}

.flow__slider_frame p span {
    font-family: var(--font-yu-gothic)!important;
    color: #FF7878;
}
.pink_ .flow__slider_frame p span {
    color: #FF6D86;
}
.blue_ .flow__slider_frame p span {
    color: #6DC0FF;
}


/* ページ送り */

.flow__slider .slick-disabled {
    display: none!important;
}
.flow__slider .slick-arrow {
    width: min(60px, calc(calc(60/750) * 100vw));
    height: min(104px, calc(calc(104/750) * 100vw));
    z-index: 5;
}
.white_ .flow__slider .slick-arrow {
    background: #FF7878!important;
}
.pink_ .flow__slider .slick-arrow {
    background: #FF6D86!important;
}
.blue_ .flow__slider .slick-arrow {
    background: #6DC0FF!important;
}

/* slick.css用 */
.flow__slider .slick-prev,
.flow__slider .slick-next {
    border: none;
    cursor: pointer;
    display: block;
    font-size: 0;
    /* height: 20px; */
    line-height: 0px;
    padding: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /* width: 20px; */
}

.flow__slider .slick-prev {
    left: 0!important;
}
.flow__slider .slick-next {
    right: 0!important;
}
.flow__slider .slick-prev::before,
.flow__slider .slick-next::before {
    content: "";
    width: min(30px, calc(calc(30/750) * 100vw));
	height: min(30px, calc(calc(30/750) * 100vw));
	border-top: min(3px, calc(calc(3/750) * 100vw)) solid #fff;
	border-right: min(3px, calc(calc(3/750) * 100vw)) solid #fff;
    position: absolute;
    top: 0;
	bottom: 0;
	margin: auto;
    -webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.flow__slider .slick-next::before {
    right: min(20px, calc(calc(20/750) * 100vw));
}
.flow__slider .slick-prev::before {
	left: min(20px, calc(calc(20/750) * 100vw));
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

/* ページネーション */
.flow-dots {
    position: relative;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.flow-dots li {
    position: relative;
    display: inline-block;
    width: clamp(3px,1.6vw,16px);
    height: clamp(3px,1.6vw,16px);
    padding: 5px;
    cursor: pointer;
}
.flow-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.flow-dots li button:hover,
.flow-dots li button:focus {
    outline: none;
}
.flow-dots li button:hover::before,
.flow-dots li button:focus::before {
    opacity: 1;
}
.flow-dots li.slick-active button::before {
    opacity: 1;
    background: #FF7878;
}
.pink_ .flow-dots li.slick-active button::before {
    background: #FF6D86;
}
.blue_ .flow-dots li.slick-active button::before {
    background: #6DC0FF;
}

.flow-dots {
    display: flex;
    justify-content: center;
    margin-top: min(49px, calc(calc(49/750) * 100vw));
}
.flow-dots li {
    width: min(20px, calc(calc(20/750) * 100vw))!important;
    padding: 0;
    margin-right: min(40px, calc(calc(40/750) * 100vw))!important;
}
.flow-dots li:last-child {
    margin-right: 0!important;
}
.flow-dots li button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'slick';
    text-align: center;
    border-radius: 9999px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all ease 0.3s;
    z-index: 10;
    width: min(20px, calc(calc(20/750) * 100vw));
    height: min(20px, calc(calc(20/750) * 100vw));
    color: #C5CBD5;
    background: #C5CBD5;
    opacity: 1;
}
.flow-dots li button:hover::before {
    background: #898F98;
}