@charset "UTF-8";
html {
/* font-size: 62.5%; */
scroll-behavior: smooth;
}
#share {
bottom: 10% !important;
left: 3% !important;
}
.slider {
/* display: none; */
}
.slider.slick-initialized {
display: block;
}
.lp-page {
margin: 0 auto;
position: relative;
overflow: hidden;
color: #000;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.05em;
z-index: 0;
padding-bottom: 2rem;
background: #ffffff;
font-weight: 400;
font-size: 1.4rem;
}
.lp-page img,
.lp-page svg {
display: block;
opacity: 1;
width: 100%;
height: auto;
}
.lp-page picture {
display: block;
}
.lp-page a {
display: block;
color: inherit;
}
.lp-page *:focus {
outline: none;
}
.lp-page a,
.lp-page label {
/* -webkit-tap-highlight-color: rgba(240, 164, 149, 0.6); */
}
.lp-page input {
display: none;
}
.lp-page li,
.lp-page ol {
list-style-type: none;
}
main {
max-width: 100vw;
}
#Wrap {
width: auto;
}
.wrapTop,
.wrapBottom {
width: 100%;
}
.lp-page a {
cursor: pointer;
}
.lp-page .pcOnly {
display: block;
}
.lp-page .spOnly {
display: none;
}
/* 追従メニュー */
.fixed-nav {
display: none;
}
.fixed-nav.m_fixed {
position: fixed;
bottom: 0;
left: 0;
border-top: 1px solid #D796BA;
border-bottom: 1px solid #D796BA;
width: 100%;
animation: fadein 1s ease-out forwards;
display: block;
z-index: 20;
}
.fixed-nav.m_fixed .nav-list {
display: flex;
align-items: center;
height: 5rem;
background: #fff;
color: #D796BA;
/* font-family: "Marcellus", "Noto Sans JP", sans-serif; */
justify-content: center;
box-shadow: 0 0 6px #dddddd;
/* padding: 0 6rem; */
}
.fixed-nav.m_fixed .nav-list li a {
padding: 0 1.6rem;
font-weight: 500;
text-align: center;
font-size: 1.2rem;
line-height: 1.4;
width: 22rem;
/* justify-content: center; */
/* width: auto; */
}
.fixed-nav a.active {
opacity: 1 !important;
font-weight: 600;
}
/*----------アニメーション----------*/
.fadein {
opacity: 0;
transform: translateY(0);
transition: opacity 2s 0s, transform 2s 0s;
}
.fadein.fade-active {
opacity: 1;
transform: translateY(0) translateZ(0);
transition: opacity 2s 0s, transform 2s 0s;
}
.fadeup {
opacity: 0;
transform: translateY(2rem);
transition: opacity 1.3s 0s, transform 1.3s 0s;
}
.fadeup.fade-active {
opacity: 1;
transform: translateY(0) translateZ(0);
transition: opacity 1.3s 0s, transform 1.3s 0s;
}
.fadein-load {
opacity: 0;
transition: opacity 1s;
}
.fadein-load.fade-active {
opacity: 1;
transition: opacity 1s;
}
.fadeup-load {
opacity: 0;
transform: translateY(5rem) translateZ(0);
transition: opacity 1.3s 0s, transform 1.3s 0s;
}
.fadeup-load.fade-active {
opacity: 1;
transform: translateY(0) translateZ(0);
transition: opacity 1.3s 0s, transform 1.3s 0s;
}
.lp-page .main-area .intro-txt {
text-align: center;
line-height: 2;
font-size: 1.6rem;
}
.lp-page .main-area .nav-list {
display: flex;
margin: 6rem auto 10rem;
align-items: center;
justify-content: center;
border-top: 1px solid;
border-bottom: 1px solid;
}
.fixed-nav.m_fixed .nav-list li {
/* width: 22rem; */
border-left: 1px solid #D796BA;
/* height: 4rem; */
/* border-left: 1px solid #111; */
display: flex;
/* font-weight: 500; */
/* margin: 0 6rem 0 0; */
align-items: center;
justify-content: center;
}
.lp-page .cont-area h2 span {font-size: 5rem;font-weight: 400;display: block;}
.lp-page * {
box-sizing: border-box;
}
body.no_scroll #FooterWrap {
display: none;
}
#FooterWrap {
position: relative;
z-index: 50;
}
.lp-page .nav-list li .menu-txt span {
display: block;
font-size: 1.8rem;
font-weight: bold;
}
.lp-page .nav-list li a::after {
/* content:''; */
/* position: absolute; */
/* background: url(../img/arrow_brown.svg) no-repeat; */
/* width: 1.4rem; */
/* height: 1.4rem; */
/* top: 46%; */
/* right: 1.5rem; */
/* background-size: 100%; */
/* transform: translate(0, -50%); */
}
.lp-page .nav-list li .ico-txt {
font-family: "oculi-display", sans-serif;
text-align: center;
font-size: 1rem;
color: #6C6055;
padding-right: 1.2rem;
padding-top: 0.2rem;
}
.lp-page .nav-list li .ico-txt span {
font-size: 3rem;
display: block;
}
.lp-page .nav-list li .menu-txt {
font-size: 1.4rem;
line-height: 1.5;
}
.fixed-nav.m_fixed .nav-list li:last-child {
border-right: 1px solid #D796BA;
/* margin-right: 0; */
}
.fixed-nav.m_fixed .nav-list li a::after {
content: none;
}
.lp-page .m_fixed .nav-list li .ico-txt span {
font-size: 2.8rem;
}
.lp-page .m_fixed .nav-list li .menu-txt {
font-size: 1.3rem;
}
.lp-page .m_fixed .nav-list li .menu-txt span {
font-size: 1.5rem;
}
.fixed-nav.m_fixed .nav-list li a:hover {
/* opacity: 1 !important; */
/* font-weight: 600; */
}
.lp-page .main-area .ttl-txt picture {
width: 79rem;
margin: 0 auto;
padding: 0.5rem 0;
}
.lp-page .intro-area h2 {
color: #D796BA;
line-height: 1.6;
font-size: 2.2rem;
margin-top: 3rem;
font-weight: 600;
/* letter-spacing: 0.1em; */
}
.lp-page .intro-area h2 span {
font-size: 4.8rem;
letter-spacing: 1rem;
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.lp-page .intro-area .slider {
max-width: 100rem;
margin: 5rem auto 10rem;
display: flex;
justify-content: space-between;
}
.lp-page .intro-area .slider .img {
width: 14rem;
}
.lp-page .en-txt {
font-family: "mestiza", sans-serif;
}
.lp-page .tax {
font-size: 1.1rem !important;
}
.lp-page .jp-txt {
font-family: "Noto Sans JP", sans-serif;
}
.lp-page .all-btn a span {
font-size: 1.8rem;
font-family: "Marcellus", serif;
}
.lp-page .ttl-txt .img {
width: 53rem;
margin-right: 5rem;
}
.lp-page section {
/* padding: 10rem 0; */
max-width: 100rem;
margin: 0 auto;
}
.lp-page .intro-area .txt-area {
width: 64rem;
}
.lp-page .menu-area .nav-list {
display: flex;
border: 1px solid #D796BA;
padding: 4rem 0 2rem 6rem;
max-width: 100rem;
/* margin: 0 auto 8rem; */
flex-wrap: wrap;
/* column-count: 2; */
}
.lp-page .menu-area .nav-list li a {
display: inline-block;
padding-left: 1.5rem;
font-size: 1.6rem;
color: #D796BA;
margin-bottom: 2rem;
position: relative;
/* border-radius: .4rem; */
/* padding-top: 1.5rem; */
/* position: relative; */
/* line-height: 1.4; */
/* margin: 0 1rem; */
font-weight: 500;
/* height: 8.6rem; */
/* position: relative; */
}
.lp-page .menu-area .nav-list li span {
font-size: 2rem;
display: block;
}
.lp-page .fl-area {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.lp-page .intro-area {
padding: 8rem 0 0;
display: flex;
justify-content: space-between;
}
.fixed-nav.m_fixed .nav-list li span {
font-size: 1.3rem;
display: block;
font-weight: 600;
}
.fixed-nav.m_fixed .nav-list li img {
width: 8rem;
}
.fixed-nav.m_fixed .nav-list li:nth-child(2) img {
width: 5.4rem;
}
.fixed-nav.m_fixed .nav-list li p {
font-size: 1.8rem;
padding-left: 1.5rem;
font-weight: 500;
line-height: 1.5;
}
.lp-page .menu-area .nav-list li img {
position: absolute;
top: 50%;
left: 4rem;
transform: translate(0, -50%);
width: auto;
height: 5.7rem;
}
.lp-page .menu-area .nav-list li span {
font-size: 1.4rem;
font-weight: 600;
}
.lp-page .menu-area .nav-list li p {
line-height: 1.5;
}
.lp-page .menu-area .nav-list li:nth-child(2) img {
height: 5rem;
}
.lp-page .menu-area .nav-list li:nth-child(2) p {
padding-left: 2.5rem;
}
.lp-page .menu-area .nav-list li a::after {
content: '';
position: absolute;
background: url(../img/arrow_right.svg) no-repeat;
width: 0.7rem;
height: 1.2rem;
bottom: 1rem;
left: 0;
background-size: 100%;
top: 50%;
transform: translate(0, -50%);
}
.cont-area .ttl-area .ttl-txt {
margin-top: -10rem;
position: relative;
z-index: 1;
}
.cont-area .intro-txt {
text-align: center;
font-size: 1.6rem;
font-weight: 500;
line-height: 2;
}
.lp-page .intro-area .ttl-area {
width: 32rem;
}
.lp-page .intro-area .main-txt {
font-size: 1.4rem;
color: #D796BA;
line-height: 2;
margin-bottom: 3rem;
}
.lp-page .intro-area .ttl-area img {
width: 28rem;
}
.lp-page .intro-area .intro-img img {
width: 45rem;
margin: 5rem 0 0 -12.5rem;
}
.lp-page .intro-area .prof-txt {
color: #D796BA;
background: #F8F8F8;
padding: 2rem;
margin-top: 4rem;
}
.lp-page .intro-area .prof-txt dt {
font-weight: 600;
font-size: 1.4rem;
padding-bottom: 1rem;
}
.lp-page .intro-area .prof-txt dd {
font-size: 1.2rem;
line-height: 1.8;
}
.lp-page .menu-area .nav-list li:nth-child(4) a {
/* padding-top: 2.5rem; */
}
.lp-page .bg-color {
background: #fdf4f9;
}
.lp-page .cont-area {
margin-bottom: 10rem;
position: relative;
}
.lp-page .cont-area h2 {
color: #D796BA;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
margin-bottom: 1rem;
}
#section02 .item-list {
display: flex;
gap: 4rem;
justify-content: center;
}
.lp-page .notes {
font-size: 1.1rem;
font-weight: 400;
display: block;
padding-top: .5rem;
}
.lp-page .cont-area .massage-area {
background: #fff;
margin-top: 8rem;
padding: 5rem 8rem;
border: 1px solid #D796BA;
}
.lp-page .cont-area .massage-area h5 {
text-align: center;
color: #D796BA;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.lp-page .cont-area .massage-area .prof-area {
display: flex;
margin: 3rem 0;
align-items: center;
background: #F8F8F8;
padding: 2rem 2.5rem;
color: #D796BA;
}
.lp-page .cont-area .massage-area .prof-area img {
width: 10rem;
margin-right: 1.5rem;
}
.lp-page .cont-area .massage-area .prof-area dt {
color: #D796BA;
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 1rem;
}
.lp-page .cont-area .massage-area .prof-area dt span {
font-size: 1.8rem;
}
.lp-page .cont-area .massage-area .prof-area dd {
font-size: 1.3rem;
line-height: 1.75;
}
.lp-page .cont-area .massage-area .prof-area dd span {
font-size: 1.4rem;
display: block;
font-weight: 500;
}
.lp-page .cont-area .massage-area .question-list h6 {
font-size: 1.5rem;
font-weight: 500;
color: #D796BA;
}
.lp-page .cont-area .massage-area .question-list p {
font-size: 1.3rem;
line-height: 1.75;
margin: 1rem 0 2rem;
}
.lp-page .cont-area .massage-area .image-list {
margin-top: 3rem;
display: flex;
justify-content: space-between;
margin-bottom: 4rem;
}
.lp-page .cont-area .massage-area .image-list li {
width: 26.6rem;
}
.lp-page .cont-area .massage-area .image-list p {
font-size: 1.2rem;
margin-top: 1rem;
line-height: 1.75;
}
.lp-page .txt-green {
color: #D796BA;
font-weight: 500;
}
.lp-page .cont-area .coming-soon .item-img {
position: relative;
}
.lp-page .cont-area .coming-soon .item-img::after {
content: '';
position: absolute;
height: 27.2rem;
width: 27.2rem;
background: rgb(255 255 255 / 50%);
top: 0;
left: 0;
}
.lp-page .cont-area .coming-soon .coming-txt {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.6rem;
color: #888;
width: 100%;
text-align: center;
}
.lp-page .menu-area h4 span {
z-index: 10;
position: relative;
display: block;
}
.lp-page .menu-area {
max-width: 100rem;
margin: 3rem auto 10rem;
}
.lp-page .menu-area .nav-list li:nth-child(even) {
/* width: 46%; */
}
.lp-page .menu-area .nav-list li {
width: 48%;
}
.lp-page .menu-area h4::after {
content: '';
background: #ffffff;
width: 7rem;
height: .3rem;
position: absolute;
top: 1.4rem;
left: -0.5rem;
}
.lp-page .menu-area h4 {
position: relative;
font-size: 2rem;
width: 6rem;
color: #D796BA;
margin-bottom: -1.5rem;
margin-left: 2rem;
}
#section01, #section05 {
padding: 7rem 0 8rem;
}
#section01 .ttl-ico {
position: absolute;
width: 18rem;
top: 3rem;
left: 3rem;
}
#section01 h2 span {
font-size: 2.2rem;
font-weight: 600;
}
#section01 .item-mv {
width: 60rem;
margin: 4rem auto 0;
/* position: relative; */
}
.modal-link .modal-btn::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 1.6rem;
height: 1.6rem;
background: #fff;
opacity: .9;
content: "";
animation: dots-anime 2.5s ease-in-out infinite;
}
.modal-link .modal-btn {
width: 4rem;
height: 4rem;
}
.modal-link li {
position: absolute;
}
#section01 .item-mv .modal-link li:nth-child(1) {
top: 36rem;
left: 11rem;
}
#section01 .item-mv .modal-link li:nth-child(2) {
top: 31rem;
left: 21.5rem;
}
#section01 .item-mv .modal-link li:nth-child(3) {
bottom: 21rem;
left: 28.5rem;
}
#section01 .item-mv .modal-link li:nth-child(4) {
top: 24rem;
right: 19.5rem;
}
#section03 .item-mv {
/* width: 40rem; */
/* position: relative; */
}
#sec03-cate01 .item-mv .modal-link li:nth-child(1) {
bottom: 7rem;
left: 5.2rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(2) {
top: 13rem;
left: 15.2rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(3) {
bottom: 6rem;
right: 11.2rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(4) {
top: 17.5rem;
right: 5.2rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(1) {
top: 18rem;
left: 6.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(2) {
bottom: 7rem;
right: 12.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(3) {
top: 17.5rem;
right: 7rem;
}
#section03 {
background: #fffefe;
border: 1.5px solid #D796BA;
box-shadow: 5px 5px #D796BA;
padding: 8rem 8rem 8rem;
overflow: hidden;
}
.lp-page .cont-area .cont-mv img {
height: 2.5rem;
width: auto;
margin: 0 auto 1.5rem;
}
#section03 .item-area {
width: 36rem;
align-items: center;
/* margin-top: 5rem; */
justify-content: space-between;
}
#section04 .item-area .sub-ttl img {
height: 4rem;
width: auto;
margin: 0 auto;
}
#section03 .item-area h4 .big-txt {
/* color: #D796BA; */
font-size: 2.8rem;
/* line-height: 1.5; */
/* display: inline-block; */
}
#section03 .item-area h4 img {
height: 3.2rem;
width: auto;
/* display: inline-block; */
margin: 1rem 0 1.5rem 0.4rem;
/* margin-left: 0.4rem; */
}
#section03 .item-list li {
font-size: 1.3rem;
margin-top: 1rem;
}
#section03 .item-list li span {
color: #D796BA;
}
#sec03-cate02, #sec03-cate04, #sec03-cate06, #sec03-cate08 {
flex-direction: row-reverse;
}
#section03 .item-txtarea {/* width: 40rem; */}
#sec03-cate04 .item-mv .modal-link li:nth-child(1) {
bottom: 6rem;
left: 6.5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(2) {
bottom: 6rem;
left: 11.5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(3) {
top: 18rem;
right: 16.5rem;
}
#section04 .about-btn a {
text-align: center;
border: 1px solid #D796BA;
border-radius: .2rem;
width: 50rem;
padding: 1.7rem 0 1.2rem;
position: relative;
margin: 4rem auto 5rem;
color: #D796BA;
font-size: 1.8rem;
font-weight: 500;
}
#section04 .about-btn img {
height: 2.2rem;
width: auto;
margin: 0 auto .5rem;
}
#section04 .about-btn a::after {
content: '+';
position: absolute;
right: 2rem;
top: 50%;
transform: translate(0, -50%);
font-size: 3rem;
font-weight: 300;
}
#section04 .item-front .item-list {
display: flex;
/* position: relative; */
justify-content: space-between;
}
#section04 .item-front .item-list li {
position: relative;
width: 47rem;
}
#section04 .item-front .item-list li:nth-child(1) .img-area {
width: 20rem;
}
#section04 .item-front .item-list li:nth-child(2) .img-area {
width: 30rem;
position: absolute;
top: -5rem;
right: 0;
}
#section04 .item-front .item-list li .txt-area {
width: 28rem;
position: absolute;
}
#section04 .item-front .item-list li .txt-area h3 {
color: #D796BA;
font-size: 1.8rem;
margin-bottom: 1.2rem;
}
#section04 .item-front .item-list li .txt-area h3 span {
display: block;
font-size: 1.3rem;
}
#section04 .item-front .item-list li:nth-child(1) .txt-area {
top: 5rem;
right: 0;
}
#section04 .item-front .item-list li:nth-child(2) .txt-area {
bottom: 5rem;
left: 0;
}
#section04 .other-item h3 {
text-align: center;
position: relative;
color: #D796BA;
font-size: 2.8rem;
font-weight: 600;
margin: 6rem auto 2rem;
/* display: block; */
}
#section04 .other-item h3::before, #section04 .other-item h3::after {
content: '';
position: absolute;
width: 3rem;
height: 4rem;
top: 50%;
transform: translate(0, -50%);
}
#section04 .other-item h3::before {
background: url(../img/sec03_left.svg) no-repeat;
background-size: 100%;
left: 10rem;
}
#section04 .other-item h3::after {
background: url(../img/sec03_right.svg) no-repeat;
background-size: 100%;
right: 10rem;
}
#section04 .other-item .item-area {
background: #FCFEFF;
border: 1.5px solid #D796BA;
box-shadow: 5px 5px #3081BA;
padding: 4rem;
width: 48rem;
height: 60rem;
margin-top: 4rem;
}
#section04 .other-item .item-area h5 img {
height: 3rem;
width: auto;
margin: 0 auto;
/* display: block; */
}
.lp-page section .item-mv {
position: relative;
}
#section04 .other-item .item-area .item-mv {
width: 37rem;
margin: 3rem auto 1rem;
}
#section04 .other-item .item-area .txt-list {
display: flex;
}
#section04 .other-item .item-area .txt-list li {
font-size: 1.3rem;
width: 13rem;
color: #D796BA;
font-weight: 500;
text-align: center;
}
#section04 .other-item #sec04-cate02 .txt-list li {
width: 20rem;
}
#section04 .other-item .item-area .notes {
padding-top: 1.5rem;
color: #D796BA;
text-align: center;
/* margin-bottom: -1rem; */
}
#sec04-cate01 .item-mv .modal-link li:nth-child(1) {
bottom: 10rem;
left: 10.5rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(2) {
bottom: 10rem;
right: 11.2rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(3) {
bottom: 10rem;
right: 8.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(2) {
top: 16rem;
left: 19.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(1) {
bottom: 7rem;
left: 8rem;
}
.lp-page .cont-area .massage-area .intro-txt {
font-size: 1.4rem;
}
.lp-page .cont-area .massage-area .intro-txt span {
font-size: 2.4rem;
display: block;
}
#modal_about .modal_blk_inner {
max-width: 100rem;
border: 1px solid #D796BA;
margin: 0 auto;
padding: 6rem 8rem 4rem;
background: #fff;
height: 80vh;
overflow-y: scroll;
}
#modal_about .btn-close {
transform: translateX(46.5rem);
/* right: 2rem; */
/* left: auto; */
position: fixed;
}
#modal_about .about-inner .sub-ttl img {
height: 2.2rem;
margin-bottom: 1rem;
}
#modal_about .about-inner h3 {
text-align: center;
color: #D796BA;
font-size: 2.2rem;
margin-bottom: 2rem;
}
#modal_about .about-inner .about-txt {
font-size: 1.5rem;
line-height: 1.75;
margin-bottom: 2rem;
}
#modal_about .about-inner .about-block {
width: 22rem;
}
#modal_about .about-inner .about-block:nth-child(1) {
width: 36rem;
}
#modal_about .about-inner .about-subtxt {
font-size: 1.2rem;
line-height: 1.75;
}
#modal_about .about-inner .about-subtxt span {
font-size: 1.4rem;
display: block;
color: #D796BA;
font-weight: 500;
margin-bottom: .2rem;
}
#modal_about .about-inner .about-block img {
margin-bottom: 1rem;
}
#modal_about .about-inner {
margin-bottom: 4rem;
}
.lp-page .cont-area .massage-area .prof-txt {
width: 41.5rem;
font-size: 1.2rem;
line-height: 1.6;
padding-left: 2.5rem;
margin-left: 2.5rem;
border-left: 2px dotted rgb(93 14 18 / 20%);
}
.lp-page .cont-area .massage-area .prof-txt span {
font-weight: 600;
display: block;
padding-bottom: .5rem;
}
.lp-page .cont-area .massage-area .prof-name {
font-size: 1.4rem;
width: 24.5rem;
}
.lp-page .cont-area .massage-area .prof-name span {
display: inline-block;
font-size: 1.6rem;
font-weight: 500;
padding-top: .8rem;
}
#sec03-cate06 {
clear: both;
}
#section01 .item-mv .modal-link li:nth-child(5) {
bottom: 23rem;
right: 12.5rem;
}
#section01 .item-mv .modal-link li:nth-child(6) {
bottom: 15rem;
left: 18rem;
}
#section01 .item-mv .modal-link li:nth-child(7) {
bottom: 13rem;
right: 21.5rem;
}
#section01 .item-mv .modal-link li:nth-child(8) {
bottom: 20rem;
right: 20.5rem;
}
#section01 .item-mv .modal-link li:nth-child(9) {
bottom: 13rem;
right: 8.5rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(3) {
top: 14rem;
right: 12rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(2) {
bottom: 8rem;
left: 14.5rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(1) {
bottom: 10rem;
left: 9.5rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(1) {
top: 16rem;
left: 9.2rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(2) {
top: 8rem;
right: 9rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(3) {
bottom: 11rem;
right: 8.5rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(4) {
top: 16rem;
right: 4.5rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(3) {
top: 16rem;
right: 5.5rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(2) {
bottom: 13rem;
left: 20rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(1) {
top: 12rem;
left: 11rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(1) {
bottom: 8rem;
left: 3.5rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(2) {
top: 16rem;
left: 10.5rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(3) {
bottom: 13rem;
right: 9rem;
}
.lp-page .item-detail {
font-size: 1.4rem;
/* margin: 2rem auto 1.5rem; */
line-height: 1.75;
}
.lp-page .item-name {
font-size: 1.6rem;
font-weight: 500;
margin: 1.5rem auto 1rem;
}
.lp-page .item-price {
font-size: 2rem;
font-weight: 600;
}
.lp-page .cv-btn {
background: #D796BA;
color: #fff;
width: 8rem;
height: 3rem;
text-align: center;
line-height: 3rem;
font-weight: 500;
border-radius: 10rem;
font-size: 1.3rem;
box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
transition: .3s;
}
.lp-page .cv-btn:hover {
background: #fff;
color: #D796BA;
}
.lp-page .cont-area .massage-area .prof-area .fl-area {
align-items: center;
}
#section03 .illust {
position: absolute;
width: 21rem;
/* left: 2rem; */
}
.lp-page .cont-area .illust p {
font-size: 1rem;
color: #D796BA;
padding-top: 1rem;
/* text-align: right; */
}
#section03 .illust img {
/* width: 28rem; */
}
#section04 .cate-ttl h3 img {
/* margin: 0 auto; */
/* height: 20rem; */
/* width: auto; */
/* margin-bottom: 2.5rem; */
}
#section03 .item-area h4 {
margin: 1.5rem auto 1rem;
/* line-height: 1.5; */
font-size: 2rem;
text-align: center;
}
#section04 .item-area {
display: flex;
align-items: center;
margin: 5rem auto 8rem;
gap: 3rem;
justify-content: center;
}
#section04 .item-txtarea {
width: 42rem;
position: relative;
/* height: min-content; */
}
#section04 .item-mv {
width: 45rem;
}
#section04 .item-area h3 img {
height: 7rem;
width: auto;
margin: 0 auto 2rem;
}
#section04 .item-txtarea .brand-txt {
line-height: 2;
text-align: left;
}
#section04 .item-area:nth-child(odd) {
flex-direction: row-reverse;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(5) {
top: 20.5rem;
right: 4.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(4) {
bottom: 9rem;
right: 3.2rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(5) {
top: 12rem;
right: 10rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(4) {
bottom: 7rem;
right: 6rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(5) {
bottom: 7rem;
right: 18.5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(4) {
bottom: 8rem;
right: 10rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(5) {
bottom: 13rem;
right: 12.5rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(4) {
top: 13.5rem;
right: 12.8rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(5) {
bottom: 6rem;
right: 3.5rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(6) {
bottom: 6rem;
right: 5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(5) {
bottom: 8rem;
right: 16.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(3) {
top: 15rem;
right: 10rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(4) {
bottom: 13rem;
left: 32.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(6) {
bottom: 8rem;
right: 7.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(1) {
top: 12rem;
left: 4.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(2) {
top: 12rem;
right: 17rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(3) {
top: 12rem;
left: 24rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(4) {
bottom: 7rem;
left: 8.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(5) {
bottom: 7rem;
right: 8.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(6) {
right: 5rem;
bottom: 3rem;
}
.lp-page #section01.cont-area h2 {
/* font-size: 2.4rem; */
}
#section01 .item-mv .notes {
padding-top: 1.5rem;
}
#section03 .item-area h4 span {
color: #D796BA;
font-size: 1.6rem;
border: 1px solid;
border-radius: 100rem;
padding: .2rem 1rem .1rem;
margin-bottom: 1rem;
display: inline-block;
}
#section04 .illust {
position: absolute;
top: -5rem;
left: 0rem;
}
#section04 .illust img {
width: 30rem;
}
.lp-page .cont-area .brand-txt .ttl-txt {
font-size: 2.4rem;
display: block;
font-weight: 700;
padding-bottom: .5rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(1) {
bottom: 10rem;
left: 13rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(2) {
bottom: 10rem;
right: 11rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(3) {
bottom: 10rem;
right: 10.5rem;
}
#section05 .item-mv {
width: 50rem;
margin: 2rem auto 0;
}
#section05 .illust {
position: absolute;
top: 2rem;
left: 2rem;
}
#section05 .illust img {
width: 30rem;
}
#section05 .brand-txtarea h3 {
font-size: 2.4rem;
text-align: center;
margin: 3rem auto 1.5rem;
color: #D796BA;
}
#section05 .brand-txtarea ul {
padding: 0 10rem 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
}
#section05 .brand-txtarea li {
width: 39rem;
line-height: 1.8;
font-size: 1.3rem;
}
#section05 .brand-txtarea li span {
color: #D796BA;
font-weight: 700;
display: block;
font-size: 1.5rem;
}
#section05 .item-mv .modal-link li:nth-child(3) {
bottom: 14rem;
right: 12rem;
}
#section05 .item-mv .modal-link li:nth-child(1) {
top: 17rem;
left: 16rem;
}
#section05 .item-mv .modal-link li:nth-child(2) {
bottom: 29rem;
left: 14.5rem;
}
#section05 .item-mv .modal-link li:nth-child(4) {
top: 34rem;
left: 22rem;
}
#section05 .item-mv .modal-link li:nth-child(5) {
top: 32rem;
left: 30rem;
}
#section02 .illust img {
/* width: 26rem; */
/* margin: 0 0 0 auto; */
}
#section02 .ttl-area .illust {
position: absolute;
/* top: 6rem; */
/* right: -8rem; */
/* text-align: right; */
width: 20rem;
}
#section02 .ttl-ico {
position: absolute;
top: -4rem;
left: 4rem;
}
#section02 .ttl-ico img {
width: 12rem;
}
#section02 .item-area {
/* display: flex; */
/* flex-wrap: wrap; */
/* gap: 4rem; */
}
#section02 .item-inner {
margin-top: 8rem;
}
#section02 .item-ttl dt {
width: 8rem;
margin: 0 auto;
/* text-align: center; */
}
#section02 .item-ttl dt span {
color: #fff;
background: #D796BA;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 10rem;
display: inline-block;
margin-right: .5rem;
font-size: 1.4rem;
}
#section02 .item-ttl dd {
font-weight: 600;
font-size: 2.4rem;
text-align: center;
margin: 1rem auto 1.5rem;
}
#section02 .item-ttl dd span {
font-size: 1.4rem;
}
#section02 .item-inner .brand-name img {
height: 2rem;
width: auto;
}
#section02 .item-inner .item-name {
margin: 1rem auto .5rem;
line-height: 1.4;
color: #D796BA;
font-weight: 600;
}
#section02 .item-inner .item-detail {
margin-bottom: 1rem;
font-size: 1.3rem;
}
#section02 .item-inner .review-list {
font-size: 1.2rem;
color: #D796BA;
border: 1px solid;
border-radius: .5rem;
padding: 1.5rem 1.5rem .7rem;
margin-top: 2rem;
position: relative;
}
#section02 .item-inner .item-img {
/* width: 26rem; */
background: #f6f9f8;
height: 24rem;
position: relative;
}
#section02 .item-inner .item-txt {
/* width: 26rem; */
}
#section02 .item-main {
/* width: 48rem; */
/* gap: 2rem; */
/* align-items: center; */
}
#section02 .item-inner .item-img img {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: auto;
height: 22rem;
}
#section02 .item-inner .review-list li {
margin-bottom: .8rem;
}
#section02 .item-inner .review-list::before {
content: '';
position: absolute;
top: -17px;
left: 10.5rem;
margin-left: -16px;
border: 7px solid transparent;
border-bottom: 10px solid #ffffff;
z-index: 2;
}
#section02 .item-inner .review-list::after {
content: "";
position: absolute;
top: -20px;
left: 10.5rem;
margin-left: -17px;
border: 8px solid transparent;
border-bottom: 12px solid #a78a44;
z-index: 1;
}
#section02 .item-inner .fl-area {
align-items: center;
margin-top: .5rem;
}
#section02 .item-inner .review-list .notes {
display: inline-block;
}
#section02 .item-inner .item-price {
line-height: 1.2;
font-size: 1.8rem;
width: 21rem;
}
#section02 .item-inner .item-price span {
font-size: 1.4rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(1) {
bottom: 13rem;
left: 7rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(2) {
bottom: 13rem;
left: 13.5rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(3) {
bottom: 8rem;
right: 15rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(4) {
bottom: 9rem;
right: 8rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(4) {
bottom: 12rem;
right: 9rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(4) {
top: 12rem;
right: 12rem;
}
#section03 h3 {
text-align: center;
color: #D796BA;
font-size: 5rem;
margin: 4rem auto 3rem;
}
#section03 .item-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 6rem;
}
#section04 .illust-img {
width: 20rem;
position: absolute;
top: -7rem;
left: -8rem;
}
#sec04-cate04 .illust-img {
right: -12rem;
top: -7rem;
width: 12rem;
left: auto;
}
#sec04-cate05 .illust-img {
left: -14rem;
top: -6rem;
}
#section04 #sec04-cate07 h3 img {
/* height: 10rem; */
}
#sec04-cate07 .illust-img {
left: -4rem;
top: -9rem;
}
#section02 h2 span {
font-size: 1.6rem;
color: #000;
line-height: 1.7;
font-weight: 500;
padding-top: 1rem;
}
#section02 .intro-txt {
margin-bottom: -2rem;
/* font-size: 1.3rem; */
/* line-height: 1.8; */
/* padding: 2rem; */
/* width: 80rem; */
/* margin: 3rem auto 5rem; */
/* font-weight: 400; */
}
#section02 .intro-txt span {
color: #D796BA;
font-weight: 600;
font-size: 1.4rem;
text-align: center;
display: block;
}
#section02 .ttl-area {
position: relative;
}
#section02 .item-list li {
width: 31rem;
}
#section02 .item-list .text_wrapper {
font-size: 1.2rem;
border: 1px solid #aaa;
border-radius: .5rem;
padding: 1rem 1.2rem .7rem;
margin-top: 2rem;
position: relative;
overflow: inherit;
}
#section02 .item-list .text_wrapper::before {
content: '';
position: absolute;
top: -17px;
left: 50%;
margin-left: -16px;
border: 7px solid transparent;
border-bottom: 10px solid #ffffff;
z-index: 2;
}
#section02 .item-list .text_wrapper::after {
content: "";
position: absolute;
top: -20px;
left: 50%;
margin-left: -17px;
border: 8px solid transparent;
border-bottom: 12px solid #aaa;
z-index: 1;
}
#section03 .sub-ttl {
position: relative;
}
#section03 .ttl-skin .illust {
top: -9.5rem;
right: -6rem;
}
#section03 .ttl-mood .illust {
top: -4rem;
right: -2rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(1) {
top: 3rem;
left: 7.5rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(2) {
bottom: 19rem;
left: 11.5rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(3) {
bottom: 5.5rem;
left: 7rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(1) {
bottom: 17rem;
left: 6rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(2) {
bottom: 13rem;
left: 13rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(3) {
bottom: 13rem;
left: 22rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(4) {
top: 3rem;
right: 6rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(5) {
bottom: 10rem;
right: 6rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(1) {
bottom: 11rem;
left: 6.8rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(2) {
bottom: 7rem;
right: 8.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(3) {
bottom: 7rem;
left: 19rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(4) {
top: 11rem;
left: 9rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(5) {
top: 9rem;
right: 14rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(6) {
top: 14rem;
right: 3.5rem;
}
#section05 .item-mv .modal-link li:nth-child(6) {
top: 22rem;
right: 13rem;
}
#section05 .item-mv .modal-link li:nth-child(7) {
bottom: 16rem;
right: 14rem;
}
#section05 .item-mv .modal-link li:nth-child(8) {
bottom: 10rem;
left: 25rem;
}
#section05 .item-mv .modal-link li:nth-child(9) {
bottom: 24rem;
left: 14.5rem;
}
#section05 .item-mv .modal-link li:nth-child(10) {
bottom: 24rem;
left: 8.5rem;
}
#section02 .item-ttl img {
height: 7rem;
width: auto;
margin: 0 auto 3rem;
}
#section02 .ttl-area .illust._01 {
right: -6rem;
top: 0;
}
#section02 .ttl-area .illust._02 {
bottom: -11rem;
left: -4rem;
width: 22rem;
}
#section02 .item-fl {
display: flex;
gap: 4rem;
}
#section03 .item-ttl dt {
width: 7rem;
margin: 0 auto 1.5rem;
}
#section03 .item-ttl dd {
text-align: center;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.7;
}
#section03 .item-ttl dd span {
font-size: 2rem;
}
#section03 .item-ttl {
margin: 5rem auto 2rem;
}
#section03 .item-list {
margin-top: 2rem;
}
#section04 .img-fl {
display: flex;
gap: 2rem;
align-items: center;
width: 53rem;
}
#section04 .img-fl .item-sub {
width: 31rem;
}
#section04 .img-fl .item-mv {
width: 20rem;
}
#section04 #sec04-cate01, #section04 #sec04-cate03, #section04 #sec04-cate04 {
gap: 0;
}
#section04 .img-fl .item-sub p {
font-size: 1.2rem;
line-height: 1.7;
}
#section04 .img-fl .item-sub p .ttl-txt {
font-weight: 500;
margin: 1rem 0 .5rem;
display: block;
font-size: 1.4rem;
}
#section04 #sec04-cate03 .item-mv {
width: 35rem;
}
#section05 .illust-img {
position: absolute;
width: 24rem;
bottom: 2rem;
right: 2rem;
}
#section05 {
position: relative;
}
#section05 .brand-txt img {
width: 8rem;
margin: 0 auto 1rem;
}
#section05 .brand-txt {
width: 70rem;
background: #f7ecf1;
padding: 2rem 3rem;
margin: 3rem auto 5rem;
}
#section05 .brand-txt p {
font-size: 1.3rem;
line-height: 1.8;
}
#section04 #sec04-cate06 .item-mv {
width: 16rem;
}
#section04 #sec04-cate06 .illust-img {
left: auto;
right: -6rem;
}
#section04 #sec04-cate07 .illust-img {
width: 12rem;
left: -10rem;
top: -12rem;
}
#section04 #sec04-cate07 {
gap: 4rem;
}
#section04 #sec04-cate06 .img-fl {
width: 49rem;
}
.lp-page .modal__content .slider-one .slick-track {
width: 48rem !important;
display: block;
transform: none !important;
}
.lp-page .modal__content .slider-one .slick-track .slick-slide {
margin: 0;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(4) {
top: 5rem;
right: 6rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(5) {
bottom: 10rem;
right: 6rem;
}
.lp-page .reco-txt {
background: #f6f2f4;
padding: 1rem;
margin: 1rem 0 1.5rem;
font-size: 1.3rem;
}
.lp-page .reco-txt span {
font-weight: bold;
}
/*--------------------------------
PC Only
--------------------------------*/
@media screen and (max-width: 1600px) {
html {
font-size: calc(10 * (100vw / 1400));
}
}
@media (min-width: 769px) {
.lp-page .main-area h1 {
width: 100rem;
margin: 6rem auto 0;
}
#sec04-cate04 .item-txtarea {
/* margin-left: -6rem; */
}
#sec04-cate05 .item-mv {
width: 35rem;
}
#section04 #sec04-cate05 {
/* gap: 3rem; */
}
}
/*--------------------------------
SP Only
--------------------------------*/
@media (max-width: 768px) {
html {
font-size: calc(10*(100vw / 390));
}
.lp-page .spOnly {
display: block;
}
.lp-page .pcOnly {
display: none;
}
.lp-page .main-area .nav-list {
/* width: calc(350 * (100vw / 390)); */
margin: calc(40 * (100vw / 390)) auto calc(60 * (100vw / 390));
display: block;
}
.lp-page .nav-list li .ico-txt span {
font-size: calc(28 * (100vw / 390));
/* display: block; */
}
.lp-page .btn-list a {
width: calc(320 * (100vw / 390));
font-size: calc(12 * (100vw / 390));
padding: calc(13 * (100vw / 390)) 0 calc(15 * (100vw / 390));
}
.lp-page .btn-list span {
font-size: calc(16 * (100vw / 390));
}
.lp-page .btn-list a::after {
right: calc(20 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li {
height: calc(42 * (100vw / 390));
position: relative;
/* letter-spacing: 0.05rem; */
/* padding-left: calc(10 * (100vw / 390)); */
/* height: calc(36 * (100vw / 390)); */
/* line-height: 1.4; */
}
.lp-page {
padding-bottom: 0;
/* padding-top: calc(3 * (100vw / 390)); */
}
.lp-page .main-area h1 span {
font-size: calc(30 * (100vw / 390));
padding-top: calc(10 * (100vw / 390));
}
.lp-page .main-area .intro-txt {
font-size: calc(14 * (100vw / 390));
}
.lp-page .mv-container {
margin-top: calc(30 * (100vw / 390));
max-width: none;
}
.fixed-nav.m_fixed .nav-list {
overflow-x: scroll;
overflow-y: hidden;
height: calc(56 * (100vw / 390));
justify-content: flex-start;
-ms-overflow-style: none;
scrollbar-width: none;
padding: calc(12 * (100vw / 390)) 0;
/* letter-spacing: 0.05em; */
}
.fixed-nav.m_fixed .nav-list::-webkit-scrollbar {
display: none;
}
.fixed-nav.m_fixed .nav-list li a {
margin: 0;
font-size: calc(11 * (100vw / 390));
line-height: 1.6;
padding: 0;
}
.js-fixed-elm.is-fixed {
top: calc(80 * (100vw / 390));
}
.lp-page .main-area .ttl-txt picture {
width: calc(376 * (100vw / 390));
padding-left: 1rem;
}
.lp-page .intro-area h2 {
font-size: calc(16 * (100vw / 390));
letter-spacing: 0.08em;
margin: 0 0 0 calc(15 * (100vw / 390));
}
.lp-page .intro-area h2 span {
font-size: calc(28 * (100vw / 390));
letter-spacing: 0.6rem;
}
.lp-page .intro-area .slider .img {
width: calc(90 * (100vw / 390));
margin: 0 calc(10 * (100vw / 390));
}
#FooterWrap {
margin-top: calc(-20 * (100vw / 390));
}
.fixed-nav.m_fixed {
width: 100%;
bottom: 0;
}
.fixed-nav.m_fixed .nav-list li:nth-child(2) a {
width: calc(190 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:nth-child(3) a {
width: calc(150 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li a {
/* width: calc(230 * (100vw / 390)); */
}
.fixed-nav.m_fixed .nav-list li:nth-child(4) a {
width: calc(150 * (100vw / 390));
}
.lp-page .ttl-txt .img {
width: calc(320 * (100vw / 390));
margin-right: calc(30 * (100vw / 390));
}
.cont-area .ttl-area .ttl-txt {
margin-top: calc(-65 * (100vw / 390));
}
.lp-page .cont-area {
margin-bottom: calc(60 * (100vw / 390));
/* width: calc(360 * (100vw / 390)); */
/* max-width: none; */
}
.lp-page .intro-area .txt-area {
margin-top: calc(12 * (100vw / 390));
/* font-size: calc(15 * (100vw / 390)); */
/* line-height: 2; */
width: 100%;
}
.lp-page .intro-area {
padding: calc(40 * (100vw / 390)) calc(15*(100vw / 390)) calc(20*(100vw / 390));
display: block;
}
.lp-page .menu-area .nav-list {
display: block;
/* margin-bottom: calc(50*(100vw / 390)); */
padding: 0;
border: none;
}
.lp-page .menu-area .nav-list li a {
border-top: none;
margin: 0;
border-right: none;
border-left: none;
font-size: calc(14 * (100vw / 390));
width: 100%;
text-align: left;
padding: calc(18 * (100vw / 390)) calc(40 * (100vw / 390)) calc(18 * (100vw / 390)) calc(18 * (100vw / 390));
height: calc(57 * (100vw / 390));
border-radius: 0;
border-bottom: 1px solid rgb(215 150 186 / 50%);
}
.lp-page .menu-area .nav-list li span {
/* display: inline; */
font-size: calc(13 * (100vw / 390));
display: block;
}
.lp-page .menu-area .nav-list li a::after {
width: calc(12 * (100vw / 390));
height: calc(8 * (100vw / 390));
right: calc(20 * (100vw / 390));
right: calc(18 * (100vw / 390));
left: auto;
/* transform: translate(0, 50%); */
background: url(../img/arrow_under.svg) no-repeat;
background-size: 100%;
}
.lp-page .cont-area h2 {
font-size: calc(20*(100vw / 390));
line-height: 1.5;
margin: 0 calc(-20 * (100vw / 390));
}
.lp-page .cont-area h2 span {
font-size: calc(36 * (100vw / 390));
}
.fixed-bnr.m_fixed {
width: calc(90 * (100vw / 390));
bottom: calc(70 * (100vw / 390));
}
.lp-page .all-btn img {
width: calc(100 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:first-child {
border-left: none;
/* width: calc(150 * (100vw / 390)); */
}
.fixed-nav.m_fixed .nav-list li:last-child {
border-right: none;
}
.fixed-nav.m_fixed .nav-list li span {
font-size: calc(11 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li p {
padding: 0;
font-size: calc(13 * (100vw / 390));
letter-spacing: 0.05em;
line-height: 1.6;
}
.fixed-nav.m_fixed .nav-list li::before {
/* content: ''; */
position: absolute;
background: url(../img/ico_care2.svg) no-repeat;
width: 6.6rem;
height: 3.8rem;
top: 50%;
left: 1.5rem;
background-size: 100%;
transform: translate(0, -50%);
}
.fixed-nav.m_fixed .nav-list li:nth-child(2)::before {
/* content: ''; */
position: absolute;
background: url(../img/ico_make2.svg) no-repeat;
width: 4.4rem;
height: 3.6rem;
top: 55%;
left: 1.5rem;
background-size: 100%;
transform: translate(0, -50%);
}
.lp-page .menu-area .nav-list li:last-child a {
border-top: none;
}
.lp-page .menu-area .nav-list li img {
height: calc(38 * (100vw / 390));
left: calc(20 * (100vw / 390));
}
.lp-page .menu-area .nav-list li p {
padding-left: calc(100 * (100vw / 390)) !important;
}
.lp-page .menu-area .nav-list li:nth-child(2) img {
height: calc(36 * (100vw / 390));
left: calc(30 * (100vw / 390));
}
.cont-area .intro-txt {
font-size: calc(14 * (100vw / 390));
margin: calc(10 * (100vw / 390)) calc(-20 * (100vw / 390)) calc(25*(100vw / 390));
letter-spacing: 0;
}
.lp-page .intro-area .ttl-area .inner {
display: flex;
align-items: center;
}
.lp-page .intro-area .ttl-area {
width: 100%;
}
.lp-page .intro-area .ttl-area img {
width: calc(120 * (100vw / 390));
}
.lp-page .intro-area .main-txt {
font-size: calc(14 * (100vw / 390));
}
.lp-page .intro-area .prof-txt {
margin-top: calc(25 * (100vw / 390));
padding: calc(15*(100vw / 390));
}
.lp-page .cont-area {
/* padding: calc(40 * (100vw / 390)) calc(20 * (100vw / 390)); */
}
.lp-page .cont-area .text_wrapper {
padding-bottom: calc(10*(100vw / 390));
}
.lp-page .intro-area .prof-txt dt {
padding-bottom: calc(5*(100vw / 390));
font-size: calc(13 * (100vw / 390));
}
.lp-page .intro-area .intro-img img {
width: 108%;
margin: calc(40*(100vw / 390)) 0 0 calc(-16*(100vw / 390));
}
.lp-page .menu-area .nav-list li:first-child a {
border-top: 1px solid rgb(215 150 186 / 50%);
}
.lp-page .menu-area .nav-list li:nth-child(4) a {
/* padding-top: calc(18*(100vw / 390)); */
}
.lp-page .menu-area .nav-list li:nth-child(2) a, .lp-page .menu-area .nav-list li:nth-child(4) a {
/* padding-top: calc(8 * (100vw / 390)); */
}
.lp-page .notes {
font-size: calc(10 * (100vw / 390));
}
.lp-page .cont-area .massage-area {
padding: calc(25 * (100vw / 390)) calc(20 * (100vw / 390)) calc(20 * (100vw / 390));
margin: calc(40 * (100vw / 390)) auto 0;
width: calc(360*(100vw / 390));
}
.lp-page .cont-area .massage-area h5 {
font-size: calc(24 * (100vw / 390));
margin-bottom: calc(12 * (100vw / 390));
}
.lp-page .cont-area .massage-area .prof-area {
display: block;
margin: calc(-10 * (100vw / 390)) 0 0;
background: transparent;
padding: 0;
}
.lp-page .cont-area .massage-area .prof-area img {
width: calc(80 * (100vw / 390));
margin-right: calc(10*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-area dt {
text-align: center;
font-size: calc(13 * (100vw / 390));
}
.lp-page .cont-area .massage-area .prof-area dt span {
font-size: calc(16 * (100vw / 390));
}
.lp-page .cont-area .massage-area .prof-area dd {
font-size: calc(12 * (100vw / 390));
}
.lp-page .cont-area .massage-area .question-list h6 {
font-size: calc(15 * (100vw / 390));
margin-top: calc(25 * (100vw / 390));
}
.lp-page .cont-area .massage-area .question-list p {
font-size: calc(13 * (100vw / 390));
margin: calc(8 * (100vw / 390)) 0 calc(10 * (100vw / 390));
}
.lp-page .cont-area .massage-area .image-list {
display: block;
margin: calc(25*(100vw / 390)) 0 calc(30*(100vw / 390));
}
.lp-page .cont-area .massage-area .image-list li {
width: 100%;
display: flex;
margin-top: calc(15 * (100vw / 390));
align-items: center;
}
.lp-page .cont-area .massage-area .image-list li img {
width: calc(155 * (100vw / 390));
margin-right: calc(10 * (100vw / 390));
}
.lp-page .cont-area .massage-area .image-list p {
font-size: calc(12 * (100vw / 390));
margin: 0;
line-height: 1.7;
}
.lp-page .cont-area .massage-area .image-list li:nth-child(even) {
flex-direction: row-reverse;
}
.fixed-nav.m_fixed .nav-list li:nth-child(2) {
/* width: calc(184*(100vw / 390)); */
}
.lp-page .cont-area .coming-soon .item-img::after {
height: calc(147 * (100vw / 390));
width: calc(147 * (100vw / 390));
}
#section03 {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.lp-page .cont-area .cont-mv img {
width: 70%;
margin-bottom: .5rem;
}
#section03 .item-area {
display: block;
background: #FDFDFC;
border: 1.5px solid #D796BA;
box-shadow: 4px 4px #D796BA;
padding: calc(25*(100vw / 390));
/* position: relative; */
margin: calc(20*(100vw / 390)) auto calc(5*(100vw / 390));
width: calc(360 * (100vw / 390));
/* height: calc(560*(100vw / 390)); */
}
#section03 .item-area .sub-ttl img {
height: calc(45*(100vw / 390));
margin: 0 auto;
}
#section03 .item-txtarea {
width: 100%;
}
#section03 .item-area h4 {
font-size: calc(18 * (100vw / 390));
/* margin: 0 calc(-25*(100vw / 390)) calc(10*(100vw / 390)); */
/* text-align: center; */
/* align-items: flex-end; */
/* justify-content: center; */
/* letter-spacing: 0; */
}
#section03 .item-area h4 .big-txt {
font-size: calc(22*(100vw / 390));
/* float: left; */
}
#section03 .item-area h4 img {
height: calc(22*(100vw / 390));
margin: 0 calc(6 * (100vw / 390)) calc(6 * (100vw / 390));
/* margin-left: 0; */
}
#section03 .item-list {
/* position: absolute; */
/* bottom: calc(22*(100vw / 390)); */
/* width: calc(310*(100vw / 390)); */
/* margin-top: calc(20*(100vw / 390)); */
}
#section03 .item-mv {
width: 100%;
}
#sec03-cate01 {
/* height: calc(555*(100vw / 390)); */
}
#section03 .item-list li {
font-size: calc(12*(100vw / 390));
}
.modal-link .modal-btn::before {
width: calc(14*(100vw / 390));
height: calc(14*(100vw / 390));
}
#sec03-cate01 .item-mv .modal-link li:nth-child(1) {
bottom: 7rem;
left: 4rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(2) {
top: 10rem;
left: 13rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(3) {
bottom: 5rem;
right: 9rem;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(4) {
top: 15rem;
right: 4rem;
}
#sec03-cate02 {
/* height: calc(590*(100vw / 390)); */
}
#sec03-cate02 .item-mv .modal-link li:nth-child(1) {
top: 15rem;
left: 5.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(2) {
bottom: 6rem;
right: 10.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(3) {
top: 14rem;
right: 6rem;
}
#section03 #sec03-cate02 h3 img {
height: calc(20*(100vw / 390));
}
.lp-page .main-area {
padding: calc(18 * (100vw / 390)) calc(15 * (100vw / 390)) 0;
}
.lp-page .menu-area .nav-list li {
width: 100% !important;
}
.lp-page .menu-area {
margin: 0;
}
#section01 {
padding: calc(120 * (100vw / 390)) calc(20 * (100vw / 390)) calc(60 * (100vw / 390));
}
#section01 .ttl-ico {
width: calc(100 * (100vw / 390));
top: calc(30 * (100vw / 390));
left: 50%;
transform: translate(-50%, 0);
}
#section01 h2 span {
font-size: calc(16 * (100vw / 390));
padding-top: calc(10 * (100vw / 390));
}
#section01 .item-mv {
width: 100%;
margin: 0 auto;
}
#sec03-cate03 {
/* height: calc(575 * (100vw / 390)); */
}
#section03 #sec03-cate04, #section03 #sec03-cate05 {
/* width: calc(360 * (100vw / 390)); */
/* padding: calc(25*(100vw / 390)); */
/* margin: calc(25*(100vw / 390)) auto 0; */
/* float: none; */
}
#section03 #sec03-cate04 .item-mv, #section03 #sec03-cate05 .item-mv {
/* width: calc(360 * (100vw / 390)); */
/* margin: calc(-55 * (100vw / 390)) calc(-25 * (100vw / 390)) 0 calc(-25 * (100vw / 390)); */
}
#section03 #sec03-cate04 .item-list, #section03 #sec03-cate05 .item-list {
/* position: initial; */
}
.lp-page .intro-area .prof-txt dd {
font-size: calc(11 * (100vw / 390));
}
#section04 .about-btn a {
width: calc(350*(100vw / 390));
font-size: calc(15*(100vw / 390));
padding: calc(12*(100vw / 390)) 0 calc(10*(100vw / 390));
margin: calc(25*(100vw / 390)) auto calc(40*(100vw / 390));
}
#section04 .about-btn img {
height: calc(16*(100vw / 390));
}
#section04 .about-btn a::after {
font-size: calc(25*(100vw / 390));
}
#section04 .item-front .item-list {
display: block;
position: relative;
width: calc(360*(100vw / 390));
margin: 0 calc(15*(100vw / 390));
}
#section04 .item-front .item-list li {
width: 100%;
/* display: flex; */
}
#section04 .item-front .item-list li:nth-child(1) .img-area {
width: calc(160*(100vw / 390));
}
#section04 .item-front .item-list li .txt-area {
width: calc(200*(100vw / 390));
/* position: relative; */
}
#section04 .item-front .item-list li:nth-child(2) .img-area {
position: relative;
width: calc(240*(100vw / 390));
margin: 0 0 0 auto;
right: calc(-10*(100vw / 390));
}
#section04 .item-front .item-list li:nth-child(2) {
margin-top: calc(-10*(100vw / 390));
}
#section04 .item-front .item-list li .txt-area h3 {
font-size: calc(16*(100vw / 390));
}
#section04 .item-front .item-list li .txt-area h3 span {
font-size: calc(12*(100vw / 390));
}
.lp-page .item-detail {
font-size: calc(13*(100vw / 390));
}
.lp-page .item-name {
font-size: calc(14*(100vw / 390));
}
.lp-page .item-price {
font-size: calc(18*(100vw / 390));
}
#section04 .item-front .item-list li:nth-child(1) .txt-area {
/* top: auto; */
top: calc(20*(100vw / 390));
}
#section04 .item-front .item-list li:nth-child(2) .txt-area {
bottom: calc(60*(100vw / 390));
left: calc(10*(100vw / 390));
}
#modal_about .modal_blk_inner {
padding: calc(30 * (100vw / 390)) calc(20 * (100vw / 390)) 0;
width: calc(360 * (100vw / 390));
}
#modal_about .about-inner h3 {
font-size: calc(18 * (100vw / 390));
margin: 0 calc(-10 * (100vw / 390))calc(10 * (100vw / 390));
}
#modal_about .about-inner .sub-ttl img {
height: calc(18 * (100vw / 390));
margin-bottom: calc(12 * (100vw / 390));
}
#modal_about .about-inner .fl-area {
display: block;
}
#modal_about .about-inner .about-block:nth-child(1) {
width: 100%;
}
#modal_about .about-inner .about-txt {
font-size: calc(13 * (100vw / 390));
margin-bottom: calc(12 * (100vw / 390));
}
#modal_about .about-inner .about-subtxt {
font-size: calc(12 * (100vw / 390));
letter-spacing: 0.04em;
}
#modal_about .about-inner .about-block {
width: 100%;
margin-bottom: calc(15 * (100vw / 390));
}
#modal_about .about-inner .about-block:nth-last-child(-n + 2) {
display: flex;
align-items: center;
}
#modal_about .about-inner .about-block:nth-last-child(-n + 2) img {
width: calc(146 * (100vw / 390));
height: calc(146 * (100vw / 390));
margin: 0;
}
#modal_about .about-inner .about-subtxt span {
font-size: calc(14 * (100vw / 390));
}
#modal_about .about-inner .about-block:nth-child(2n) img {
margin-right: calc(10 * (100vw / 390));
}
#modal_about .about-inner .about-block:nth-child(3n) {
flex-direction: row-reverse;
}
#modal_about .about-inner .about-block:nth-child(3n) img {
margin-left: calc(10 * (100vw / 390));
}
#modal_about .about-inner {
margin-bottom: calc(30 * (100vw / 390));
}
#modal_about .btn-close {
transform: translateX(15rem);
background: #D796BA;
width: calc(30 * (100vw / 390));
height: calc(30 * (100vw / 390));
border-radius: 100%;
top: calc(8 * (100vw / 390));
}
#modal_about .btn-close::before, #modal_about .btn-close::after {
background: #fff;
}
#modal_about .btn-close::before {
width: calc(20 * (100vw / 390));
}
#modal_about .btn-close::after {
height: calc(20 * (100vw / 390));
}
#section04 .other-item h3 {
font-size: calc(18 * (100vw / 390));
margin: 0 auto calc(10 * (100vw / 390));
}
#section04 .other-item h3::before {
left: 0;
}
#section04 .other-item h3::after {
right: 0;
}
#section04 .other-item .item-area {
width: calc(360 * (100vw / 390));
margin: calc(20 * (100vw / 390)) auto;
background: #FCFEFF;
border: 1.5px solid #D796BA;
box-shadow: 4px 4px #3081BA;
padding: calc(30*(100vw / 390)) calc(15*(100vw / 390));
height: auto;
}
#section04 .item-list {
display: block;
}
#section04 .other-item .item-area .item-mv {
width: calc(300*(100vw / 390));
margin: calc(30*(100vw / 390)) auto calc(5*(100vw / 390));
}
#section04 .other-item .item-area h5 img {
height: calc(24*(100vw / 390));
}
#section04 .other-item .item-area .txt-list li {
width: calc(121*(100vw / 390));
font-size: calc(11*(100vw / 390));
}
.lp-page .cont-area .massage-area .intro-txt span {
font-size: calc(20*(100vw / 390));
}
.lp-page .cont-area .massage-area .intro-txt {
font-size: calc(14*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-area .fl-area {
margin-left: calc(10*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-name {
font-size: calc(12*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-name span {
font-size: calc(15*(100vw / 390));
padding-top: calc(5*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-txt {
background: #F8F8F8;
border-left: none;
padding: calc(10*(100vw / 390)) calc(15*(100vw / 390));
margin-left: 0;
width: 100%;
margin-top: calc(15*(100vw / 390));
font-size: calc(11*(100vw / 390));
}
.lp-page .cont-area .massage-area .prof-txt span {
font-size: calc(13*(100vw / 390));
}
.lp-page .cont-area .massage-area .image-list li:nth-child(even) img {
margin-right: 0;
margin-left: calc(10*(100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:first-child a {
width: calc(130 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:nth-child(5) a {
width: calc(120 * (100vw / 390));
}
#section01 .item-mv .modal-link li:nth-child(1) {
top: 20rem;
left: 6rem;
}
#section01 .item-mv .modal-link li:nth-child(2) {
top: 16rem;
left: 12rem;
}
#section01 .item-mv .modal-link li:nth-child(3) {
bottom: 12rem;
left: 16rem;
}
#section01 .item-mv .modal-link li:nth-child(4) {
top: 14rem;
right: 10.5rem;
}
#section01 .item-mv .modal-link li:nth-child(5) {
bottom: 13rem;
right: 6.5rem;
}
#section01 .item-mv .modal-link li:nth-child(7) {
bottom: 7rem;
right: 11.5rem;
}
#section01 .item-mv .modal-link li:nth-child(9) {
bottom: 7rem;
right: 4rem;
}
#section01 .item-mv .modal-link li:nth-child(6) {
bottom: 8rem;
left: 10rem;
}
#section01 .item-mv .modal-link li:nth-child(8) {
bottom: 11rem;
right: 11rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(1) {
bottom: 9rem;
left: 7.5rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(2) {
bottom: 7rem;
left: 12rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(3) {
top: 12rem;
right: 10rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(1) {
bottom: 5rem;
left: 5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(2) {
bottom: 5rem;
left: 9.5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(3) {
top: 16rem;
right: 14rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(1) {
bottom: 11rem;
left: 5.5rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(2) {
bottom: 11rem;
left: 11.5rem;
}
#sec03-cate05 .item-mv .modal-link li:nth-child(3) {
bottom: 6rem;
right: 12.5rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(1) {
top: 13rem;
left: 8rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(2) {
top: 6rem;
right: 7rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(3) {
bottom: 10rem;
right: 6rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(1) {
top: 10rem;
left: 9rem;
}
#sec03-cate07 .item-mv .modal-link li:nth-child(2) {
bottom: 11rem;
left: calc(164 * (100vw / 390));
}
#sec03-cate07 .item-mv .modal-link li:nth-child(4) {
top: calc(120*(100vw / 390));
right: calc(30*(100vw / 390));
}
#sec03-cate07 .item-mv .modal-link li:nth-child(3) {
top: 13.5rem;
right: 4.5rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(1) {
bottom: 6rem;
left: 2.5rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(2) {
top: 13rem;
left: 9rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(3) {
bottom: 12rem;
right: 7rem;
}
#section04 {
/* margin-top: calc(50 * (100vw / 390)); */
}
#sec04-cate01 .item-mv .modal-link li:nth-child(1) {
bottom: 6rem;
left: 7rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(2) {
bottom: 6rem;
right: 7.5rem;
}
#sec04-cate01 .item-mv .modal-link li:nth-child(3) {
bottom: 8rem;
right: 6rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(1) {
bottom: 4.5rem;
left: 5.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(2) {
top: 12rem;
left: 14.5rem;
}
#section02 .ttl-area {
margin-bottom: 10rem;
}
#section02 .ttl-area .illust._01 {
top: -9rem;
right: 0rem;
}
#section02 .ttl-area .illust._02 {
width: 18rem;
bottom: -9rem;
left: -1rem;
}
#section02 .item-ttl img {
height: 6rem;
}
#section02 .item-fl {
display: block;
}
#section03 .item-ttl {
margin: 0 auto 1.5rem;
}
#section04 .img-fl {
width: 100%;
margin: 0 auto;
display: block;
}
#section04 .img-fl .item-mv {
width: 15rem;
margin: 2rem auto;
}
#section04 .img-fl .item-sub {
width: 35rem;
margin: 0 auto;
}
#section04 #sec04-cate06 .item-mv {
width: 10rem;
}
#section04 #sec04-cate06 .img-fl {
width: 100%;
}
#section04 #sec04-cate06 .illust-img {
right: -1rem;
top: 36rem;
}
#section04 #sec04-cate07 .illust-img {
left: -1px;
top: 24rem;
width: 10rem;
}
#section05 .brand-txt {
width: 35rem;
margin: 2rem auto 6rem;
}
#section05 .illust-img {
width: 18rem;
bottom: 43rem;
right: 0;
}
#section04 #sec04-cate04 .item-mv {
/* width: 32rem; */
margin: 0 auto 0 0;
}
}
/*----------点滅アニメーション----------*/
@keyframes dots-anime {
0%{
transform: translate(-50%, -50%) scale(80%);
opacity: .9;
}
80% {
opacity: .9;
}
100% {
transform: translate(-50%, -50%) scale(100%);
opacity: 0;
}
}
/*----------アコーディオン----------*/
.accordion {
position: relative;
}
/* ボタン */
.accordion-btn {
bottom: calc(-10*(100vw / 390));
color: #8CCD9F;
cursor: pointer;
display: inline-block;
font-size: calc(12*(100vw / 390));
left: 0;
margin: auto;
/* padding: 5px 15px; */
position: absolute;
right: 0;
text-align: center;
transition: all .2s;
width: fit-content;
z-index: 1;
font-weight: 500;
}
/* 続きを読むボタンの表記 */
.accordion-btn::after {
content: "MORE +";
}
.accordion-text {
overflow: hidden; /* テキストを隠す */
position: relative;
}
/* 最初に見えてるテキストエリアの高さ */
.accordion-text.is-hide {
height: 110px;
}
/* テキストをグラデーションで隠す */
.accordion-text::before {
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 50%, #fff 100%);
bottom: 0;
content: "";
height: calc(50*(100vw / 390)); /* グラデーションで隠す高さ */
position: absolute;
width: 100%;
}
/* 閉じるボタンの位置 */
.accordion-btn.is-show {
bottom: calc(-10*(100vw / 390));
}
/* 閉じるボタンの表記 */
.accordion-btn.is-show::after {
content: "CLOSE -";
/* bottom: calc(12*(100vw / 390)); */
}
/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
.accordion-btn.is-show + .accordion-text::before {
display: none;
}
.lp-page .bg-blue .accordion-text::before {
background: -webkit-linear-gradient(top, rgba(230, 241, 247, 0) 0%, rgba(230, 241, 247, .9) 50%, rgba(230, 241, 247, .9) 50%, rgb(230, 241, 247) 100%);
}
.lp-page .bg-green .accordion-text::before {
background: -webkit-linear-gradient(top, rgba(233, 248, 237, 0) 0%, rgba(233, 248, 237, .9) 50%, rgba(233, 248, 237, .9) 50%, rgb(233, 248, 237) 100%);
}
.text_wrapper{
position: relative;
/* margin-bottom: 20px; */
/* padding: 0 0 calc(30 * (100vw / 390)); */
/* border: solid 1px; */
height: auto;
overflow: hidden;
}
.show_more{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
padding-top: calc(80 * (100vw / 390));
text-align: center;
/* line-height: 30px; */
background: linear-gradient(to bottom, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);
cursor: pointer;
/* z-index: 8; */
}
.open .show_more {
background: transparent;
}
.show_more:before {
/* border-right: 3px solid #0288d1; */
/* border-top: 3px solid #0288d1; */
content: "VIEW MORE +";
/* width: auto; */
/* height: auto; */
font-size: calc(13 * (100vw / 390));
transform: translate(-50%, 0);
/* left: 50%; */
/* bottom: 0; */
color: #D796BA;
/* position: absolute; */
font-weight: 500;
line-height: 1;
}
.active .show_more:before {
/* -webkit-transform: rotate(-45deg); */
/* transform: rotate(-45deg); */
content: "CLOSE −";
bottom: calc(0 * (100vw / 390));
}
.lp-page .bg-blue .show_more {
background: linear-gradient(to bottom, rgb(229, 241, 247, 0) 0%, rgb(229, 241, 247, 0.8) 30%, rgb(229, 241, 247, 1) 70%);
/* background: rgb(229 241 247); */
/* padding-top: 0; */
/* height: calc(30*(100vw / 390)); */
}
.lp-page .bg-blue .show_more:before {
font-size: calc(12*(100vw / 390));
}
.lp-page .cont-area .show_more {
/* padding-top: calc(30*(100vw / 390)); */
/* height: calc(20*(100vw / 390)); */
}
.lp-page .massage-area .show_more {
/* background: linear-gradient(to bottom, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.8) 30%, rgb(255, 255, 255, 1) 70%); */
/* height: calc(50 * (100vw / 390)); */
/* padding-top: 0; */
}
.lp-page .massage-area .text_wrapper.active.open .show_more {
/* height: auto; */
}
.lp-page .bg-green .show_more {
background: linear-gradient(to bottom, rgb(233, 247, 237, 0.8) 0%, rgb(233, 247, 237, 1) 70%);
/* background: rgb(233 247 237); */
}
@media (min-width: 769px) {
.show_more {
/* height: 8rem; */
padding-top: 8rem;
}
.show_more:before {
font-size: 1.4rem;
}
.text_wrapper {
/* padding-bottom: 3rem; */
}
}
/*------------ modal slider ------------*/
body.no_scroll {
height: 100vh;
overflow: hidden;
}
.lp-page .modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1004;
background: rgb(248 241 245 / 90%);
/* transition: opacity .3s; */
--webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.lp-page .modal *{
z-index: 1004;
}
.lp-page .modal__content {
position: relative;
width: 100vw;
margin: 0 auto;
padding: 0;
-ms-overflow-style: none;
scrollbar-width: none;
box-sizing: border-box;
overflow: scroll;
/* filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .16)); */
top: 50%;
transform: translate(0, -50%);
}
.lp-page .modal__content::-webkit-scrollbar {
display: none;
}
.lp-page .modal_blk_inner{
position: relative;
}
.lp-page .btn-close {
position: absolute;
width: 2.4rem;
height: 2.4rem;
transition: .3s;
top: 2rem;
right: 2rem;
z-index: 1005;
cursor: pointer;
left: 0;
right: 0;
transform: translateX(21rem);
margin: auto;
}
.lp-page .item_sec .btn-close{
left: 0;
right: 0;
transform: translateX(22rem);
margin: auto;
}
.lp-page .btn-close::before,
.lp-page .btn-close::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 2.7rem;
height: 2px;
background: #D796BA;
content: "";
transition: .3s;
}
.lp-page .btn-close::after {
width: 2px;
height: 2.7rem;
}
.lp-page .modal__content .slick-prev{
width: 4rem;
height: 4rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: translateX(-26rem);
z-index: 1005;
}
.lp-page .modal__content .slick-prev:before{
content: '';
display: block;
width: 1.5rem;
height: 1.5rem;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #D796BA;
}
.lp-page .modal__content .slick-next{
width: 4rem;
height: 4rem;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: translateX(26rem);
z-index: 1005;
position: absolute;
}
.lp-page .modal__content .slick-next:before{
content: '';
display: block;
width: 1.5rem;
height: 1.5rem;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
color: #D796BA;
}
.lp-page .modal__content .slick-track {
display: flex;
}
.lp-page .modal__content .slick-slide {
height: auto !important;
width: 48rem;
border: 1px solid #D796BA;
margin: 0 2.5rem;
background: #fff;
padding: 3rem 4rem;
max-height: 80vh;
overflow-y: scroll;
}
.lp-page .slick-track {
display: flex;
}
.lp-page .slick-slide {
height: auto !important;
}
.lp-page .modal__content .item-img {
width: 30rem;
margin: 0 auto 2rem;
}
@media (max-width: 768px) {
.lp-page .btn-close{
width: 1.6rem;
height: 1.6rem;
transform: translateX(12.5rem);
top: 1.2rem;
}
.lp-page .btn-close::before{
width: 2.2rem;
}
.lp-page .btn-close::after{
height: 2.2rem;
}
.lp-page .item_sec .btn-close{
transform: translateX(16.5rem);
top: 4rem;
}
.lp-page .modal_blk_inner{
overflow-y: scroll;
overflow-x: hidden;
}
.lp-page ul.modal_list{
width: 39rem;
}
.lp-page .modal__content .slick-prev{
width: 3rem;
height: 3rem;
transform: translateX(-15rem);
top: 14rem;
bottom: auto;
}
.lp-page .modal__content .slick-prev:before{
width: 2rem;
height: 2rem;
}
.lp-page .modal__content .slick-next{
width: 3rem;
height: 3rem;
transform: translateX(15rem);
top: 14rem;
bottom: auto;
}
.lp-page .modal__content .slick-next:before{
width: 2rem;
height: 2rem;
}
.lp-page .modal__content .slick-slide {
width: calc(290*(100vw / 390));
padding: calc(20*(100vw / 390));
margin: 0 calc(6*(100vw / 390));
max-height: calc(550*(100vw / 390));
}
.lp-page .modal__content .item-img {
width: calc(200*(100vw / 390));
margin-bottom: calc(10*(100vw / 390));
}
.lp-page .modal__content .slick-arrow {
display: none !important;
}
.lp-page .modal__content .item-detail {
font-size: calc(13*(100vw / 390));
}
.lp-page .modal__content .item-name {
font-size: calc(14*(100vw / 390));
margin: calc(8*(100vw / 390)) auto calc(10*(100vw / 390));
}
.lp-page .modal__content .item-price {
font-size: calc(18*(100vw / 390));
}
.lp-page .cv-btn {
font-size: calc(12*(100vw / 390));
width: calc(76*(100vw / 390));
height: calc(28*(100vw / 390));
line-height: calc(28*(100vw / 390));
}
#section03 .illust {
/* position: relative; */
/* top: auto; */
width: 15rem;
}
#section03 .illust img {
/* width: calc(260 * (100vw / 390)); */
/* margin: calc(-20 * (100vw / 390)) calc(15 * (100vw / 390)) calc(-5 * (100vw / 390)) auto; */
}
.lp-page .cont-area .illust p {
/* width: 100%; */
}
.lp-page .cont-area .cate-ttl {
display: block;
margin-bottom: calc(15 * (100vw / 390));
}
#sec03-cate04 {
/* height: calc(590 * (100vw / 390)); */
}
#section04 .item-area {
display: block;
width: 100%;
margin: 5rem auto 0;
}
#section04 .item-txtarea {
width: 100%;
}
.lp-page .item-area .sub-ttl img {
/* height: calc(45 * (100vw / 390)); */
/* margin: 0 auto calc(15 * (100vw / 390)); */
}
#section04 .item-area h3 img {
height: 7rem;
margin: 3rem auto 1.5rem;
}
#section04 .item-txtarea .brand-txt {
font-size: calc(13 * (100vw / 390));
margin: 0 2rem;
}
#section04 .item-mv {
width: 32rem;
margin: 2rem auto 0;
}
#sec03-cate01 .item-mv .modal-link li:nth-child(5) {
top: calc(137*(100vw / 390));
right: calc(23*(100vw / 390));
}
#sec03-cate02 .item-mv .modal-link li:nth-child(4) {
bottom: 8rem;
right: 2.5rem;
}
#sec03-cate02 .item-mv .modal-link li:nth-child(5) {
top: calc(80*(100vw / 390));
right: calc(60*(100vw / 390));
}
#sec03-cate03 .item-mv .modal-link li:nth-child(4) {
bottom: 5rem;
right: 5rem;
}
#sec03-cate03 .item-mv .modal-link li:nth-child(5) {
top: calc(190*(100vw / 390));
right: calc(120*(100vw / 390));
}
#sec03-cate04 .item-mv .modal-link li:nth-child(4) {
bottom: 6rem;
right: 8.5rem;
}
#sec03-cate04 .item-mv .modal-link li:nth-child(5) {
top: calc(110*(100vw / 390));
right: calc(74*(100vw / 390));
}
#sec04-cate01 .item-mv .modal-link li:nth-child(4) {
top: calc(120*(100vw / 390));
right: calc(110*(100vw / 390));
}
#sec04-cate01 .item-mv .modal-link li:nth-child(5) {
bottom: calc(50*(100vw / 390));
right: calc(27*(100vw / 390));
}
#sec04-cate01 .item-mv .modal-link li:nth-child(6) {
bottom: calc(20*(100vw / 390));
right: calc(36*(100vw / 390));
}
#sec04-cate02 .item-mv .modal-link li:nth-child(3) {
top: 11.5rem;
right: 7.5rem;
}
#sec04-cate02 .item-mv .modal-link li:nth-child(4) {
bottom: calc(110*(100vw / 390));
left: calc(279*(100vw / 390));
}
#sec04-cate02 .item-mv .modal-link li:nth-child(5) {
bottom: calc(60*(100vw / 390));
right: calc(127*(100vw / 390));
}
#sec04-cate02 .item-mv .modal-link li:nth-child(6) {
bottom: calc(60*(100vw / 390));
right: calc(54*(100vw / 390));
}
#sec04-cate03 .item-mv .modal-link li:nth-child(1) {
top: 12rem;
left: 4.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(2) {
top: 12rem;
right: 17rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(3) {
top: 12rem;
right: 7rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(4) {
bottom: 7rem;
left: 8.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(5) {
bottom: 7rem;
right: 8.5rem;
}
#sec04-cate03 .item-mv .modal-link li:nth-child(6) {
bottom: calc(20*(100vw / 390));
right: calc(40*(100vw / 390));
}
#section02 .item-inner {
width: 36rem;
margin: 0 auto 5rem;
}
#section02 .item-main {
display: flex;
gap: 1.5rem;
align-items: center;
}
#section02 .item-inner .item-img {
width: 12rem;
height: 18rem;
/* mix-blend-mode: multiply; */
}
#section02 .item-inner .item-txt {
width: 22.5rem;
}
#section02 .item-inner .brand-name img {
height: 1.6rem;
}
#section02 .item-inner .item-name {
margin: .5rem auto;
}
#section02 .item-inner .item-detail {
margin-bottom: 1rem;
font-size: 1.2rem;
line-height: 1.6;
}
#section02 .item-inner .item-price span {
font-size: 1.2rem;
}
#section02 .item-ttl dd {
font-size: 2rem;
margin: .5rem auto 1rem;
}
#section02 .item-inner .review-list::before {
left: 8rem;
}
#section02 .item-inner .review-list::after {
left: 8rem;
}
#section02 .item-inner .review-list {
padding: 1rem 1rem .5rem;
}
#section02 .item-inner .review-list li {
margin-bottom: .5rem;
}
#section02 .cv-btn {
width: 7rem;
}
.lp-page #section01.cont-area h2 {
/* font-size: 2rem; */
}
#section03 .item-area h4 span {
font-size: 1.4rem;
}
#sec03-cate05 {
/* height: calc(590*(100vw / 390)); */
}
#sec03-cate06 {
/* height: calc(720*(100vw / 390)); */
}
#sec03-cate07 {
/* height: calc(555*(100vw / 390)); */
}
#sec03-cate08 {
/* height: calc(575*(100vw / 390)); */
}
#section04 .illust {
position: relative;
top: auto;
left: 2rem;
width: 36rem;
margin-bottom: 2rem;
}
#section04 .illust img {
width: 30rem;
}
#section04 .item-area .sub-ttl img {
height: 3rem;
}
.lp-page .cont-area .brand-txt .ttl-txt {
font-size: 1.8rem;
text-align: center;
}
.lp-page .cont-area .brand-txt {
font-size: 1.3rem;
line-height: 1.8;
}
#section05 .illust {
position: relative;
top: auto;
width: 35rem;
}
#section02 .ttl-ico img {
width: 6rem;
}
#section02 .ttl-ico {
top: -5rem;
left: 4rem;
}
#section02 .illust {
position: relative;
top: auto;
/* text-align: left; */
right: 5rem;
/* text-align: right; */
}
#section02 .staff-list {
width: 36rem;
margin: 3rem auto 4rem;
}
#section02 .staff-list img {
width: 6rem;
}
#section02 .staff-list p {
font-size: 1.1rem;
line-height: 1.4;
}
#section02 .staff-list li {
width: 7.5rem;
}
#section02 .staff-list p span {
font-size: 1rem;
}
#section05 .illust {
position: relative;
top: auto;
left: 3rem;
}
#section05 .brand-txtarea h3 {
font-size: 2rem;
margin-bottom: 1rem;
}
#section05 .brand-txtarea ul {
padding: 0;
}
#section05 .brand-txtarea li span {
font-size: 1.4rem;
}
#section05 .item-mv {
width: 35rem;
}
#section02 .item-inner .item-price {
width: 15rem;
font-size: 1.6rem;
}
.fixed-nav.m_fixed .nav-list li:nth-child(6) a {
width: calc(195 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:nth-child(7) a {
width: calc(115 * (100vw / 390));
}
.fixed-nav.m_fixed .nav-list li:nth-child(8) a {
width: calc(110 * (100vw / 390));
}
#sec03-cate05 .item-mv .modal-link li:nth-child(4) {
bottom: 8rem;
right: 7rem;
}
#sec03-cate06 .item-mv .modal-link li:nth-child(4) {
bottom: 9rem;
right: 7rem;
}
#sec03-cate08 .item-mv .modal-link li:nth-child(4) {
top: 9rem;
right: 9rem;
}
#section05 .item-mv .modal-link li:nth-child(1) {
top: 11rem;
left: 10.5rem;
}
#section05 .item-mv .modal-link li:nth-child(2) {
bottom: 19rem;
left: 10rem;
}
#section05 .item-mv .modal-link li:nth-child(3) {
bottom: 9rem;
right: 7.5rem;
}
#section05 .item-mv .modal-link li:nth-child(4) {
top: 19rem;
left: 12rem;
}
#section05 .item-mv .modal-link li:nth-child(5) {
top: 18rem;
left: 17rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(1) {
bottom: 7rem;
left: 8.5rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(2) {
bottom: 7rem;
right: 7.5rem;
}
#sec04-cate04 .item-mv .modal-link li:nth-child(3) {
bottom: 7.5rem;
right: 7.5rem;
}
#section03 .ttl-skin .illust {
right: -1rem;
top: -6rem;
}
#section03 h3 {
font-size: 3.5rem;
margin: 5rem 0 2rem 2rem;
text-align: left;
}
#section03 .item-inner {
display: block;
}
#section03 .ttl-mood .illust {
right: 1rem;
top: -3rem;
}
#section03 .ttl-skin {
margin-top: -2rem;
}
#section04 .illust-img {
width: 17rem;
left: -.5rem;
top: -4.5rem;
}
#sec04-cate04 .illust-img {
top: 25rem;
width: 10rem;
left: auto;
right: -.5rem;
}
#sec04-cate05 .illust-img {
left: 0;
top: 25rem;
display: none;
}
#sec04-cate07 .illust-img {
left: 0;
top: -3rem;
}
#section02 h2 span {
font-size: 1.3rem;
}
#section02 .intro-txt {
/* width: 35rem; */
/* margin: 2rem auto 4rem; */
/* font-size: 1.2rem; */
/* padding: 1.5rem; */
/* text-align: left; */
}
#section02 .item-ttl dt {
width: 6rem;
}
#section02 .item-list {
display: block;
}
#section02 .item-list li {
width: 100%;
margin-bottom: 2.5rem;
}
#section02 .item-list .text_wrapper {
font-size: 1.1rem;
margin-top: 1.5rem;
}
#section02 .ttl-area .illust {
width: 16rem;
/* right: -.5rem; */
/* top: auto; */
/* bottom: -8rem; */
}
#section05 {
padding: 5rem 0 6rem;
margin-bottom: 0;
}
#section02 .item-inner .item-img img {
width: 100%;
height: auto;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(1) {
top: 3rem;
left: 7rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(2) {
bottom: 17rem;
left: 10.5rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(3) {
bottom: 5rem;
left: 6.5rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(1) {
bottom: 11rem;
left: 3rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(2) {
bottom: 10rem;
left: 9.5rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(3) {
bottom: 10rem;
left: 17rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(4) {
top: 2rem;
right: 4rem;
}
#sec04-cate06 .item-mv .modal-link li:nth-child(5) {
bottom: 7rem;
right: 4rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(1) {
bottom: 8rem;
left: 4.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(2) {
bottom: 5rem;
right: 6.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(3) {
bottom: 5rem;
left: 14.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(4) {
top: 8.5rem;
left: 6.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(5) {
top: 6rem;
right: 10.5rem;
}
#sec04-cate07 .item-mv .modal-link li:nth-child(6) {
top: 10rem;
right: 2.5rem;
}
#section05 .item-mv .modal-link li:nth-child(6) {
top: 12rem;
right: 7rem;
}
#section05 .item-mv .modal-link li:nth-child(7) {
bottom: 8rem;
right: 7rem;
}
#section05 .item-mv .modal-link li:nth-child(8) {
bottom: 9.5rem;
left: 13.5rem;
}
#section05 .item-mv .modal-link li:nth-child(9) {
bottom: 12rem;
left: 7.7rem;
}
#section05 .item-mv .modal-link li:nth-child(10) {
bottom: 12rem;
left: 4rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(4) {
top: 4rem;
right: 5.5rem;
}
#sec04-cate05 .item-mv .modal-link li:nth-child(5) {
bottom: 9rem;
right: 5.5rem;
}
}
body.no_scroll #header_bottom {
display: none;
}