/* -------------------------------------------------- */ /* care */ /* -------------------------------------------------- */ @import url(//fonts.googleapis.com/css?family=Roboto:400,100,300,700&display=swap); @import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&display=swap); @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic&display=swap); @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; } .page-care {color: #444444;font-size: 14px;text-align: left;font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} .page-care .pc{display:block;} .page-care .sp{display:none;} .page-care .txt_c { text-align:center; } .page-care .txt_r { text-align:right; } .page-care .bold { font-weight:bold; } .page-care img{max-width:100%;} .page-care a img:hover{transition:all .25s linear 0;opacity:0.8px;} .page-care .js-sp-menu{display:none;color:#aaa;font-size:10px;} .page-care .js-sp-menu:before{color:#aaa;content:"\f0c9";font-size:20px;height:22px;text-align:center;display:block;} .page-care .container{width:1040px;margin:0 auto;position:relative;} .page-care .pc-only{display:block;} .page-care .sp-only{display:none;} .page-care .text-center{text-align:center;} /* top */ .page-care .main{width:100%;min-height:520px;background:url(../care/assets/img/main-bg.jpg) no-repeat top center;background-size:100% auto;padding:5px 0;} .page-care .main-title{margin:72px auto 0;text-align:center;font-size:40px;color:#685a54;} .page-care .main-title span{display:block;letter-spacing:8px;margin:24px auto 32px;} .page-care .brand-list{display:0;display:flex;-ms-flex-pack:center;justify-content:center;} .page-care .brand-list li{margin:0 8px;} .page-care .read-text{width:680px;margin:58px auto 32px;position:relative;font-size:16px;line-height:2;text-align:center;} .page-care .read-text:before{content:"";position:absolute;left:-49px;top:50%;margin-top:-110px;width:49px;height:221px;background:url(../care/assets/img/main-left.png) no-repeat center center;} .page-care .read-text:after{content:"";position:absolute;right:-49px;top:50%;margin-top:-110px;width:49px;height:221px;background:url(../care/assets/img/main-right.png) no-repeat center center;} .page-care .index-list{display:0;display:flex;-ms-flex-pack:center;justify-content:center;margin:80px auto 40px;} .page-care .index-list li{margin:0 16px;} .page-care .page-content #index{width:60%;padding:16px 32px 18px;border:1px solid #eeeeee;margin:46px 0 30px;} .page-care .page-content #index .tit{display:inline-block;position:relative;height:30px;line-height:30px;text-align:center;padding:0 20px 0 10px;font-size:16px;font-weight:600;background:#f77916;color:#FFF;box-sizing:border-box;} .page-care .page-content #index .tit:after{position:absolute;content:'';width:0;height:0;z-index:1;} .page-care .page-content #index .tit:after{top:0;right:0;border-width:15px 7px 15px 0;border-color:transparent #fff transparent transparent;border-style:solid;} .page-care .page-content #index ul li{margin-bottom:8px;} .page-care .page-content #index ul li h5{display:inline-block;height:28px;line-height:28px;background:#fffaf4;color:#f77916;border-left:solid 3px #f77916;padding:0 0.6em;} .page-care .page-content #index ul li h5 a{/*font-size: 16px;*/font-weight:600;} .page-care .page-content #index ul li h5 a:hover{text-decoration:none;opacity:0.6px;} .page-care .page-content #index ul li p{color:#444444;padding-left:24px;margin:0;} .page-care .section-header{width:100%;min-height:430px;background:url(../care/assets/img/section1-header.jpg) no-repeat center top;background-size:cover;padding:5px 0;} .page-care .title-section{font-size:32px;line-height:1.6em;padding:152px 0 0 24px;letter-spacing:4px;text-align:left;font-weight:normal;} .page-care .section-00 .section-header{background:url(../care/assets/img/section0-header.jpg) no-repeat center top;background-size:cover;} .page-care .section-01 .section-header{background:url(../care/assets/img/section1-header.jpg) no-repeat center top;background-size:cover;} .page-care .category-list{display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:-54px auto 40px;} .page-care .category-list .card{width:320px;margin:0 16px 48px;padding:0 0 56px;border-radius:8px;box-shadow:0 0 20px rgba(0, 0, 0, 0.05);border:1px solid #eeeeee;background:#fff;position:relative;} .page-care .category-list .card:first-child,.category-list .card:nth-child(4n){margin-left:auto;} .page-care .category-list .card:last-child,.category-list .card:nth-child(3n){margin-right:auto;} .page-care .category-list .card span{line-height:1;} .page-care .category-list .card .season_01{font-size:14px;position:absolute;background:#f7cfe1;padding:4px;text-align:center;color:#fff;width:92px;left:24px;top:16px;} .page-care .category-list .card .season_02{font-size:14px;position:absolute;background:#98ca98;padding:4px;text-align:center;color:#fff;width:92px;left:24px;top:16px;} .page-care .category-list .card .season_03{font-size:14px;position:absolute;background:#e19b77;padding:4px;text-align:center;color:#fff;width:92px;left:24px;top:16px;} .page-care .category-list .card .season_04{font-size:14px;position:absolute;background:#b6cedc;padding:4px;text-align:center;color:#fff;width:92px;left:24px;top:16px;} .page-care .category-list .card .title{font-size:20px;padding:16px 24px 24px;border-bottom:1px solid #eeeeee;display:0;display:flex;-ms-flex-align:center;align-items:center;} .page-care .category-list .card .title .name:before{border:4px solid #ff9d50;border-radius:50%;content:"";width:16px;height:16px;display:inline-block;margin-right:8px;} .page-care .category-list .card .title .img{margin-left:auto;width:100px;} .page-care .category-list .card .title a{font-weight:normal;color:#333;text-decoration:none;} .page-care .category-list .card .text{padding:24px 24px 16px;font-size:14px;line-height:1.715;} .page-care .tag-list{display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 24px 16px;} .page-care .tag-list:after{content:"";display:block;width:320px;} .page-care .tag-list > li{margin:0 6px 8px 0;background:#f2efe7;display:block;height:24px;padding:7px 14px 8px;border-radius:12px;font-size:11px;color:#685a54;line-height:1;} .page-care .tag-list a{background:#f2efe7;display:block;height:24px;padding:7px 14px 8px;border-radius:12px;font-size:11px;color:#685a54;} .page-care .tag-list a:hover{cursor:default;text-decoration:none;} .page-care a.button-more{background:url(../care/assets/img/arrow.png) no-repeat right 16px center;background-color:#fff8e8;display:block;width:100%;padding:21px 0;text-align:center;font-size:14px;letter-spacing:6px;font-weight:bold;color:#f77916;position:absolute;left:0;bottom:0;text-decoration:none;} .page-care .section-02 .section-header{background:url(../care/assets/img/section2-header.jpg) no-repeat center top;background-size:cover;} .page-care .section-03 .section-header{background:url(../care/assets/img/section3-header.jpg) no-repeat center top;background-size:cover;} .page-care .banner-area-bottom{display:flex;justify-content:space-around;padding:0 15px;margin:4rem 0;} .page-care .banner-area-bottom div{padding:1%;} /* detail */ .page-care .page-content{width:100%;margin:-104px auto 40px;padding:16px 32px 24px;border-radius:8px;box-shadow:0 0 20px rgba(0, 0, 0, 0.05);border:1px solid #eeeeee;background:#fff;position:relative;} .page-care .page-content .index-list{margin:24px auto 8px;} .page-care .page-content .index-list li{width:30%;} .page-care .page-content .index-list li a{border:4px solid #ff9d50;line-height:1.3;font-size:17px;font-weight:bold;color:#ff9d50;display:block;text-align:center;border-radius:55px;padding:24px 24px 8px;} .page-care .page-content .index-list li a:after{content:"\f107";font-family:"Font Awesome 5 Free";font-weight:bold;display:block;font-size:24px;text-align:center;} .page-care .page-content .index-list li a:hover{text-decoration:none;} .page-care .page-content h2{font-size:22px;font-weight:normal;line-height:1.3;padding:24px 24px 16px 0;margin:16px 0 24px;border-bottom:1px solid #eeeeee;display:0;display:flex;-ms-flex-align:center;align-items:center;} .page-care .page-content h2:before{border:4px solid #ff9d50;border-radius:50%;content:"";width:16px;height:16px;display:inline-block;margin-right:8px;} .page-care .page-content h3{font-size:18px;font-weight:normal;line-height:1.3;margin:32px 0 16px;padding-left:24px;position:relative;} .page-care #asemo .section-header{background:url(../care/assets/img/section2-header_asemo.jpg) no-repeat center top;background-size:cover;} .page-care #asemo .page-content h2{font-weight:600;} .page-care #asemo .page-content h3{font-weight:600;} .page-care .page-content h3:before{content:"\f06a";position:absolute;left:0;display:inline-block;font-family:"Font Awesome 5 Free";font-weight:bold;margin-right:8px;color:#ff9d50;font-size:18px;-ms-transform:rotate(30deg);transform:rotate(30deg);} .page-care .page-content h4{font-size:16px;font-weight:normal;line-height:1.3;margin:24px 0 16px;padding-left:18px;position:relative;} .page-care .page-content h4:before{content:"";display:block;position:absolute;left:0;top:50%;margin-top:-10px;width:6px;height:20px;background:#ddd;border-radius:6px;} .page-care .page-content p{font-size:14px;line-height:1.8;margin:16px 0;} .page-care .page-content p.btn{width:100%;max-width:100%;} .page-care .page-content p.btn a{padding:0;} .page-care .page-content ol{margin:24px auto;list-style:decimal inside;} .page-care .page-content li{margin-bottom:18px;line-height:1.6;} .page-care .page-content a{color:#ff9d50;text-decoration:none;} .page-care .page-content a:hover{text-decoration:underline;} .page-care .breadcrumb{padding:0;} .page-care .breadcrumb ol{display:0;display:flex;flex-wrap:wrap;} .page-care .breadcrumb ol li{margin:0 8px 8px 0;list-style:none!important;} .page-care .breadcrumb ol li a{color:#07c!important;} .page-care .breadcrumb ol li:after{content:"\f105";font-family:"Font Awesome 5 Free";font-weight:bold;color:#ccc;margin-left:8px;} .page-care .breadcrumb ol li:first-child a:before{content:"\f015";font-family:"Font Awesome 5 Free";font-weight:bold;color:#ccc;margin-right:4px;} .page-care .breadcrumb ol li:last-child:after{content:"";} .page-care .icon-img{display:0;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:absolute;right:-32px;top:-96px;border-radius:100%;box-shadow:0 0 20px rgba(0, 0, 0, 0.05);border:1px solid #eeeeee;background:#fff;width:150px;height:150px;overflow:hidden;} .page-care .icon-img img{max-width:100px;} .page-care .img-box{display:0;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;-ms-flex-align:center;align-items:center;margin:16px auto;} .page-care .img-box .img{width:40%;text-align:center;} .page-care .img-box .img span{display:block;text-align:center;margin-bottom:8px;} .page-care .img-box .large-text{width:60%;padding-right:24px;font-size:14px;line-height:1.8;} .page-care .img-box .text{width:60%;padding-right:24px;font-size:14px;line-height:1.8;} .page-care .img-box .caption{font-size:12px;color:#888;} .page-care .img-box-column{display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;margin:24px auto;padding:16px 32px 8px;border-radius:6px;border:1px solid #eee;} .page-care .img-box-column .img{text-align:center;width:100%;} .page-care .img-box-column .large-text{width:100%;font-size:18px;line-height:1.4;margin:0 0 8px;text-align:center;display:block;letter-spacing:1px;} .page-care .img-box-half{display:0;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;-ms-flex-align:center;align-items:center;margin:16px auto;} .page-care .img-box-half .img{width:50%;padding:16px;text-align:center;} .page-care .img-box-half .img span{display:block;text-align:center;margin-bottom:8px;} .page-care .img-box-half .img img{border:1px solid #EBE4D8;max-width:80%;} .page-care .img-box-half p{font-size:13px;line-height:1.8;text-align:left;margin:8px auto;} .page-care .img-box-gold{display:0;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;-ms-flex-align:center;align-items:center;margin:24px auto;padding:16px 24px;display:flex;align-items:center;background:#FAF7F3;border-radius:8px;} .page-care .img-box-gold .img{min-width:30%;padding:16px;text-align:center;} .page-care .img-box-gold .img span{display:block;text-align:center;margin-bottom:8px;} .page-care .img-box-gold .img.care-08-01{min-width:36%;} .page-care .img-box-gold .text{min-width:40%;font-size:13px;line-height:1.8;text-align:left;margin:8px auto;} .page-care .product-list{margin:24px auto;display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;} .page-care .product-list > li{margin:24px auto;padding-bottom:64px;display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-item-align:start;align-self:flex-start;border:1px solid #eee;border-radius:6px;max-width:400px;position:relative;} .page-care .product-list .product-name{font-size:20px;text-align:center;font-weight:bold;width:100%;margin-bottom:8px;padding:16px 24px;border-bottom:1px solid #eee;} .page-care .product-list .product-name .product-copy{font-size:12px;font-weight:normal;margin:0 0 8px;} .page-care .product-list .product-name .product-copy span{font-size:12px;display:block;color:#aca59a;} .page-care .product-list .product-img{width:40%;display:0;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:16px;} .page-care .product-list .product-img img{max-height:128px;} .page-care .product-list .product-info{width:60%;padding:0 16px 8px 8px;margin:auto 0;display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;} .page-care .product-list .product-copy{width:100%;line-height:1.5;font-size:16px;margin:8px 0;} .page-care .product-list .product-capacity{width:100%;font-size:12px;color:#888;margin:8px 0;} .page-care .product-list .product-price{width:100%;font-size:12px;margin:8px 0;} .page-care .product-list .product-price span{font-weight:bold;font-size:22px;letter-spacing:0;color:#ff9d50;margin-right:4px;} .page-care .product-list .overline{position:relative;} .page-care .product-list .overline:before{content:"";position:absolute;left:0;top:50%;width:110px;height:2px;background:#888;} .page-care .product-list .product-campaign{margin-bottom:4px;} .page-care .product-list .product-button{background:url(../care/assets/img/arrow.png) no-repeat right 16px center;background-color:#fff8e8;display:block;width:100%;padding:21px 0;text-align:center;font-size:14px;letter-spacing:6px;font-weight:bold;color:#f77916;position:absolute;left:0;bottom:0;} .page-care .product-list .product-text{padding:0 24px;} .page-care .button-area{max-width:600px;margin:24px auto;} .page-care .button-area .button-info{background:url(../care/assets/img/arrow.png) no-repeat right 16px center;background-color:#fff8e8;display:block;width:100%;padding:21px 0;border-radius:8px;text-align:center;font-size:14px;font-weight:bold;color:#f77916;} .page-care .qa-list{margin-bottom:24px;} .page-care .qa-list dt{position:relative;line-height:1.4;font-size:18px;padding-left:32px;margin-bottom:8px;} .page-care .qa-list dt:before{content:"Q";font-size:24px;font-weight:bold;color:#fab279;position:absolute;left:0;top:-4px;} .page-care .qa-list dd{position:relative;line-height:1.8;font-size:13px;padding-left:32px;margin-bottom:16px;} .page-care .qa-list dd .answer{font-size:16px;color:#f77916;} .page-care .qa-list dd .answer:before{content:"A";font-size:24px;font-weight:bold;color:#f77916;position:absolute;left:2px;top:-8px;} .page-care .howto{margin:24px auto;padding:16px 24px;display:0;display:flex;-ms-flex-align:center;align-items:center;background:#FAF7F3;border-radius:8px;} .page-care .howto dt{width:120px;} .page-care .howto dd{line-height:1.8;padding-left:16px;} .page-care .check-box{display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:2px 24px 24px;border:1px solid #EBE4D8;border-radius:8px;} .page-care .check-box span{font-size:22px;} .page-care .check-box .box-a{width:50%;} .page-care .check-box .box-a h4{color:#f16b6b;font-weight:bold;padding-left:18px!important;} .page-care .check-box .box-a h4:before{background:#f16b6b;} .page-care .check-box .box-b{width:50%;} .page-care .check-box .box-b h4{color:#f77916;font-weight:bold;padding-left:18px!important;} .page-care .check-box .box-b h4:before{background:#f77916;} .page-care .check-box .chart{width:100%;background:#eee;padding:16px;border-radius:4px;display:0;display:flex;} .page-care .check-box .chart .for-a{width:50%;} .page-care .check-box .chart .for-a span,.page-care .check-box .chart .for-a strong{color:#f16b6b;font-weight:bold;} .page-care .check-box .chart .for-b{width:50%;} .page-care .check-box .chart .for-b span,.page-care .check-box .chart .for-b strong{color:#f77916;font-weight:bold;} .page-care .check-box .check-list li{margin-bottom:18px!important;} .page-care .check-box .check-list li:before{content:"\f14a";font-family:"Font Awesome 5 Free";font-weight:bold;margin-right:8px;color:#ddd;} .page-care .banner-area{text-align:center;padding:8px 0;} .page-care .banner-area .pc-only{display:inline;} .page-care .contact-area{text-align:center;padding:16px 0 40px;} .page-care .contact-area .sp-phone{display:none;} .page-care .page-content #archive{padding-bottom:40px;} .page-care .page-content #archive ul li{margin-bottom:12px;} .page-care .page-content #archive ul li a{color:#07c;} .page-care .btns{display:0;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;} .page-care .btns div{margin:0 8px 8px;} .page-care .disp-sp{display:none;} .page-care .section-01 img.pc-only { display:inline; } .page-care .section-01 p:first-child { margin-top:0; } .page-care .section-01 p:last-child { margin-bottom:0; } .page-care .section-01 h2:before { content:none; } .page-care .section-01 h3:before { content:none; } .page-care .section-01 h4 { padding:0;line-height:1.5; } .page-care .section-01 h4:before { content:none; } .page-care .section-01 .h4_num { display:flex;justify-content:flex-start;align-items:center;margin:0 0 20px; } .page-care .section-01 .h4_num:not(:first-child) { margin-top:20px; } .page-care .section-01 .h4_num img { width:40px;margin-right:12px;flex-shrink:0; } .page-care .section-01 .h4_num span { font-size:17px;font-weight:bold;color:#444444; } .page-care .section-01 .h4_num small { font-size:16px;font-weight:normal; } .page-care .section-01 li { margin-bottom:0; } .page-care .section-01 a.underline { text-decoration:underline; } .page-care .section-01 .h2_title { display:block;text-align:center;padding:8px;font-size:24px;font-weight:bold;border:0;line-height:1.5; } .page-care .section-01 .h2_title span { font-weight:bold;background:linear-gradient(transparent 45%, #fff6b6 45%); } .page-care .section-01 .h2_title + .lead { padding:0 60px; } .page-care .section-01 .h2_title + .lead_img { display:flex; justify-content:center; align-items:center; width:90%; margin:auto; } .page-care .section-01 .h2_title + .lead_img .img { width:320px; margin-right:30px; flex-shrink:0; } .page-care .section-01 .h2_title + .lead_img .txt p { font-size:16px; line-height:1.6; } .page-care .section-01 .care_block { margin-top:40px;padding-top:40px;border-top:1px solid #dedcd4; } .page-care .section-01 .num_title { display:flex;justify-content:flex-start;align-items:center;margin-bottom:25px; } .page-care .section-01 .num_title .num { padding-left:30px;flex-shrink:0; } .page-care .section-01 .num_title h3 { margin:0;padding-left:25px;font-size:20px;font-weight:bold;color:#666;line-height:1.5; } .page-care .section-01 .num_title h3 small { font-size:16px;font-weight:normal; } .page-care .section-01 .point_box { margin:30px 0;padding:30px 40px 40px;background:#fffdf7;border:1px dashed #ffb575;border-radius:12px;display:flex;justify-content:space-between; align-items:center; } .page-care .section-01 .point_box .txt, .page-care .section-01 .point_box .img { width:48%; } .page-care .section-01 .point_box h4 { margin:0 0 10px; } .page-care .section-01 .point_box a.underline { padding-left:16px; background:url("../care/assets/img/arrow02.png") 0 3px no-repeat; background-size:7px 12px; } .page-care .section-01 .point_num_list { display:flex; flex-wrap:wrap; margin-top:15px; } .page-care .section-01 .point_num_list .h4_num span { font-size:15px; } .page-care .section-01 .point_num_list > li { width:50%; padding:30px 25px; } .page-care .section-01 .point_num_list > li:nth-child(2n+1) { padding-left:0; } .page-care .section-01 .point_num_list > li:nth-child(2n) { border-left:1px dashed #ffb575; padding-right:0; } .page-care .section-01 .point_num_list > li:nth-child(n+3) { border-top:1px dashed #ffb575; } .page-care .section-01 .img_box { display:flex; } .page-care .section-01 .items + .img_box { margin-top:30px; } .page-care .section-01 .img_box .img { flex-shrink:0; margin-left:35px; } .page-care .section-01 .items { display:flex;justify-content:/*space-between*/center;flex-wrap:wrap;margin-top:30px; } .page-care .section-01 .items > li { width:48.6%;border:1px solid #e6e4e2;border-radius:10px;overflow:hidden; } .page-care .section-01 .items > li:nth-child(2n) { margin-left:2.8%; } .page-care .section-01 .items > li:nth-child(n+3) { margin-top:26px; } .page-care .section-01 .items .title { padding:20px 20px 15px;border-bottom:1px solid #e6e4e2;display:flex;justify-content:flex-start;align-items:center; } .page-care .section-01 .items .title .cat { border:1px solid #ff9d50;margin-right:20px;padding:10px;text-align:center;font-size:13px;white-space:nowrap; } .page-care .section-01 .items .title .cat.line1 { padding:20px 10px; } .page-care .section-01 .items .title .name small { color:#909090; } .page-care .section-01 .items .title .name a { font-size:18px;font-weight:bold;line-height:1; } .page-care .section-01 .items .title .name a span { font-size:14px;font-weight:normal; } .page-care .section-01 .items .detail { padding:20px 40px; } .page-care .section-01 .items .detail .info { display:flex;justify-content:space-between;align-items:center; } .page-care .section-01 .items .detail .info .img { width:40%;text-align:center; } .page-care .section-01 .items .detail .info .txt { width:55%; } .page-care .section-01 .items .detail .info .txt .sub { font-family:Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .page-care .section-01 .items .detail .info .txt .size { font-size:14px;color:#909090; } .page-care .section-01 .items .detail .info .txt .price { font-size:22px;font-weight:bold;color:#ff9d50;line-height:1; } .page-care .section-01 .items .trial .title { padding-top:30px;justify-content:center; } .page-care .section-01 .items .trial .detail .info { display:block; } .page-care .section-01 .items .trial .detail .info .img, .page-care .section-01 .items .trial .detail .info .txt { width:100%; } .page-care .section-01 .items .notice { font-size:13px; color:#909090; } .page-care .section-01 .items .btn { text-align:center;border-top:1px solid #e6e4e2; } .page-care .section-01 .items .btn a { display:block;padding:25px;line-height:1;background:url("../care/assets/img/arrow02.png") top 50% right 24px no-repeat #fffdf7;background-size:11px 18px;font-size:18px;color:#444444;transition:.3s; } .page-care .section-01 .items .btn a:hover { text-decoration:none;background-color:#fff1cf; } .page-care .section-01 .flow { display:flex;justify-content:space-between;width:100%; } .page-care .section-01 .flow li { text-align:center;width:100%;padding:15px 10px 20px;background:#fffdf7;position:relative; } .page-care .section-01 .flow li:after { content:"";display:block;width:0;height:0;border:11px solid transparent;border-width:11px 16px;border-left-color:#fffdf7;position:absolute;top:50%;left:100%;z-index:1;margin-top:-11px; } .page-care .section-01 .flow li:nth-child(2n) { background:#fff7e0; } .page-care .section-01 .flow li:nth-child(2n):after { border-left-color:#fff7e0; } .page-care .section-01 .flow li:last-child:after { content:none; } .page-care .section-01 .flow .step { display:inline-block;height:28px;line-height:28px;margin-bottom:12px;padding:0 20px;color:#fff;font-weight:bold;border-radius:14px;background:#ccc; } .page-care .section-01 .flow .step.purple { background:#e8c4f9; } .page-care .section-01 .flow .step.blue { background:#b2c4f2; } .page-care .section-01 .flow .step.cyan { background:#96deed; } .page-care .section-01 .flow .step.yellow { background:#ffcd91; } .page-care .section-01 .flow .step.orange { background:#ffbba0; } .page-care .section-01 .flow .step.pink { background:#f7afb6; } .page-care .section-01 .flow .img { display:flex;justify-content:center;align-items:flex-end;min-height:90px; } .page-care .section-01 .flow .name { display:block;line-height:1.3;margin-top:7px;font-size:13px; } .page-care .section-01 .movie { position:relative;width:100%;max-width:640px;margin:30px auto 0;border:2px solid #ffb575;border-radius:10px;overflow:hidden; } .page-care .section-01 .movie:before { content:"";display:block;width:100%;padding-top:56.25%; } .page-care .section-01 .movie iframe { position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:8px; } .page-care .section-01 .banner_sp { display:none; } .page-care .section-01 .contact-area { margin-top:60px; } .page-care .section-01 .flow2 { display:flex;justify-content:space-between;width:100%; } .page-care .section-01 .flow2 li { text-align:center;width:100%;padding:15px 10px 20px;background:#fffdf7;position:relative; } .page-care .section-01 .flow2 li:after { content:"";display:block;width:0;height:0;border:11px solid transparent;border-width:11px 16px;border-left-color:#fffdf7;position:absolute;top:50%;left:100%;z-index:1;margin-top:-11px; } .page-care .section-01 .flow2 li:nth-child(1):after, .page-care .section-01 .flow2 li:nth-child(3):after{ content:"or";display:block;width:0;height:0;position:absolute;top:43%;left:86%;z-index:1;font-size: 18px;} .page-care .section-01 .flow2 li:nth-child(3), .page-care .section-01 .flow2 li:nth-child(4) { background:#fff7e0; } .page-care .section-01 .flow2 li:nth-child(3):after, .page-care .section-01 .flow2 li:nth-child(4):after{ border-left-color:#fff7e0; } .page-care .section-01 .flow2 li:last-child:after { content:none; } .page-care .section-01 .flow2 .step { display:inline-block;height:28px;line-height:28px;margin-bottom:12px;padding:0 20px;color:#fff;font-weight:bold;border-radius:14px;background:#ccc; } .page-care .section-01 .flow2 .step.purple { background:#e8c4f9; } .page-care .section-01 .flow2 .step.blue { background:#b2c4f2; } .page-care .section-01 .flow2 .step.cyan { background:#96deed; } .page-care .section-01 .flow2 .step.yellow { background:#ffcd91; } .page-care .section-01 .flow2 .step.orange { background:#ffbba0; } .page-care .section-01 .flow2 .step.pink { background:#f7afb6; } /* リニューアル調整用 */ .page-care .page-content{color: #444444;font-size: 14px;text-align: left;font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} .page-care .page-content a,.page-care .page-content a:link { text-decoration: none; color: #ff9d50;} /*.page-care .page-content img{vertical-align: baseline;}*/ .page-care .items .btn {width: auto;max-width: inherit} .page-care .items .btn > a {height: auto;border-radius: 0;} .page-care .items .detail{margin: 0;} .page-content {margin-bottom: 64px;} #careTop .main-title {font-weight:normal;line-height:1;} #careTop .category-list .card{margin-bottom:48px;} #careTop .tag-list > li{margin-bottom:8px;} .page-care a[target="_blank"]::after{content:none;} #care09 .section-01 h2:before, #care09 .section-01 h4:before, #care10 .section-01 h2:before, #care10 .section-01 h4:before {content:"";} #care09 .section-01 h3:before, #care10 .section-01 h3:before{content:"\f06a";} #care10 .section-01 h4{padding-left:18px;} #care11 .page-content ol li{list-style:decimal inside;} /* 01_エイジング敏感肌 */ #care01 #cause .flex_wrap { display:flex;justify-content:space-between; } #care01 #cause .flex_wrap > div { width:48.5%;padding:20px 20px 30px;background:#fffdfb;border:1px solid #ffb575;border-radius:12px; } #care01 #cause .flex_wrap h4 { margin-top:0;text-align:center; } #care01 #cause .flex_wrap h4 span { display:inline-block;padding:10px 40px 15px;font-size:21px;line-height:1.2;background:url("../care/01/img/cause_h4_bg.png") center no-repeat;background-size:contain; } #care01 #cause .flex_wrap h4 small { font-size:16px; } #care01 #cause .flex_wrap p { padding:0 20px; } #care01 #cause .list_circle { margin:40px 30px 0; } #care01 #cause .list_circle li { padding-left:30px;font-size:16px;position:relative; } #care01 #cause .list_circle li:before { content:"";display:block;width:16px;height:16px;background:#ffe2c9;border-radius:50%;position:absolute;top:4px;left:0; } #care01 #cause .list_circle li + li { margin-top:10px; } #care01 #cause .case { display:flex;justify-content:center;margin:10px 0 25px; } #care01 #cause .case li { width:120px;height:120px;margin:5px;padding-top:35px;border-radius:50%;background:#fdfbf8;text-align:center;line-height:1.4;font-size:17px;box-shadow:0px 0px 5px 5px #fff inset; } #care01 #cause .case li:nth-child(2n) { background:#fcf8f3; } #care01 #check .flex_wrap { display:flex;justify-content:space-between; } #care01 #check .flex_wrap > div { width:48%; } #care01 #check .check { padding:40px;border:1px solid #b2b2b2;border-radius:20px; } #care01 #check .check li { font-size:17px;padding-left:36px;position:relative; } #care01 #check .check li:before { content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0; } #care01 #check .check li + li { margin-top:10px; } #care01 #check .rich .check { background:#fff9f9; } #care01 #check .white .check { background:#f9fdff; } #care01 #check .arrow { margin-top:15px;font-size:16px;padding:27px 0 40px;position:relative; } #care01 #check .arrow:before { content:"";display:block;width:5px;height:23px;background:url("../care/01/img/check_arrow_before.png") 0 0 no-repeat;background-size:contain;position:absolute;top:0;left:50%;margin-left:-3px; } #care01 #check .arrow:after { content:"";display:block;width:26px;height:36px;background:url("../care/01/img/check_arrow_after.png") 0 0 no-repeat;background-size:contain;position:absolute;bottom:0;left:50%;margin-left:-13px; } #care01 #check .recommend { display:inline-block;margin:0;font-size:16px;line-height:1;text-align:right; } #care01 #check .btn a { display:inline-block;width:240px;height:40px;line-height:38px;border:1px solid #b2b2b2;border-radius:20px;color:#444444;font-size:16px;font-family:Century Gothic,sans-serif;letter-spacing:0.1em;background:url("../care/01/img/arrow_gray_down.png") top 50% right 15px no-repeat;background-size:15px 9px;transition:.2s; } #care01 #check .btn a:hover { text-decoration:none; } #care01 #check .rich .btn a:hover { background-color:#fff9f9; } #care01 #check .white .btn a:hover { background-color:#f9fdff; } #care01 .approach { margin-top:30px; } #care01 .approach > li { padding:20px 40px;background:#fff9f9;border:1px solid #f18f8f;border-radius:10px;display:flex;justify-content:space-between;align-items:center; } #care01 .approach > li + li { margin-top:40px;position:relative; } #care01 .approach > li + li:before { content:"";display:block;width:29px;height:17px;background:url(../care/01/img/arrow_pink_down.png) 0 0 no-repeat;background-size:contain;position:absolute;top:-29px;left:50%;margin-left:-14px; } #care01 .approach .txt { width:47%; } #care01 .approach h4 { margin:0;font-size:18px;font-weight:bold; } #care01 .approach h4 img { margin-bottom:5px; } #care01 .approach h4 + p { margin-top:5px; } #care01 .approach .img { width:51%; } #care01 .approach .app_content { display:flex;justify-content:center;padding:30px 0; } #care01 .approach .app_content li { width:25%;padding:0 10px;text-align:center; } #care01 .approach .app_content li span { display:block;margin-top:3px;font-size:13px;line-height:1.2; } #care01 .flow_h4 { font-size:18px;font-weight:bold;color:#666; } #care01 #rich .items .title .cat { border-color:#f18f8f; } #care01 #rich .items .title a, #care01 #rich .items .detail .info .txt .price { color:#f18f8f; } #care01 #rich .items .btn a { background-image:url("../care/01/img/arrow_pink.png"); background-color:#fff9f9; } #care01 #white .approach > li { background:#f9fdff; border-color:#91bddb; } #care01 #white .approach > li + li:before { background-image:url("../care/01/img/arrow_blue_down.png"); } #care01 #white .flow li:last-child .name { letter-spacing:-0.05em; } #care01 #white .items .title .cat { border-color:#91bddb; } #care01 #white .items .title a, #care01 #white .items .detail .info .txt .price { color:#91bddb; } #care01 #white .items .btn a { background-image:url("../care/01/img/arrow_blue.png");background-color:#f9fdff; } #care01 #care .flex_wrap { display:flex;justify-content:space-between; } #care01 #care .flex_wrap > div { width:32%; } #care01 #care .flex_wrap .img { margin-bottom:-5px;text-align:center; } #care01 #care .flex_wrap small { display:block;line-height:1.6; } /* 02_敏感乾燥肌 */ #care02 .h4_num { margin-top:30px; } #care02 #check .flex_wrap { display:flex;justify-content:space-between;align-items:center; } #care02 #check .check { padding:40px;border:1px solid #b2b2b2;border-radius:20px;background:#fffdf7; } #care02 #check .check li { font-size:17px;padding-left:36px;position:relative; } #care02 #check .check li:before { content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0; } #care02 #check .check li + li { margin-top:10px; } #care02 #check .recommend { padding:10px 260px 120px 0;background:url("../care/02/img/check_oligo_img.png") right bottom no-repeat;background-size:318px 212px; } #care02 #check .recommend p { display:inline-block;font-size:16px;text-align:center;color:#666; } #care02 #check .recommend p em { font-size:20px;font-weight:bold;font-style:normal; } #care02 #check .recommend p em span { padding:0 5px;font-size:25px;font-weight:bold;background:linear-gradient(transparent 45%, #fff6b6 45%);line-height:1; } #care02 #check .recommend p img { vertical-align:-18px;margin-top:20px; } #care02 #cause .flex_wrap { display:flex;justify-content:center;text-align:center;font-size:17px; } #care02 #cause .flex_wrap > div + div { margin-left:25px; } #care02 #cause .flex_wrap img { margin-bottom:14px; } #care02 #care .content_tbl { margin:0 0 20px; } #care02 #care .content_tbl tr { vertical-align:top; } #care02 #care .content_tbl th, #care02 #care .content_tbl td { font-size:16px; } #care02 #care .content_tbl th { padding-right:25px; white-space:nowrap; } #care02 #care .content_tbl th i { display:inline-block; width:10px; height:10px; margin-right:8px; background:#ccc; border-radius:50%; } #care02 #care .content_tbl th i.pink { background:#f9d3e3; } #care02 #care .content_tbl th i.yellow { background:#fde4bc; } #care02 #care .content_tbl th i.green { background:#d1e9cf; } #care02 #care .content_tbl th i.blue { background:#ceebfb; } #care02 #care .list_box { display:flex;justify-content:space-between;flex-wrap:wrap; } #care02 #care .list_box li { padding:25px;border:1px solid #ffb575;border-radius:12px; } #care02 #care .list_box h5 { font-size:17px;font-weight:normal; } #care02 #care .list_box.oligo li { width:48.6%; border-width:2px; } #care02 #care .list_box.oligo li:nth-child(n+3) { margin-top:20px; } #care02 #care .list_box.oligo li:nth-child(1) { border-color:#d1e9cf; } #care02 #care .list_box.oligo li:nth-child(2) { border-color:#ceebfb; } #care02 #care .list_box.oligo li:nth-child(3) { border-color:#fde4bc; } #care02 #care .list_box.oligo li:nth-child(4) { border-color:#f9d3e3; } #care02 #care .list_box.oligo h5 span { font-size:24px;padding-right:5px;font-weight:bold;color:#ffb575;vertical-align:-1px; } #care02 #care .list_box.oligo li:nth-child(1) h5 span { color:#a3da9e; } #care02 #care .list_box.oligo li:nth-child(2) h5 span { color:#92cded; } #care02 #care .list_box.oligo li:nth-child(3) h5 span { color:#ffcb78; } #care02 #care .list_box.oligo li:nth-child(4) h5 span { color:#ffa9cd; } #care02 #care .list_box.content li { width:32%;text-align:center; } #care02 #care .list_box.content li.wide { width:100%;margin-bottom:20px;display:flex;justify-content:space-around;align-items:flex-end; } #care02 #care .list_box.content li.wide .ceramide { text-align:center; } #care02 #care .list_box.content li.wide .point { width:530px;padding-left:25px;text-align:left;border-left:1px dashed #ffb575;flex-shrink:0; } #care02 #care .list_box.content .match { display:flex;justify-content:center;align-items:center; } #care02 .flow_h4 { font-size:18px;font-weight:bold;color:#666; } #care02 .flow_wrap { display:flex;justify-content:flex-start; } #care02 .flow_wrap:not(:first-child) { margin-top:30px; } #care02 .flow_wrap .title { width:170px;margin-right:20px;position:relative; } #care02 .flow_wrap .title h5 { background:#fff6b6;padding:10px 0;font-size:16px;font-weight:bold;text-align:center;color:#666; } #care02 .flow_wrap .title .comment { width:200px;padding:20px;color:#666;line-height:1.6;background:#fff;border:1px solid #ffb575;border-radius:10px;z-index:2;position:absolute;top:50%;left:0;transform:translateY(-50%); } #care02 .flow_wrap .title .comment:after { content:"";display:block;width:12px;height:12px;background:url("../care/02/img/comment_img.png") 0 0 no-repeat;position:absolute;top:50%;right:-11px;margin-top:-6px; } #care02 .flow_wrap .title h5 + .comment { top:60px;transform:none; } #care02 .flow_wrap .title .comment .step { display:inline-block;padding:3px 20px;color:#fff;background:#ffb575;border-radius:20px;position:absolute;top:-14px;left:20px; } /* 04_おしりかぶれ */ #care04 #cause .img_box { justify-content: space-between;} #care04 #cause .list_box{display:flex;justify-content:space-between;flex-wrap:wrap} #care04 #cause .list_box li{padding:10px 25px 25px;border:1px solid #ffb575;border-radius:12px} #care04 #cause .list_box .ttl_wrap{text-align:center} #care04 #cause .list_box h5{font-size:17px;font-weight:400;display:inline-block} #care04 #cause .list_box h5 img{width:18px;margin:0 10px 0 0;vertical-align:-2px} #care04 #cause .list_box.content li{width:32%;justify-content:center} #care04 #cause .list_box.content li.wide{width:49%;margin-bottom:20px;display:flex;flex-wrap:wrap} #care04 #cause .list_box.content .match{width:100%;display:flex;justify-content:center;align-items:center} #care04 #cause .list_box p{margin-top:10px} #care04 #cause .point_box{align-items:start} #care04 #cause .point_box h4 img{margin:0 0 3px} #care04 #cause .point_box .txt{width:auto;flex-grow:1} #care04 #cause .point_box .check{flex-grow:1.75} #care04 #cause .check li{font-size:17px;padding-left:36px;position:relative} #care04 #cause .check li:before{content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0} #care04 #cause .check li + li{margin-top:10px} #care04 .txt-r{text-align:right;margin-top:30px} #care04 a.underline{padding-left:16px;background:url(../care/assets/img/arrow02.png) 0 3px no-repeat;background-size:7px 12px} #care04 #item .img_box{justify-content: space-between;} #care04 #item .point_box { display: block;} #care04 #item .point_list{padding:25px;background:#fff9e8;border-radius:4px} #care04 #item .point_list h4{margin:0;font-size:15px} #care04 #item .point_list h4 span{font-size:17px} #care04 #item .point_list li{position:relative;padding-left:18px} #care04 #item .point_list li:before{content:"";position:absolute;top:7px;left:0;width:8px;height:8px;background:#ffb575;border-radius:100%} #care04 #item .point_list li + li{margin:10px 0 0} #care04 #item .num_title + .img_box .txt{width:47%} #care04 #item .item_point01{margin:30px 0 0} #care04 #item .item_point01 .point_box h4{margin:0 0 15px} #care04 #item .item_point01 .point_box .img_box .img{border:solid 1px #e8dfc5;border-radius:10px;width:40.4%;background:#fff;display:flex;justify-content:center;align-items:center;padding:10px 10px 15px;margin:0} #care04 #item .item_point01 .point_box .img_box .txt{width:55%} #care04 #item .items .detail p{letter-spacing:-.01em} #care04 #item .item_point02 .point_box{padding:30px 40px 10px} #care04 #item .item_point02 .point_box .img_box .img{width:24%} #care04 #item .item_point02 .point_box .img_box .txt{width:72%} #care04 #item .caution_box{border:1px solid #ffb575;border-radius:12px;margin:30px 0;padding:30px 40px} #care04 #item .caution_box h4{color:#ff9d50;margin:0;padding-left:24px} #care04 #item .caution_box h4:before{content:"\f06a";position:absolute;left:0;display:inline-block;font-family:"Font Awesome 5 Free";font-weight:700;margin-right:8px;color:#ff9d50;font-size:18px;-ms-transform:rotate(30deg);transform:rotate(30deg);top:0;margin-top:0;width:inherit;height:inherit;background:none;border-radius:0} #care04 .movie{position:relative;width:100%;max-width:640px;margin:30px auto 0;border:2px solid #ffb575;border-radius:10px;overflow:hidden} #care04 .movie:before{content:"";display:block;width:100%;padding-top:56.25%} #care04 .movie iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:8px} /* 05_妊婦のボディケア */ #care05 .section-01 .section-header { background-image:url("../care/assets/img/section3-header.jpg"); } #care05 h4.care_h4 { padding:0;font-size:18px;font-weight:bold; } #care05 h4.care_h4:before { content:none; } #care05 .point_box { display:block; } #care05 .point_line { display:flex; } #care05 .point_line li { width:50%;padding:10px 0; display:flex; justify-content:space-between; align-items:center;} #care05 .point_line li + li { border-left:1px dotted #ffb575; } #care05 .point_line li:nth-child(1) { padding-right:25px; } #care05 .point_line li:nth-child(2) { padding-left:25px; } #care05 .point_line .txt { flex-grow:1;padding-right:15px; } #care05 .point_line .img { width:154px;max-width:40%; } #care05 .point_line h5 { margin-bottom:-5px; } #care05 .point_line h5 span { background:#ffb575;padding:3px 10px;font-weight:bold; } #care05 .movie { position:relative;width:100%;max-width:640px;margin:30px auto 0;border:2px solid #ffb575;border-radius:10px;overflow:hidden; } #care05 .movie:before { content:"";display:block;width:100%;padding-top:56.25%; } #care05 .movie iframe { position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:8px; } #care05 .bust_care { display:flex;justify-content:space-between;margin-top:20px; } #care05 .bust_care li { width:30%;position:relative; } #care05 .bust_care li + li:before { content:"";display:block;width:11px;height:18px;background:url("../care/05/img/arrow.png") 0 0 no-repeat;background-size:contain;position:absolute;top:50%;left:-11%;margin-top:-9px;} #care05 .point_num_list > li:nth-child(1),#care05 .point_num_list > li:nth-child(2) { padding-top:10px; } #care05 .point_num_list > li:nth-child(3),#care05 .point_num_list > li:nth-child(4) { padding-bottom:10px; } /* 07_敏感乾燥肌 */ #care07 p:first-child { margin-top:0; } #care07 p:last-child { margin-bottom:0; } #care07 h2:before { content:none; } #care07 h3:before { content:none; } #care07 h4 { padding:0;line-height:1.5; } #care07 h4:before { content:none; } #care07 li { margin-bottom:0; } #care07 .h2_title { display:block;text-align:center;padding:8px;font-size:24px;font-weight:bold;border:0;line-height:1.5; } #care07 .h2_title span { font-weight:bold;background:linear-gradient(transparent 45%, #fff6b6 45%); } #care07 .lead { padding:0 60px; } #care07 .care_block { margin-top:40px;padding-top:40px;border-top:1px solid #dedcd4; } #care07 .num_title { display:flex;justify-content:flex-start;align-items:center;margin-bottom:25px; } #care07 .num_title .num { padding-left:30px;flex-shrink:0; } #care07 .num_title h3 { margin:0;padding-left:25px;font-size:20px;font-weight:bold;color:#666;line-height:1.5; } #care07 .num_title h3 small { font-size:16px;font-weight:normal; } #care07 .cause { display:flex;justify-content:space-between; } #care07 .cause > li { width:32%;display:flex;justify-content:flex-start; } #care07 .cause .num { width:40px;margin-right:13px;flex-shrink:0; } #care07 .cause .txt { padding-top:13px; } #care07 .h4_num { display:flex;justify-content:flex-start;align-items:center;margin:0 0 20px; } #care07 .h4_num img { width:40px;margin-right:12px;flex-shrink:0; } #care07 .h4_num span { font-size:17px;font-weight:bold;color:#444444; } #care07 .h5_ul { font-size:16px;font-weight:normal; } #care07 .h5_ul span { display:inline-block; padding:5px 10px; background:linear-gradient(transparent 45%, #fff6b6 45%); } #care07 .reason01_img { float:right;max-width:48%;margin-left:25px; } #care07 .check_box { margin:30px 0;padding:30px 40px 40px;background:#fffdf7;border:1px dashed #ffb575;border-radius:12px;display:flex;justify-content:space-between; } #care07 .check_box .txt, #care07 .check_box .img { width:48%; } #care07 .check_box h4 { margin:0 0 25px; } #care07 .check_box h4 img { margin-bottom:10px; } #care07 .check_box .img { margin-bottom:10px;padding-top:10px; } #care07 .reason_flex { display:flex;justify-content:space-between; } #care07 .reason_flex > div { width:48%; } #care07 .reason_flex p img { margin-bottom:10px; } #care07 .cycle { margin-top:30px; } #care07 .cycle > li { padding:20px;background:#fffdf7;border:1px solid #ffb575;border-radius:10px;display:flex;justify-content:flex-start;align-items:center; } #care07 .cycle > li + li { margin-top:40px;position:relative; } #care07 .cycle > li + li:before { content:"";display:block;width:29px;height:17px;background:url(../care/07/img/03_cycle_arrow.png) 0 0 no-repeat;background-size:contain;position:absolute;top:-29px;left:50%;margin-left:-14px; } #care07 .cycle .img { width:290px;margin-right:30px;flex-shrink:0; } #care07 .cycle .img img { vertical-align:top; } #care07 .cycle h4 { margin:0 0 10px;font-size:18px;font-weight:bold; } #care07 .cycle h4 img { margin-bottom:5px; } #care07 .items { display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:40px; } #care07 .items > li { width:48.6%;border:1px solid #e6e4e2;border-radius:10px;overflow:hidden; } #care07 .items > li:nth-child(n+3) { margin-top:26px; } #care07 .items .title { padding:30px 20px 15px;text-align:center;border-bottom:1px solid #e6e4e2;display:block; } #care07 .items .title small { color:#909090; } #care07 .items .title a { font-size:18px;font-weight:bold; } #care07 .items .detail { padding:20px 40px; } #care07 .items .detail .info { display:flex;justify-content:space-between;align-items:center; } #care07 .items .detail .info .img { width:40%;text-align:center; } #care07 .items .detail .info .txt { width:55%; } #care07 .items .detail .info .txt .size { font-size:14px;color:#909090; } #care07 .items .detail .info .txt .price { font-size:22px;font-weight:bold;color:#ff9d50;line-height:1; } #care07 .items .btn { text-align:center;border-top:1px solid #e6e4e2; } #care07 .items .btn a { display:block;padding:25px;line-height:1;background:url("../care/07/img/04_arrow.png") top 50% right 24px no-repeat #fffdf7;background-size:11px 18px;font-size:18px;color:#444444;transition:.3s; } #care07 .items .btn a:hover { text-decoration:none;background-color:#fff1cf; } #care07 .banner_sp { display:none; } #care07 .contact-area { margin-top:100px; } /* 12_頭皮ケア */ #bbe191025 p.main_title{font-size: 24px;text-align: center;font-weight: bold;color: #4D4D4D;border-bottom: 1px solid #e6e4e2;padding-bottom: 25px;} #bbe191025 p.main_title span{background: linear-gradient(transparent 60%, #FFEFAF 60%);font-weight: bold;} #bbe191025 .nam{font-size: 20px;font-weight: bold;color: #666666;position: relative;padding-left: 70px;margin: 30px 0;} #bbe191025 .nam01::before{content: "01";font-size: 35px;color: #FFAF75;border-right: 1px solid #FFAF75;font-weight: normal;display: inline-block;padding: 0px 5px;line-height: 1.1;margin-right: 5px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} #bbe191025 .nam02::before{content: "02";font-size: 35px;color: #FFAF75;border-right: 1px solid #FFAF75;font-weight: normal;display: inline-block;padding: 0px 5px;line-height: 1.1;margin-right: 5px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} #bbe191025 .nam03::before{content: "03";font-size: 35px;color: #FFAF75;border-right: 1px solid #FFAF75;font-weight: normal;display: inline-block;padding: 0px 5px;line-height: 1.1;margin-right: 5px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} #bbe191025 .nam04::before{content: "04";font-size: 35px;color: #FFAF75;border-right: 1px solid #FFAF75;font-weight: normal;display: inline-block;padding: 0px 5px;line-height: 1.1;margin-right: 5px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} #bbe191025 section.area01{border-bottom:1px solid #e6e4e2;padding-bottom: 50px;} #bbe191025 section.area02{padding-bottom: 10px;} #bbe191025 section .arrow{margin-top: 15px;font-size: 16px;padding: 27px 0 0!important;position: relative; margin-bottom: 0!important;} #bbe191025 section .arrow::before{ content: "";display: block;width: 5px;height: 23px;background: url(../care/12/img/check_arrow_before.png) 0 0 no-repeat;background-size: contain; position: absolute;top: 0;left: 50%;margin-left: -3px;} #bbe191025 section .recommend{font-size: 24px;font-weight: bold;margin: 0;} #bbe191025 .check01{background: #FFF7F1;border: 1px dashed #FFAF75;border-radius: 10px;padding: 35px;display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;max-width: 980px;margin: 0 auto} #bbe191025 .check01 div.left{width:45%;max-width: 402px;} #bbe191025 .check01 div.left2 .check_title{margin: 0;font-size: 20px;font-weight: bold;color: #FFAF75;} #bbe191025 .check01 div.right{width:55%;padding-left: 30px;text-align:left;} #bbe191025 .check01 div.right p{margin:0;margin-bottom: 15px;} #bbe191025 .check01 div.right p.check_title{margin: 0;font-size: 20px;font-weight: bold;color: #FFAF75;} #bbe191025 .check01 div.right p span{background: linear-gradient(transparent 60%, #FFEFAF 60%);} #bbe191025 .nam_list{max-width: 880px;margin: 0 auto;display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;} #bbe191025 .nam_list li{max-width:272px;} #bbe191025 .nam_title{font-size: 17px;font-weight: bold;color: #444444;position: relative;padding-left: 50px;margin-bottom: 30px;} #bbe191025 .nam_title01::before{content: "01";display: inline-block;width: 45px;height: 45px;border-radius: 50%;background: #FFAE75;color: #fff;font-size: 25px;font-weight: bold;position: absolute;left: 0;top: 50%;transform: translateY(-50%);padding: 0px 9px;} #bbe191025 .nam_title02::before{content: "02";display: inline-block;width: 45px;height: 45px;border-radius: 50%;background: #FFAE75;color: #fff;font-size: 25px;font-weight: bold;position: absolute;left: 0;top: 50%;transform: translateY(-50%);padding: 0px 9px;} #bbe191025 .nam_title03::before{content: "03";display: inline-block;width: 45px;height: 45px;border-radius: 50%;background: #FFAE75;color: #fff;font-size: 25px;font-weight: bold;position: absolute;left: 0;top: 50%;transform: translateY(-50%);padding: 0px 9px;} #bbe191025 .nam_title04::before{content: "04";display: inline-block;width: 45px;height: 45px;border-radius: 50%;background: #FFAE75;color: #fff;font-size: 25px;font-weight: bold;position: absolute;left: 0;top: 50%;transform: translateY(-50%);padding: 0px 9px;} #bbe191025 section.area02 .mov{max-width:800px;margin: 0 auto;} #bbe191025 section.area02 .mov iframe{width:100%;} #bbe191025 .area_title{border-left:5px solid #FFAF75;font-size: 20px;font-weight: bold;color: #666666;padding-left: 10px;margin-bottom: 50px;} #bbe191025 .check_box_title{text-align: center;font-size: 20px;margin-bottom: 20px;font-weight: bold;background: #fff8f2;border-radius: 10px;padding: 10px;} #bbe191025 .check_box{max-width: 880px;margin: 0 auto;display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-wrap: wrap;flex-wrap: wrap;} #bbe191025 .product_box{max-width: 880px;margin: 0 auto;display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;} #bbe191025 .check_box > div.check_box_border .box_c{border: 1px solid #e6e4e2;border-radius: 10px;background: #fffdf7;} #bbe191025 .check_box > div, #bbe191025 .product_box .left, #bbe191025 .product_box .right{width: 50%;max-width: 400px;text-align:left;} #bbe191025 .check_box ul{width: 80%;margin: 30px auto;} #bbe191025 .check_box ul li{font-size: 16px;color: #666666;} #bbe191025 .check_box ul li input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display: none;} #bbe191025 .check_box ul li label{position: relative;padding-left: 25px;} #bbe191025 .check_box ul li label::before{position: absolute;content: "";display: inline-block;width: 19px;height: 19px;background: #fff;border: 1px solid #d3d0c7;left: 0;top: 10px;transform: translateY(-50%);} #bbe191025 .check_box ul li label::after{content:"";position: absolute;left: 6px;top: 0;width: 20px;height: 15px;border-left: 4px solid red;border-bottom: 4px solid red;transform: rotate(-45deg) translateY(-50%);display: none;} #bbe191025 .check_box ul li input[type=checkbox]:checked + label::after{display:inline-block;} #bbe191025 section.area03{padding-bottom: 50px;border-bottom:1px solid #e6e4e2;} #bbe191025 .check_box .left, #bbe191025 .check_box .right{width:50%;max-width: 400px;} #bbe191025 .check_box .product_title01{background: #ffe1e5;color: #7a7d80; font-weight: bold;border-radius: 10px;font-size: 20px;text-align: center;padding: 10px; margin: 0 auto 30px; width: 100%;} #bbe191025 .check_box .product_title02{background: #e4edf9;color: #7a7d80; font-weight: bold;border-radius: 10px;font-size: 20px;text-align: center;padding: 10px; margin: 30px auto 30px; width: 100%;} #bbe191025 .product_area{border: 1px solid #e6e4e2;border-radius: 10px;background: #fff;overflow: hidden;} #bbe191025 .product_area .text01{font-size:14px;color: #444444;text-align: center;margin-bottom: 0;} #bbe191025 .product_area .text02{font-size:12px;color: #909090;text-align: center;margin: 0;} #bbe191025 .product_area .text03{font-size:18px;color: #FF9C50;text-align: center;padding-bottom: 20px;border-bottom: 1px solid #e6e4e2;margin-top: 0;} #bbe191025 .product_area .product{display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;} #bbe191025 .product_area .product div{width:50%;} #bbe191025 .product_area .product div:first-child{max-width: 164px;} #bbe191025 .product_area .product div span{color: #828282;font-size: 12px;} #bbe191025 .product_area .product div p{margin:0;} #bbe191025 .product_area .product div p:first-child{margin-bottom:10px;} #bbe191025 .product_area .product div p:last-child{margin-top:10px;} #bbe191025 .product_area .product div p span{color: #FF9750;font-size: 22px;font-weight: bold;} #bbe191025 .product_area p.txt{padding: 0 30px;} #bbe191025 .product_area .btn{text-align: center;border-top: 1px solid #e6e4e2;width:100%;max-width:100%;} #bbe191025 .product_area a{display: block;padding: 25px;line-height: 1;background: url("../care/assets/img/arrow02.png") top 50% right 24px no-repeat #fffdf7;background-size: 11px 18px; font-size: 18px;color: #444444;transition: .3s;text-align: center} #bbe191025 .product_area a:hover{text-decoration: none;background-color:#fff1cf;} #bbe191025 section.area04{padding-bottom: 50px;border-bottom:1px solid #e6e4e2;} #bbe191025 .nam_list02{max-width: 880px;margin: 0 auto;display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;} #bbe191025 .nam_list02 li{max-width:400px;} #bbe191025 .nam_list02 .nam_title{min-height: 60px;} #bbe191025 .nam_list02 .nam_title02_02, #bbe191025 .nam_list02 .nam_title03_02{padding-top: 1em;} #bbe191025 .nam_list02 .txt span{background: linear-gradient(transparent 60%, #FFEFAF 60%);} #bbe191025 .check02 {padding-bottom: 40px;} #bbe191025 .area04_check02 p:first-child{color: #FFB475;font-size: 20px;font-weight: bold;} #bbe191025 section.area05{border-bottom:1px solid #e6e4e2;padding-bottom: 50px;} #bbe191025 section.area06{padding-top: 50px;} #bbe191025 .product_area03{max-width: 400px;margin: 0 auto;} #bbe191025 .nam_title03_c{display: inline-block;margin: 50px auto 25px; left: 50%;transform: translateX(-50%);} #bbe191025 .product_box{margin-top: 50px;} #bbe191025 .text03_height{line-height: 1;} #bbe191025 .area06 .doctor_area{max-width: 980px;margin: 0 auto;border: 1px dashed #FFAF75 ;border-radius: 10px;background-color: #FFF7F1;padding: 35px;} #bbe191025 .doctor_title img,#bbe191025 .doctor_title p{display: inline-block} #bbe191025 .doctor_title img{max-width: 148px;max-height: 61px;margin: 10px 10px 0 0;} #bbe191025 .doctor_title p{font-size: 25px;color: #444444;letter-spacing: -1px;} #bbe191025 .doctor_title {display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;} #bbe191025 .sirami_box{display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; padding-top:30px;} #bbe191025 .sirami_box div{max-width:400px; width:50%; background:#fff; border-radius: 10px; border:1px solid #e6e4e2;} #bbe191025 .sirami_box div p{font-size:25px; font-weight:bold; color:#fff; background:#FFAF75; border-radius:10px 10px 0 0; text-align:center; margin-top:0; } #bbe191025 .sirami_box div ul{list-style:disc; list-style-position: inside; width:85%; margin:0 auto; padding-top: 10px;} #bbe191025 .banner_area{padding:50px 0;margin: 0 auto;text-align: center;} #bbe191025 .banner_area a{display:block;margin: 0 auto;} #bbe191025 .sp_br,#bbe191025 .sp{display: none;} #bbe191025 .pc{display: block;} #bbe191025 .product_area .product div p:first-child{padding: 0;} #bbe191025 .product_area .product div p:last-child{padding: 0;} /* 13_花粉ダメージ肌 */ #care13 h4.bold { font-size:17px; } #care13 .point_box { display:block; } #care13 #protect .protect_kids { display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:15px; } #care13 #protect .protect_kids li { width:23.5%;padding:8px;background:#fff5d7;border-radius:10px; } #care13 #protect .protect_kids li:nth-child(n+5) { margin-top:2%; } #care13 #protect .protect_kids li p { margin:0;padding:5px 14px; } #care13 #protect .protect_kids li .match2 { display:flex;justify-content:center;align-items:center; } #care13 #nose .point_box .img_box { align-items:center; margin-bottom:20px; } #care13 .point_box .items > li { background:#fff; } #care13 .point_box .items .btn a { background-color:#fff5d7; } #care13 .point_box .items .btn a:hover { background-color:#ffe8b6; } #care13 .point_num_list > li:nth-child(1),#care13 .point_num_list > li:nth-child(2) { padding-top:10px; } #care13 .point_num_list > li:nth-child(3),#care13 .point_num_list > li:nth-child(4) { padding-bottom:10px; } /* 14_ゆらぎ肌 */ #care14 #cause .list_box{display:flex;justify-content:space-between;flex-wrap:wrap} #care14 #cause .list_box li{padding:10px 25px 25px;border:1px solid #ffb575;border-radius:12px} #care14 #cause .list_box .ttl_wrap{text-align:center} #care14 #cause .list_box h5{font-size:17px;font-weight:400;display:inline-block} #care14 #cause .list_box h5 img{width:18px;margin:0 10px 0 0;vertical-align:-2px} #care14 #cause .list_box.content li{width:32%;justify-content:center} #care14 #cause .list_box.content li.wide{width:49%;margin-bottom:20px;display:flex;flex-wrap:wrap} #care14 #cause .list_box.content .match{display:flex;justify-content:center;align-items:center} #care14 #cause .list_box p{margin-top:10px} #care14 #cause .point_box{align-items:start} #care14 #cause .point_box h4 img{margin:0 0 3px} #care14 #cause .point_box .txt{width:auto;flex-grow:1} #care14 #cause .point_box .check{flex-grow:1.75} #care14 #cause .check li{font-size:17px;padding-left:36px;position:relative} #care14 #cause .check li:before{content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0} #care14 #cause .check li + li{margin-top:10px} #care14 .txt-r{text-align:right;margin-top:30px} #care14 a.underline{padding-left:16px;background:url("../care/assets/img/arrow02.png") 0 3px no-repeat;background-size:7px 12px} #care14 #item .point_box { display: block;} #care14 #item .point_list{padding:25px 25px 30px;background:#fff9e8;border-radius:4px} #care14 #item .point_list h4{margin:0;font-size:15px} #care14 #item .point_list h4 span{font-size:17px} #care14 #item .point_list ul{margin:20px 0 0} #care14 #item .point_list li{position:relative;padding-left:18px} #care14 #item .point_list li:before{content:"";position:absolute;top:7px;left:0;width:8px;height:8px;background:#ffb575;border-radius:100%} #care14 #item .point_list li + li{margin:10px 0 0} #care14 #measures .measures_flex{margin:30px 0 0;display:flex;justify-content:space-between} #care14 #measures .h4_num + h5{margin-top:30px} #care14 #measures h5 + .measures_flex{margin:20px 0 0} #care14 #measures .measures_flex > div{width:48.255%} #care14 #measures h5{font-size:17px;margin:0 0 20px} #care14 #measures h5 img{margin-right:12px} #care14 #measures .h4_num{margin-top:30px} #care14 #measures .items .adjust .detail{padding:20px 35px} /* 15_夏の白肌ケア */ #care15 a.underline{padding-left:16px;background:url("../care/assets/img/arrow02.png") 0 3px no-repeat;background-size:7px 12px;} #care15 a.underline2{padding-right:16px;background:url("../care/15/img/arrow_gray.png")no-repeat;background-size:7px 12px;background-position: right; color: #444444;text-decoration: underline;} #care15 .care_block .flex{margin:30px 0 0;display:flex;justify-content:space-between;} #care15 .care_block .flex p{font-size:16px;line-height:1.6;} #care15 .care_block h5.caption{background:#fff6b6;padding:8px 10px;text-align: center;width: 80%; margin: 0 auto 20px;font-size: 18px;} #care15 .care_block h5.caption2{text-align: center; font-size: 18px;margin-bottom: 20px;} #care15 #cause .onePoint{font-size:18px;font-weight:bold;color:#ff9d50; margin-top: 40px;position: relative;line-height: 1;padding-left: 22px;} #care15 #cause .onePoint::before{content: "\f06a";position: absolute;left: 0;display: inline-block;font-family: "Font Awesome 5 Free";font-weight: bold;margin-right: 8px;color: #ff9d50;font-size: 18px;transform: rotate(30deg);background: none;} #care15 #check .flex_wrap { display:flex;justify-content:space-between; } #care15 #check .flex_wrap > div { width:48%; background: none; border: none; } #care15 #check .check { padding:30px;border:1px solid #b2b2b2;border-radius:20px; } #care15 #check .check li { font-size:17px;padding-left:36px;position:relative; } #care15 #check .check li:before { content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0; } #care15 #check .check li + li { margin-top:10px; } #care15 #check .rich .check { background:#fff9f9; } #care15 #check .white .check { background:#f9fdff; } #care15 #check .arrow { margin-top:15px;font-size:16px;padding:27px 0 40px!important;position:relative; } #care15 #check .arrow:before { content:"";display:block;width:5px;height:23px;background:url("../care/01/img/check_arrow_before.png") 0 0 no-repeat;background-size:contain;position:absolute;top:0;left:50%;margin-left:-3px; } #care15 #check .arrow:after { content:"";display:block;width:26px;height:36px;background:url("../care/01/img/check_arrow_after.png") 0 0 no-repeat;background-size:contain;position:absolute;bottom:0;left:50%;margin-left:-13px; } #care15 #check .recommend { display:inline-block;margin:0;font-size:16px;line-height:1;text-align:right; } #care15 #check .btn a { display:inline-block;width:240px;height:40px;line-height:38px;border:1px solid #b2b2b2;border-radius:20px;color:#444444;font-size:16px;font-family:Century Gothic,sans-serif;letter-spacing:0.1em;background:url("../care/01/img/arrow_gray_down.png") top 50% right 15px no-repeat;background-size:15px 9px;transition:.2s; } #care15 #check .btn a:hover { text-decoration:none; } #care15 #check .rich .btn a:hover { background-color:#fff9f9; } #care15 #check .white .btn a:hover { background-color:#f9fdff; } #care15 .special_box{margin: 40px 0; padding: 30px;background: #fffdf7;border: 1px dashed #ffb575;border-radius: 12px;} #care15 .special_box h4{margin: 0;margin-top: 10px;} #care15 .special_box .special_flex{display: flex; justify-content:space-around; margin-top: 20px;flex-wrap: wrap;} #care15 .special_box .special_flex li{line-height: 1.8;letter-spacing: 1px; padding: 5px;} #care15 .special_box .special_flex li.img{padding-right:15px;} #care15 .care_block .flex2{margin:30px 0 0;display:flex;flex-wrap:wrap;} #care15 .care_block .flex2 p:nth-child(2){padding-left:10px;} #care15 .care_block .flex2 p:nth-child(4){padding-left:10px;} #care15 .product-list .product-button{background: url("../care/15/img/arrow_blue.png") no-repeat right 16px center;background-size: 10px; background-color: #f9fdff;color: #444444;font-weight: normal;} #care15 .product-list .product-price span{color:#91bddb;} #care15 #white .approach > li { background:#f9fdff; border-color:#91bddb; } #care15 #white .approach > li + li:before { background-image:url("../care/01/img/arrow_blue_down.png"); } #care15 #white .flow li:last-child .name { letter-spacing:-0.05em; } #care15 #white .items .title .cat { border-color:#91bddb; } #care15 #white .items .title a, #care15 #white .items .detail .info .txt .price { color:#91bddb; } #care15 #white .items .btn a { background-image:url("../care/01/img/arrow_blue.png");background-color:#f9fdff; } /* 16_マスクの肌トラブル */ #care16 .icon-img img { max-width:150px; } #care16 .localnav { display:flex; justify-content:center; margin-top:30px; } #care16 .localnav li + li { margin-left:30px; } #care16 .localnav a { display:block; width:150px; height:150px; text-indent:-9999px; border:1px solid #ff9d48; border-radius:50%; transition:.2s; background-size:contain; position:relative; } #care16 .localnav a:after { content:""; display:block; width:15px; height:9px; background:url("../care/16/img/nav_arrow.png"); background-size:contain; position:absolute; bottom:12px; left:50%; margin-left:-7px; } #care16 .localnav a:hover { background-color:#ff9d48; } #care16 .localnav a:hover:after { background-image:url("../care/16/img/nav_arrow_hv.png"); } #care16 .localnav .tr01 a { background-image:url("../care/16/img/nav01.png"); } #care16 .localnav .tr02 a { background-image:url("../care/16/img/nav02.png"); } #care16 .localnav .tr03 a { background-image:url("../care/16/img/nav03.png"); } #care16 .localnav .tr04 a { background-image:url("../care/16/img/nav04.png"); } #care16 .localnav .tr05 a { background-image:url("../care/16/img/nav05.png"); } #care16 .localnav .tr01 a:hover { background-image:url("../care/16/img/nav01_hv.png"); } #care16 .localnav .tr02 a:hover { background-image:url("../care/16/img/nav02_hv.png"); } #care16 .localnav .tr03 a:hover { background-image:url("../care/16/img/nav03_hv.png"); } #care16 .localnav .tr04 a:hover { background-image:url("../care/16/img/nav04_hv.png"); } #care16 .localnav .tr05 a:hover { background-image:url("../care/16/img/nav05_hv.png"); } #care16 .trouble_title { margin:0!important; padding:0!important; text-align:center; } #care16 .trouble { margin-bottom:30px; } #care16 .trouble .voice { display:flex; justify-content:center; align-items:center; margin-top:-30px; } #care16 .trouble .voice img { flex-shrink:0; margin-right:20px; } #care16 .trouble .voice p { min-width:620px; padding:20px 40px; font-size:17px; background:#fff6b6; border-radius:10px; position:relative; } #care16 .trouble .voice p:before { content:""; display:block; width:0; height:0; border:solid transparent; border-width:8px 15px; border-right-color:#fff6b6; position:absolute; left:-30px; top:50%; margin-top:-8px; } #care16 .trouble .arrow { text-align:center; margin-top:-30px; } #care16 .trouble .cause { margin-top:5px; text-align:center; font-size:18px; font-weight:bold; } #care16 .trouble .cause span { font-weight:bold; background:linear-gradient(transparent 60%, #fff6b6 60%); } #care16 .cause_list { display:flex; justify-content:space-between; } #care16 .cause_list.col2 > div { width:48%; } #care16 .cause_list.col3 > div { width:32%; } #care16 .cause_list h4 { margin:0 0 16px; font-size:17px; font-weight:bold; } #care16 .cause_list h4 span { height:24px; line-height:24px; margin-right:14px; padding:0 25px; font-size:16px; color:#fff; background:#a6a093; border-radius:12px; } #care16 .cause_list .img { text-align:center; } #care16 .measure { margin:30px 0 20px; } #care16 .measure span { padding:8px 20px; font-size:18px; font-weight:bold; color:#fff; background:#ffb575; } #care16 .measure + .cause_list { margin-top:30px; } #care16 .section-01 .h4_num span { color:#ff9d48; } #care16 .img_box { justify-content:space-between; } #care16 .img_box + .img_box { margin-top:30px; } #care16 .movie { margin:0 auto 30px!important; } #care16 .tr05_lead { text-align:center; margin:20px 0 30px; } #care16 .point_box { align-items:flex-start!important; } #care16 .point_box > .txt, #care16 .point_box > .img { width:auto!important; } #care16 .point_box > .img { margin-left:20px; } #care16 .point_box .items > li { background:#fff; } #care16 .point_box .items .btn a { background-color:#fff5e5!important; } #care16 .point_box .items .btn a:hover { background-color:#ffedd1!important; } #care16 .banner-area { margin-top:40px; } /* 17_ニキビ */ #care17 .icon-img img {max-width: 120px;} #care17 .page-content h4.h4_title {font-size: 20px;font-weight: bold;} #care17 .section-01 .flow .img {align-items: center;} #care17 .section-01 .items {justify-content: flex-start;} #care17 .img_box + .img_box {margin-top: 40px;} #care17 .circle-list {display: flex;justify-content: center;flex-wrap: wrap;margin-left: -20px;} #care17 .circle-list li {text-align: center;margin: 0 0 40px 20px !important;width: calc(25% - 20px);} #care17 .circle-list li a {color:#444!important;display: block;} #care17 .circle {position: relative;} #care17 .circle span {position: absolute;top: 50%;left: 0;transform: translateY(-50%); font-size: 17px;line-height: 1.4;width: 100%;} #care17 .circle span img {width: 32px;display: block;margin: 0 auto 10px;} #care17 .circle:before {content: '';width: 100%;padding-bottom: 100%;display: block;box-shadow:0px 0px 10px 5px #fff inset;border-radius: 10em;} #care17 .circle.bg-blue:before {background: #edf4f8;} #care17 .circle.bg-orange:before {background: #fdfaf3;} #care17 .circle.bg-pink:before {background: #fff9f9;} #care17 .circle.bg-balance:before {background: #e8f8f8;} #care17 .circle.bg-ac:before {background: #e9f8f3;} #care17 .circle.bg-blue,#care17 .circle.bg-orange{background:none;} #care17 .items.bg-blue .title .cat {border-color: #91bddb !important;} #care17 .items.bg-blue .title a, #care17 .items.bg-blue .detail .info .txt .price {color: #91bddb!important;} #care17 .items.bg-blue .btn a {background-image: url(../care/01/img/arrow_blue.png)!important;background-color: #f9fdff!important;} #care17 .items.bg-blue .btn a:hover {background-color: #e5eff4!important;} #care17 .items.bg-pink .title .cat {border-color: #f18f8f !important;} #care17 .items.bg-pink .title a, #care17 .items.bg-pink .detail .info .txt .price {color: #f18f8f!important;} #care17 .items.bg-pink .btn a {background-image: url(../care/17/img/arrow_pink.png)!important;background-color: #fff9f9!important;} #care17 .items.bg-pink .btn a:hover {background-color: #f5d6d6!important;} #care17 .items.bg-blue{background:none;} #care17 .h4_title2 span {font-size: 16px;font-weight: bold;color: #fff;padding: 2px 10px;display: inline-block;margin-top: 20px ;} #care17 .h4_title2.bg-gray span {background-color: #a6a093;} #care17 .h4_title2.bg-orange span {background-color: #ffc074;} #care17 .h4_title2.bg-pink span {background-color: #ffa9a9;} #care17 .h4_title2.bg-blue span {background-color: #99d4ef;} #care17 .h4_title2.bg-red span {background-color: #ff9d50;} #care17 .h4_title2.bg-green span {background-color: #a3da9e;} #care17 .h4_title2.bg-balance span {background-color: #96d2d2;} #care17 .h4_title2.bg-ac span {background-color: #1cc888;} #care17 .h4_title2.bg-redna span {background-color: #d2e6ea;} #care17 .h4_title2.bg-gray,#care17 .h4_title2.bg-blue{background:none;} #care17 .lead_img { display:flex; justify-content:center; align-items:center; width:90%; margin:auto; } #care17 .lead_img .img { width:320px; margin-right:30px; flex-shrink:0; } #care17 .lead_img .txt p { font-size:16px; line-height:1.6; } #care17 .check { padding:30px;border:1px solid #b2b2b2;border-radius:20px; } #care17 .check li { font-size:15px;padding-left:36px;position:relative;text-align: left; } #care17 .check li:before { content:"";display:block;width:20px;height:20px;border-radius:3px;background:#fff;border:1px solid #d3d0c7;position:absolute;top:3px;left:0; } #care17 .check li + li { margin-top:10px; } #care17 .check { background:#fff9f9; display: inline-block;} #care17 .cause01,#care17 .cause02 {box-shadow:0px 0px 10px 5px #fff inset;padding: 40px;} #care17 .cause01 img,#care17 .cause02 img {vertical-align: middle;} #care17 .cause01 {background-color: #ebf2f2;} #care17 .cause02 {background-color: #fff9f9;} #care17 .cause-list .circle:before {background: #e7f6f7;box-shadow:none;} #care17 .cause-list .circle span {font-weight: bold;} #care17 .localnav h5 {margin-bottom: 20px;font-size: 16px;} #care17 .localnav h5:before, #care17 .localnav h5:after {content: '';width: 2px;height: 1.2em;display: inline-block;background-color: #535353;margin: 0 10px;vertical-align: bottom;} #care17 .localnav h5:before{transform: rotate(-15deg)} #care17 .localnav h5:after {transform: rotate(15deg)} #care17 .localnav li a:after {content: '';width: 1em;height: 1em;border: 2px solid #99d4ef;display: block;position: absolute;bottom: 30px;left: 0;right: 0;margin: auto;transform: rotate(45deg);border-top: none;border-left: none;} #care17 .localnav li a.bg-orange:after {border-color: #ffc074;} #care17 .localnav li a:hover {opacity: .7} #care17 .localnav .circle span {top: 45%;} #care17 .lineup {border-bottom: 2px dotted #b4b4b4;margin-bottom: 40px;} #care17 .lineup .h4_title {border-top: 2px dotted #b4b4b4;padding-top: 40px !important;margin-top: 40px;} #care17 .lineup .mv_box {background: left center / contain no-repeat;height: 280px;border-radius: 12px;display: flex;align-items: center;justify-content: flex-end;padding: 10px 90px;} #care17 .lineup .mv_box p {font-weight: bold;font-size: 24px;} #care17 .lineup .mv_box p small {font-size: 17px;display: inline-block;} #care17 .lineup .mv_box p.tag {font-size: 16px;color: #fff;} #care17 .lineup .mv_box p.tag span {font-weight: bold;padding: 2px 10px;border-radius: 2em;margin-right: 5px;} #care17 .lineup .circle-list {padding: 0 60px;} #care17 .lineup .mv_box.bg-balance {background-image: url(../care/17/img/lineup-img01.png);background-color: #e8f8f8;} #care17 .lineup .mv_box.bg-ac {background-image: url(../care/17/img/lineup-img02.png);background-color: #e9f8f3;background-position: right center;justify-content: flex-start;} #care17 .lineup .mv_box.bg-blue {background-image: url(../care/17/img/lineup-img03.png);background-color: #edf4f8;} #care17 .lineup .mv_box p.tag span.nikibi1 {background-color: #1cc888;} #care17 .lineup .mv_box p.tag span.nikibi2 {background-color: #96d2d2;} #care17 .point_box_wrapper {background-color: #fffdf7;border: 1px solid #ffb575;border-radius: 12px;margin-top: 40px;padding: 30px;} #care17 .point_box_wrapper > .img_box {align-items: center;} #care17 .point_box_wrapper > .img_box .txt h4 {font-size: 17px;font-weight: bold;margin-top: 10px !important;} #care17 .point_box_wrapper > .img_box .txt img {vertical-align: middle;margin-left: 10px;} #care17 .point_box_wrapper .point_box {background-color: #fff !important;display: block !important;} #care17 .point_box_wrapper .point-list {display: flex;justify-content: center;flex-wrap: wrap;margin-left: -30px;} #care17 .point_box_wrapper .point-list li {margin: 20px 0 0 30px;width: calc(33.333% - 30px);} #care17 .point_box_wrapper .point-list2 li { width :calc(34.333% - 30px);} #care17 .point_box_wrapper .point-list3 li{margin-left: 80px;} #care17 .point_box_wrapper .point-list li span {font-size: 15px;background-color: #ffb575;color: #fff;border-radius: 2em;display: inline-block;margin-right: 5px;line-height: 1;vertical-align: middle;padding: 4px 7px;} #care17 .point_box_wrapper .point-list li .video {position: relative;padding-bottom: 100%;border-radius: 12px;overflow: hidden;} #care17 .point_box_wrapper .point-list li .video iframe {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); width: 170%;height: 170%;border: none;} #care17 .point_box_wrapper .items > li {background-color: #fff;} #care17 .point_box_wrapper .point_box .img_box h4 {display: flex;align-items: flex-start;} #care17 .point_box_wrapper .point_box .img_box h4 span {margin-left: 10px;flex: 1;display: inline-block;font-weight: bold;margin-top: 8px;} #care17 .point_box_wrapper .flow .step-one .step {transform: translateX(90px); position: relative; z-index: 10;} #care17 .point_box_wrapper .flow .step-one2 .step {position: relative; z-index: 10;} #care17 .point_box_wrapper .flow .step-one + li .step, #care17 .point_box_wrapper .flow .step-one2 + li .step {opacity: 0;} #care17 .point_box_wrapper .flow .step-one3 .step {opacity: 0;} /* 18_マタニティフェイスケア */ #care18 .page-content figure {margin: 0;} #care18 .icon-img img {max-width: 120px;} #care18 .page-content h4.h4_title {font-size: 20px;font-weight: bold;} #care18 .section-01 .flow .img {align-items: center;} #care18 .section-01 .items {justify-content: flex-start;} #care18 .img_box + .img_box {margin-top: 40px;} #care18 .circle-list {display: flex;justify-content: center;flex-wrap: wrap;margin-left: -20px;} #care18 .circle-list li {text-align: center;margin: 0 0 40px 20px;width: 150px;} #care18 .circle-list li a {color: inherit;display: block;} #care18 .circle {position: relative;} #care18 .circle span{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:16px;line-height:1.4;width:100%;font-weight:700} #care18 .circle span img{width:32px;display:block;margin:0 auto 10px} #care18 .circle:before{content:'';width:100%;padding-bottom:100%;display:block;background:#fcf8f3;box-shadow:0 0 10px 5px #fff inset;border-radius:10em} #care18 .lead_img{display:flex;justify-content:center;align-items:center;width:90%;margin:auto} #care18 .lead_img .img{width:320px;margin-right:30px;flex-shrink:0} #care18 .lead_img .txt p{font-size:16px;line-height:1.6} #care18 .section-01 .care_block{margin-top:50px;padding-top:0;border-top:1px solid #dedcd4} #care18 .section-01 .lead_img + .care_block {padding-top: 50px;} #care18 .section-01 .care_block.no-border{border-top:none} #care18 .section-01 .clear{margin:auto;padding:0} #care18 .section-01 .clear:before{content:none;display:inline-block;position:relative;left:inherit;top:inherit;margin:0;width:auto;height:auto;background:none;border-radius:0} #care18 .page-content h2 {margin-top: 0;padding-top: 0;} #care18 .section-01 h2:before{border:4px solid #ff9d50;border-radius:50%;content:"";width:16px;height:16px;display:inline-block;margin-right:8px} #care18 .section-01 h4{font-size:16px;line-height:1.3;margin:24px 0 16px;padding-left:18px;position:relative} #care18 .section-01 h3:before{content:"\f06a";position:absolute;display:inline-block;font-family:"Font Awesome 5 Free";font-weight:700;margin-right:8px;color:#ff9d50;-ms-transform:rotate(30deg);transform:rotate(30deg);left:50%;font-size:20px;margin-left:-10px;top:0} #care18 .section-01 .left-border-ttl {font-size: 20px;border-left: solid 5px #ffaf75;padding: 5px 0 5px 10px;} #care18 .section-01 .icon-img + .h2_title:before{content: none;} #care18 .trouble-list ul{display:flex;justify-content:center;flex-wrap: wrap;} #care18 .trouble-list li{text-align: center;} #care18 .trouble-list li + li{margin-left:50px} #care18 .trouble-list .txt{text-align:center;width:160px;background:#f08484;border-radius:30px;color:#fff;font-weight:700;margin:-20px auto 0;z-index:1;position:relative;font-size:16px;letter-spacing:.03em} #care18 .special_box{margin:40px 0 30px;padding:20px;background:#fffdf7;border:1px dashed #ffb575;border-radius:12px} #care18 .special_box img{ margin: auto;} #care18 .list_box{display:flex;justify-content:space-between;flex-wrap:wrap} #care18 .list_box li{width:48%;padding:30px 40px 25px;border:1px solid #ffb575;border-radius:12px} #care18 .section-01 .onePoint{font-size:18px;font-weight:700;color:#ff9d50;position:relative;line-height:1;padding-left:22px} #care18 .section-01 .onePoint::before{content:"\f06a";position:absolute;left:0;display:inline-block;font-family:"Font Awesome 5 Free";font-weight:700;margin-right:8px;color:#ff9d50;font-size:18px;transform:rotate(30deg);background:none} #care18 .page-content .skincare_point .ttl{text-align:center;position:relative} #care18 .page-content .skincare_point .ttl:before{content:"";position:absolute;top:50%;left:0;-ms-transform:none;transform:none;display:block;border-bottom:dashed 1px #ffb575;margin:0;width:100%;height:1px} #care18 .skincare_point span{display:inline-block;background:#ffb575;color:#fff;border-radius:100px;font-weight:700;padding:10px 32px;position:relative;z-index:1} #care18 .skincare_point ul{display:flex;justify-content:space-between;margin-top:30px} #care18 .skincare_point li{width:31.83%} #care18 .section-01 .skincare_point li h4{display:flex;padding-left:50px;font-weight:700;font-size:15px;align-items:center;min-height: 40px;} #care18 .section-01 .skincare_point li h4:before{content:"";position:absolute;top:0;left:0;width:39px;height:39px} #care18 .section-01 .skincare_point li:nth-of-type(1) h4:before{background:url(../care/18/img/point_num_01.png) center / 100% auto no-repeat} #care18 .section-01 .skincare_point li:nth-of-type(2) h4:before{background:url(../care/18/img/point_num_02.png) center / 100% auto no-repeat} #care18 .section-01 .skincare_point li:nth-of-type(3) h4:before{background:url(../care/18/img/point_num_03.png) center / 100% auto no-repeat} #care18 .page-content .skincare_point li figure{margin-top:20px;text-align: center;} #care18 .qa_box{margin-top:36px} #care18 .qa_box dl{border:solid 1px #ff9f4c;border-radius:10px;background:#fffdf7;padding:24px} #care18 .qa_box dl + dl{margin-top:20px} #care18 .qa_box dt{font-size:18px;font-weight:700;padding-left:30px;position:relative;margin-bottom:20px;line-height: 1.2;} #care18 .qa_box dt:before{content:"";position:absolute;top:1px;left:0;width:16px;height:15px;background:url(../care/18/img/icon_q.png) center / 100% auto no-repeat} #care18 .qa_box dd{line-height:1.9} #care18 .skin_check h3{color:#ff9d50;font-weight:700;font-size:22px;text-align:center;position:relative;padding-top:32px;margin-bottom:24px} #care18 .check_title { margin:30px 0 15px; } #care18 .check { display:flex; justify-content:space-between; } #care18 .check > div { width:48%; } #care18 .check .check_box { display:flex; align-items:center; padding:35px 40px; letter-spacing:0; border:1px solid #999; border-radius:20px; } #care18 .check .pink .check_box { background:#fff9f9; } #care18 .check .blue .check_box { background:#f9fdff; } #care18 .check .check_box ul { width:100%; font-size:17px; } #care18 .check .check_box li { padding-left:32px; position:relative;margin: 0; } #care18 .check .check_box li:before { content:""; display:inline-block; width:20px; height:20px; background:#fff; border:1px solid #d3d0c7; border-radius:3px; position:absolute; top:3px; left:0; } #care18 .check .check_box li + li { margin-top:5px; } #care18 .check .arrow { min-height:88px; padding:38px 0 50px; text-align:center; background:url("../care/18/img/check_arrow.png") center no-repeat; } #care18 .check .btn { text-align:center;width:100%;max-width:100%; } #care18 .check .btn a { display:inline-block; height:40px; line-height:38px; margin:0 4px; padding:0 35px 0 25px; font-size:14px; color:#333; background:url("../care/18/img/arrow_black.png") top 50% right 15px no-repeat #fff; background-size:8px 11px; border:1px solid #333; border-radius:20px; vertical-align:top; } #care18 .check .btn a:hover { color:#fff; border-color:#f1878b; background-color:#f1878b; background-image:url("../care/18/img/arrow_white.png");text-decoration: none; } #care18 .check .blue .btn a:hover { border-color:#6babd8; background-color:#6babd8;text-decoration: none; } #care18 .check .btn a:after{content:none;} #care18 .section-01 .flow_h4 { font-size:18px;font-weight:bold;color:#666;padding: 0; } #care18 .flow_wrap { display:flex;justify-content:flex-start; } #care18 .flow_wrap:not(:first-child) { margin-top:30px; } #care18 .flow_wrap .title { width:170px;margin-right:20px;position:relative; } #care18 .flow_wrap .title h5 { background:#fff6b6;padding:10px 0;font-size:16px;font-weight:bold;text-align:center;color:#666; } #care18 .flow_wrap .title .comment { width:180px;padding:20px 14px;color:#666;line-height:1.6;background:#fff;border:1px solid #ffb575;border-radius:10px;z-index:2;position:absolute;top:50%;left:0;transform:translateY(-50%); } #care18 .flow_wrap .title .comment:after { content:"";display:block;width:12px;height:12px;background:url("../care/18/img/comment_img.png") 0 0 no-repeat;position:absolute;top:50%;right:-11px;margin-top:-6px; } #care18 .flow_wrap .title h5 + .comment { top:70px;transform:none; } #care18 .flow_wrap .title .comment .step { display:inline-block;padding:3px 20px;color:#fff;background:#ffb575;border-radius:20px;position:absolute;top:-14px;left:20px; } #care18 .item-group {margin-top: 30px;} #care18 .section-01 .items { margin-top: 20px;justify-content: space-between;} #care18 .section-01 .items.justify-center { justify-content: center;} #care18 .section-01 .items .title.justify-center{justify-content:center} #care18 .section-01 .items .type-large .detail .info{flex-direction:column} #care18 .section-01 .items .type-large .detail .info > *{width:100%} #care18 .section-01 .items .title .name a small{color:#ff9d50} #care18 .section-01 .items .title .name small .point{display:inline-block;border:solid 1px #909090;padding:2px 10px;line-height:1;margin-left:10px;font-size:11px} @media (max-width: 1000px) { #care18 .check .btn a { width:80%; margin:0; padding:0 25px; } #care18 .check .btn a + a { margin-top:10px; } }