@charset "utf-8";
/*-------------------
   clearfix
-------------------*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 *zoom: 1;
}

/*-------------------
   common
-------------------*/
.wrapper {
	font: 0.8em/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: .1em;
	padding: 0 0 20px;
	position: relative;
}
.wrapper * {
	box-sizing: border-box;
}
.wrapper a {
	color: inherit;
	display: block;
}
.wrapper img {
	height: auto;
	max-width: 100%;
}

/*---7esthe_mobile.css リセットOP対策----*/
#container h3,
#container h4,
#container h5 {
	background: none;
	color: #000;
	cursor: auto;
	float: none;
}
#container h3 span,
#container h4 span,
#container h5 span {
	background: none;
	color: #000;
	cursor: auto;
	float: none;
}
#container .flex {
 align-items: flex-start;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
/*--7esthe_mobile.css 商品ページ用リセットOP対策　----*/
.write_box {
 margin: 0;
 padding: 0;
}
#mobile_detail_content {
	font-size: 1.0em;
}
.item_explanation .cont {
	margin: 0;
	padding: 0;
}
 
/* ボタンデザイン自由に変えてください  */
#container .buy_btn {
	background: #a5c54e;
	border: #f1f1f1 1px solid;
	border-radius: 25px;
	color: #fff;
	display: inline-block;
	font: bold 1rem/2.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	position: relative;
	margin: 5px auto 35px;
	text-align: center;
	width: 90%;
}
#container .buy_btn a {
	color: #fff;
	display: block;
	text-decoration: none;
}
#container .buy_btn a::before {
	border: solid 5px transparent;
	border-left: solid 7px #fff;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	position: relative;
	top: -1px;
}
#container .buy_btn:hover {
	filter: alpha(opacity=90);
	opacity: 0.7;
	transition: all ease-in 0.4s;
}
#container .sold-out {
	background: #787878;
	border: #f1f1f1 1px solid;
	color: #fff;
	display: inline-block;
	margin: 10px auto 35px;
	position: relative;
	width: 100%;
}
/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 30px auto 0;
	padding: 10px 10px;
	background-color:#ffffff;
	border:solid 1px #dedede;
}

#container .wrapper .lineup ,#container .wrapper .kinou-menu {
	margin: 30px auto 0;
	padding: 10px 10px;
	border:none;
}


/*---mainvisual----*/
#container .wrapper .mainvisual {
	margin:0;
	padding:0;
	overflow:hidden;
	background-image:url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/nf-series/new/pc-top.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

#container .wrapper .mainvisual .headtitle {
	margin:0;
	padding:20px;
	font: bold 1.8rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing:-0.05rem;
	text-align:center;
	color:#ffffff;
 background: #244da0;
}
#container .wrapper .mainvisual .subtitle {
	margin:0 20px 365px;
	padding:20px;
	font: bold 2.2rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing:-0.05rem;
	text-align:center;
}
#container .wrapper .mainvisual .subtitle em {
	font-size: 2.8rem;
}

/*---lineup----*/
#container .wrapper .item-flex {
	margin:0;
	padding:0;
	display:flex;
	flex-flow:wrap;
}
#container .wrapper .item-flex dl{
	position:relative;
	overflow:hidden;
	margin:0;
	padding:0 5px 0 0;
    width: calc(100% / 4);
   -webkit-width: calc(100% / 4);
}
#container .wrapper .item-flex dt em{
     position: relative;
     display:list-item;
     margin: 5px auto;
     padding:5px;
     width: 95%;
     background: #244da0;
     border-radius: 20px;
     color: #fff;
     font: 0.9rem/1.2 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシッ    ク体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
     text-align: center;
}
#container .wrapper .item-flex dd{
		font: normal 1rem/1.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
		letter-spacing:-0.05rem;
 	text-align:center;
}
#container .wrapper .item-flex dd h3{
	margin:10px 0 0 0;
	font: 1.1rem/1.2 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.07rem;
 text-align:center;
}
#container .wrapper .item-flex .price{
		font: bold 1rem/1.2 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
		color:#ff0033;
 	text-align:center;
		letter-spacing:-0.05rem;
}
#container .wrapper .item-flex .price strong{
	font-size:1.5rem;
	letter-spacing:-0.05rem;
}
#container .wrapper .item-flex .buy_btn{
	font: bold 1.1rem/2 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.05rem;
}

/*---kinou-menu----*/
.kinou-menu .kinou-list li:nth-of-type(2n+1){
	margin-left: 0;
}
.kinou-menu .kinou-list{
	margin:0;
	padding:0;
	display:flex;
	flex-flow:wrap;
 justify-content: left;
}
.kinou-menu .kinou-list li{
 width: 46%;
	margin:0 10px 5px 0;
	padding: 5px;
	font: normal 0.9rem/1.1 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
 color: #fff;
 background: #244da0;
 text-align: center;
 border: 1px solid #2c82b9;
 border-radius: 5px;
}
.kinou-list{
	margin-bottom: 20px;
	display:flex;
	flex-flow:wrap;
	justify-content:center;
}

.kinou-list li{
	width: 45%;
	margin:10px 2.5%;
}

#container .kinou-list li a::before {
    border-top: 8px solid #ffffff;
    border-right: 8px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 8px solid transparent;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    top: -1px;
    left: -5px;
}

/*---section----*/
#container .wrapper .section-title {
	font: bold 2.4rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 color: #244da0;
 text-align: left;
 height: 50px;
 margin: 0 auto 40px;
 padding: 0 0 0 60px;
 background-image: url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/nf-series/new/mark.png);
 background-position: left;
 background-repeat: no-repeat;
 background-size: 55px 50px;
}
#container .wrapper .list-title {
 margin: 20px;
	text-align:center;
 padding: 0;
	border: none;
}
#container .wrapper .title-list{
	display:flex;
	flex-flow:wrap;
	justify-content:center;
}
#container .wrapper .title-list .list2{
	position:relative;
	margin:0;
	padding:0 5px 0 5px;
 width: calc(98% / 2);
 webkit-width: calc(98% / 2);
}
#container .wrapper .title-text{
	text-align: center;
	font-size: 1.05em;
}

#container .wrapper .course .title,
#container .wrapper .list-title2 {
    color: #244da0;
    font-size: 1.5em;
    margin: 20px auto 10px;
    text-align: center;
    font-weight: normal;
    letter-spacing:0;
}
.wrapper .desc {
    font-size: 1.2em;
    line-height: 1.7;
}
.wrapper .mark{
	margin: 0 1% 0 0;
	width: 6%;
	display: inline-block;
	vertical-align: middle;
}
.wrapper .desc .number {
 font-weight: bold;
 font-size: 1.0em;
}
.wrapper .desc li{
	margin: 10px 0;
}
.moviebox{
	width: 90%;
 margin: 10px auto;
}
.moviebox iframe{
	width: 100%;
	height: auto;
}

/*---caution----*/
#container .wrapper .caution {
 margin: 20px auto;
 background: #e3e3e3;
 padding: 2%;
}
#container .wrapper .caution .caution-title {
 font-size: 1.2em;
 font-weight: bold;
 margin: 5px 0 10px;
 text-align: center;
 color: #e00;
}
#container .wrapper .caution-list{
 width: 100%;
 background: #fff;
 margin: 0 auto;
 padding:5px 3%;
 line-height: 1.4;
}
#container .wrapper .caution-list li{
	margin: 10px 0;
	font: normal 0.9rem/1.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
}

#container .wrapper .section6 h2{
 margin: 0 auto 10px;
	padding:0 0 10px;
	font: normal 2rem/1.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
 color: #244da0;
	letter-spacing:-0.05rem;
 text-align: center;
 border-bottom:1px dotted;
}

@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
#container .wrapper .section-title {
	font: bold 1.3rem/1.2 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing:-0.07rem;
 color: #244da0;
 text-align: left;
 height: 30px;
 margin: 0 auto 20px;
 padding: 5px 0 0 40px;
 background-image: url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/nf-series/new/mark.png);
 background-position: left;
 background-repeat: no-repeat;
 background-size: 35px 30px;
}
#container .wrapper .item-flex dl{
	position:relative;
	overflow:hidden;
	margin:10px 5px;
	padding:0 0 0 0;
    width: calc(94% / 2);
    -webkit-width: calc(94% / 2);
}
/*---mainvisual----*/
#container .wrapper .mainvisual {
	margin:0;
	padding:0;
	overflow:hidden;
	background-image:url(https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/nf-series/new/sp-top.jpg);
	background-repeat:no-repeat;
	background-size: contain;
}

#container .wrapper .mainvisual .headtitle {
	margin:0;
	padding:20px 5px;
	font: bold 1.2rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing:-0.05rem;
	text-align:center;
	color:#ffffff;
 background: #244da0;
}
#container .wrapper .mainvisual .subtitle {
    margin: 0 5px 205px;
    padding: 20px;
    font: bold 1.2rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: -0.05rem;
    text-align: center;
}
#container .wrapper .mainvisual .subtitle em {
	font-size: 2rem;
}
#container .section6 ul{
	display:flex;
	flex-flow:wrap;
	justify-content:flex-start;
}
#container .section6 ul li{
	position:relative;
	margin:10px 5px;;
	padding:0 5px 0 5px;
 width: calc(88% / 2);
}
#container .wrapper .section6 h2 {
    font: normal 1.4rem/1.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
}
}

 @media screen and (min-width:480px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
#container .headtitle{
	font: normal 1.5em/2 "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin-bottom:30px;
}
#container .buy_btn {
	border: #fff 1px solid;
	font: bold 1.2rem/2.6 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	margin: 5px auto 35px;
	width: 95%;
}

.kinou-menu .kinou-list{
	padding:5px 0 30px;
	display:flex;
	flex-flow:wrap;
}
.kinou-menu .kinou-list li{
 background: #244da0;
 color: #fff;
 text-align: center;
 font-size: 1em;
 width: 19%;
 line-height: 1.6;
 border-radius: 4px;
 border: 1px solid #2c82b9;
 margin:5px 0.5%;
	margin-bottom: 5px;
	padding:10px .5%;
}
.kinou-menu .kinou-list li:nth-of-type(2n+1){
	margin:5px 0.5%;
}
.kinou-list li{
	width: 30%;
	margin:10px 1.5%;
}
.wrapper .item-list li{
	display:inline-block;
	margin:0 0.5%;
	width:48%
}
.wrapper .item-list .item-name {
 font-size: 0.9em;
 margin: 5px auto;
 color: #111;
}
.wrapper .item-list .desc .price strong {
 font-size: 1.2rem;
 font-weight: bold;
}



#container .wrapper .course .title,
#container .wrapper .list-title2  {
 color: #244da0;
 font-size: 2em;
 margin: 30px 5% 20px;
 border-bottom:1px dotted;
 letter-spacing:0;
 padding-bottom:8px;
}

#container .wrapper .title-text{
	font-size: 1.5em;
}
.wrapper .desc {
 font-size: 1rem;
 line-height: 1.6;
 margin:0 15px;
}

.listWrapper{
	margin:15px 10px;
	display:flex;
	flex-flow:row-reverse;
}
.listWrapper p{
	width:50%;
}
.wrapper .listWrapper ol{
	width:50%;
	margin:10px 10px 10px 0;
}
.wrapper .listWrapper ul{
	margin:10px 10px 10px 0;
}

#container .wrapper .caution .caution-title {
 font-size: 1.5em;
}
.caution-list{
 font-size: 1.2em;
 line-height: 1.6;
}
.moviebox{
 position:relative;
 width:90%;
 padding-top:52%;
 margin:0 5% 50px;
}
.moviebox iframe{
 position:absolute;
 top:0;
 right:0;
 width:100%;
 height:100%;
}
#container .wrapper .section6 h2 {
    font: normal 1.4rem/1.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
}

}

 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
.wrapper{
	width: 1040px;
	margin: 0 auto;
}

#container .buy_btn {
	border: #fff 1px solid;
	font: bold 1.2rem/2.4 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	width:95%;
	margin: 5px 15px 30px;
}

.kinou-menu .kinou-list li{
    width: 24%;
    margin: 5px 0.5%;
    padding: 10px 1%;
    font: normal 1.0rem/1.6 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
}
.kinou-menu .kinou-list li a:hover{
	text-decoration:none;
}
.kinou-menu .kinou-list li:hover{
	background-color:#4face8;
}

#container .wrapper .course .title,
#container .wrapper .list-title2  {
 color: #244da0;
 font-size: 2.5em;
 margin: 50px 10px 20px;
 border-bottom:1px dotted #244da0;;
 letter-spacing:0;
 padding-bottom:6px;
}

.wrapper .item-list{
	margin: 0px auto 20px;
	padding-top:0px;
	background:none;
}
.wrapper .item-list .desc .price{
	color: #e00;
	margin: 10px auto;
	line-height:1.4em;
	font-size:1rem;
}
.wrapper .item-list .desc .price strong{
	font-size: 1.5em;
	font-weight: bold;
}
.wrapper .item-list .item-name{
	font-size: 1rem;
	margin: 5px auto;
	color:#111;
}
.wrapper .item-list .desc{
	width:auto;
	display:inline-block;
}

.treatment-header{
	display:flex;
	border:1px solid #f0f0f0;
	justify-content:flex-start;
}
#container .wrapper .list-title {
 margin: 0;
 padding: 0;
}


.wrapper .mark{
	margin: 3px 1% 3px 0;
	width: auto;
}
.treatment-header p{
	padding-top:20px;
}


#container .section6{
	padding:30px 5%;
	text-align:center;
}
#container .section6 p{
	font-size:1rem;
	margin:1.5em;
}

#container .section6 ul{
	display:flex;
	flex-flow:wrap;
	justify-content:center;
}
#container .section6 ul li{
	position:relative;
	margin:0;
	padding:0 5px 0 5px;
 width: calc(98% / 3);
}

#container .wrapper .caution .caution-title {
 font-size: 2em;
 margin: 0px 0 15px;
}
.caution {
 margin: 10px 10px 50px;
 padding:2% 3%;
}
}