@charset "utf-8";
/* CSS Document */
/****** pagetitle *****/
#pagetitle>.inner1000{background-image:url("../img/beforeafter/pagetitle_bg.png");}

/******************************************************/
/** ビフォーアフターTOP
/******************************************************/
/*** 共通 ***/
#beforeafter{margin-top:40px;}
#beforeafter h2{width:100%; margin:0 0 30px; padding-bottom:15px; font-family:"Zen Old Mincho", serif; font-weight: 500;
 font-size:26px; letter-spacing:0.06em; text-align:center; text-shadow:0 0 5px #fff; position:relative;}
#beforeafter h2:after{content:''; width:100%; height:2px; background:url("../common/img/h2_title_border.png") no-repeat center; position:absolute; bottom:0; left:0;}
#beforeafter h2 span{display:block; margin-top:15px; color:#be9f39; font-family:"Zen Old Mincho", serif; font-weight: 500;
 font-size:10px; letter-spacing:0.15em;}
#beforeafter p.befoaf_text{width:90%; margin:20px auto; font-size:3.4vw; line-height:1.9; text-align:justify;}
/* h2 */
#beforeafter .title{width:80%; height:0; margin:auto; padding-top:40%; overflow:hidden; position:relative;}
#beforeafter .title h2{width:100%; height:0; padding-top:100%; border-radius:100%; display:block; background:#f9f5ea; position:absolute; top:0; left:0;}
#beforeafter .title h2:after{display:none;}
#beforeafter .title h2 span{width:100%; height:auto; color:#524016; font-family:"Zen Old Mincho", serif; font-weight: 500;
 font-size:5.5vw; letter-spacing:0.06em; line-height:1.6; text-align:center; text-shadow:none; position:absolute; top:14%; left:0;}
/* h3 */
#beforeafter h3{width:90%; margin:0 auto 25px;  font-family: "Zen Old Mincho", serif; font-weight: 500;
 font-size:5vw; line-height:1.5; padding:20px 0; color:#988b84; text-align:center; text-shadow:none; border-bottom:dotted 1px #988b84;}
#beforeafter h3:after{display:none;}
#beforeafter h3 span{display:table; width:auto; height:auto; margin:0 auto 1vw; padding:8px 12px; background:#beb29a; border-radius:50px; color:#fff; font-family: "Zen Old Mincho", serif; font-weight: 500;
 font-size:3vw; line-height:1; letter-spacing:0.04em; position:relative; top:-5px;}

/*** コンテスト結果発表特集 ***/
#beforeafter .contest_text{width:90%; height:auto; margin:auto auto 50px; padding:5vw; border:double 4px #beb29a; box-sizing:border-box;}
#beforeafter .contest_text h3{width:100%; font-size:4vw; margin-bottom:15px; padding:0 0 3vw;}
#beforeafter .contest_text p{width:100%; margin:0 auto; font-size:3.4vw; line-height:1.9; text-align:justify;}
#beforeafter .contest_banner{margin:30px auto;}
#beforeafter .contest_banner ul.flex{width:90%; height:auto; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
/*トータル・美脚部門*/
#beforeafter .contest_banner ul.bumon{margin-bottom:15px;}
#beforeafter .contest_banner ul.bumon li{width:100%;}
#beforeafter .contest_banner ul.bumon li a{width:100%; height:auto; display:block;}
#beforeafter .contest_banner ul.bumon li a img{width:100%; height:auto; display:block;}
#beforeafter .contest_banner ul.bumon li a span{width:auto; display:table; margin-top:10px; padding-bottom:2px; color:#000; font-size:3.8vw; letter-spacing:0.06em; border-bottom:solid 1px;}
#beforeafter .contest_banner ul.bumon li a span:before{content:'▼'; transform:rotate(-90deg); display:inline-block; font-size:2.8vw; position:relative; top:-3px;}
#beforeafter .contest_banner ul.bumon li:first-child a span:before{color:#BB8928;}
#beforeafter .contest_banner ul.bumon li:last-child a span:before{color:#BC285A;}
#beforeafter .contest_banner ul.bumon li a:hover{opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -khtml-opacity:0.7; -moz-opacity:0.7; opacity:0.7;}
#beforeafter .contest_banner ul.bumon li a:hover img{box-shadow:0px 0px 6px 0px #d8d8d8; -moz-box-shadow:0px 0px 6px 0px #d8d8d8; -webkit-box-shadow:0px 0px 6px 0px #d8d8d8;}
#beforeafter .contest_banner ul.bumon li a, #beforeafter .contest_banner ul.bumon li a:hover, #beforeafter .contest_banner ul.bumon li a img, #beforeafter .contest_banner ul.bumon li a:hover img{transition:all 0.3s ease;}
#beforeafter .contest_banner ul.bumon li p{margin:2vw 0; font-size:3.2vw; line-height:1.9; text-align:justify;}
/*第〇回*/
#beforeafter .contest_banner ul.times li{width:100%; height:0; margin-bottom:20px; padding-top:19.4%; background:url("../img/beforeafter/banner_times.jpg") no-repeat; background-size:contain; position:relative;}
#beforeafter .contest_banner ul.times li:last-child{margin-bottom:0;}
#beforeafter .contest_banner ul.times li:hover{box-shadow:0px 0px 6px 0px #d8d8d8; -moz-box-shadow:0px 0px 6px 0px #d8d8d8; -webkit-box-shadow:0px 0px 6px 0px #d8d8d8;}
#beforeafter .contest_banner ul.times li a{width:100%; height:100%; display:block; color:#5b4d13; font-family:"Zen Old Mincho", serif; font-weight: 900; font-size:4.3vw; letter-spacing:0.04em; line-height:4; text-align:center; position:absolute; top:0; left:0;}
#beforeafter .contest_banner ul.times li a:after{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:#fff; opacity:0;}
#beforeafter .contest_banner ul.times li:hover a:after{content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:#fff; opacity:0.3;}
#beforeafter .contest_banner ul.times li, #beforeafter .contest_banner ul.times li:hover, #beforeafter .contest_banner ul.times li a:after, #beforeafter .contest_banner ul.times li:hover a:after{transition:all 0.3s ease;}

/*** PickUpビフォーアフター ***/
#beforeafter .pickup{width:1100px; height:auto; margin:35px auto 0; padding:0 0 30px; position:relative; border-top:solid 1px #988c85; border-bottom:solid 1px #988c85;}
#beforeafter .pickup:before, #beforeafter .pickup:after{content:''; position:absolute; top:-10px; width:1px; height:-webkit-calc(100% + 20px); height:calc(100% + 20px); background-color:#988c85;}
#beforeafter .pickup:before{left:10px;}
#beforeafter .pickup:after{right:10px}
#beforeafter .pickup .flex{width:1000px; height:auto; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .pickup .flex .text{width:53%; padding-top:15px;}
#beforeafter .pickup{width:95%; height:auto; margin:50px auto 0; padding:0 0 30px; position:relative; border-top:solid 1px #988c85; border-bottom:solid 1px #988c85;}
#beforeafter .pickup:before, #beforeafter .pickup:after{content:''; position:absolute; top:-10px; width:1px; height:-webkit-calc(100% + 20px); height:calc(100% + 20px); background-color:#988c85;}
#beforeafter .pickup .flex{width:85%; margin:auto; display:flex; flex-wrap:wrap-reverse;}
#beforeafter .pickup .flex .text{width:100%;}
/*見出し*/
#beforeafter .pickup .flex .text .repo_gaiyou{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .pickup .flex .text .repo_gaiyou p{margin:0;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan{width:24%; height:0; padding-top:24%; background:#d0b771; border-radius:100%; position:relative;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan p{width:100%; height:100%; color:#fff; line-height:1; text-align:center; position:absolute; left:0;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan p:first-child{top:20%; font-size:3vw; letter-spacing:0.5em; text-indent:0.25em;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan p:last-child{top:50%; font-size:5vw; letter-spacing:0.04em;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou{width:73%;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p{color:#be9f39; line-height:1;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p:first-child{margin:0 0 2vw;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p span{display:inline-block; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p .cate{width:35%; text-align:center; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; font-size:4vw;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p .suuchi{width:40%; text-align:center; font-size:7.5vw;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p .tanni{width:25%; text-align:left; font-size:5vw;}
/*個人情報*/
#beforeafter .pickup .flex .text .personal{font-size:3.4vw; text-align:center;}
/*比較表*/
#beforeafter .pickup .flex .text table{width:100%; height:auto;}
#beforeafter .pickup .flex .text table tr{background:#F9F5EA;}
#beforeafter .pickup .flex .text table tr:nth-child(even){background:#eae2c9;}
#beforeafter .pickup .flex .text table tr th, #beforeafter .pickup .flex .text table tr td{padding:2.5vw 0; font-size:3.2vw; line-height:1; text-align:center;}
#beforeafter .pickup .flex .text table tr td{}
#beforeafter .pickup .flex .text table tr td.category{border-right:double #30210e;}
#beforeafter .pickup .flex .text table tr td.suuchi{border-right:solid 1px #b5afa8;}
#beforeafter .pickup .flex .text table tr td.sabun{}
#beforeafter .pickup .flex .text table tr td.sabun .red{color:#ff0000;}
/*画像*/
#beforeafter .pickup .flex .img{width:100%; height:0; padding-top:91%; background:url("../img/beforeafter/kozin_result_bg.jpg") no-repeat center bottom; background-size:100%; box-sizing:border-box; position:relative;}
#beforeafter .pickup .flex .img img{width:100%; height:100%; display:block; position:absolute; top:0; left:0;}
/*コメント*/
#beforeafter .pickup .comment{width:85%; height:auto; margin:20px auto; padding:2vw; box-sizing:border-box; border:solid 1px #988b84;}
#beforeafter .pickup .comment p{margin:0; font-size:3.2vw; line-height:1.7; text-align:justify; position:relative;}
#beforeafter .pickup .comment p:after{content:'……';}
#beforeafter .pickup .comment p a{width:auto; height:auto; color:#ff0000; display:block; text-decoration:underline; position:absolute; bottom:0; right:0;}
/*ボタン*/
#beforeafter .pickup .cmn_btn{font-size:2.8vw;}
#beforeafter .pickup .cmn_btn:after{display:none;}

/*** 店舗別PickUpビフォーアフター ***/
#beforeafter .ba_list{margin:7vw 0;}
#beforeafter .ba_list ul.flex{width:90%; margin:30px auto 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .ba_list ul.flex li{width:48%; margin-bottom:4vw;}
#beforeafter .ba_list ul.flex li h3{font-size:3.4vw; letter-spacing:0.06em; text-align:center; margin-bottom:5px; padding:1vw;}
/*画像*/
#beforeafter .ba_list ul.flex li .repo_img{width:100%; height:auto; background:url("../img/beforeafter/kozin_result_bg.jpg") no-repeat center bottom; background-size:100%;}
#beforeafter .ba_list ul.flex li .repo_img img{width:100%; height:auto; display:block;}
/*DATE*/
#beforeafter .ba_list ul.flex li .repo_date{width:100%; margin-top:10px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info{width:100%; height:auto; margin-bottom:5px; padding:0.5vw 0; position:relative;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info p{margin:0; line-height:1;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .name{width:auto; height:auto; font-size:4.2vw; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .name span{font-size:5.3vw; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .salon, #beforeafter .ba_list ul.flex li .repo_date .repo_info .raiten{position:absolute; right:0; font-size:2.8vw;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .salon{top:0;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .raiten{bottom:0;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .kikan{width:30%; height:0; padding-top:30%; background:#d0b770; border-radius:6px; color:#fff; position:relative;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .kikan p{width:100%; height:auto; margin:0; text-align:center; position:absolute; left:0;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .kikan p:first-child{top:20%; font-size:2.6vw; letter-spacing:0.3em; text-indent:0.15em;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .kikan p:last-child{top:55%; font-size:3.2vw;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou{width:68%;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p{margin:0;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p:first-child{margin:1.2vw 0;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p span{display:inline-block; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p .cate{width:40%; text-align:center; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; font-size:2.5vw;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p .suuchi{width:40%; text-align:center; font-size:4vw;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p .tanni{width:20%; text-align:left; font-size:3vw;}
#beforeafter .ba_list ul.flex li .repo_btn{width:100%; height:auto; margin-top:2vw; box-sizing:border-box; border:solid 1px #d9c691; background:#fff;}
#beforeafter .ba_list ul.flex li .repo_btn a{display:block; width:100%; height:auto; color:#c6ac63; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:3vw; line-height:1.4; padding:8px 5px 8px 0; box-sizing:border-box; text-align:center; position:relative; z-index:1;}
#beforeafter .ba_list ul.flex li .repo_btn a:before{content:'\f101'; font-weight:900; font-family:"Font Awesome 5 Free"; position:absolute; top:18px; right:2%;}

/*** ビフォーアフター一覧（bcresult） ***/
#beforeafter .ba_list .straight{width:90%; height:auto; margin:40px auto; border:double 4px #beb29a; box-sizing:border-box; padding:3vw 3%;}
#beforeafter .ba_list .straight h3{width:100%; margin:0; font-size:4.5vw; padding:1vw 0 2.5vw;}
#beforeafter .ba_list .straight ul{width:100%; height:290px; margin:10px 0; overflow-x:hidden; overflow-y:scroll;}
#beforeafter .ba_list .straight ul li{width:auto; height:auto; display:table; margin:20px 0;}
#beforeafter .ba_list .straight ul li:last-child{margin-bottom:0;}
#beforeafter .ba_list .straight ul li:hover{border-color:#be9f39;}
#beforeafter .ba_list .straight ul li.mds{width:100%; margin:0; border:none;}
#beforeafter .ba_list .straight ul li a{color:#000; display:block; padding-left:1.2em; font-size:3.4vw; line-height:1.5; letter-spacing:0.06em; text-decoration:underline;}
#beforeafter .ba_list .straight ul li a:before{content:'▼'; color:#d0b770; display:inline-block; margin-left:-1.2em; transform:rotate(-90deg);}
#beforeafter .ba_list .straight ul::-webkit-scrollbar{width:10px;}
#beforeafter .ba_list .straight ul::-webkit-scrollbar-track{background:#f8f6f7;  border-radius:10px;}
#beforeafter .ba_list .straight ul::-webkit-scrollbar-thumb{background:#dcdbda; border-radius:10px;}