@charset "UTF-8";
/* =======================================

    hairsystem.css

========================================== */

/* common
========================================== */

body#hairsystem {
    background: url("../images/bg.jpg") repeat;
}
body#hairsystem main {
    font-family: 'Noto Serif JP', serif;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
section {
    width: 100%;
    padding: 8% 0;
    position: relative;    
}
section {
    background: url(../images/border.png) no-repeat center bottom;
}
img,h1,h2,h3,p,li,a,div {
    transition: all .1s ease;
}

/* fv
========================================== */

.fv {
    width: 100%;
    position: relative;
    background: #5EC4DB;
    background: -webkit-linear-gradient(to top, #5EC4DB 0%, #fdfbf6 100%);
    background: -moz-linear-gradient(to top, #5EC4DB 0%, #fdfbf6 100%);
    background: linear-gradient(to top, #5EC4DB 0%, #fdfbf6 100%);
    z-index: -1;
}
.fv:after {
    content: "";
    width: 1550px;
    height: 555px;
    background: url(../images/bg_fv.png) no-repeat bottom;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.fv .inner {
    width: 1000px;
    min-height: 555px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto;
    position: relative;
}
.fv .h1inner {
    width: 373px;
    height: 373px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: -2%;
    left: 2%;
    box-shadow: 7px 4px 25px 0px rgba(0, 0, 0, 0.14);
}
.fv h1 {
    text-indent: -999em;
    width: 280px;
    height: 240px;
    position: relative;
    top: -3%;
    background: url("../images/logo_hsys.png") no-repeat;
}
.fv img {
    position: relative;
    right: 2%;
}

/* abouthairsystem
========================================== */

section.abouthairsystem {
    background: none;
}
section.abouthairsystem h2,
section.secret h2,
section.flow h2,
section.qa h2 {
    color: #e73b2e;
    font-size: 5.5rem;
    font-weight: normal;
    line-height: 1;
}
section.abouthairsystem h2 span,
section.secret h2 span {
    font-size: 70%;
}
section.abouthairsystem .titlewrap,
section.secret .titlewrap,
section.flow .titlewrap,
section.qa .titlewrap {
    text-align: center;
    padding-top: 35px;
    background: url("../images/titlekazari.png") no-repeat center top;
    margin-bottom: 4em;
}
section.abouthairsystem .titlewrap p,
section.secret .titlewrap p,
section.flow .titlewrap p,
section.qa .titlewrap p {
    font-size: 2rem;
    color: #ac8c50;
}
section.abouthairsystem .titlewrap p,
section.flow .titlewrap p,
section.qa .titlewrap p {
    font-family: 'Federo', sans-serif;
}
section.abouthairsystem .sentence p {
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.8;
    margin-bottom: 1.5em;
}
section.abouthairsystem .sentence p span {
    color: #e73b2e;
    border-bottom: 3px dotted;
}
section.abouthairsystem .sentence p:last-of-type {
    margin-bottom: 0;
}
section.abouthairsystem img.flower1,
section.abouthairsystem img.flower2 {
    position: absolute;
}
section.abouthairsystem img.flower1 {
    top: 0;
    left: 0;
}
section.abouthairsystem img.flower2 {
    bottom: 5%;
    right: 0;
}

/* movie
========================================== */

div.youtube {
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
section.youtube div.youtube {
	padding: 7% 0 0 0;
}
div.youtube.first {
}
section.movie {
    padding: 0 0 7% 0;
    display: none;
}
section.movie h3 {
    font-family: 'Federo', sans-serif;
    color: #ac8c50;
    padding: 0 2em;
    letter-spacing: 0.1em;
    font-size: 2.5rem;
    font-weight: normal;
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: table;
    margin: 0 auto 2em auto;
}

/* my24hours
========================================== */

section.my24hours:before {
    content: "";
    background: url(../images/border.png) no-repeat center top;
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    top: 0;
}
section.my24hours h2 {
    background: url(../images/title_24hours.png) no-repeat;
    text-indent: -999em;
    width: 411px;
    height: 207px;
    margin: 0 auto 5em auto;
}
section.my24hours ul {
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section.my24hours ul li {
    width: calc(100% / 2 - 20px);
    background: linear-gradient(315deg, transparent 40px, #fff 40px);
    background-position: bottom right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: -14px -14px 16px 0px rgb(0 0 0 / 11%);
    position: relative;
    margin-bottom: 10em;
}
section.my24hours .parts img {
    position: absolute;
    z-index: 1;
}
section.my24hours ul li:nth-child(even) {
    top: 8em;
}
section.my24hours ul li:nth-child(odd) .parts img:first-child {
    left: -10%;
    top: -8%;   
}
section.my24hours ul li:nth-child(even) .parts img:first-child {
    right: -10%;
    top: -8%;   
}
section.my24hours ul li:nth-child(odd) .parts img:nth-child(2) {
    right: 5%;
    top: -13%;    
}
section.my24hours ul li:nth-child(even) .parts img:nth-child(2) {
    left: 5%;
    top: -13%;    
}
section.my24hours .text {
    text-align: center;
}
section.my24hours .text img {
    margin: 2em 1em;
}
section.my24hours .text div {
    width: 90%;
    margin: 0 auto;
    position: relative;
}
section.my24hours li:first-child .text div,
section.my24hours li:nth-child(2) .text div {
    border-bottom: 1px solid rgb(218 123 0 / 50%);
}
section.my24hours li:nth-child(3) .text div,
section.my24hours li:nth-child(4) .text div {
    border-bottom: 1px solid rgb(53 216 218 / 50%);
}
section.my24hours li:nth-child(5) .text div,
section.my24hours li:nth-child(6) .text div {
    border-bottom: 1px solid rgb(51 162 203 / 50%);
}
section.my24hours .text div:before,
section.my24hours .text div:after {
    height: 1em;
    display: block;
    width: 1px;
    position: absolute;
    bottom: -1em;
    content: "";
}
section.my24hours li:first-child .text div:before,
section.my24hours li:first-child .text div:after,
section.my24hours li:nth-child(2) .text div:before,
section.my24hours li:nth-child(2) .text div:after {
    background: rgb(218 123 0 / 50%);
}
section.my24hours li:nth-child(3) .text div:before,
section.my24hours li:nth-child(3) .text div:after,
section.my24hours li:nth-child(4) .text div:before,
section.my24hours li:nth-child(4) .text div:after {
    background: rgb(53 216 218 / 50%);
}
section.my24hours li:nth-child(5) .text div:before,
section.my24hours li:nth-child(5) .text div:after,
section.my24hours li:nth-child(6) .text div:before,
section.my24hours li:nth-child(6) .text div:after {
    background: rgb(51 162 203 / 50%);
}
section.my24hours .text div:before {
    left: 0;
}
section.my24hours .text div:after {
    right: 0;
}
section.my24hours .text div p {
    display: table;
    margin: 0 auto;
    padding: 0 1.5em;
    line-height: 1.8;
    color: white;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-family: 'Federo', sans-serif;
    font-weight: normal;
    z-index: 2;
}
section.my24hours li:first-child .text div p,
section.my24hours li:nth-child(2) .text div p {
    background: #da7b00;
}
section.my24hours li:nth-child(3) .text div p,
section.my24hours li:nth-child(4) .text div p {
    background: #35d8da;
}
section.my24hours li:nth-child(5) .text div p,
section.my24hours li:nth-child(6) .text div p {
    background: #33a2cb;
}
section.my24hours .text div p:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3em 1em 3em;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
}
section.my24hours li:first-child .text div p:before,
section.my24hours li:nth-child(2) .text div p:before {
    border-color: transparent transparent #da7c00 transparent;
}
section.my24hours li:nth-child(3) .text div p:before,
section.my24hours li:nth-child(4) .text div p:before {
    border-color: transparent transparent #35d8da transparent;
}
section.my24hours li:nth-child(5) .text div p:before,
section.my24hours li:nth-child(6) .text div p:before {
    border-color: transparent transparent #33a2cb transparent;
}
section.my24hours .text dl {
    padding: 1em 0;
    width: 90%;
    margin: 0 auto;
}
section.my24hours .text dl dt {
    font-size: 2.3rem;
    line-height: 1.5;
    margin-bottom: 0.5em;
}
section.my24hours li:first-child .text dl dt,
section.my24hours li:nth-child(2) .text dl dt {
    color: #da7b00;
}
section.my24hours li:nth-child(3) .text dl dt,
section.my24hours li:nth-child(4) .text dl dt {
    color: #35d8da;
}
section.my24hours li:nth-child(5) .text dl dt,
section.my24hours li:nth-child(6) .text dl dt {
    color: #33a2cb;
}
section.my24hours .text dl dd {
    text-align: left;
    width: 90%;
    margin: 0 auto;
}
section.my24hours img.flower1,
section.my24hours img.flower2,
section.my24hours img.flower3,
section.my24hours img.flower4 {
    position: absolute;
    z-index: -1;
}
section.my24hours img.flower1 {
    top: 10em;
    left: -10em;
}
section.my24hours img.flower2 {
    top: 40em;
    right: -10em;
}
section.my24hours img.flower3 {
    left: -10em;
    top: 90em;
}
section.my24hours img.flower4 {
    right: -10em;
    bottom: 20em;
}

/* cv
========================================== */

.cv {
	margin: 0 auto;
	display: table;
	position: relative;
	font-size: 2rem;
	width: 100%;
}
.cv.first {
    padding: 7% 0 0 0;
}
.cv a {
    color: #e73b2e;
    background: #fff;
    padding: 0.5em 4em 0.5em 1em;
    box-sizing: border-box;
    position: relative;
    display: table;
    margin: 0 auto;
    font-size: 3rem;
    border-radius: 32px;
    transition: all .1s ease;
    box-shadow: 7px 4px 25px 0px rgb(0 0 0 / 14%);
}
.cv a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6%;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 15px 0 15px 20px;
    border-color: transparent transparent transparent #ffffff;
    z-index: 2;
}
.cv a:after {
    content: "";
    display: block;
    width: 3em;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 0 32px 32px 0;
    margin: auto;
    background: #e73b2e;
}
.cv a:hover {
    opacity: 0.7;
}
.cv p {
    font-size: 1.7rem;
    display: table;
    margin: 1.5em auto;
    line-height: 1.8;
}
.cv p span {
    color: #e73b2e;
}

/* secret
========================================== */

section.secret img.beforeafter {
    margin: 0 auto 8em auto;
}
section.secret img.flower1,
section.secret img.flower2 {
    position: absolute;
    z-index: -1;
}
section.secret img.flower1 {
    right: -10%;
    top: 0;
}
section.secret img.flower2 {
    left: -5%;
    top: 50em;
}
section.secret p {
    text-align: center;
    font-size: 2.2rem;
    margin: 0 auto 2em auto;
}

/* flow
========================================== */

section.flow ul {
    max-width: 1000px;
    margin: 0 auto;
}
section.flow ul li {
    box-shadow: 7px 4px 25px 0px rgb(0 0 0 / 14%);
    background: white;
    margin-bottom: 6em;
    position: relative;
}
section.flow ul li:last-child {
    margin-bottom: 0;
}
section.flow ul li:nth-child(4) {
    background: #dca053;
}
section.flow ul li:nth-child(4) .wrap {
    justify-content: center;
}
section.flow ul li:nth-child(4) p {
    color: white;
    font-size: 5rem;
}
section.flow ul li:nth-child(4) p span {
    font-size: 60%;
}
section.flow ul li .wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
section.flow ul li .wrap .illust {
    width: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
}
section.flow ul li:first-child .wrap .illust {
    background: #fbecc8;
    background: -webkit-linear-gradient(to top, #fbecc8 0%, #FFFFFF 100%);
    background: -moz-linear-gradient(to top, #fbecc8 0%, #FFFFFF 100%);
    background: linear-gradient(to top, #fbecc8 0%, #FFFFFF 100%);
}
section.flow ul li:nth-child(2) .wrap .illust {
    background: #aedbcc;
    background: -webkit-linear-gradient(to top, #aedbcc 0%, #FFFFFF 100%);
    background: -moz-linear-gradient(to top, #aedbcc 0%, #FFFFFF 100%);
    background: linear-gradient(to top, #aedbcc 0%, #FFFFFF 100%);
    padding: 1em 1em 0 1em;
}
section.flow ul li:nth-child(3) .wrap .illust {
    background: #ddb0bd;
    background: -webkit-linear-gradient(to top, #ddb0bd 0%, #FFFFFF 100%);
    background: -moz-linear-gradient(to top, #ddb0bd 0%, #FFFFFF 100%);
    background: linear-gradient(to top, #ddb0bd 0%, #FFFFFF 100%);
}
section.flow ul li:nth-child(5) .wrap .illust {
    background: #f8f0b8;
    background: -webkit-linear-gradient(to top, #f8f0b8 0%, #FFFFFF 100%);
    background: -moz-linear-gradient(to top, #f8f0b8 0%, #FFFFFF 100%);
    background: linear-gradient(to top, #f8f0b8 0%, #FFFFFF 100%);
}
section.flow ul li .wrap dl {
    width: 100%;
    padding: 0 2em 0 3em;
}
section.flow ul li .wrap dl dt {
    color: #a97140;
    font-size: 2.8rem;
}
section.flow ul li .wrap dl dd {
    font-size: 1.6rem;
    line-height: 1.8;
}
section.flow ul li .wrap dl dd strong {
    color: #e73b2e;
    font-weight: normal;
}
section.flow ul li:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4em;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 34px 0 34px;
    border-color: #dca153 transparent transparent transparent;
}
section.flow ul li:last-child:after {
    content: none;
}
section.flow img.num {
    position: absolute;
    left: -6em;
    top: -5em;
}
section.flow img.flower1,
section.flow img.flower2,
section.flow img.flower3 {
    position: absolute;
    z-index: -1;
}
section.flow img.flower1 {
    top: 10em;
    left: -10em;
}
section.flow img.flower2 {
    top: 30%;
    right: -10em;
}
section.flow img.flower3 {
    bottom: 7%;
    left: -10em;
}

/* qa
========================================== */

section.qa {
    background: none;
}
section.qa ul {
    max-width: 1000px;
    margin: 0 auto 7% auto;
}
section.qa ul li {
    background: white;
    margin-bottom: 3em;
    box-shadow: 7px 4px 25px 0px rgb(0 0 0 / 14%);
}
section.qa ul li:last-child {
    margin-bottom: 0;
}
section.qa ul li dl dt {
    background: #dca053;
    color: white;
    padding: 1em 1.5em;
    position: relative;
    display: flex;
}
section.qa ul li dl dt h4 {
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 1.5;
}
section.qa ul li dl dt:before {
    content: "Q.";
    font-size: 2.8rem;
    margin-right: 15px;
    line-height: 1.5;
}
section.qa ul li dl dt:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #dba053 transparent transparent transparent;
    position: absolute;
    bottom: -20px;
    left: 3em;
}
section.qa ul li dl dd {
    padding: 2em 1.5em;
}
section.qa ul li dl dd p {
    display: flex;
    align-items: center;
}
section.qa ul li dl dd p:before {
    content: "A.";
    font-size: 2.8rem;
    margin-right: 15px;
    color: #dca053;
}
section.qa ul li dl dd .photo {
    margin: 2em auto 0 auto;
    display: table;
    text-align: center;
}
section.qa ul li dl dd .photo img {
    margin: 2em auto 0 auto;
}
section.qa ul li dl dd .photo span.big {    
    color: #e73b2e;
    font-size: 2rem;
}

/* cv-bottom
========================================== */

section.cv-bottom {
    background: none;
}


@media screen and (max-width : 64em) {

    /* common */
    
    body {
        min-width: 1000px;
    }
    
	h2 {
    	font-size: 5vw;
    }
    
    /* fv */
    
    .fv .inner {
        width: 100%;
    }
    
    /* abouthairsystem */
    
    section.abouthairsystem img.flower1 {
        left: -30vw;
    }
    section.abouthairsystem img.flower2 {
        right: -30vw;
    }

	/* my24hours */

    section.my24hours ul {
        max-width: 90%;
    }
    section.my24hours ul li:nth-child(odd) .parts img:nth-child(2) {
        right: 0;
    }
    section.my24hours ul li:nth-child(even) .parts img:nth-child(2) {
        left: 0;
    }
    section.my24hours h2 {
        margin: 0 auto 2em auto;
    }
    
    /* flow */
    
    section.flow ul {
        max-width: 80%;
    }
    section.flow ul li {
        padding: 0 1em 1em 1em;
    }    
    section.flow img.num {
        width: 22%;
        position: relative;
        transform: translate(-50%, 0px);
        -webkit-transform: translate(-50%, 0px);
        -ms-transform: translate(-50%, 0px);
        left: 50%;
        right: 0;
        top: -2em;
    }
    
    /* qa */
   
    section.qa ul {
        max-width: 90%;
    }   

}

@media screen and (max-width : 42em) {
    
    /* common */
    
    body {
        min-width: 100%;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
	h2 {
		font-size: 5vw;
		line-height: 1.6
	}
    h2 span {
	    font-size: 70%;
	}
	.sentence {
		font-size: 3.8vw;
	}
    section {
        background-size: 90%;
        padding: 4em 0;
    }
    
    /* fv */
    
    .fv {
        background: none;
    }
    .fv:after {
        content: none;
    }
    .fv .inner {
        min-height: initial;
        background: none;
    }
    .fv img {
        right: initial;
    }
    .fv h1 {
        background: url(../images/logo_hsys_sp.png) no-repeat center;
        background-size: contain;
    }
    .fv .h1inner {
        width: 50vw;
        height: 50vw;
        position: absolute;
        z-index: 1;
        padding: 2em;
        left: 0;
        right: 0;
        bottom: -5%;
        margin: auto;        
    }
    
    /* abouthairsystem */
    
    section.abouthairsystem {
        padding: 15% 0 7% 0;
    }
    section.abouthairsystem img.flower1,
    section.abouthairsystem img.flower2,
    section.my24hours img.flower1,
    section.my24hours img.flower2,
    section.my24hours img.flower3,
    section.my24hours img.flower4,
    section.flow img.flower1,
    section.flow img.flower2,
    section.flow img.flower3 {
        width: 50vw;
    }
    section.abouthairsystem img.flower1,
    section.my24hours img.flower1,
    section.my24hours img.flower3,
    section.flow img.flower1,
    section.flow img.flower3 {
        left: -30vw;
    }
    section.abouthairsystem img.flower2,
    section.my24hours img.flower2,
    section.flow img.flower2 {
        right: -30vw;
    }
    section.abouthairsystem .titlewrap,
    section.secret .titlewrap,
    section.flow .titlewrap,
    section.qa .titlewrap {
        background: url(../images/titlekazari_sp.png) no-repeat center top;
        background-size: 50vw; 
        margin: 0 auto 2.5em auto;
    }
    section.abouthairsystem .titlewrap,
    section.abouthairsystem .sentence,
    section.secret .titlewrap,
    section.flow .titlewrap,
    section.qa .titlewrap {
        width: 95%;
        margin: 0 auto 7% auto;
    }
    section.abouthairsystem .titlewrap p,
    section.secret .titlewrap p,
    section.flow .titlewrap p,
    section.qa .titlewrap p {
        font-size: 4vw;
    }
    section.abouthairsystem h2,
    section.secret h2,
    section.flow h2,
    section.qa h2 {
        font-size: 8vw;
    }
    section.abouthairsystem .sentence p {
        font-size: 4.3vw;
    }
    
    /* movie */
    
    div.youtube {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
        padding-bottom: 7%;
	}
	div.youtube iframe {
		position: absolute;
		top: 0;
		right: 0;
		max-width: 100% !important;
		width: 100% !important;
		height: 100% !important;
        padding-top: 7%;
	}
    section.youtube {
        padding: 7% 0 0 0;
    }
    section.youtube div.youtube {
        padding: 65% 0 0 0;
    }
    section.movie h3 {
        font-size: 5vw;
        margin: 0 auto 0 auto;
    }
    section.movie {
        padding: 0 0 4em 0;
    }
    
    /* my24hours */
    
    section.my24hours:before {
        background-size: 90%;
    }
    section.my24hours ul {
        max-width: 80%;
    }
    section.my24hours ul li {
        width: 100%;
        margin-bottom: 8em;
    }
    section.my24hours h2 {
        background: url(../images/title_24hours_sp.png) no-repeat;
        width: 70vw;
        background-size: contain;
        margin: 0 auto 1em auto;
    }
    section.my24hours ul li:nth-child(odd) .parts img:nth-child(2),
    section.my24hours ul li:nth-child(even) .parts img:nth-child(2) {
        top: -4.5em;
        width: 70vw;
    }
    section.my24hours ul li:nth-child(even) .parts img:nth-child(2) {
        left: -5%;
    }
    section.my24hours ul li:nth-child(odd) .parts img:nth-child(2) {
        right: -5%;
    }
    section.my24hours ul li:nth-child(even) {
        top: 0;
    }
    section.my24hours .parts img:first-child {
        width: 20vw;
    }
    section.my24hours .parts img:nth-child(2) {
        width: 70vw;
    }
    section.my24hours .text dl dt {
        font-size: 4vw;
    }
    section.my24hours .text dl dd {
        font-size: 3vw;
    }
    section.my24hours ul li {
        background: linear-gradient(315deg, transparent 2em, #fff 2em);
    }
    section.my24hours .text div p {
        font-size: 3vw;
    }
    section.my24hours ul li:last-child {
        margin-bottom: 0;
    }
    
    /* secret */
    
    section.secret img.beforeafter {
        width: 90%;
        margin: 0 auto 3em auto;
    }
    section.secret p {
        width: 95%;
        font-size: 4vw;
        margin: 0 auto 0 auto;
        line-height: 1.5;
    }
    
    /* flow */
    
    section.flow ul {
        max-width: 90%;
    }    
    section.flow .titlewrap {
        margin: 0 auto 5em auto;
    }
    section.flow ul li:nth-child(4) {
        padding: 1em 1em 1em 1em;
    }
    section.flow img.num {
        top: -2em;
        width: 28vw;
    }
    section.flow ul li .wrap .illust {
        display: none;    
    }
    section.flow ul li .wrap dl {
        padding: 0 0 0 0;
    }
    section.flow ul li .wrap dl dt {
        text-align: center;
        font-size: 4vw;
        line-height: 1.5em;
        margin-bottom: 1em;
    }
    section.flow ul li .wrap dl dd {
        padding: 0 0 0 30vw;
        font-size: 3vw;
        background-size: 25vw !important;
    }
    section.flow ul li:first-child .wrap dl dd {
        background: url(../images/illust_flow_1_sp.png) no-repeat;
    }
    section.flow ul li:nth-child(2) .wrap dl dd {
        background: url(../images/illust_flow_2_sp.png) no-repeat;
    }
    section.flow ul li:nth-child(3) .wrap dl dd {
        background: url(../images/illust_flow_3_sp.png) no-repeat;
    }
    section.flow ul li:nth-child(5) .wrap dl dd {
        background: url(../images/illust_flow_4_sp.png) no-repeat;
    }
    section.flow ul li:after {
        border-width: 1em 1.2em 0 1.2em;
        bottom: -2em;
    }
    section.flow ul li:nth-child(4) p {
        font-size: 7vw;
    }
    
    /* qa */
    
    section.qa ul {
        padding: 0 0 0 0;
    }
    section.qa ul li dl dt {
        padding: 1em 1em;
    }
    section.qa ul li dl dt:before {
        font-size: 5vw;
        line-height: 1.3;
    }
    section.qa ul li dl dt h4 {
        font-size: 4.5vw;
        line-height: 1.3;
    }
    section.qa ul li dl dt:after {
        border-width: 1em 1em 0 1em;
        bottom: -1em;
    }
    section.qa ul li dl dd {
        padding: 2em 1em;
    }
    section.qa ul li dl dd p:before {
        font-size: 5vw;
    }
    section.qa ul li dl dd .photo span.big {
        font-size: 4.5vw;
        line-height: 1.5;
    }
    
    /* cv */
    
    .cv {
        padding-top: 10%;
        font-size: 4vw;
    }
    .cv a {
        width: 90%;
        padding: 0.5em 1em;
        font-size: 5vw;
        border-radius: 1em;
    }
    .cv a:after {
        border-radius: 0 1em 1em 0;
        width: 2.5em;
    }
    .cv a:before {
        border-width: 0.5em 0 0.5em 0.5em;
        right: 1em;
    }
    .cv p {
        font-size: 3vw;
        padding: 0 3em;
        font-weight: bold;
    }
    .cv p br {
        display: none;
    }
 
    
    /* qa */

 
    

    /* cv-bottom */

    section.cv-bottom .catch {
    	font-size: 5vw;
    }
    section.cv-bottom .catch p:before,
    section.cv-bottom .catch p:after {
    	zoom: 0.5;
    }
    section.cv-bottom {
    }
    section.cv-bottom .cv {
    padding-top: 0;
    }
    

}