@charset "utf-8";
/* CSS Document */
@import url("yakuhanjp.css");

body,p,div{ font-family: 'YakuHanJP', Lato, Roboto, "メイリオ", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', sans-serif; font-feature-settings: "palt"; color: #140700; }

#main{ background: #ffffff; }
#main .content{
    padding: 0;
    width: auto;
}
#main h1.title  {
    text-align: center;
    padding-top: 3%;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 3%;
    background-color: #FFD5EC;
}
#main h1.title  img {
    max-width: 590px;
}

#main .cosme-title p {
    position: relative;
    padding-top: 25px;
    text-align: center;
    font-size: 20px;
    line-height: 1.3;
    font-weight: bold;
}
#main .cosme-title p:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 60px;
    height: 1px;
    background: #111111;
}

#main .footer-navi { width: 100%; margin: 0 0 0 0; padding: 50px 0; border-top: solid 1px #AAAAAA; }
#main .footer-navi p {width: 1000px; margin: auto; font-size: 24px; line-height: 1.3;}
#main .footer-navi p span {font-size: 18px; line-height: 1.3;}
#main .footer-navi .navi {width: 1000px; margin: 20px auto 0px; }
#main .footer-navi .navi .navi01 {width:16% }
#main .footer-navi .navi .navi02 {width:16% }
#main .footer-navi .navi .navi03 {width:16% }
#main .footer-navi .navi .navi04 {width:16% }
#main .footer-navi .navi .navi05 {width:33% }


.js-inview{ opacity: 0; transition: opacity 1s ease-in; }
.show{ opacity: 1!important; }
.txt-left{ text-align: left; }
.txt-center{ text-align: center; }
.txt-right{ text-align: right; }
.txt-bold { font-weight: bold;}
.txt10 {
    font-size: 10px;
    line-height: 1.4;
    color: #000000;
}
.txt12 {
    font-size: 12px;
    line-height: 1.4;
    color: #000000;
}
.txt14 {
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
}
.txt16 {
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
}
.txt18 {
    font-size: 18px;
    line-height: 1.5;
    color: #000000;
}
.txt20 { font-size: 20px; line-height: 1.5 }
.txt22 { font-size: 22px; line-height: 1.5 }
.txt24 { font-size: 24px; line-height: 1.5 }

.spt5{ margin-top: 5px; }
.spt10{ margin-top: 10px; }
.spt15{ margin-top: 15px; }
.spt20{ margin-top: 20px; }
.spt25{ margin-top: 25px; }
.spt30{ margin-top: 30px; }
.spt35{ margin-top: 35px; }
.spt40{ margin-top: 40px; }
.spt45{ margin-top: 45px; }
.spt50{ margin-top: 50px; }
.spt60{ margin-top: 60px; }
.spt70{ margin-top: 70px; }
.spt80{ margin-top: 80px; }
.spt90{ margin-top: 90px; }
.spt100{ margin-top: 100px; }

.fontsize10 {font-size: 20px; line-height: 1.6}
.fontsize12 {font-size: 24px; line-height: 1.6}
.fontsize14 {font-size: 28px; line-height: 1.6}
.fontsize16 {font-size: 32px; line-height: 1.6}
.fontsize18 {font-size: 36px; line-height: 1.6}
.fontsize20 {font-size: 40px; line-height: 1.6}
.fontsize22 {font-size: 44px; line-height: 1.6}
.fontsize24 {font-size: 46px; line-height: 1.6}
.font-sizedown {font-size: 80%;}
.font-bold {font-weight: bold;}

.split-box{ display: -ms-flex; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap:wrap; }

/*ゆっくり透明に*/
.alpha { transition: .3s;}
.alpha:hover { opacity: 0.5;}

.sp-view {display: none;}

.sikaku { padding:0px 5px; border: solid 1px #CCCCCC;}


@media screen and (max-width: 480px){ /*1112px以下のcss*/

    .fontsize10 {font-size: 10px; line-height: 1.6}
    .fontsize12 {font-size: 12px; line-height: 1.6}
    .fontsize14 {font-size: 14px; line-height: 1.6}
    .fontsize16 {font-size: 16px; line-height: 1.6}
    .fontsize18 {font-size: 18px; line-height: 1.6}
    .fontsize20 {font-size: 20px; line-height: 1.6}
    .fontsize22 {font-size: 22px; line-height: 1.6}
    .fontsize24 {font-size: 24px; line-height: 1.6}

	#main .cosme-title { width: auto; margin: 0 auto; padding: 0% 5%; }
	#main .cosme-title p { padding-top: 5%; text-align: center; font-size: 16px; line-height: 1.3; font-weight: bold;}
	#main .footer-navi p {width: 90%; margin: auto; font-size: 20px; line-height: 1.3;}
	#main .footer-navi p span {font-size: 16px; line-height: 1.3; display: block; padding-top: 6px}
	#main .footer-navi .navi {width:90%;}
	#main .footer-navi .navi .navi01 {width:32%; margin-top: 2% }
	#main .footer-navi .navi .navi02 {width:32%; margin-top: 2% }
	#main .footer-navi .navi .navi03 {width:32%; margin-top: 2% }
	#main .footer-navi .navi .navi04 {width:32%; margin-top: 2% }
	#main .footer-navi .navi .navi05 {width:66%; margin-top: 2% }


	#main .content{ margin: 0; }
	.sp-view {display: inline-block;}
	.pc-view {display: none;}


.sikaku { padding:0px 2px; border: solid 1px #CCCCCC;}

}

.cancel {
	opacity: 0.4;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),screen and (min-resolution: 1.5dppx){
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px),screen and (min-resolution: 1.5dppx) and (max-width: 480px){
}


.content { width: 100%; max-width: 750px; margin-bottom: 0px; padding-bottom: 0px; }
.content-inner { width: 90%; margin-left: auto; margin-right: auto; }
#main .content-inner .lip-touchup{ border: 2px dotted #d8567e; margin-top: 50px; border-radius: 28px; padding: 2% 6.81% 5%; }
#main .content-inner .lip-touchup .inner-body{ margin-top: 15px; overflow: hidden; }
#main .content-inner .lip-touchup .inner-body .logo{ width: 35%; float: right; }

#main .content-inner .happymakeup{ border: 2px dotted #d8567e; margin-top: 50px; border-radius: 28px; padding: 2% 6.81% 5%; }
#main .content-inner .happymakeup .happymakeup-ttl{ margin-right: -9%; }
#main .content-inner .happymakeup .inner-body{ margin-top: 15px; overflow: hidden; }
#main .content-inner .happymakeup .inner-body .photo{ width: 40%; float: right; margin-left: 4%; }
#main .gotohome-navi{ margin: 5% auto 0; width: 80%; text-align: center; }
#main .gotohome-navi a{ display: block; background-color: #ffffff; color: #231815; text-decoration: none; border-radius: 10px; padding: 15px 0; line-height: 1.5; border: 2px solid #000000; }