/*---------------------------------
全体
---------------------------------*/
#beautyopener {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif !important;
}
#beautyopener .text ,.text2 ,.text3 ,.kome ,.kome2 ,.kome3,.kome5,.voice_kome , .specification p {
font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","YuGothic Medium","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
}
#beautyopener font {
color: #555555;
}
#beautyopener * {
box-sizing: border-box !important;
}
#beautyopener button {
cursor: pointer;
width: 100%;
color: #fff;
padding: 10px;
}
#beautyopener section {
overflow: hidden;
}
.fade_bo {
opacity: 0;
transition: opacity 3s;
transform: translateY(40px);
}
.fade_bo.view {
opacity: 1;
}
#beautyopener .box_youtube {
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
bottom: 31%;
padding-bottom: 10%;
}
#beautyopener .youtube1 {
position: relative;
padding: 28%;
}
#beautyopener .youtube1 iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
#beautyopener .cv_btn {
color: #fff;
background-color: #c4aa62;
}
#beautyopener .cv_btn:hover {
color: #fff;
background: #e6cf90;
}
#beautyopener .cv_btn.btn--radius {
border-radius: 5px;
}
#beautyopener .cv_btn_t {
color: #fff;
background-color: #93741e;
}
#beautyopener .cv_btn_t:hover {
color: #fff;
background: #af8f36;
}
#beautyopener .cv_btn_t.btn--radius {
border-radius: 5px;
}
#beautyopener .specification p {
padding: 4%;
font-size: 12px;
}
#beautyopener section.contents {
background-color: #fcf9f2;
padding: 2.5% 5%;
font-family: 'Noto Sans Japanese';
position: relative;
}
/*========= ページネーションCSS ===============*/
.box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
#beautyopener .nayami_1 {
position: absolute;
top: 6%;
left: 41%;
width: 39%;
}
#beautyopener .nayami_2 {
position: absolute;
top: 22%;
left: 60%;
width: 39%;
}
#beautyopener .nayami_kome {
position: absolute;
bottom: 1%;
width: 90%;
font-size: 10px;
text-align: left;
}
#beautyopener .reason {
margin-bottom: 5%;
}
#beautyopener .reason h2 {
margin: 15% 0 5%;
}
#beautyopener .reason h3 {
font-size: 18px;
text-align: center;
margin-bottom: 12%;
}
#beautyopener .reason h4 {
position: absolute;
top: 18%;
font-size: 20px;
line-height: 1.3;
}
#beautyopener #box3 h4 {
position: absolute;
top: 15%;
font-size: 20px;
line-height: 1.3;
}
#beautyopener .reason .text {
position: absolute;
top: 83%;
margin: 4%;
text-align: left;
line-height: 1.6;
}
#beautyopener .reason .text2 {
position: absolute;
top: 49%;
margin: 4%;
text-align: left;
line-height: 1.6;
}
#beautyopener .reason .text3 {
position: absolute;
top: 70%;
margin: 4%;
text-align: left;
line-height: 1.6;
}
#beautyopener #box6 .text {
top: 307px;
margin: 0 4%;
}
#beautyopener #box7 .text {
top: 8px;
margin: 0 4%;
}
#beautyopener #box6 .textB {
top: 320px;
font-weight: bold;
}
#beautyopener #box7 .textB {
top: 320px;
font-weight: bold;
}
#beautyopener .reason .textB {
top: 28%;
margin: 0 0 10%;
text-align: left;
line-height: 1.3;
font-weight: bold;
}
#beautyopener .reason .kome {
position: absolute;
top: 101%;
left: 19%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 10px;
}
#beautyopener .reason .kome2 {
position: absolute;
top: 75%;
left: 19%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 10px;
}
#beautyopener .reason .kome3 {
position: absolute;
top: 95%;
left: 17%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 10px;
}
#beautyopener .reason .kome5 {
position: absolute;
top: 170px;
left: 2%;
margin: 4%;
text-align: left;
line-height: 1.3;
font-size: 12px;
}
#beautyopener #box7 .kome {
top: 540px;
}
#beautyopener .reason .image_01 {
position: absolute;
top: 26%;
margin: 5% 15%;
}
#beautyopener .reason .image_02 {
position: absolute;
top: 25%;
margin: 0 15%;
}
#beautyopener .image_03 {
margin-bottom: 80px;
}
#beautyopener .rankakumaku_1 {
position: absolute;
top: 8%;
font-size: 28px;
}
#beautyopener .rankakumaku_2 {
position: absolute;
top: 12%;
width: 50%;
}
#beautyopener .rankakumaku_text {
position: absolute;
top: 68%;
margin: 0 8%;
text-align: left;
}
#beautyopener .voice_1 {
position: absolute;
top: 5%;
left: 5%;
width: 75%;
}
#beautyopener .voice_2 {
position: absolute;
top: 46%;
right: 5%;
width: 75%;
}
#beautyopener .voice_kome {
position: absolute;
top: 87%;
left: 18%;
text-align: left;
font-size: 10px;
line-height: 1.3;
}
#beautyopener #box2 h4 {
position: absolute;
top: 34%;
font-size: 20px;
}
#beautyopener #box6 h4 {
position: absolute;
top: 105px;
font-size: 20px;
}
#beautyopener #box7 h4 {
position: absolute;
top: 18%;
font-size: 20px;
}
#beautyopener p.point {
position: absolute;
top: 1%;
width: 100%;
}
section.point {
overflow: hidden;
}
#beautyopener .obi {
text-align: center;
font-size: 24px;
background-color: #2d2d2d;
padding: 15px;
margin-bottom: 8%;
color: #fff;
line-height: 1;
}
/* -----------------------------------------
SP
-----------------------------------------*/
@media only screen and (max-width: 768px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
img {
max-width: 100%;
}
#beautyopener {
margin: 0 auto;
max-width: 768px;
color: #555555;
font-size: 14px;
}
#beautyopener img {
border: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
}
#beautyopener a {
color: #555555;
text-decoration: none;
}
#beautyopener br.br-pc {
display: none;
}
#beautyopener .mb80 {
margin-bottom: 80px;
}
#beautyopener .box_cv {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
#beautyopener #box1 {
height: auto;
padding-top: 150%;
}
#beautyopener #box2 {
height: auto;
padding-top: 79%;
}
#beautyopener #box3 {
height: auto;
padding-top: 170%;
}
#beautyopener #box4 {
height: auto;
padding-top: 70%;
}
#beautyopener #box6 {
height: auto;
padding-top: 170%;
}
#beautyopener #box6 {
height: 70vh;
height: auto;
padding-top: 65%;
}
#beautyopener #box7 {
height: 70vh;
height: auto;
padding-top: 73%;
}
#beautyopener h1.fv {
margin-bottom: 10%;
}
#beautyopener .fv_title_sp {
position: absolute;
top: 5%;
width: 70%;
}
#beautyopener .fv_pict1 {
position: absolute;
top: 50%;
left: 6%;
width: 30%;
}
#beautyopener .fv_pict2 {
position: absolute;
width: 30%;
right: 4%;
top: 40%;
}
#beautyopener .fv_pict3 {
position: absolute;
top: 25%;
right: 2%;
width: 42%;
}
#beautyopener .cv_title {
text-align: center;
padding: 10px;
font-size: 18px;
color: #fff;
background-color: #aaa;
margin: 0 8px;
}
#beautyopener .cv {
overflow: hidden;
margin: 50px 0;
text-align: center;
}
#beautyopener .cv2 {
overflow: hidden;
margin: 50px 0;
text-align: center;
}
#beautyopener .cv_text {
font-size: 22px;
text-align: center;
line-height: 1.3;
margin-bottom: 10px;
}
#beautyopener .cv_left {
margin: 10px;
}
#beautyopener .cv_left img {
width: 50%;
}
#beautyopener .cv2 .cv_left img {
width: 60%;
}
#beautyopener .cv_bg {
position: absolute;
top: 15%;
z-index: -1;
}
#beautyopener .obi {
font-size: 20px;
}
#beautyopener .point .text {
margin: 1% 4% 12%;
}
#beautyopener .section.reason {
margin-bottom: 5%;
}
#beautyopener .voice {
margin-bottom: 10%;
}
#beautyopener .howto {
padding: 5% 0 0;
font-size: 20px;
}
#beautyopener .howto1 {
padding: 5% 0;
background-color: #f8ecca;
}
#beautyopener .howto1 p {
padding: 5% 0;
text-align: center;
font-size: 20px;
background-color: #f8ecca;
}
#beautyopener .bo_image {
margin: 20% 0;
}
#beautyopener .item_name {
margin: 5% 4% 0;
font-size: 18px;
}
#beautyopener .item_name a {
font-size: 18px;
font-weight: bold;
line-height: 1.6;
letter-spacing: -0.05em
}
#beautyopener .item_kakaku {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
#beautyopener .item_kakaku2 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
#beautyopener p.price_down {
font-size: 14px;
color: #C90027;
margin-left: 4%;
margin-bottom: 10px;
}
#beautyopener p.price_down span {
font-size: 24px;
color: #C90027;
}
#beautyopener p.price_off {
font-size: 14px;
text-decoration: line-through;
margin-left: 4%;
margin-bottom: 0;
}
#beautyopener p.price_off span {
font-size: 18px;
}
#beautyopener p.item-price span {
font-size: 24px;
}
#beautyopener .cv_btn, .cv_btn_t {
margin: 0 16px;
}
.teiki ,.teiki_c {
background: url(https://ozio.jp/excludes/ozio/item/beautyopener/img/230118/teiki_20.gif) no-repeat center center;
background-size: cover;
}
#beautyopener .contents_bnr {
margin: 5% 5% 20%;
}
#beautyopener .contents_bnr p {
margin: 5% 0;
}
section.specification {
margin-bottom: 10%;
}
#beautyopener section h2 {
display: block;
font-size: 22px;
line-height: 1.3;
color: #7d5200;
text-align: center;
margin: 30px 0;
}
#beautyopener section .txt_01 {
line-height: 1.6;
}
#beautyopener section h3.h3 {
font-size: 16px;
text-align: left;
margin: 20px 0 5px;
color: #7d5200;
background-color: #fff;
}
#beautyopener section h4.h4 {
font-size: 16px;
text-align: left;
margin-bottom: 10px;
}
#beautyopener section .kome {
font-size: 10px;
line-height: 1.3;
text-align: left;
margin: 8px 5px;
}
#beautyopener .sokkou {
position: absolute;
top: 155px;
left: 70%;
}
#beautyopener .sokkou img {
width: 70%;
}
#beautyopener .sinsou {
position: absolute;
top: 5px;
left: 70%;
}
#beautyopener .sinsou img {
width: 70%;
}
/* --- Bnr ------------*/
.Bnr {
position: relative;
margin: 0 auto;
width: 100%;
display: none;
z-index: 30;
}
.Bnr .banner {
position: fixed;
bottom: 0;
}
.Bnr .banner_inner a {
display: block;
}
.Bnr .banner p.close {
position: absolute;
right: 10px;
bottom: 10px;
}
.Bnr .banner p.close a {
display: block;
width: 20px;
height: 25px;
text-align: center;
}
.Bnr .banner p.close a span {
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
.Bnr .banner p.close a i {
font-size: 20px;
z-index: 888;
color: #222;
}
#beautyopener .reason #box6 .text {
position: absolute;
top: 170px;
margin: 4%;
text-align: left;
line-height: 1.3;
}
#beautyopener .reason #box7 .text {
position: absolute;
top: 21px;
margin: 4%;
text-align: left;
line-height: 1.3;
}
}
/* -----------------------------------------
PC
-----------------------------------------*/
@media only screen and (min-width: 768px) {
#beautyopener .br-sp {
display: none !important;
}
.pc {
display: block !important;
}
.sp {
display: none !important;
}
#beautyopener {
width: 1024px;
margin: 0 auto;
}
#beautyopener h1.fv {
margin-bottom: 10%;
}
#beautyopener .fv_title {
position: absolute;
top: 79px;
left: 73px;
width: 45%;
}
#beautyopener .fv_pict1 {
position: absolute;
top: 75px;
left: 800px;
width: 15%;
}
#beautyopener .fv_pict2 {
position: absolute;
top: 262px;
right: 30px;
width: 20%;
}
#beautyopener .fv_pict3 {
position: absolute;
top: 322px;
left: 135px;
width: 30%;
}
#beautyopener .cv_title {
text-align: center;
padding: 20px;
font-size: 28px;
color: #fff;
background-color: #aaa;
}
#beautyopener .cv {
overflow: hidden;
margin: 0px auto 100px;
width: 1024px;
padding: 60px 20px 0;
}
#beautyopener .cv .cv_left {
width: 460px;
float: left;
text-align: center;
}
#beautyopener .cv img {
width: 35%;
}
#beautyopener .cv2 {
overflow: hidden;
margin: 0px auto 100px;
width: 1024px;
padding: 60px 20px 0;
}
#beautyopener .cv2 .cv_left {
width: 460px;
float: left;
text-align: center;
}
#beautyopener .cv2 img {
width: 73%;
}
#beautyopener .cv_text {
font-size: 32px;
text-align: center;
line-height: 1.6;
}
#beautyopener .cv_btn, .cv_btn_t {
width: 420px;
margin: 0 auto;
}
.cv_left a .pc {
width: 100%;
}
#beautyopener .cv .cv_right {
width: 500px;
float: right;
}
#beautyopener .cv2 .cv_right {
width: 500px;
float: right;
}
#beautyopener .cv .teiki {
width: 500px;
float: right;
background: url(https://ozio.jp/excludes/ozio/item/beautyopener/img/230118/teiki_20_pc.gif) no-repeat;
}
#beautyopener .cv .teiki_c {
width: 500px;
float: right;
background: url(https://ozio.jp/excludes/ozio/item/beautyopener/img/230118/teiki_20_pc.gif) no-repeat;
}
.cv_right p img {
width: 100%;
}
#beautyopener .item_name {
margin: 120px 40px 40px;
text-align: center;
font-size: 28px;
}
#beautyopener .teiki .item_name {
margin: 20px;
}
#beautyopener .teiki_c .item_name {
margin: 20px;
}
#beautyopener .item_name a {
font-size: 28px;
line-height: 1.4em;
text-decoration: none;
}
#beautyopener .item_kakaku {
font-size: 32px;
line-height: 1.2em;
text-align: right;
width: 420px;
}
#beautyopener .item_kakaku2 {
font-size: 32px;
line-height: 1.2em;
text-align: right;
width: 420px;
}
#beautyopener p.price_down {
font-size: 18px;
color: #C90027;
margin-left: 95px;
margin-bottom: 10px;
}
#beautyopener p.price_down span {
font-size: 32px;
color: #C90027;
}
#beautyopener p.price_off {
font-size: 18px;
line-height: 2.3;
text-decoration: line-through;
margin-left: 95px;
margin-bottom: 0;
}
#beautyopener p.price_off span {
font-size: 18px;
}
#beautyopener p.item-price span {
font-size: 36px;
}
#beautyopener button {
color: #fff;
padding: 20px;
margin: 10px auto;
width: 420px;
font-size: 20px;
}
#beautyopener .container {
width: 768px;
margin: 0 auto;
}
#beautyopener #box1 {
height: 1200px;
}
#beautyopener #box2 {
height: 500px;
}
#beautyopener #box3 {
height: 1250px;
}
#beautyopener #box4 {
height: 1300px;
}
#beautyopener #box6 {
height: 1250px;
}
#beautyopener #box6 {
height: 600px;
}
#beautyopener #box7 {
height: 500px;
}
#beautyopener .reason h4 {
position: absolute;
top: 200px;
font-size: 40px;
line-height: 1.3;
}
#beautyopener .reason .text {
position: absolute;
top: 920px;
margin: 0 4%;
text-align: left;
font-size: 24px;
line-height: 1.6;
}
#beautyopener .reason .text2 {
position: absolute;
top: 310px;
margin: 0 4%;
text-align: left;
font-size: 24px;
line-height: 1.6;
}
#beautyopener .reason .text3 {
position: absolute;
top: 900px;
margin: 0 4%;
text-align: left;
font-size: 24px;
line-height: 1.6;
}
#beautyopener .reason #box6 .text {
position: absolute;
top: 307px;
margin: 0 4%;
text-align: left;
font-size: 24px;
line-height: 1.6;
}
#beautyopener .reason .textB {
top: 350px;
margin: 8% 0;
text-align: left;
font-size: 24px;
line-height: 1.3;
font-weight: bold;
}
#beautyopener .reason h3 {
text-align: center;
margin-bottom: 12%;
font-size: 40px;
line-height: 1.3;
}
#beautyopener .reason .kome {
position: absolute;
top: 1080px;
left: 41%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#beautyopener .reason .kome2 {
position: absolute;
top: 430px;
left: 41%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#beautyopener .reason .kome3 {
position: absolute;
top: 1140px;
left: 40%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#beautyopener .reason .kome5 {
position: absolute;
top: 280px;
left: 35%;
margin: 0 4%;
text-align: left;
font-size: 14px;
}
#beautyopener .reason .image_01 {
position: absolute;
top: 280px;
}
#beautyopener .reason .image_02 {
position: absolute;
top: 280px;
}
#beautyopener #box2 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#beautyopener #box3 h4 {
font-size: 40px;
}
#beautyopener #box6 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#beautyopener #box7 h4 {
position: absolute;
top: 200px;
font-size: 40px;
}
#beautyopener #box3 .kome {
position: absolute;
top: 18%;
font-size: 24px;
}
.reason .kome2 {
position: absolute;
top: 35%;
left: 26%;
margin: 4%;
text-align: left;
font-size: 20px;
}
.reason .kome3 {
position: absolute;
top: 44%;
left: 26%;
margin: 4%;
text-align: left;
font-size: 20px;
}
#beautyopener .reason .hadazu_2 {
position: absolute;
top: 45%;
}
#beautyopener .image_03 {
margin-bottom: 100px;
}
#beautyopener .rankakumaku_1 {
position: absolute;
top: 8%;
font-size: 60px;
}
#beautyopener .rankakumaku_2 {
position: absolute;
top: 18%;
font-size: 60px;
}
#beautyopener .rankakumaku_text {
position: absolute;
top: 70%;
margin: 0 8%;
text-align: left;
font-size: 28px;
line-height: 1.5;
}
#beautyopener .voice_1 {
position: absolute;
top: 50px;
width: 67%;
}
#beautyopener .voice_2 {
position: absolute;
top: 550px;
width: 67%;
}
#beautyopener .voice_kome {
position: absolute;
top: 1050px;
left: 41%;
text-align: left;
font-size: 14px;
}

#beautyopener .point {
overflow: hidden;
width: 768px;
margin: 0 auto 100px;
}
#beautyopener .contents_bnr p {
margin: 15px 30px;
float: left;
}
#beautyopener .specification p {
padding: 0 4% 8%;
font-size: 18px;
}
/* --- Bnr ------------*/
.Bnr, .Bnr2 {
position: relative;
margin: 0 auto;
display: none;
}
.Bnr .banner {
position: fixed;
top: 50px;
right: 0;
z-index: 88;
}
.Bnr2 .banner2 {
position: fixed;
top: 370px;
right: 0;
z-index: 88;
}
.banner_inner {
padding: 10px;
}
.Bnr .banner_inner a {
display: block;
}
.Bnr .banner p.close {
position: absolute;
right: 15px;
top: 10px;
}
.Bnr .banner p.close a {
display: block;
width: 20px;
height: 25px;
}
.Bnr .banner p.close a span {
display: block;
width: 1px;
height: 1px;
z-index: 888;
overflow: hidden;
}
.br-sp {
display: none;
}

#beautyopener section h2 {
display: block;
font-size: 36px;
line-height: 1.3;
color: #7d5200;
text-align: center;
margin: 60px 0;
}
#beautyopener section .txt_01 {
font-size: 20px;
line-height: 1.6;
}
#beautyopener section h3.h3 {
font-size: 28px;
text-align: left;
margin: 30px 0 15px;
position: relative;
color: #7d5200;
background-color: #fff;
padding: 10px 0;
}
#beautyopener section h4.h4 {
font-size: 26px;
text-align: left;
margin-bottom: 25px;
}
#beautyopener section .kome {
font-size: 14px;
line-height: 1.3;
text-align: left;
}
#beautyopener .sokkou {
position: absolute;
top: 300px;
right: 0;
}
#beautyopener .sokkou img {
width: 60%;
}
#beautyopener .sinsou {
position: absolute;
top: 5px;
right: 0;
}
#beautyopener .sinsou img {
width: 60%;
}
}
/* -------------------------------------------------------------------- 
動画
-------------------------------------------------------------------- */
.box_mp4 {
position: relative;
}
.box_mp4 .video01 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 11.3%;
width: 89.6%;
display: flex;
justify-content: center;
}
.box_mp4.voice video {
position: absolute;
left: 54.5%;
bottom: 34.2%;
width: 40.3%;
}
.box_mp4.voice.voice2 video {
bottom: 34.5%;
}
.box_mp4.voice.voice3 video {
bottom: 40.2%;
}
@media only screen and (min-width: 768px) {
.box_mp4 .video01 {
top: 110px;
}
.box_mp4 .video01 {
width: 65%;
}
}
/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn {
animation-name: fadeInAnime;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeInAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 下から */
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 上から */
.fadeDown {
animation-name: fadeDownAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeDownAnime {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 左から */
.fadeLeft {
animation-name: fadeLeftAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeLeftAnime {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 右から */
.fadeRight {
animation-name: fadeRightAnime;
animation-duration: 2s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeRightAnime {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.flex {
display: flex;
flex-wrap: wrap;
}