/*-------------------
   common
-------------------*/
.wrapper {
	font: 1.0em/1.2 "Ã£Æ’â€™Ã£Æ’Â©Ã£â€šÂ®Ã£Æ’Å½Ã¨Â§â€™Ã£â€šÂ´ Pro W3", "Hiragino Kaku Gothic Pro", "Ã£Æ’Â¡Ã£â€šÂ¤Ã£Æ’ÂªÃ£â€šÂª", "Meiryo", "Osaka", "Ã¯Â¼Â­Ã¯Â¼Â³ Ã¯Â¼Â°Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
	letter-spacing: .1em;
	padding: 0 0;
	position: relative;
}
.wrapper * {
	box-sizing: border-box;
}
.wrapper a {
	color: inherit;
	display: block;
}
.wrapper img {
	height: auto;
	max-width: 100%;
}
#container .flex {
    align-items: flex-start;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

/*-2Ã£ÂÂ¾Ã£Ââ€žver-*/
#container .mainvisual {
    text-align: center;
    position: relative;
	background-position: top center, bottom center;
	padding-bottom: 5%;
}
#container .mainvisual-watanabe {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/watanabe_sp.jpg),
                url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/fv_bg.jpg);

	background-repeat: no-repeat, no-repeat;
	background-size: 100%, 150%;
}

#container .mainvisual-maebara {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/maebara_sp.jpg),
                url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/fv_bg.jpg);
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, 150%;
}

#container .mainvisual-takahashi-hodaka {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/takahashi_men_sp.jpg),
                url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/fv_bg.jpg);
                background-repeat: no-repeat, no-repeat;
	background-size: 100%, 150%;
}


#container .mainvisual-takahashi-yuuna {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/takahashi_rady_sp.jpg),
                url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/fv_bg.jpg);
                background-repeat: no-repeat, no-repeat;
	background-size: 100%, 150%;
}

#container h1 {
	color: #fff;
    font: 2rem/1.2 "Hannari", serif;
    position: relative;
    text-align: left;
    top: 430px;
    padding-left: 20px;
}

#container h2 {
	color: #fff;
	font: 1.5rem/1.2 "Hannari", serif;
	margin: 0px auto 80px;
	position: relative;
	text-align: center;
	top: 275px;
}

#container .mainvisual p {
    color: #fff;
    font-family: "Hannari", serif;
    margin: 0 0;
    padding: 355px 20px 40px 20px;
    text-align: left;
    padding-left: 20px;
    line-height: 1.6;
}

/*Ã£â€šÂ¤Ã£Æ’Â³Ã£â€šÂ¿Ã£Æ’â€œÃ£Æ’Â¥Ã£Æ’Â¼Ã¥â€°ÂÃ¥Å½Å¸Ã¦Â°Â*/
#container .interview_wrapper {
    background-color: #f2f2f2;
}

#container .interview h2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/interview.png);
     background-repeat: no-repeat, no-repeat;
    background-position: top 25px left 0px,
                         bottom 0px right 0px;
    background-size: 40%;
    position: relative;
    color: #333;
    font-size: 2rem;
    top: 0;
    margin: 0;
    padding: 90px 0 30px;
}

#container .interview h3 {
     padding: 5px 5px 5px 10px;
     border-left: 4px double #34485e;
     color: #34485e;
     margin-left: 10px;
     font-family: "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯Ã¤Â½â€œ", YuGothic, "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯ Medium", "Yu Gothic Medium", "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯", "Yu Gothic", "Ã£Æ’Â¡Ã£â€šÂ¤Ã£Æ’ÂªÃ£â€šÂª", sans-serif;
     line-height: 1.5;
}

#container .interview h3 span {
    font-weight: 600;
    font-size: 1rem;
}

#container .interview p {
     padding: 10px 10px 30px 10px;
     color: #333;
     margin-left: 10px;
     font-family: "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯Ã¤Â½â€œ", YuGothic, "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯ Medium", "Yu Gothic Medium", "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯", "Yu Gothic", "Ã£Æ’Â¡Ã£â€šÂ¤Ã£Æ’ÂªÃ£â€šÂª", sans-serif;
     line-height: 1.5;
     font-size: 16px;
     position: relative;
     z-index: 3;
}

#container .image-flex{
	margin: 15% auto 0;
	width: 90%;
}
#container .image-flex .image-box{
	position: relative;
	z-index: 3;
    margin-bottom: 5%;

}

#container .image-left,
#container .image-right {
	position:relative;
	z-index: 3;
}

#container .image-flex .box-left {
	position: absolute;
	top: -22%;
	left: -5%;
	width: 40%;
}
#container .image-flex .box-right {
	position: absolute;
	top: 60%;
	right: -5%;
	width: 40%;
}

#container .data {
    background-color: #e9e9e9;
    padding: 30px;
    text-align: center;
    margin: 0 20px 20px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
}

#container .data-txt {
     font-family: "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯Ã¤Â½â€œ", YuGothic, "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯ Medium", "Yu Gothic Medium", "Ã¦Â¸Â¸Ã£â€šÂ´Ã£â€šÂ·Ã£Æ’Æ’Ã£â€šÂ¯", "Yu Gothic", "Ã£Æ’Â¡Ã£â€šÂ¤Ã£Æ’ÂªÃ£â€šÂª", sans-serif;
     font-size: 16px;
     text-align: left;
     padding-top: 20px;
}

#container .data-txt .txt2 {
     font-weight: 600;
     font-size: 1.2rem;
}


#container .bnr {
    margin-bottom: 40px;
    text-align: center;
}

/* 481pxÃ¤Â»Â¥Ã¤Â¸Å Ã£ÂÂ«Ã©ÂÂ©Ã§â€Â¨Ã£Ââ€¢Ã£â€šÅ’Ã£â€šâ€¹CSSÃ¯Â¼Ë†Ã£â€šÂ¿Ã£Æ’â€“Ã£Æ’Â¬Ã£Æ’Æ’Ã£Æ’Ë†Ã§â€Â¨Ã¯Â¼â€° */
 @media screen and (min-width:480px) and ( max-width:960px){

#container .mainvisual {
    background-position: top 25px left 95px,
                         bottom 0px right 0px;
    background-size: 75%, 100%;
    background-color: #fff;
    text-align: center;
    position: relative;
}

#container h1 {
	color: #fff;
    font: 2rem/1.2 "Hannari", serif;
    position: relative;
    text-align: left;
    top: 600px;
    padding-left: 110px;
}

#container h2 {
	color: #fff;
    font: 2.5rem/1.2 "Hannari", serif;
    position: relative;
    text-align: center;
    top: 425px;
}

#container .mainvisual p {
    color: #fff;
    font-family: "Hannari", serif;
    margin: 0 0;
    padding: 495px 20px 40px 110px;
    text-align: left;
}
#container .interview h2 {
    font-size: 3rem;
    padding: 135px 0 30px;
}
#container .interview h3 span {
    font-size: 1.5rem;
}
#container .image-flex{
	display: flex;
	margin: 10% auto 0;
}
#container .image-flex .image-box{
	margin: 0 2%;
	width: 46%;
    margin-bottom: 5%;
}


#container .image-flex .box-left {
	top: -25%;
	left: -10%;
}
#container .image-flex .box-right {
	top: 55%;
	right: -10%;
}

#container .data-txt {
    font-size: 1.3rem;
    padding-left: 160px;
}
#container .data-txt .txt2 {
     font-size: 2rem;
}
}



@media screen and (min-width: 960px) {
/* 960pxÃ¤Â»Â¥Ã¤Â¸Å Ã£ÂÂ«Ã©ÂÂ©Ã§â€Â¨Ã£Ââ€¢Ã£â€šÅ’Ã£â€šâ€¹CSSÃ¯Â¼Ë†PCÃ§â€Â¨Ã¯Â¼â€° */
#container .mainvisual{
	height: 520px;
	margin: 0 auto;
	width: 1200px;
}
#container .mainvisual-watanabe {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/watanabe.jpg) 50% 50% no-repeat;
    background-size: contain;
}
#container .mainvisual-maebara {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/maebara_fv.jpg) 50% 50% no-repeat;
    background-size: contain;
}
#container .mainvisual-takahashi-yuuna {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/takahashi_rady.jpg) 50% 50% no-repeat;
	background-size: contain;
}
#container .mainvisual-takahashi-hodaka {
    background: url(/contents/shop/sevenbeauty/img/freepage/stylingchair-series/takahashi_men.jpg) 50% 50% no-repeat;
    background-size: contain;
}
#container .mainvisual h1 {
    font-size: 3rem;
	top: 60px;
    padding-left: 650px;
}

#container .mainvisual-watanabe h2 {
    position: relative;
    top: 75px;
    left: 215px;
}

#container .mainvisual-maebara h2 {
    position: relative;
    top: 90px;
    padding-left: 435px;
}

#container .mainvisual-takahashi-yuuna h2 {
    position: relative;
    top: 75px;
    padding-left: 465px;
}

#container .mainvisual-takahashi-hodaka h2 {
    position: relative;
    top: 80px;
    padding-left: 450px;
}

#container .mainvisual-watanabe p {
    padding: 33px 20px 40px 650px;
    text-align: left;
    font-size: 1rem;
    color: #fff;
}

#container .mainvisual-maebara p {
    padding: 33px 20px 40px 650px;
    text-align: left;
    font-size: 1rem;
    color: #fff;
}

#container .mainvisual-takahashi-yuuna p {
    padding: 33px 20px 40px 650px;
    text-align: left;
    font-size: 1rem;
    color: #fff;
}


#container .mainvisual-takahashi-hodaka p {
    padding: 33px 20px 40px 655px;
    text-align: left;
    font-size: 1rem;
    color: #fff;
}


#container .interview_wrapper {
    margin: 0 auto;
    padding: 0 3% 1%;
	width: 1200px;
}

#container .interview h2 {
    background-position: top 25px left 50px;
	background-size: 287px;
    padding: 100px 0 50px;
    font-size: 3.5rem;
}
#container .interview h3 {
    font-size: 1.3rem;
    margin: 30px auto 10px;
}

#container .interview h3 span {
    font-size: 1.6rem;
}

#container .interview p {
    font-size: 1.2rem;
}

#container .image-flex{
	display: flex;
	margin: 8% auto 0;
	width: 860px;
}

#container .image-flex .image-box{
	margin: 0 2%;
	width: 46%;
}
	
#container .image-flex .box-left {
	left: -25%;
	width: 50%;
}
#container .image-flex .box-right {
	top: 40%;
	right: -40%;
	width: 50%;
}

#container .data-flex {
    display: flex;
}

#container .data {
    width: 82%;
    margin: 50px auto;
}

#container .data-txt .txt2 {
     font-size: 2.2rem;
}

#container .data p {
    font-size: 1.5rem;
    padding: 0;
    line-height: 1.8;
    margin-left: 40px;
    text-align: left;
}
#container .bnr {
    text-align: center;
    width: 100%;
    height: auto;
}
}