@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
body {
  background-image: url(Dup/img/groovepaper.png);
}
.t-shadow_white {
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff,
 -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff,
 0px -1px 1px #ffffff;
}
#info_contact .con_box .con_title {
    text-shadow: 2px 0px 5px #ffffff, -1px 0px 3px #ffffff, -1px 1px 4px #fff;
}
.pager li a {
    background-color: #c0a982!important;
}
.pager li a:hover {
    background-color: #ffb6c1!important;
}
.didot {
     font-family: 'Fleur De Leah', cursive;
     padding-right: 10px;
}

.button_container span {
    background: #ffffff;
    color: #ffffff;
}
.scr_header .button_container span {
    background: #916352;
    color: #916352;
}
.scr_header .button_container span:nth-of-type(1) {
    background-color: transparent;
}
.overlay {
    background: linear-gradient(
135deg, rgb(192 169 130) , rgb(255 223 168) )!important;
}
.nav_menu_more:first-of-type a .icon:before {/*★*/
    content: "\f086";
}
.catch {
    width: 52%;
    margin: -32px auto 10px;
}
#pc_nav li a {
    color: #7e4027;
}
#pc_nav li a::after {
    background: #7e4027;
}
header.scr_header {
    background-color: rgba(255, 255, 255, 0.54)!important;
    border-bottom: 1px solid #fff;
}
#intro {
    background-image: url(Dup/img/herb1.png), url(Dup/img/herb2.png), url(Dup/img/hana1.png), url(Dup/img/hana2.png);
    background-position: right 10px top 140px, left 8px top 496px, right 300px top -26px, left 150px top 100px;
    background-size: 4.5% auto, 4.5% auto, 9% auto, 11% auto;
    background-repeat: no-repeat;
}

#contents1 {
    background-image: url(Dup/img/herb3.png), url(Dup/img/hana3.png), url(Dup/img/hana4.png);
    background-position: right 10px top 207px, right 300px top 4px, left 1% bottom 5px;
    background-size: 5% auto, 6% auto, 5% auto;
    background-repeat: no-repeat;
}
#contents2 {
background-image: url(Dup/img/herb4.png), url(Dup/img/hana2.png);
    background-position: right 10px top 178px, left 1% bottom 5px;
    background-size: 5% auto, 7% auto;
    background-repeat: no-repeat;
}
#intro_wrap {
   background-color: rgba(255, 255, 255, 0.64);
   border: 16px solid #fff;
}
.cms_title {
    text-align: center;padding-left: 0;
}
#cms_2-a .cate_title {
    position: relative;
    padding: .1em .3em .1em .5em;
    border-top: 0;
    display: block;
    border-bottom: 0;
	border-bottom: 2px solid #c0a982;
}
#cms_2-a .cate_title::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -2px;
    width: 10%;
    height: 2px;
    background-color: #ffb6c1;
    z-index: 1;
}
.more_btn:hover:after {
    transition-delay: inherit;
}
.more_btn:hover:after {
    background-color: rgba(255, 255, 255, 0.30)!important;
}

.more_btn {
    background-color: #f9ced0;
    color: #fff;
}
.more_btn span.txt_color3 {
        color: #fff;
}
.more_btn:hover {
    transition-delay: inherit;
    background: #c0a982;
}
.back1:before, .back2:before {
    z-index: -1;
   /* background-color: #f9eeda;*/
background-image:  url("Dup/img/groovepaper.png");
}

#info_contact .con_title .txt_white {
    color: #444;
}

#intro_wrap, .figure1, .figure2, #contents1 figure, #contents2 figure {
    position: relative;
}

#contents1_wrap figure:before, #contents2_wrap figure:before, .figure1:before, .figure2:before, #contents3 .con_box:before {
    content: "Online lessons at home";
    font-family: 'Fleur De Leah', cursive;
    font-size: 4vw;
    position: absolute;
    top: 83px;
    color: #b69a68;
    right: -46px;
    z-index: 1;
}
#contents1_wrap figure:before, #contents2_wrap figure:before {
    color: #fff;
}
.figure2:before, #contents2_wrap figure:before {
    content: "The effect of aroma";
    left: inherit;
    top: -37px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    right: -55px;
}
#contents3 .con_box:before {
    content: "Private salon";
    left: 0;
    top: 5px;
    right: 0;
    margin: auto;
    color: #e9ddc8;
    z-index: 0;
}


/* ----------------------------------------------------------------------------- */
#footer {
    background-color: transparent;
}
#footer, #footer .tel_bt a, #footer h2 {
    color: #fff;
}
footer {
    background-color: #c0a982!important;
}
footer .tel_bt {
border: 1px solid #fff;
    display: inline-block;
    border-radius: 43px;
    padding: 5px 18px;
}
#logo2 a {
   max-width: 201px;
}
#h1txt p {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 10px 0px;
    border-color: #d1b992;
}
#copyright {
background-color: #c0a982;   
}
#logo {
        opacity: 0;
        }
    .scr_header #logo {
        opacity: 1;
        }

@media(min-width: 769px) {
    #page4 .cate_list li {
    width: 30%;
}
#page4 .cate_list li:nth-of-type(4n) {
    margin-right: 5%;
}
#page4 .cate_list li:nth-of-type(3n) {
    margin-right: 0;
}
}


@media(max-width: 768px) {
    #contents1 {
    background-position: right 10px top 207px, right 13% top 4px, left 1% bottom 5px;
    background-size: 10% auto, 11% auto, 10% auto;
}
    #contents2 {
    background-position: right 10px top 178px, left 1% bottom 5px;
    background-size: 10% auto, 13% auto;
}
    #intro {
    background-position: right 10px top 350px, left 8px top 568px, right 148px top 0px, left 91px top 177px;
    background-size: 80px auto, 82px auto, 99px auto, 129px auto;
}
 
        #contents1_wrap figure:before, #contents2_wrap figure:before, .figure1:before, .figure2:before, #contents3 .con_box:before {
    top: inherit;
    bottom: 0;
        right: -10px;
}
.figure2:before, #contents2_wrap figure:before {
    bottom: -43px;
    right: -3px;
}
#contents3 .con_box:before {
    top: 6px;right: 0;
}
}
@media(max-width: 667px) {
    .catch {
    width: 88%;
}
    .font_14 {
font-size: 13px;        
    }
#intro {
    background-position: right 10px top 293px, left 3px bottom 351px, right 51px top 9px, left 69px bottom 12px;
    background-size: 56px auto, 66px auto, 75px auto, 103px auto;
}
#contents1 .con_img, #contents2 .con_img {
    margin-bottom: 0;
}
#logo2 a {
    max-width: 140px;
}
#footer h2 {
    font-size: 3.4vw;
    letter-spacing: 0.1em;
}
#contents1_wrap figure:before, #contents2_wrap figure:before, .figure1:before, .figure2:before, #contents3 .con_box:before {
    top: inherit;
    bottom: -3px;
    font-size: 6.5vw;
}
.figure2:before, #contents2_wrap figure:before {
    bottom: -43px;
    right: -20px;
    bottom: inherit;
    top: -15px;
}
#contents3 .con_box:before {
    bottom: inherit;
    top: 6px;
}
#page_title .page_title_box {
    width: 61%;
    padding-left: 5%;
    padding-right: 5%;
}
.page_title_box h2 {
    font-size: 5vw;
}
}
@media all and (-ms-high-contrast: none) {
#page8 #contact_tel a {
    padding-top: 38px;
}
}