@charset "UTF-8";

#option{
	width:100%;
    background:red !important;
}

#option article > section{
	margin-bottom:6.4rem;
}

.mainImgArea{
    width:100%;
    margin-bottom:5rem;
}
.summaryArea{
    width:70%;
    margin:0 auto 5rem;
    font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
    .summaryArea{
        width:90%;
        font-size: 1rem;
    }
}

/* menuArea */
.menuArea{
	width:100%;
	padding:2.5em;
	box-sizing: border-box;
	background:#f8fafc;	
}
@media screen and (max-width: 768px) {
    .menuArea{
        padding:1em;	
    }
}
.menuArea .container{}

.menuArea h4{
}
.menuArea p{
	margin-bottom:1em;
	line-height: 1.7;
}
.menuArea .title{
	margin-bottom:3rem;
	color: #898989;
	text-align: center;
	font-size: 3.3em;
	font-weight: bold;
}
.menuArea .img{
	
}
.menuArea .img img{
	width:100%;
	
}
.menuArea .text{
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
}
.menuArea .price strong{
	font-size: 1.4rem;
}
.menuArea .exArea{
	padding:1.5em;
	background:#f7f7f7;
	border-right: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}
.menuArea .ex{
	font-size: 0.9em;
}
.menuArea .ex:before{
}
.menuArea .other{
	font-size: 0.80em;	
}

/* レタッチパック */
.menuArea .retouch_pack{
	border: 6px solid #fffd78;
	background:#fff;
	text-align: center;
}
.menuArea .retouch_pack h4{
	margin-bottom:1.5em;
}
.menuArea .retouch_pack ul{
	display: flex;
	justify-content: space-between;
	width:100%;
	margin:1.5em 0;
}
.menuArea .retouch_pack ul li{
	width:30%;
	box-sizing: border-box;
	padding:1em 0.5em;
	background:#fffd78;
	border-radius:12px;
	text-align: center;
}
.menuArea .retouch_pack ul li .title{
	display: block;
	margin-bottom:0.5em;
	font-size: 1.6rem;
}
.menuArea .retouch_pack ul li .price{
	display: block;
	margin-bottom:0em;
}
.menuArea .retouch_pack ul li .unit{
	font-size: 0.8rem;
}




/* exampleArea */
.exampleArea {
    width:100%;
}
.exampleArea .container{
	display: flex;
	justify-content: space-between;
	width:100%;
	margin-bottom:3em;
}
.exampleArea .box{
	width:48%;
	padding:3%;
	box-sizing: border-box;
	border-radius:10px;
	background:#f4f4f4;
	border:10px solid #fafafa
}
.exampleArea .box h3{
	margin-bottom:1.5em;
}
.exampleArea .box .img img{
    display: block;
	width:100%;
}
.exampleArea .box p{
	text-align: left;
	font-size: 0.9em;
	line-height: 1.8;
}

@media screen and (max-width: 767px) {
    
    .exampleArea {
        width:80%;
        margin:auto;
    }
    .exampleArea .container{
        display: block;
    }
    .exampleArea .box{
        width:100%;
    }
    .exampleArea .box h3{
        margin-bottom:1.5em;
    }
    .exampleArea .box .img img{
        width:100%;
    }
    .exampleArea .box p{
        text-align: left;
        font-size: 0.9rem;
        line-height: 1.8;
    }

}

/* =========================================================
 EditImageArea
========================================================= */

#EditImageArea{
	margin: 0 0 5rem;
}
#EditImageArea .section{
	width:80%;
	padding:3em;
}
#EditImageArea .section .flexSection{
	justify-content: space-between;
}
/* cont */
#EditImageArea .section .cont{
	width: 56%;
	line-height: 1.7;
}

#EditImageArea .cont h3{
	margin-bottom:1em;
	font-size:3em;
}
#EditImageArea .cont .text{
	margin-bottom:1em;
	font-size: 0.9rem;
}

#EditImageArea .cont .price{
	text-align: right;
}
#EditImageArea .cont .price strong{

}
#EditImageArea .cont .price .tax{
}

/* img */
#EditImageArea .img {
	padding-left:4%;
}
#EditImageArea .img img{
	border-radius:5px;
}


/* bgcut */
#EditImageArea #bgcutArea{
	margin-right: 20%;
	background: rgb(232,248,255);
	background: linear-gradient(278deg, rgba(232,248,255,1) 0%, rgba(210,255,237,1) 100%);
	
}
/* miximg */
#EditImageArea #miximgArea{
	margin-left: 20%;

	background: rgb(232,248,255);
	background: linear-gradient(90deg, rgba(232,248,255,1) 0%, rgba(210,255,237,1) 100%);
}

@media screen and (max-width: 767px) {
        
    #EditImageArea{
        margin: 0 0 5rem;
    }
    #EditImageArea .section{
        width:100%;
        padding:0.8rem;
        box-sizing: border-box;
    }
    #EditImageArea .section .flexSection{
        display: block;
    }
    /* cont */
    #EditImageArea .section .cont{
        width: 100%;
        line-height: 1.7;
    }

    #EditImageArea .cont h3{
        margin-bottom:1em;
        font-size:2.4rem;
        text-align: center;
    }
    #EditImageArea .cont .text{
        margin-bottom:1em;
        font-size: 0.9rem;
    }

    #EditImageArea .cont .price{
        text-align: right;
    }
    #EditImageArea .cont .price strong{

    }
    #EditImageArea .cont .price .tax{
    }

    /* img */
    #EditImageArea .img {
        padding-left:4%;
    }
    #EditImageArea .img img{
        border-radius:5px;
    }


    /* bgcut */
    #EditImageArea #bgcutArea{
        background: rgb(232,248,255);
        background: linear-gradient(278deg, rgba(232,248,255,1) 0%, rgba(210,255,237,1) 100%);
        overflow: hidden;
        margin:0 auto 2rem;
    }
    /* miximg */
    #EditImageArea #miximgArea{

        background: rgb(232,248,255);
        background: linear-gradient(90deg, rgba(232,248,255,1) 0%, rgba(210,255,237,1) 100%);
        overflow: hidden;
        margin:0 auto 2rem;
    }
}

.lineupArea{}

@media screen and (max-width: 767px) {
    .lineupArea{}
}




/* =========================================================
 option_hairmake
========================================================= */

#mainArea .menuArea {}
#mainArea .menuArea h4{
	color: #777;
}
/* iraiArea */
article.iraiArea section{
	width:80%;
	max-width:880px;
	box-sizing: border-box;
	padding:2.5rem;
	margin: 3rem auto 6rem;
	background:#fff4f8;
	border-radius:15px;
}

@media screen and (max-width: 767px) {
    
    article.iraiArea section{
        width:90%;
	    padding:1.5rem;
    }
}

article.iraiArea section h3{
	margin-bottom:1.8rem;
	text-align: center;
	font-size: 1.5rem;
}
article.iraiArea section p{}

/* faqArea */
article.faqArea section{
	width:80%;
	margin: 0 auto 3rem;
}
article.faqArea section h3{
	margin-bottom:2.8rem;
    padding:2rem;
    background:#f6f6f6;
	text-align: center;
	font-size: 1.5rem;
}
article.faqArea section dl{
	margin-bottom:3.5rem;
	font-size: 1.2rem;
}
article.faqArea section dl dt{
	margin:0 0 1.5rem;
	color: #404040;
	font-weight: bold;
}
article.faqArea section dl dt::before{
	content: "Q. ";
    font-size: 2rem;
}
article.faqArea section dl dd{
	margin: 0;
	padding:1.2rem;
	background:#ffffe6;
	border-radius:15px;
	color: #404040;
    font-size: 1rem;
}
article.faqArea section dl dd::before{
	content: "A ";
    font-size: 2rem;
}

/* cancelArea */
.cancelArea{
    width:80%;
	box-sizing: border-box;
	padding:2.5rem;
	margin: 0 auto 3rem;
	background:#FFF;
    border:3px solid #ffe4e1;
	border-radius:15px;
}
.cancelArea .aboutCancel{	
	width:80%;
	margin: 0 auto 3rem;
}
.cancelArea .aboutCancel h3{
	margin-bottom:2.8rem;
	text-align: center;
	font-size: 1.5rem;
}
.cancelArea .aboutCancel p{
	margin:1.5rem 0;
}
.cancelArea .aboutCancel p span{}
.cancelArea .aboutCancel ul{}
.cancelArea .aboutCancel ul li{
	line-height: 2rem;
}
.cancelArea .aboutCancel ul li span{
	display: inline-block;
	margin-right: 1rem;
}
.cancelArea .aboutCancel ul li span{
}



@media screen and (max-width: 767px) {
        
    .cancelArea{
        width:90%;
        box-sizing: border-box;
        padding:0.5rem;
        margin: 0 auto 3rem;
        background:#FFF;
        border:3px solid #ffe4e1;
        border-radius:15px;
    }
    .cancelArea .aboutCancel{	
        width:90%;
        margin: 0 auto 3rem;
    }
}