@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;
	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;
}
/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
/*  全体指定 スマホ縦 i5 i5SE　350pxまで  */

#container .buy-btn {
    background: #a3ee7a;
    border: solid 2px #a3ee7a;
    border-radius: 10px;
    color: #000;
    display: block;
    font: bold 0.9rem/2.6 "メイリオ", "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 {
	text-decoration: none;
    opacity: 0.5;
}
#container .buy-btn a {
	color: #000;
	display: block;
    font-weight: bold;
    text-decoration: none;
}
#container .buy-btn a:hover {
    transition: none;
	opacity: 1;
}
/*--ボタン-やじるし--*/
#container .buy-btn a::after {
    content: '';
    width: 0;
    height: 0;
    border: solid 6px transparent;
    border-left: solid 8px #000;
    position: relative;
    display: inline-block;
    top: 0;
    right: -6px;
}
#container .buy-btn a:hover::after {
    content: '';
    text-decoration: none;
    opacity: 1;
}
/*--ボタン-販売終了--*/
#container .no-item {
    background: #fff;
    border: solid 2px #6a7066;
    color: #6a7066;
}
#container .no-item:hover {
    opacity: 1;
}
/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 0 auto;
	padding: 0 0;
}
#container p {
    margin: 0;
}
/*----------
 mainvisual
----------*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/fv-sp.jpg) top 0px left 0px no-repeat;
    background-size: 100%;
    background-color: #fff;
    padding: 30px 10px;
    position: relative;
    height: 560px;
}
#container .toptitle-box {
	color: #263f59;
    font-family: "Hannari", serif;
    text-align: left;
    margin: 0;
    padding: 0;
}
#container p.subtitle1 {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 5px;
}
#container p.subtitle2 {
    background-color: #263f59;
    color: #fff;
    display: inline;
    font-size: 1.2rem;
    line-height: 1.7;
    padding: 3px 0;
}
#container p.subtitle2 .big {
    font-size: 1.5rem;
    padding-right: 5px;
}
#container h1 {
    font-size: 2.0rem;
    font-weight: bold;
    margin: 10px 0;
}
#container .item-img {
    top: 220px;
    left: -15px;
    position: absolute;
    width: 80%;
}
#container .item-sp {
    display: block;
}
#container .item-pc {
    display: none;
}
/*--- sec1 ---*/
#container .title-box {
    border-bottom: solid 1px #2ca9ca;
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
}
#container .title-box:before {
    border: solid 12px transparent;
    border-top: solid 12px #2ca9ca;
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#container .title-box:after {
    border: solid 18px transparent;
    border-top: solid 18px #fff;
    margin-top: -5px;
    content: "";
    position: absolute;
    top: 100%;
    left: 49%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#container .sec2 .title-box:after {
    border-top: solid 18px #e8eff1;
}
#container h2 {
    color: #000;
    font: bold 1.4rem/1.1 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
    text-align: center;
    margin-bottom: 5px;
    padding: 0;
}
#container h2 .big {
    font-size: 1.8rem;
    font-weight: bold;
}
#container .item-box {
    color: #000;
    font: 1.2rem/1.5 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
	text-align: center;
}
#container .item-box .box {
    margin: 10px 0 30px;
}
#container .catch {
    color: #fff;
    margin-bottom: 5px;
    padding: 3px 0;
}
#container .pink {
    background-color: rgba(244, 122, 165, 0.7);
}
#container .blue {
    background-color: rgba(0, 51, 154, 0.7);
}
#container .green {
    background-color: rgba(39, 153, 1, 0.7);
}
#container .red {
    background-color: rgba(205, 0, 0, 0.7);
}
#container .orange {
    background-color: rgba(243, 154, 0, 0.7);
}
#container h3 {
    font-size: 1.1rem;
    letter-spacing: -0.01rem;
    margin-bottom: 10px;
}
#container h3 .small {
    font-size: 0.9rem;
}
#container .item-box dl {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
#container .item-box dt,#container .item-box dd {
    width: calc(100% / 2);
}
#container .item-box dd {
    text-align: left;
    padding: 15px 0 0;
}
#container .item-box dd .postage {
    font-size: 1.2rem;
}
#container .item-box dd .price {
    font-size: 1.3rem;
}
#container .item-box dd .small {
    font-size: 0.9rem;
}
#container .item-box dd .quantity {
    font-size: 1.0rem;
}
#container .item-box dd li {
    margin-bottom: 5px;
}
#container .buy-btn {
    margin-bottom: 8px;
}
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-mizu1.jpg) bottom -40px left -10px no-repeat;
    background-size: 150%;
    margin-top: -100px;
    padding: 5px 10px 20px;
    position: relative;
}
#container .box5 img {
    mix-blend-mode: darken;
}
/*--- sec2 ---*/
#container .contents {
    padding: 25px 10px 40px;
}
#container .sec2 .con1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-model.jpg) top 0px left -300px no-repeat;
    background-size: 180%;
    background-color: #e8eff1;
    position: relative;
    padding-left: 85px;
}
#container .des {
    color: #666;
    font: 0.9rem/1.5 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 0 0 20px;
    padding: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}
#container .fff-box {
    background-color: #fff;
    box-shadow: 5px 10px 10px 0px rgb(0 0 25 / 30%);
    margin: 0;
    padding: 20px 10px;
    position: relative;
}
#container .sec2 .fff-box {
    margin: -50px 0 0;
}
#container .sec2 .co2 .img {
    text-align: center;
}
#container .come {
    font-size: 0.7rem;
}
#container .item-box dd li.come {
    color: #666;
}
#container .sec2 .con3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-liquid.jpg) bottom 10px right -130px no-repeat;
    background-size: 110%;
    position: relative;
}
#container .sec2 .con3 .icon {
    top: -20px;
    left: 5px;
    position: absolute;
    width: 20%;
}
/*--- sec3 ---*/
#container .sec3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-mizu2.jpg) top 50px left 50% repeat-y;
    background-size: 140%;
    background-color: #fff;
    padding: 0 10px 40px;
    position: relative;
}
#container .triangle {
    background: linear-gradient(to bottom left, #2ca9ca 50%, transparent 50%) top left/ 50% 100% no-repeat, linear-gradient(to bottom right, #2ca9ca 50%, transparent 50%) top right / 50% 100% no-repeat;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    margin: 0 auto 10px;
    padding: 10px 0;
    position: relative;
    width: 100%;
    height: 45px;
}
#container .sec3 h2 {
    color: #177a94;
    margin: 20px 0 40px;
}
#container .sec3 .icon {
    top: -30px;
    left: 30%;
    position: absolute;
    width: 40%;
}
#container .point-box {
    margin-bottom: 30px;
}
#container .point-title {
    background-color: #2ca9ca;
    color: #fff;
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
    margin-bottom: 20px;
}
#container .point-title h3 {
    font-size: 1.4rem;
    line-height: 1.3;
    padding: 3px 0 3px 60px;
}
#container .po1 .point-title h3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/point1.png) top 50% left 5px no-repeat;
    background-size: 20%;
    margin-top: 30px;
}
#container .po2 .point-title h3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/point2.png) top 50% left 5px no-repeat;
    background-size: 20%;
}
#container .po3 .point-title h3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/point3.png) top 50% left 5px no-repeat;
    background-size: 20%;
}
#container .po1 .text-box {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/ten-left.jpg),
                url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/ten-right.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom 0px left 0px,
                         bottom 0px right 0px;
    background-size: 10%, 10%;
    color: #2ca9ca;
    font: 1.0rem/1.3 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
}
#container .po1 .img {
    text-align: center;
}
#container .po2 .img-box {
    color: #666;
    font: 0.9rem/1.3 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    text-align: center;
    margin: 0 0 20px;
    padding: 0;
}
#container .po2 .img-box .text1 {
    background-color: #fff;
    border: solid 1px #87a7af;
    color: #87a7af;
    font-size: 1.1rem;
    margin-bottom: 5px;
    padding: 3px;
}
#container .po2 .img-box .text2 {
    background-color: #2ca9ca;
    border: solid 1px #2ca9ca;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5px;
    padding: 3px;
}
#container .po2 .img-box .des {
    text-align: center;
}
#container .po3 .needle-box ul {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
#container .needle-box li {
    margin: 5px;
    width: calc(100% / 4);
}
#container .needle-box li.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #2ca9ca;
    margin: 10% 1%;
}
/*--- sec4 ---*/
#container .sec4 {
    margin-bottom: 70px;
}
#container .sec4 .width {
    margin-bottom: -30px;
    padding: 25px 10px 0;
    position: relative;
}
#container .slanting .width {
    margin-bottom: -50px;
    padding: 50px 20px;
}
#container .slanting {
    -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}
#container .slanting.sla1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla1.jpg) top 200px left 40px no-repeat;
    background-size: 120%;
    background-color: #263f59;
    color: #fff;
}
#container .slanting.sla2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla2.jpg) top 200px left 40px no-repeat;
    background-size: 120%;
    background-color: #fff;
    color: #000;
}
#container .slanting.sla3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla3.jpg) top 230px left 40px no-repeat;
    background-size: 120%;
    background-color: #263f59;
    color: #fff;
}
#container .slanting.sla4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla4.jpg) top 180px left 40px no-repeat;
    background-size: 120%;
    background-color: #fff;
    color: #000;
}
#container .slanting.sla5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla5.jpg) top 210px left 40px no-repeat;
    background-size: 120%;
    background-color: #263f59;
    color: #fff;
}
#container .sec4 h3 {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 3px 0;
}
#container .sec4 .slanting.sla1 .des,
#container .sec4 .slanting.sla3 .des,
#container .sec4 .slanting.sla5 .des {
    color: #fff;
}
#container .sec4 .slanting.sla2 .des,
#container .sec4 .slanting.sla4 .des {
    color: #000;
}
#container .sec4 .box {
    text-align: center;
    margin-bottom: 10px;
}
#container .sec4 .name-box {
    font: 1.0rem/1.3 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin-bottom: 5px;
}
#container .sec4 .name-box .small {
    font-size: 0.9rem;
}
/*--- sec5 ---*/
#container .howto-box {
    padding: 0 10px 30px;
}
#container .sec5 .howto1 .title-box {
    border-bottom: solid 1px #eb6877;
}
#container .sec5 .howto1 .title-box:before {
    border: solid 12px transparent;
    border-top: solid 12px #eb6877;
    content: "";
}
#container .sec5 .howto1 .title-box h2 {
    color: #eb6877;
}
#container .sec5 .howto2 .title-box {
    border-bottom: solid 1px #f39800;
}
#container .sec5 .howto2 .title-box:before {
    border: solid 12px transparent;
    border-top: solid 12px #f39800;
    content: "";
}
#container .sec5 .howto2 .title-box h2 {
    color: #f39800;
}
#container .step-box li.step {
    color: #666;
    font: 0.9rem/1.3 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 0 0 20px;
    padding-left: 60px;
    text-align: justify;
    text-justify: inter-ideograph;
}
/*-- point-icon howto1 --*/
#container .howto1 .step-box li.st1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec3no1.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto1 .step-box li.st2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec3no2.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto1 .step-box li.st3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec3no3.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto1 .step-box li.st4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec3no4.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
/*-- point-icon howto2 --*/
#container .howto2 .step-box li.st1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec4no1.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto2 .step-box li.st2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec4no2.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto2 .step-box li.st3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec4no3.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .howto2 .step-box li.st4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/sec4no4.png) top 0px left 0px no-repeat;
    background-size: 18%;
}
#container .step dt {
    margin-bottom: 5px;
}
#container .howto-att {
    color: #666;
    font: 0.9rem/1.3 "メイリオ", "Meiryo",'Helvetica Neue','Helvetica','Arial',sans-serif;
    margin: 0;
    padding: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}
/*-----movie-box-----*/
#container .movie-box {
    margin: 20px auto;
}
#container .movie-box p {
    color: #2ca9ca;
    font: 1.0rem/1.3 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    margin: 0;
}
#container .movie-box p.text1 {
    font-size: 1.3rem;
}
#container .movie {
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 30px;
}
#container .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*--------
 campaign
--------*/
#container .cam-box {
    margin: 5px 0 20px;
    padding: 0 20px;
}
#container .cam-box .cam-sp-img {
    display: inline-block;
    margin: 0 0 5px;
    width: 100%;
}
#container .cam-box .cam-pc-img {
    display: none;
}
#container .cam-box img {
    width: 100%;
}
#container .cam-box .cam-text {
    color: #aa0000;
    font: 1.1rem/1.2 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    margin-bottom: 10px;
}
#container .cam-box .cam-text.come {
    font-size: 0.9rem;
}
@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
#container .mainvisual {
    height: 650px;
}
#container p.subtitle1 {
    font-size: 1.6rem;
}
#container p.subtitle2 {
    font-size: 1.3rem;
}
#container p.subtitle2 .big {
    font-size: 1.7rem;
}
#container h1 {
    font-size: 2.3rem;
}
#container .item-img {
    top: 240px;
}
#container .sec1 {
    margin-top: -140px;
}
#container .sec1 .br-sp {
    display: none;
}
#container .title-box {
    margin-bottom: 30px;
}
#container h2 {
    font-size: 1.5rem;
}
#container .item-box {
    font-size: 1.4rem;
}
#container h3 {
    font-size: 1.3rem;
}
#container h3 .small {
    font-size: 1.1rem;
}
#container .item-box dd .price {
    font-size: 1.7rem;
}
#container .contents {
    padding: 25px 20px 40px;
}
#container .sec2 .con1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-model.jpg) top -20px left -300px no-repeat;
    background-size: 160%;
    background-color: #e8eff1;
    position: relative;
    padding-left: 100px;
}
#container .sec2 .con3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-liquid.jpg) bottom 20px right -130px no-repeat;
    background-size: 100%;
}
#container .fff-box {
    padding: 20px 15px;
}
#container .sec3 h2 {
    font-size: 1.6rem;
    margin: 20px 0 50px;
}
#container .sec3 .icon {
    top: -50px;
    left: 27%;
    position: absolute;
    width: 45%;
}
#container .point-title h3 {
    font-size: 1.6rem;
    padding: 3px 0 3px 80px;
}
#container .po1 .text-box {
    background-size: 7%, 7%;
    font-size: 1.1rem;
}
#container .po2 .img-box .text1 {
    font-size: 1.2rem;
    padding: 5px;
}
#container .slanting .width {
    padding: 60px 20px;
}
#container .sec4 h3 {
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
}
#container .sec4 .name-box {
    font-size: 1.2rem;
}
#container .howto1 .step-box li,
#container .howto2 .step-box li {
    background-size: 15%!important;
}
#container .howto2 .step-box li.st4 {
    padding-bottom: 20px;
}
}
 @media screen and (min-width:480px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/fv-pc.jpg) top 0px left 50% no-repeat;
    background-size: 1200px;
    background-color: #fff;
    padding: 70px 50px;
    position: relative;
    height: 730px;
}
#container p.subtitle1 {
    font-size: 2.1rem;
}
#container p.subtitle2 {
    font-size: 1.6rem;
    padding: 5px 10px;
}
#container p.subtitle2 .big {
    font-size: 2.0rem;
}
#container h1 {
    font-size: 3.8rem;
}
#container .item-img {
    top: 250px;
    width: 70%;
}
#container .br-sp {
    display: none;
}
#container .item-sp {
    display: none;
}
#container .item-pc {
    display: block;
}
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-mizu1.jpg) bottom -110px left -10px no-repeat;
    background-size: 100%;
    margin-top: -180px;
    padding: 10px 30px 20px;
    position: relative;
}
#container h2 {
    font-size: 2.6rem;
}
#container h2 .big {
    font-size: 3rem;
}
#container .item-box {
    display: flex;
    flex-wrap: wrap;
}
#container .item-box .box {
    padding: 0 10px;
    width: calc(100% / 2);
}
#container .catch {
    font-size: 1.4rem;
}
#container h3 {
    font-size: 1.2rem;
}
#container .item-box dd .price {
    font-size: 1.5rem;
}
#container .title-box:after {
    border: solid 20px transparent;
    border-top: solid 20px #fff;
}
#container .sec2 .title-box:after {
    border-top: solid 20px #e8eff1;
}
#container .contents {
    padding: 30px 50px 40px;
}
#container .des {
    font-size: 1rem;
}
#container .sec2 .con1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-model.jpg) top -50px left -260px no-repeat;
    background-size: 90%;
    background-color: #e8eff1;
    position: relative;
    padding: 40px 80px 110px 240px;
}
#container .fff-box {
    padding: 50px 30px;
}
#container .sec2 .fff-box {
    margin: -90px 0 0;
}
#container .sec2 .con3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-liquid.jpg) bottom 10px right -100px no-repeat;
    background-size: 55%;
}
#container .sec2 .con3 .icon {
    top: -50px;
    left: 20px;
    position: absolute;
    width: 20%;
}
#container .sec3 {
    background-size: 120%;
    padding: 0 50px 40px;
}
#container .triangle {
    font-size: 1.8rem;
    height: 55px;
}
#container .sec3 h2 {
    margin: 30px 0 120px;
}
#container .sec3 .icon {
    top: -100px;
}
#container .point-title h3 {
    font-size: 2rem;
    padding: 15px 0 13px 100px;
}
#container .po1 .point-title h3,
#container .po2 .point-title h3,
#container .po3 .point-title h3 {
    background-size: 15%;
}
#container .po1 .text-box {
    background-size: 4%, 4%;
    font-size: 1.3rem;
    margin: 0 auto 10px;
    width: 95%;
}
#container .po2 .img-box {
    display: flex;
}
#container .po2 .img-box dl {
    padding: 5px;
}
#container .po2 .img-box .text1,
#container .po2 .img-box .text2 {
    font-size: 1.2rem;
    padding: 5px;
}
#container .sec4 {
    margin-bottom: 100px;
}
#container .flex-box {
    display: flex;
    flex-direction: row-reverse;
}
#container .flex-box .box {
    align-self: flex-end;
    padding: 10px;
    width: calc(100% / 2);
}
#container .sec4 .width {
    margin-bottom: -20px;
    padding: 25px 30px 0;
}
#container .slanting .width {
    margin-bottom: -80px;
    padding: 80px 40px 50px;
}
#container .slanting {
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
#container .slanting.sla1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla1.jpg) top -130px left 140px no-repeat;
    background-size: 100%;
    background-color: #263f59;
}
#container .slanting.sla2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla2.jpg) top -130px left 140px no-repeat;
    background-size: 100%;
    background-color: #fff;
}
#container .slanting.sla3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla3.jpg) top -130px left 140px no-repeat;
    background-size: 100%;
    background-color: #263f59;
}
#container .slanting.sla4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla4.jpg) top -130px left 140px no-repeat;
    background-size: 100%;
    background-color: #fff;
}
#container .slanting.sla5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla5.jpg) top -130px left 140px no-repeat;
    background-size: 100%;
    background-color: #263f59;
}
#container .sec4 .box {
    text-align: left;
}
#container .sec4 h3 {
    font-size: 1.4rem;
    padding: 5px 0;
}
#container .sec4 .name-box {
    display: flex;
}
#container .sec4 .name-box .box {
    align-self: center;
    padding: 10px;
    width: calc(100% / 2);
}
#container .sec4 .name-box h4 {
    font-size: 1.2rem;
}
#container .buy-btn {
    line-height: 3.2;
}
#container .howto-box {
    padding: 0 50px 40px;
}
#container .sec5 .title-box h2 {
    font-size: 1.8rem;
}
#container .howto1 .step-box li, #container .howto2 .step-box li {
    background-size: 10%!important;
}
#container .step-box li.step {
    font-size: 1.0rem;
    padding-left: 80px;
}
#container .step-box dl {
    display: flex;
}
#container .step-box dt,#container .step-box dd {
    width: calc(100% / 2);
}
#container .step dt {
    margin-right: 10px;
}
#container .howto1 .step-box li.st3 {
	margin-bottom: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#container .howto1 .step-box li.st4,
#container .howto2 .step-box li.st2,
#container .howto2 .step-box li.st3,
#container .howto2 .step-box li.st4 {
	margin-bottom: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#container .sec5 .title-box {
    margin-bottom: 40px;
}
/*---movie-box---*/
#container .movie-box {
    margin: 30px auto 0;
}
#container .movie-box p.text1 {
    font-size: 1.8rem;
}
#container .movie-box p.text2 {
    font-size: 1.3rem;
}
#container .movie {
    height: 360px;
}
/*--------
 campaign
--------*/
#container .cam-box {
    margin: 20px 0;
    padding: 0;
}
#container .cam-box .cam-sp-img {
    display: none;
}
#container .cam-box .cam-pc-img {
    display: inline-block;
    text-align: center;
    margin: 0 0 10px;
    width: 100%;
}
#container .cam-box .cam-text {
    font-size: 1.3rem;
}
}
 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
#container .width {
    margin: 0 auto;
    width: 1040px;
    position: relative;
}
#container .mainvisual {
    background-size: contain;
    padding: 50px 0;
}
#container .toptitle-box {
    margin-left: 12%;
}
#container p.subtitle1 {
    font-size: 2.4rem;
}
#container p.subtitle2 {
    font-size: 1.8rem;
    padding: 8px 15px;
}
#container p.subtitle2 .big {
    font-size: 2.4rem;
}
#container h1 {
    font-size: 4.0rem;
}
#container .item-box dd {
    padding: 5px 0 0;
}
#container .item-img {
    top: 200px;
    left: 10%;
    width: 50%;
}
#container .title-box {
    margin-bottom: 40px;
}
#container .title-box:after {
    margin-top: 0px;
}
#container .sec2 .title-box:after {
    margin-top: -3px;
}
#container .item-box .box {
    padding: 0 20px;
    width: calc(100% / 3);
}
#container .catch {
    font-size: 1.2rem;
}
#container .item-box dd .price {
    font-size: 1.4rem;
}
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-mizu1.jpg) bottom -140px left 110px no-repeat;
    background-size: 640px;
    margin-top: -140px;
    transform: scale(-1, 1);
}
#container .sec1 .width {
    transform: scale(-1, 1);
}
#container .item-box {
    font-size: 1rem;
}
#container .sec2 .con1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-model.jpg) top -50px left -20px no-repeat;
    background-size: 700px;
    background-color: #e8eff1;
    padding: 40px 80px 70px 240px;
}
#container .sec2 .con1 .width {
    padding: 10px 80px 40px 170px;
    width: 860px;
}
#container h2 {
    margin-bottom: 10px;
}
#container .fff-box {
    padding: 50px 90px;
}
#container .contents .img {
    text-align: center;
}
#container .sec2 .con3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-liquid.jpg) bottom 10px right 100px no-repeat;
    background-size: 30%;
}
#container .sec2 .con3 .width {
    padding: 30px 90px 100px;
}
#container .sec3 {
    background-size: 1500px;
}
#container .triangle {
    padding: 20px 0;
    height: 70px;
}
#container .po1 .point-title h3 {
    margin-top: 100px;
}
#container .po1 .point-title h3, #container .po2 .point-title h3, #container .po3 .point-title h3 {
    background-size: 12%;
}
#container .point-title h3 {
    font-size: 2.3rem;
    padding: 15px 0 13px 120px;
}
#container .po1 .text-box {
    width: 70%;
}
#container .needle-box li {
    width: calc(100% / 7);
}
#container .needle-box li.arrow {
    border-width: 15px 0 15px 20px;
    margin: 8% 1%;
}
#container .slanting.sla1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla1.jpg) top -30px left 100px no-repeat;
    background-size: 650px;
    background-color: #263f59;
}
#container .slanting.sla2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla2.jpg) top -30px left 100px no-repeat;background-size: 650px;
    background-color: #fff;
}
#container .slanting.sla3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla3.jpg) top -30px left 100px no-repeat;background-size: 650px;
    background-color: #263f59;
}
#container .slanting.sla4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla4.jpg) top -30px left 100px no-repeat;background-size: 650px;
    background-color: #fff;
}
#container .slanting.sla5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/micro-needle/new/back-sla5.jpg) top -30px left 100px no-repeat;background-size: 650px;
    background-color: #263f59;
}
#container .slanting .width {
    margin-bottom: -85px;
    padding: 80px 80px 40px;
}
#container .sec4 h3 {
    font-size: 1.8rem;
}
#container .sec4 .name-box h4 {
    font-size: 1.5rem;
}
#container .sec4 .name-box .box {
    padding: 0 10px 20px;
}
#container .howto-box {
    padding: 0 90px 50px;
}
#container .step-box li.step {
    padding-left: 70px;
}
#container .howto1 .step-box li, #container .howto2 .step-box li {
    background-size: 6%!important;
}
#container .howto1 .step-box li.st4, #container .howto2 .step-box li.st2, #container .howto2 .step-box li.st3 {
    margin-bottom: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#container .howto2 .step-box li.st4 {
    margin-bottom: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*---movie-box---*/
#container .movie-box {
    margin: 30px auto;
}
#container .movie-box p.text1 {
    font-size: 1.8rem;
}
#container .movie-box p.text2 {
    font-size: 1.3rem;
}
#container .movie {
    margin: 0 auto 50px;
    height: 420px;
    width: 70%;
}
/*--------
 campaign
--------*/
#container .cam-box {
    margin: 20px auto;
    padding: 0;
    width: 1040px;
}
#container .cam-box img {
    width: 80%;
}
}
/*----scroll----*/
.scroll {
    opacity: 0;
    transition: all 1.5s ease;
}
.scroll.fadein {
    opacity: 1;
    transform: none;
    animation: 0.8s fadeIn;
}
.s-top { /*上からふわっと*/
    transform: translate(0, -20px);
}
.s-bottom { /*下からふわっと*/
    transform: translate(0, 20px);
}
.s-right { /*右からふわっと*/
    transform: translate(50px, 0);
}
.s-left { /*左からふわっと*/
    transform: translate(-50px, 0);
}