@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500&display=swap');
/*【タイトルやリンクのみ明朝体・ZenOld/ZenKaku】*/
/*font-------------------------------------------------------------------------*/
.cms_title p,.page_title_box p,.con_title .pop400,.con_box h2,a.more_btn,.pop400{font-family:"Hannari",'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"}
a,.box_title1,.cate_title,.box_title2,.hannari{
    font-family:'Zen Old Mincho',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif" !important;}

body {font-family: 'Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;}
/*font-------------------------------------------------------------------------*/


/*【控え目】5～10px*/
/*border-radius-------------------------------------------------------------------------*/
.con_img, .cate_img1, .box_img1, .box_img2, .box_img3, .box_img4, #cms_3-c .cate_box .box_title3 span,#contents3 .con_box,#intro_wrap,#page_title .page_title_box,.pd_l-r10per.pd_t-5per.pd_b-5per.pd_5per_tb.pd_t-50px_sp .con_box,.box_img1 img{border-radius: 3px;}
.nav_menu_more a,.cate_list li a,.pager li a{border-radius: 3px;}
#cms_2-b h3.cate_title {border-radius: 3px;}
/*border-radius-------------------------------------------------------------------------*/


/*video---------------------------------------------------------------------------*/

.menu p {background: transparent;}
#top_pc_nav{display:none;}

#main_img::before {height: 100vh;}
#page_title .title_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;}
.title_img:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(175,175,175,0.6);
    position: absolute;
    top: 0px;
    left: 0;}
#page_title:before {height: 0%;}


/*IE*/
@media all and (-ms-high-contrast: none){
    .video{width: 100%;}
}
/*タブレット*/
@media screen and (max-width: 768px){
#main_img:before {height: 50vh;}
#main_img .menu {display: none;}
.page_title_box {width: 45%;}
}
/*スマホ*/
@media screen and (max-width: 667px){
div#video {height: 45vh;}
#main_img:before {height: 45vh ;}
video.video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);}
#page_title .title_img {height: 300px;}
#page_title .page_title_box {padding: 20px 10px 30px;}
.page_title_box {width: 73%;}
}
/*video---------------------------------------------------------------------------*/

/*毎回いる*/

.swiper-button-next, .swiper-button-prev { z-index: 2 !important;}
/*#top_cms.back1:before {z-index: -1;}*/
.nav_menu_more a span::before {
    display: none !important;}
.nav_menu_more.mg_t-10px a span::before {
    display: block !important;}
div#contents2_wrap {margin-top: 50px;}

/*タブレット*/
@media screen and (max-width: 768px){
#cms_1-a .pager li {margin-right: 0px;}
}

@media screen and (max-width: 667px){
#contents1 .line:before, #contents2 .line:before {
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);}
}

/*装飾に便利なposi_rel*/
#cms_3-a .cate_title,#cms_4-a .cate_title{position:relative;
    z-index: 2;
}


/* color　---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #6e6c86;}
.txt_color1,.hvr_txt_color1:hover{color: #bcb7e8} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #ccb4e7} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #d0a1e0} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #b496d5} /* アクセントカラー2 */
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #6e6c86} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #c4c0e7} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f4eaff} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #f1e5f5} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #f4eaff} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #bcb7e8 !important}
.border_color2,.hvr_border_color2:hover{border-color: #e4d6f4 !important}
.border_color3,.hvr_border_color3:hover{border-color: #eed9f4 !important}
.border_color4,.hvr_border_color4:hover{border-color: #d0bce5 !important}

#main_img:before {background-color: rgba(255,251,253,0) !important;}
#info_contact .con_img:before,.title_img:before {background-color: rgb(217 214 245 / 0.7);}
.overlay {background: linear-gradient(135deg, rgb(188 183 232 / 0.9) , rgb(204 180 231 / 0.9) ) !important;}
header {background-color: #cbc7eb !important;}

/*linkStyle*/
a.linkStyle {
    color: #d0a1e0 !important;
    border-bottom:solid 1px;
    opacity: 1 !important;
    transition:0.5s;
}
a.linkStyle:hover {color: #d0a1e0 !important;
                   opacity:0.8 !important;}
/* color　---------------------------------------------------------------------------------------------*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.catch{z-index:2;}

.catch .logo_white{
    width: 40vw;
    margin: 0 auto 50px;
    position:relative;
}
.catch .logo_white:before{
    content:'';
    position:absolute;
    display:block;
    width:50px;
    height:2px;
    background-color:white;
    bottom:-25px;
    left:0;
    right:0;
    margin:auto;
}
.catch_copy{
    font-size:1.7rem;
}

.catch_copy2{
    font-size:2rem;
}
.hasami {
    width: 600px;
    margin: 14px auto 0px;
}
#top_pc_nav li a{font-size:1.2rem;}

#intro_wrap {
    box-shadow: 0 0 20px #ffffff;
    background: rgba(255,255,255,0.9);
}

.welcom{
    font-size:1.5rem;
}
.corm{
    width:100px;
    margin:20px auto;
}
.cream{
    width:120px;
    height:50px;
    top: 20%;
    left: 45.5%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    z-index:1;
}
.bottle{
    width:80px;
    height:110px;
    top: -12%;
    left: 8%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    z-index:1;
}
#contents2_wrap{
    margin-top:100px;
}
.dryer{
    width: 110px;
    top: -3%;
    right: 25%;
}
.content_no{
    font-size: 1.5rem;
}
.content_no span{
    font-size: 2.2rem;
    margin-left: 10px;
}
.cms_3-c .box_txt1{
    border-top: 1px solid #eee;
}

.top_logo,
.top_header .button_container{
    opacity:0;
}
.scr_header .top_logo,
.scr_header .top_header .button_container{
    opacity:1;
}
.button_container span{
    background: rgb(41,41,41);
}
.button_container span:nth-of-type(1){
    color:rgb(41,41,41);
}

.load-blur{
  animation-name:load-blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.05);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/*ローディング後にフェードイン*/
.load-fade{
    opacity : 0; transition : all 2s/*処理にかかる時間*/;
}
.load-fade.done{
    opacity : 1; transform : translate(0, 0);
}

#intro .num,#contents1 .num,#contents2 .num,#contents3 .num{
    transform: none;
	font-size: 30px;
	z-index: 1;
	top: inherit;
	left: inherit;
}

#contents1_wrap,#contents2_wrap,#contents3_wrap{align-items: center;}
#contents1 .con_box,#contents2 .con_box{margin-top: 0;}
#contents3_wrap:after,#contents3_wrap:before{content: none;}

#top_cms.back1:before{z-index: -1;}
.num{display: block;}
#intro .num,#contents1 .num,#contents2 .num,#contents3 .num{
    transform: none;
	font-size: 30px;
	z-index: 1;
	top: inherit;
	left: inherit;
}

#contents1 {
    margin-bottom: 80px;
}
#contents2{
    padding-bottom: 91px;
}


#top_contact a:hover {
    background-color: rgb(184 161 209 / 50%);
}
#top_contact a {
    transition: 0.5s;
    text-shadow: 0 2px 4px rgb(184 161 209 / 70%);
    background-color: rgb(184 161 209 / 70%);
    font-size: 17px;
    padding: 120px 0;
}
#top_contact a span{
    font-size: 29px;
}
#contents3 .line:before {
    left: 0%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(0%,0);
}

.back1:before {
    background-color: rgba(244,234,255,0.8);
    background: rgb(188,183,232);
    background: linear-gradient(316deg, rgba(188,183,232,0.2) 0%, rgba(180,150,213,0.5) 100%);
    mix-blend-mode: screen;
    z-index: 0;
}

.back2:before {
    background-color: rgba(244,234,255,0.1);
    background-color: rgba(244,234,255,0.8);
    background: rgb(188,183,232);
    background: linear-gradient(316deg, rgba(188,183,232,0.2) 0%, rgba(180,150,213,0.5) 100%);
    mix-blend-mode: screen;
    z-index: 0;
    height: 130%;
    top: 200px;
    right: 0;
}

.back1:before {
    background-color: rgba(244,234,255,0.8);
    background: rgb(188,183,232);
    background: linear-gradient(316deg, rgba(188,183,232,0.2) 0%, rgba(180,150,213,0.5) 100%);
    mix-blend-mode: screen;
    z-index: 0;
    top: 300px;
    height: 70%;
}

.catch {
    z-index: 2;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -106%);
    left: 50%;
    width: 100%;
}

p.catch_copy2 {text-shadow: 0px 0px 5px #f6efff;}

#contents1 .num, #contents2 .num, #contents3 .num{
    color: #b496d5;
    opacity: 0.9;}
    
.cms_title p {
    color: #b496d5;
    font-size: 20px;}
.cms_title p::before {
    background: #b496d5;
    top: 21px;
}

#contents1 .line:before, #contents2 .line:before, #contents3 .line:before {
    background: #b496d5;
    opacity: 0.7;}
    
#intro .num {
    color: #b496d5;
    opacity: 0.6;}
    
#intro .line:before{
    background: #b496d5;
    opacity: 0.6;}
    
#intro .num {
    color: #b496d5;
    opacity: 0.6;
    padding-bottom: 10px;
}

#info_contact .con_img:before{
    background-color: rgb(217 214 245 / 0.7);
    mix-blend-mode: screen;}
    
p.con_title span {color: #7d6993;}

.cms_1-a img {height: 102% !important;}
.cms_1-a a{cursor: inherit;}
.cms_1-a a:hover img{opacity:1 !important;}

.top_cms_box a.more_btn {color: #513966;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
main {
    background: url(dup/img/bg_img.jpg);
    background-attachment: fixed;}
p#logo2 a {max-width: 400px;}
#pc_nav li, #top_pc_nav li, #footer_nav li {max-width: 210px;}
header.scr_header #logo {max-width: 300px;}
#fakeloader .fl {max-width: 400px;}

#footer_nav li a::after {background: rgb(110 108 134 / 60%);}
#pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after {height: 1px;}
.more_btn {text-transform: inherit !important;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pager li a:hover {background-color: rgba(219,216,245,0.8) !important;}
#cms_6-c .circle, #cms_6-c .arrow {display:none;}
#cms_6-c .cate_box {margin-bottom:50px;
                    border-radius:0px 0px 5px 5px ;}
.title_img:before {background-color: rgb(217 214 245 / 0.4);}
.page_title_box {background: #bcb7e8;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*タブレット*/
@media screen and (max-width: 768px){
#overlay .left li {max-width: 225px;}    
p#logo2 a {max-width: 220px;}
#page_title .title_img {height: 350px;}
.page_title_box{transform: translate(-50%,-30%);}
#logo {max-width: 270px;}
header.scr_header #logo {max-width: 250px;}
.page_title_box {width: 51%;}
div#main_img {height: 100vh;}
.top_logo,.top_header .button_container{opacity:1;}
.hasami {width: 400px;}
#contents1 {margin-bottom: 0;}
div#contents2_wrap {margin-top: 20px;}
.back2:before {top: 150px;}
#top_contact a {padding: 80px 0;}
.catch {transform: translate(-50%, -113%);}

.bnr {
    bottom: 30px;
    right: 80px;
    z-index: 4;}
.bnr a {
    padding: 20px;
    box-shadow: 3px 5px 10px rgb(255 255 255 / 20%);
    color: #fff;
    text-align: center;}

div#h1txt {padding-bottom: 70px;}
div#toggle span {color: #fff;}
.button_container span {background: rgb(255 255 255);}
}


/*スマホ*/
@media screen and (max-width: 667px){
div#main_img {height: 74vh;}
.hasami {width: 220px;}
.catch_copy {font-size: 0.8rem;}
.catch_copy2 {font-size: 0.9rem;}
.catch {transform: translate(-50%, -105%);}
#logo {max-width: 190px;}
header.scr_header #logo {max-width: 190px;}
#contents3 .con_box {background-color: transparent;}
.back1:before {
    top:auto;
    bottom: 21%;
    height: 22%;
    width: 80%;}
.back2:before {
    top: auto;
    bottom: -52%;
    height: 125%;
    width: 87%;}
#contents3 .line:before {
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);}
p#logo2 a {max-width: 300px;}
#fakeloader .fl {width: 70%!important;}
.page_title_box h2 {font-size: 20px;}
.page_title_box {width: 75%;}
#page_title .title_img {height: 280px;}

.bnr_sp a {
    padding: 10px;
    box-shadow: 3px 5px 10px rgb(255 255 255 / 20%);
    color: #fff;
    text-align: center;
    max-width: inherit;
    border-top: solid 1px #fff;
}
.bnr_sp {
    bottom: 30px;
    right: 0;
    z-index: 4;
    width: 100%;}
div#h1txt {padding-bottom: 30px;}
p#copyright {padding-bottom: 60px;}

video{
    width: 100% !important;
    height: auto !important;}
    
.cate{
    display: block;
    padding-top: 40px;
    margin-top: -40px;
}
}




/*20220725*/
@media screen and (max-width: 768px){
    
    div#main_img {
        height: 50vh;
        margin-top: 75px;}
        
    .catch {transform: translate(-50%, -67%);}
        
}


@media screen and (max-width: 667px){
    video {
        width: auto !important;
        height: 100% !important;}
        
    div#main_img {
        height: 60vh;
        margin-top: 58px;}
        
    .catch {transform: translate(-50%, -75%);}
}