@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{margin-bottom:20px; font-size:15px; line-height:30px; text-align:justify;}
/* h2 */
#beforeafter .title{width:36%; height:0; margin:auto; padding-top:16%; overflow:hidden; position:relative;}
#beforeafter h2{width:100%; height:0; padding-top:100%; border-radius:100%; display:block; background:#f9f5ea; position:absolute; top:0; left:0;}
#beforeafter h2:after{display:none;}
#beforeafter h2 span{width:100%; height:auto; color:#524016; font-family:"Zen Old Mincho", serif; font-weight: 500;
 font-size:26px; letter-spacing:0.06em; line-height:1.6; text-align:center; text-shadow:none; position:absolute; top:10%; left:0;}
/* h3 */
#beforeafter h3{width:1078px; margin:0 auto 25px; font-family:"Zen Old Mincho", serif; font-weight: 500;
 font-size:23px; padding:20px 0; color:#988b84; text-align:center; text-shadow:none; border-bottom:dotted 1px #988b84;}
#beforeafter h3 span{display:inline-block; width:auto; height:auto; margin-right:8px; padding:8px 12px; background:#beb29a; border-radius:50px; color:#fff; font-size:12px; letter-spacing:0.04em; position:relative; top:-5px;}

/*** コンテスト結果発表特集 ***/
#beforeafter .contest_text{width:1000px; height:auto; margin:auto auto 50px; padding:20px 50px; border:double 4px #beb29a; box-sizing:border-box;}
#beforeafter .contest_text h3{width:100%;}
#beforeafter .contest_text p{width:100%; margin:30px auto; font-size:15px; line-height:30px; text-align:justify;}
#beforeafter .contest_banner{margin:30px auto;}
#beforeafter .contest_banner ul.flex{width:100%; height:auto; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
/*トータル・美脚部門*/
#beforeafter .contest_banner ul.bumon{width:90%; margin-bottom:15px;}
#beforeafter .contest_banner ul.bumon li{width:45%;}
#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:16px; 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:13px; 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{font-size:13px; line-height:24px; text-align:justify;}
/*第〇回*/
#beforeafter .contest_banner ul.times li{width:31%; height:0; margin-bottom:20px; padding-top:6%; background:url("../img/beforeafter/banner_times.jpg") no-repeat; background-size:contain; position:relative;}
#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:20px; letter-spacing:0.04em; line-height:3.3; 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 .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; text-align:center; position:absolute; left:0;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan p:first-child{top:20%; font-size:20px; letter-spacing:0.5em; text-indent:0.25em;}
#beforeafter .pickup .flex .text .repo_gaiyou .kikan p:last-child{top:50%; font-size:30px; letter-spacing:0.04em;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou{width:73%;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p{color:#be9f39;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p:first-child{margin:10px 0 20px;}
#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:30px;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p .suuchi{width:40%; text-align:center; font-size:50px;}
#beforeafter .pickup .flex .text .repo_gaiyou .genryou p .tanni{width:25%; text-align:left; font-size:32px;}
/*個人情報*/
#beforeafter .pickup .flex .text .personal{margin:20px 0 15px; font-size:15px; text-align:right;}
/*比較表*/
#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:15px 0; font-size:15px; 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:43%; height:0; padding-top:39.3%; 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:1000px; height:auto; margin:20px auto; padding:15px; box-sizing:border-box; border:solid 1px #988b84;}
#beforeafter .pickup .comment p{margin:0; font-size:14px; line-height:26px; 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{width:50%;}

/*** 店舗別PickUpビフォーアフター ***/
#beforeafter .ba_list{margin:40px 0;}
#beforeafter .ba_list ul.flex{width:100%; margin:30px auto 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .ba_list ul.flex li{width:30%; margin-bottom:30px;}
/*h3*/
#beforeafter .ba_list ul.flex li h3{width:100%; margin-bottom:15px; padding:10px 0; font-size:19px; letter-spacing:0.06em;}
#beforeafter .ba_list ul.flex li h3:before {content: '＼';}
#beforeafter .ba_list ul.flex li h3:after {content: '／';}
/*画像*/
#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{display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:10px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info{width:25%; height:auto; border-right:solid 1px #000;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info p{margin:0; line-height:1.4;}
#beforeafter .ba_list ul.flex li .repo_date .repo_info .name{font-size:15px; 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:21px; 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{font-size:14px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus{width:72%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .kikan{width:32%; height:0; padding-top:32%; 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:15px; 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:18px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou{width:66%;}
#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:10px 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:38%; text-align:center; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; font-size:14px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p .suuchi{width:40%; text-align:center; font-size:22px;}
#beforeafter .ba_list ul.flex li .repo_date .repo_minus .genryou p .tanni{width:22%; text-align:left; font-size:16px;}
#beforeafter .ba_list ul.flex li .repo_btn{width:100%; height:auto; margin-top:15px; box-sizing:border-box; border:solid 1px #d9c691; background:#fff;}
#beforeafter .ba_list ul.flex li .repo_btn:hover{border:solid 1px #ceb66b;}
#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:13px; line-height:1.4; padding:8px 0; text-align:center; position:relative; z-index:1;}
#beforeafter .ba_list ul.flex li .repo_btn:hover a{color:#fff; letter-spacing:0.08em;}
#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:40px; color:#fff;}
#beforeafter .ba_list ul.flex li .repo_btn:hover a:before{right:15px;}
#beforeafter .ba_list ul.flex li .repo_btn a:before, #beforeafter .ba_list ul.flex li .repo_btn a:before{transition:all 0.5s ease;}
#beforeafter .ba_list ul.flex li .repo_btn a:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transform:scale(.5); transform:scale(.5); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; z-index:-1;}
#beforeafter .ba_list ul.flex li .repo_btn:hover a:after{background:#ceb66b; -webkit-transform:scale(1); transform:scale(1);}
#beforeafter .ba_list ul.flex li .repo_btn a, #beforeafter .ba_list ul.flex li .repo_btn:hover a, #beforeafter .ba_list ul.flex li .repo_btn a:after, #beforeafter .ba_list ul.flex li .repo_btn:hover a:after{transition:all 0.3s ease;}

/*** ビフォーアフター一覧（beautyrepo） ***/
#beforeafter .ba_list .straight{width:1000px; height:auto; margin:50px auto 60px; border:double 4px #beb29a; box-sizing:border-box; padding:10px 100px; }
#beforeafter .ba_list .straight h3{width:100%; margin:0;}
#beforeafter .ba_list .straight ul{width:100%; height:500px; 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:hover{border-color:#be9f39;}
#beforeafter .ba_list .straight ul li a{color:#000; font-size:15px; line-height:1; letter-spacing:0.06em; text-decoration:underline;}
#beforeafter .ba_list .straight ul li a:before{content:'▼'; color:#d0b770; display:inline-block; margin-right:3px; font-size:12px; position:relative; top:-3px; transform:rotate(-90deg);}
#beforeafter .ba_list .straight ul li a:hover{color:#be9f39;}
#beforeafter .ba_list .straight ul li, #beforeafter .ba_list .straight ul li:hover, #beforeafter .ba_list .straight ul li a, #beforeafter .ba_list .straight ul li a:hover{transition:all 0.3s ease;}
#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;}