@charset "utf-8";
/*-------------------
   clearfix
-------------------*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
 *zoom: 1;
}
/*-------------------
   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 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;
}
/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC

/*  全体指定 スマホ縦 i5 i5SE　350pxまで  */

/* ボタンデザイン自由に変えてください  */
/*--おきにいり-べた--*/
#container .buy-btn {
    background: #22c47a;
    border-radius: 50px;
    color: #fff;
    display: block;
    font: normal 1rem/2.8 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    text-decoration: none;
}
#container .buy-btn:hover {
	filter: alpha(opacity=90);
	transition: 0.3s ease-in 0.1s;
	background:#098b51;
	text-decoration: none;
}
#container .buy-btn a:hover {
	text-decoration: none;
	transition: 0.3s ease-in 0.1s;
}
/*--わくせん--*/
#container .buy-btn2 {
    border: solid 2px #a62b45;
    border-radius: 50px;
    color: #a62b45;
    display: block;
    font: normal 1rem/2.6 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    margin: 5px auto;
    text-align: center;
    width: 100%;
    text-decoration: none;
}
#container .buy-btn2:hover {
	filter: alpha(opacity=90);
	transition: 0.4s ease-in 0.1s;
    background: #a62b45;
    color: #fff;
	text-decoration: none;
}
#container .buy-btn2 a:hover {
	text-decoration: none;
}

/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 10px auto 0;
	padding: 10px 10px 0;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/FV-sp.jpg)no-repeat;
    background-size: 100%;
    background-color: #fff;
    padding: 10px 20px;
    position: relative;
}
/*----pulupulu-icon----*/
#container .mainvisual .icon {
    display: block;
    text-align: center;
    margin: 5px auto 310px;
    padding: 0 20px;
    width: 70%;
}
#container .mainvisual .icon ul {
    display: flex;
}
#container .mainvisual .icon ul li {
	display: inline-block;
	margin: -4px;
}
#container .mainvisual .icon ul li img {
	display: inline-block;
	width: 100%;
}
#container .pulupulu {
    -webkit-animation: pulupulu 4s linear 0s 1;
    animation: pulupulu 4s linear 0s 1;
    animation-iteration-count: infinite;
}
@-webkit-keyframes pulupulu {
    0% {
   -webkit-transform: scale(1.0, 1.0,) translate(0%, 0%);
   }
    12% {
   -webkit-transform: scale(0.95, 1.2) translate(0%, -10%);
   }
    14% {
   -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
   }
    16% {
   -webkit-transform: scale(0.95, 1.05) translate(0%, -3%);
   }
    18% {
   -webkit-transform: scale(1.05, 0.95) translate(0%, 3%);
   }
    20% {
   -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
   }
    100% {
   -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
   }
   }
@keyframes pulupulu {
    0% {
   transform: scale(1.0, 1.0,) translate(0%, 0%);
   }
    12% {
   transform: scale(0.95, 1.2) translate(0%, -10%);
   }
    14% {
   transform: scale(1.1, 0.9) translate(0%, 5%);
   }
    16% {
   transform: scale(0.95, 1.05) translate(0%, -3%);
   }
    18% {
   transform: scale(1.05, 0.95) translate(0%, 3%);
   }
    20% {
   transform: scale(1.0, 1.0) translate(0%, 0%);
   }
    100% {
   transform: scale(1.0, 1.0) translate(0%, 0%);
   }
   }
/*----//pulupulu-icon----*/
#container .mainvisual .maintitle {
	display: block;
	text-align: center;
}
#container .mainvisual .subtitle {
    color: #6a3906;
	font: 1.2rem/1.3 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
    padding: 0 auto;
}
#container .mainvisual .headtitle {
    color: #6a3906;
	font: 2.3rem/1.3 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
    padding: 0 auto;
}
#container .mainvisual .price {
    color: #212121;
	font: 1rem/1.3 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
    padding: 0 auto;
}
#container .mainvisual .price .big {
	font-size: 2rem;
}
#container .mainvisual .price .small {
	font-size: 0.8rem;
}
/*----sec1----*/
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/sec1back-sp.png)no-repeat;
    background-size: 100%;
    background-color: #fff;
    margin: 10px 0;
    padding: 40px 10px 250px;
    position: relative;
}
#container .sec1 h2 img {
    display: inline-block;
    width: 100%;
}
#container .sec1 .des {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    margin: 10px auto;
    padding: 20px;
}
/*----top-back----*/
#container .sec2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line01-sp.jpg)no-repeat top 0px left 0px;
    background-size: 100%;
    background-color: #fff;
    margin: 0 0;
    padding: 20px 10px;
    position: relative;
}
#container .sec3,
#container .sec4,
#container .sec5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line02.jpg)no-repeat;
    background-size: 100%;
    background-color: #fff;
    margin: 0 0;
    padding: 20px 10px;
    position: relative;
}
#container .sec6 {
	background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line02.jpg),
				url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line03.jpg);
    background-repeat: no-repeat,
					   no-repeat;
	background-position: top 0px left 0px, 
						 bottom 0px left 0px;
    background-size: 100%, 100%;
    background-color: #fff;
    margin: 0 0;
    padding: 20px 10px;
    position: relative;
}
/*----point-icon----*/
#container .point {
    display: block;
    width: 18%;
    margin: 40px auto 10px;
}
#container .point img {
	display: inline-block;
    width: 100%;
}
#container .sec2 .point {
    margin-top: 20px;
}
/*----sub-h3-des----*/
#container .subtitle {
	color: #13b5b1;
	font: 1.3rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align: center;
}
#container .title {
    color: #13b5b1;
    font: 1.5rem/1.0 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 0;
}
#container .des {
	color: #535353;
	font: 0.9rem/1.6 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: justify;
    text-justify: inter-ideograph;
}
/*----sec2-point1----*//*----sec3-point2----*/
#container .sec2 .top p {
	color: #083c34;
	font: 1.2rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align: center;
}
#container .sec2 .top h2 {
    color: #083c34;
    font: 1.8rem/1.2 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    text-align: center;
    padding: 0 15px;
}
#container .sec2 .flex dl {
    margin: 0px 0px;
    text-align: center;
    width: calc(100% / 3);
}
#container .sec2 .flex dt,
#container .sec2 .flex-up dt {
    text-align: center;
    margin: 0px;
    padding: 5px;
    width: 100%;
}
#container .sec2 .flex dt img {
    display: inline-block;
    width: 100%;
}
#container .sec2 .flex-up dt img {
    display: inline-block;
    width: 70%;
}
#container .sec2 .flex-up dl {
    display: flex;
    flex-wrap: wrap-reverse;
	margin: 0 auto;
	padding: 0 0;
}
#container .sec2 .po1box,
#container .sec3 .box2 {
    border: solid 2px #13b5b1;
    border-radius: 30px;
    margin-bottom: 0px;
	padding: 20px 15px;
}
#container .sec2 h4, 
#container .sec3 h4 {
	color: #212121;
	font: 1rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align: center;
}
#container .sec2 .flex dd,
#container .sec3 .box2 .des {
    color: #13b5b1;
	font: 1rem/1.5 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    margin: -5px 0 0;
}
#container .sec2 .flex {
	padding: 20px 0;
}
#container .sec2 .flex ul {
    display: table;
    margin: 0px 0px;
    text-align: center;
}
#container .sec2 .flex ul li {
    display: inline-block;
    padding: 5px;
    width: calc(100% / 2);
}
#container .sec2 .flex ul li img {
    display: inline-block;
    width: 100%;
}
#container .sec3 .box1 {
    margin: 20px 30px;
} 
#container .sec3 .box2 .flex {
    display: flex;
} 
#container .sec3 .box2 dl {
    margin: 0px 0px;
    text-align: center;
    width: calc(100% / 2);
}
#container .sec3 .box2 dt {
    text-align: center;
    margin: 0px;
    padding: 5px;
    width: 100%;
}
#container .sec3 .box2 dt img {
    display: inline-block;
    width: 100%;
}
/*----yajirushi----*/
#container .sec3 .yajirushi {
    position: relative;
    display: inline-block;
    text-align: center;
    height: 20px;
    width: 100%;
}
#container .sec3 .yajirushi::before{
    content: '';
    width: 20px;
    height: 20px;
    border: 0px;
    border-bottom: solid 3px #13b5b1;
    border-left: solid 3px #13b5b1;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    margin: -5px;
    left: 110px;
}
/*----sec2-a----*/

/*----sec4-point3----*/
#container .sec4 .po3img {
    text-align: center;
    margin: 0px;
    width: 100%;
}
#container .sec4 .po3img img {
    display: inline-block;
    width: 100%;
}
#container .sec4 .box .title {
	background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/img-left.jpg),
				url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/img-right.jpg);
    background-repeat: no-repeat,
					   no-repeat;
	background-position: bottom 0px left 0px, 
						 bottom 0px right 0px;
    background-size: 10%, 10%;
    background-color: #fff;
    margin: 20px 0;
    padding: 0 0;
    position: relative;
}
#container .sec4 .title p {
    color: #212121;
	font: 1rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    text-align: center;
    padding: 0 30px;
}
#container .sec4 .title .color {
    color: #b7a246;
	font: 1.5rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    text-align: center;
    padding: 0 50px;
}
#container .sec4 dl {
    margin: 0px 0px;
}
#container .sec4 dt {
    text-align: center;
    margin-top: 20px;
    width: 100%;
}
#container .sec4 dt img {
    display: inline-block;
    width: 50%;
}
#container .sec4 dd img {
    display: inline-block;
    width: 100%;
}
/*----sec5-point4----*//*----sec6-point5----*/
#container .sec5 .flex,
#container .sec6 .flex {
    display: flex;
}
#container .sec5 .flex p,
#container .sec6 .flex p {
    width: calc(100% / 2);
}
#container .sec6 .flex p {
    padding: 5px;
}
#container .sec6 .flex {
    padding-bottom: 85px;
}
#container .sec6 {
    position: relative;
}
#container .sec6 .gift {
	position: absolute;
	bottom: 10px;
	right: 20px;
	width: 30%;
}
/*----sec7----*/
#container .sec7 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/lineup-back.jpg)no-repeat top 0px left -80px;
    background-size: 160%;
    background-color: #fff;
    margin: 0;
    padding: 10px;
    position: relative;
}
#container .sec7 h3 {
    color: #13b5b1;
    font: 1.2rem/1.0 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    text-align: left;
    margin: 5px 0 0;
    padding: 0 0;
}
#container .sec7 .flex {
    display: flex;
    text-align: center;
}
#container .sec7 .flex dl{
    margin: 0;
    padding: 10px 5px;
    width: calc(100% / 2);
}
#container .sec7 dt {
    text-align: center;
    margin: 0px;
    width: 100%;
}
#container .sec7 dt img {
    display: inline-block;
    width: 100%;
}
#container .sec7 dl dd:nth-of-type(1) {
    height: 50px;
}
#container .sec7 dd .name {
    color: #212121;
    font: 0.8rem/1 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    margin: 7px 0;
}
#container .sec7 .price {
    color: #708383;
	font: 1.0rem/1.5 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 0 20px;
}
#container .sec7 .price .small {
    color: #708383;
	font: 0.8rem/1.5 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container .sec7 .buy-btn {
    font-size: 1rem;
}

@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
#container .mainvisual .icon {
    margin: 5px auto 370px;
}
#container .sec1 {
    padding: 50px 20px 290px;
}
#container .sec1 .des {
    padding: 20px 30px;
}
#container .des {
    font: 1rem/1.6 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container .sec2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line01-sp.jpg)no-repeat top -40px left -20px;
    background-size: 110%;
    padding: 20px;
}
#container .sec3, #container .sec4, #container .sec5, #container .sec6 {
    padding: 20px;
}
#container .sec2 .top h2 {
    padding: 0 25px;
}
#container .subtitle {
    padding: 0 8px;
}
#container .title {
    padding: 0 15px;
}
#container .sec2 h4, #container .sec3 h4 {
    font: 1.4rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
#container .sec3 .box1 {
    margin: 20px 60px;
}
#container .sec3 .yajirushi::before {
    left: 100px;
}
#container .sec4 .box .title {
    background-size: 7%, 7%;
}
#container .sec4 .title p {
    font: 1.3rem/1.5 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    padding: 0px 15px;
}
#container .sec4 .title .color {
    font: 1.8rem/1 "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    margin: 10px 0 0;
}
#container .sec7 {
    background-size: 140%;
    padding: 10px 15px;
}
}

 @media screen and (min-width:480px) and ( max-width:960px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/FV-pc.jpg)no-repeat;
    background-size: 100%;
    padding: 20px 30px;
    height: 400px;
}
#container .mainvisual .icon {
    display: block;
    margin: 5px auto 90px;
    padding: 0px 30px;
    width: 100%;
}
#container .mainvisual .icon ul {
    display: block;
    text-align: right;
}
#container .mainvisual .icon ul li {
    margin: -15px;
}
#container .mainvisual .icon ul li img {
    display: inline-block;
    width: 90%;
}
#container .mainvisual .subtitle,
#container .mainvisual .headtitle,
#container .mainvisual .price {
    display: block;
    text-align: center;
}
#container .mainvisual .maintitle {
    display: inline-block;
    float: right;
}
#container .mainvisual .subtitle {
    font-size: 1.5rem;
}
#container .mainvisual .headtitle {
    font-size: 3rem;
}
#container .mainvisual .price {
    font-size: 1.2rem;
}
#container .mainvisual .price .big {
    font-size: 2.2rem;
}
#container .buy-btn {
    font: normal 1.3rem/2.6 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/sec1back-pc.png)no-repeat;
    background-size: 100%;
    background-color: #fff;
    margin: 20px 0;
    padding: 30px 60px;
}
#container .sec1 h2 img {
    width: 55%;
}
#container .sec1 .des {
    margin: 0;
    width: 55%;
}
#container .sec2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line01.jpg)no-repeat top 0px left 0px;
    background-size: 100%;
    padding: 20px 40px;
}
#container .sec3, #container .sec4, #container .sec5, #container .sec6 {
    padding: 20px 40px;
}
#container .point {
    display: block;
    width: 10%;
    margin: 100px auto 20px;
}
#container .sec2 .point {
    margin-top: 40px;
}
#container .subtitle {
    font-size: 1.8rem;
}
#container .title {
    font-size: 2.1rem;
}
#container .des {
    padding: 0 10px;
}
#container .sec2 .po1box, #container .sec3 .box2 {
    padding: 30px;
}
#container .sec2 .flex {
    padding: 10px 30px 30px;
    justify-content: center;
}
#container .sec2 .flex dt, #container .sec2 .flex-up dt {
    padding: 10px;
}
#container .sec2 h4, #container .sec3 h4 {
    font-size: 1.5rem;
}
#container .sec2 .flex-up dl {
    flex-wrap: wrap;
}
#container .sec2 .flex-up dt {
    width: 40%;
}
#container .sec2 .flex-up dt img {
    width: 100%;
}
#container .sec2 .flex-up dd {
    width: 60%;
}
#container .sec2 .flex-up dd img {
    margin: 10px 0;
}
#container .sec2 .flex ul {
    display: contents;
}
#container .sec2 .flex ul li {
    width: calc(100% / 4);
}
#container .sec2 .box02 .flex ul {
    margin: 0 auto;
}
#container .sec3 .box1 .flex {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
#container .sec3 .box1 .flex dl {
    margin: 0 0;
    width: calc(90% / 3);
}
#container .sec3 .yajirushi {
    margin: 14px;
    height: 50px;
    width: 0%;
}
#container .sec3 .yajirushi::before {
    width: 15px;
    height: 15px;
    border-bottom: solid 3px #13b5b1;
    border-right: solid 3px #13b5b1;
    border-left: none;
    left: -8px;
    top: 36px;
}
#container .sec3 .box2 dl {
    width: calc(100% / 3);
}
#container .sec3 .box2 dt img {
    width: 90%;
}
#container .sec4 .po3img img {
    width: 80%;
}
#container .sec4 .title p {
    font-size: 1.5rem;
    margin: 0 0;
}
#container .sec4 .title .color {
    font-size: 2rem;
    margin: 15px 0;
}
#container .sec4 .box .title {
    background-position: bottom 0px left 70px, 
                         bottom 0px right 70px;
    background-size: 5%, 5%;
}
#container .sec4 .box div:nth-of-type(2) dl {
    display: flex;
}
#container .sec4 dt img {
    width: 80%;
}
#container .sec4 dl {
    margin: 0px 0px 20px;
    padding: 0 20px;
}
#container .sec6 .flex {
    padding-bottom: 160px;
}
#container .sec6 .flex p {
    padding: 20px;
}
#container .sec5 .flex p {
    padding: 10px;
}
#container .sec7 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/lineup-back.jpg)no-repeat top 0px left 0px;
    background-size: 100%;
    background-color: #fff;
    margin: 0;
    padding: 20px 40px;
}
#container .sec7 h3 {
    font-size: 2rem;
}
#container .sec7 .flex dl {
    padding: 20px 10px;
    width: calc(100% / 3);
}
#container .sec7 dl dd:nth-of-type(1) {
    height: 60px;
}
#container .sec7 dd .name {
    font-size: 1rem;
    margin: 10px 0;
}
#container .sec7 .price {
    font-size: 1.5rem;
}
#container .sec7 .price .big {
    font-size: 2.0rem;
}
#container .sec7 .buy-btn {
    font-size: 1.2rem;
}
}

 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
#container {
    margin: 0 auto;
    width: 960px;
}
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/FV-pc.jpg)no-repeat;
    background-size: 100%;
    padding: 50px 40px;
    height: 510px;
}
#container .mainvisual .icon {
    display: block;
    margin: 5px auto 130px;
    padding: 0px 80px;
    width: 100%;
}
#container .mainvisual .icon ul {
    display: block;
    text-align: right;
}
#container .mainvisual .icon ul li {
    margin: -15px;
}
#container .mainvisual .icon ul li img {
    display: inline-block;
    width: 90%;
}
#container .mainvisual .subtitle,
#container .mainvisual .headtitle,
#container .mainvisual .price {
    display: block;
    text-align: center;
}
#container .mainvisual .maintitle {
    display: inline-block;
    float: right;
}
#container .mainvisual .subtitle {
    font-size: 2.0rem;
}
#container .mainvisual .headtitle {
    font-size: 3.2rem;
}
#container .mainvisual .price {
    font-size: 1.8rem;
}
#container .mainvisual .price .big {
    font-size: 2.8rem;
}
#container .mainvisual .price .small {
    font-size: 1.2rem;
}
#container .des {
    font-size: 1rem;
}
#container .buy-btn {
    font: normal 1.3rem/2.8 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/sec1back-pc.png)no-repeat;
    background-size: 100%;
    background-color: #fff;
    margin: 20px 0;
    padding: 50px 40px 70px;
}
#container .sec1 h2 img {
    width: 55%;
}
#container .sec1 .des {
    margin: 20px 0;
    padding: 40px 30px;
    width: 55%;
}
#container .sec2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/line01.jpg)no-repeat top 0px left 0px;
    background-size: 100%;
    padding: 40px 100px;
}
#container .sec2 .top p {
    font-size: 1.5rem;
    margin: 0;
}
#container .sec2 .top h2 {
    font-size: 2.2rem;
    margin: 0;
}
#container .sec3, #container .sec4, #container .sec5, #container .sec6 {
    padding: 40px 100px;
}
#container .point {
    display: block;
    width: 10%;
    margin: 140px auto 20px;
}
#container .sec2 .point {
    margin-top: 40px;
}
#container .subtitle {
    font-size: 1.8rem;
}
#container .title {
    font-size: 2.8rem;
}
#container .sec4 .title {
    padding: 0 30px;
}
#container .sec2 .po1box, #container .sec3 .box2 {
    padding: 30px;
}
#container .sec2 .flex {
    padding: 20px 40px 50px;
    justify-content: center;
}
#container .sec2 .flex dt, #container .sec2 .flex-up dt {
    margin-right: 30px;
    padding: 10px;
}
#container .sec2 h4, #container .sec3 h4 {
    font-size: 1.8rem;
    margin-top: 0px;
}
#container .sec2 .flex-up dl {
    flex-wrap: wrap;
}
#container .sec2 .flex-up dt {
    width: 40%;
}
#container .sec2 .flex-up dt img {
    width: 100%;
}
#container .sec2 .flex-up dd {
    width: 50%;
}
#container .sec2 .flex-up dd img {
    margin: 10px 0;
}
#container .sec2 .flex ul {
    display: contents;
}
#container .sec2 .flex ul li {
    width: calc(100% / 4);
}
#container .sec2 .box02 .flex ul {
    margin: 0 auto;
}
#container .sec3 .box1 {
    margin: 30px 10px;
}
#container .sec3 .box1 .flex {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
#container .sec3 .box1 .flex dl {
    margin: 0 0;
    width: calc(94% / 3);
}
#container .sec3 .box1 .flex .des {
    padding: 0 30px 0 10px;
}
#container .sec3 .yajirushi {
    margin: 10px;
    height: 50px;
    width: 0%;
}
#container .sec3 .yajirushi::before {
    width: 17px;
    height: 17px;
    border-bottom: solid 3px #13b5b1;
    border-right: solid 3px #13b5b1;
    border-left: none;
    left: -10px;
    top: 55px;
}
#container .sec3 .box2 dl {
    width: calc(100% / 3);
}
#container .sec3 .box2 dt img {
    width: 90%;
}
#container .sec4 .po3img {
    margin-top: 40px;
}
#container .sec4 .po3img img {
    width: 80%;
}
#container .sec4 .title p {
    font-size: 1.8rem;
    margin: 0 0;
}
#container .sec4 .title .color {
    font-size: 2.5rem;
    margin: 20px 0;
}
#container .sec4 .box .title {
    background-position: bottom 0px left 70px, 
                         bottom 0px right 70px;
    background-size: 5%, 5%;
}
#container .sec4 .box div:nth-of-type(2) dl {
    display: flex;
}
#container .sec4 dt img {
    width: 80%;
}
#container .sec4 dl {
    margin: 0px 0px 20px;
    padding: 0 80px;
}
#container .sec6 .flex {
    padding-bottom: 160px;
}
#container .sec6 .flex p {
    padding: 20px;
}
#container .sec7 {
    background: url(/contents/shop/sevenbeauty/img/freepage/marseille-soap/lineup-back.jpg)no-repeat top 0px left 0px;
    background-size: 100%;
    background-color: #fff;
    margin: 0;
    padding: 30px 60px;
}
#container .sec7 h3 {
    font-size: 2.5rem;
}
#container .sec7 .flex dl {
    padding: 30px 20px;
    width: calc(100% / 3);
}
#container .sec7 dd .name {
    font-size: 1.0rem;
    margin: 10px 0;
}
#container .sec7 dl dd:nth-of-type(1) {
    height: 50px;
    margin: 10px 0;
}
#container .sec7 .price {
    font-size: 1.5rem;
}
#container .sec7 .price .big {
    font-size: 2.0rem;
}
#container .sec7 .buy-btn {
    font-size: 1.2rem;
}
}

/*-------------------
   footer
-------------------*/
#container .page-top {
	display: block;
	margin: 30px auto;
	text-align: center;
}