@charset "utf-8";
:root {--main-color: ;}
:root {--sub-color: ;}
:root {--text-color: ;}

.pcnone{display: none;}
.spnone{display: block;}

@media screen and (min-width: 820px) {
.pcnone{display: block;}
.spnone,#fv.spnone{display: none;}
}

.tabnone{display: none;}

@media screen and (max-width: 1023px) {
.tabnone{display: block;}
}


* {
box-sizing: border-box;
}
ul, li, ol, dl, dt, dd {
width: 100%;
list-style: none;
vertical-align: top;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6{
padding: 0;
margin: 0;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
border: 0;
color: #000;
width: auto;
display: block;
cursor: pointer;
}

img {
vertical-align: bottom;
border: none;
width: 100%;
height: auto;
box-sizing: border-box;
object-fit: cover;
pointer-events: none;
}

html {
line-height: 1.8;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS PGothic", sans-serif;
font-size: 62.5%;
/* 10px */
margin: 0;
padding: 0;
color: #000;
font-feature-settings: "palt";
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}

body {
width: 100%;
letter-spacing: 0;
font-size: 14px;
font-size: 1.4rem;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
vertical-align: top;
font-feature-settings: "palt";
height: 100%;
word-break: break-all;
}

section{
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 8rem 0;
}
.inner{
width: 94%;
max-width: 980px;
margin: 0 auto;
position: relative;
}

@media screen and (max-width: 819px) {
section{
padding: 4rem 0;
}
.inner{
width: 100%;
padding: 0 1.5rem;
}
}

/*font*/

.zen {
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 100;
font-style: normal;
line-height: 1;
}

/*Title*/
P{
margin: 0;
}
h2{
width: fit-content;
font-size: 5rem;
margin: 0 auto 2rem;
}

h3{
width: fit-content;
font-size: 4rem;
margin: 0 auto 3rem;
font-weight: normal;
text-align: center;
}
sup{
font-size: 1.0rem;
padding-right: 0.5rem;
}

@media screen and (max-width: 819px) {
h2{
font-size: 3.6rem;
}
h3{
font-size: 2.4rem;
text-align: left;
line-height: 1.6;
}
}
/*flex系*/
.flex_line2,
.flex_line3,
.flex_line4,
.flex_line5 {
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: start;
align-items: start;
}
.flex_line2 li,
.flex_line2 dd{
width: calc(100% / 2 - 1.5rem);
}

.flex_line3 li,
.flex_line3 dd{
width: calc(100% / 3 - 1.5rem);
}

.flex_line4 li,
.flex_line4 dd{
width: calc(100% / 4 - 1.5rem);
}

.flex_line5 li,
.flex_line5 dd{
width: calc(100% / 5 - 1.5rem);
}
@media screen and (max-width: 819px) {
.flex_line2,
.flex_line3,
.flex_line4,
.flex_line5 {
flex-wrap: wrap;
}
.flex_line2 li,
.flex_line2 dd,
.flex_line3 li,
.flex_line3 dd,
.flex_line4 li,
.flex_line4 dd,
.flex_line5 li,
.flex_line5 dd{
width: calc(100% / 1 - 0rem);
margin-bottom: 2rem;
}
.flex_line2 li:last-child,
.flex_line2 dd:last-child,
.flex_line3 li:last-child,
.flex_line3 dd:last-child,
.flex_line4 li:last-child,
.flex_line4 dd:last-child,
.flex_line5 li:last-child,
.flex_line5 dd:last-child{
margin-bottom: 0rem;
}
.flex_line2.spReve{
flex-direction: column-reverse;
}
}

/*==================================================================================================*/
/*-*/

.headeritem {
position: relative;
}
.headeritem::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
}


header{
width: 393px;
height: 45px;
position: fixed;
top: 0;
z-index: 1000;
transition: .5s;
}
header.movement{
width: 100%;
background: rgba(255,255,255,0.50);
}
h1{
width: 138px;
margin: 0 0 0 10px;
position: relative;
z-index: 1;
}
h1 a{
display: flex;
align-items: center;
height: 45px;
}
h1 img:nth-child(2){
display: none;
}
.pcNav h1 img:nth-child(1){
display: none;
}
.pcNav h1 img:nth-child(2){
display: block;
}
nav{
width: 100%;
height: 100vh;
padding: 100px 0;
background: linear-gradient(90deg, rgb(150, 183, 243), rgb(214, 119, 179));
position: fixed;
top: -400vh;
transition: .5s;
right: 0;
}
.pcNav nav{
top: 0;
}
nav .inner{
width: 90%;
max-width: 320px;
}
nav .sns{
margin: 40px 0 0;
}
/*ボタン*/
.openbtn1{
display: block;
cursor: pointer;
width: 45px;
height: 45px;
background: #E578AC;
position: fixed;
top: 0;
right: 0;
z-index: 10000;
}
.openbtn1 span:nth-of-type(1),
.openbtn1 span:nth-of-type(2),
.openbtn1 span:nth-of-type(3){
display: inline-block;
transition: all .4s;
width: 23px;
height: 3px;
background: #FFF;
position: absolute;
left: 12px;
}
.openbtn1 span:nth-of-type(1) { top:14px;}
.openbtn1 span:nth-of-type(2) { top:22px;}
.openbtn1 span:nth-of-type(3) { top:30px;}

.pcNav .openbtn1{
background: #FFF;
}
.pcNav .openbtn1 span:nth-of-type(1),
.pcNav .openbtn1 span:nth-of-type(2),
.pcNav .openbtn1 span:nth-of-type(3){
background: #E578AC;
}
.pcNav .openbtn1 span:nth-of-type(1) {
top: 21px;
transform: rotate(-45deg);
}
.pcNav .openbtn1 span:nth-of-type(2){
opacity: 0;
}
.pcNav .openbtn1 span:nth-of-type(3){
top: 21px;
transform: rotate(45deg);
}
@media screen and (min-width: 821px) {
header.movement{
background: none;
}
.openbtn1{
box-shadow: 0 0 4px rgba(255,255,255,0.40);
}
}
/*==================================================================================================*/
/*-*/

.navList_pcbox{
display: flex;
justify-content: flex-start;
}

.navList_pcbox ul{
width: 330px;
}

.navList{
margin: 0 auto;
}
.navList li{
padding: 5px 0;
margin: 0 0 16px;
}
.navList li a{
font-size: 26px;
font-weight: 700;
line-height: 1;
color: #FFF;
opacity: 1;
transition: .5s;
}
.navList li a:hover{
opacity: 0.7;
}
.navList li a span{
display: block;
font-size: 12px;
font-weight: 400;
}
.sns{
display: flex;
width: 60px;
margin: 0 0 20px;
}
.sns a{
display: block;
width: 24px;
opacity: 1;
transition: .5s;
}
.sns a:hover{
opacity: 0.7;
}
.sns a:last-child{
margin: 0 0 0 10px;
}

/*==================================================================================================*/
/*info*/

#info{
color: #b6569c;
}

#info .inner{
width: 90%;
/*width: 80%; バナー２つの時*/
max-width: max-content;
}

#info h2{
padding: 0 8rem 3rem;
border-bottom: 1px solid #b6569c;
margin-bottom: 3rem;
}
#info h2 + P{
text-align: center;
padding-bottom: 3rem;
font-size: 2rem;
}

#info a {
color: #b6569c;
text-decoration: underline;
}
#info span.new {
display: inline-block;
background-color:#b6569c;
color: #fff;
padding: 2px 10px;
font-size: 1.35rem;
}

@media screen and (max-width: 819px) {
#info h2{
padding: 0 0.5rem 3rem;
}
#info .inner{
width: 100%;
max-width: inherit;
}
#info h2 + P{
padding-top: 0;
text-align: left;
}
}
#info .info_thum{
vertical-align: bottom;
border: none;
width: auto;
max-width: 100%;
height: auto;
box-sizing: border-box;
object-fit: cover;
pointer-events: none;
}
/*==================================================================================================*/
/*concept*/

#concept{
position: relative;
color: #FFF;
background-image: url(../img/back-concept.png);
background-repeat: no-repeat;
background-position: top center;
background-size: 100%;
}
#concept::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgb(39, 47, 82) 45%,
rgb(239, 239, 247) 75%
);
top:0;
z-index: -1;
}
#concept .inner{
width: 80%;
max-width: max-content;
}

#concept h2{
padding: 0 8rem 3rem;
border-bottom: 1px solid #FFF;
margin-bottom: 3rem;

}
#concept P{
text-align: center;
padding-top: 3rem;
font-size: 2rem;
}

@media screen and (max-width: 819px) {
#concept h2{
padding: 0 0.5rem 3rem;
}
#concept .inner{
width: 100%;
padding: 0 1rem;
}
#concept P{
padding-top: 0;
text-align: left;
}
}

#Ex{
padding: 8rem  0 4rem;
}
#Ex h2{
line-height: 1.2;
font-size: 7rem;
border-bottom: 0;
}
#Ex h2 span{
width: fit-content;
font-size: 5rem;
color: #9099c8;
font-weight: 100;
display: block;
}

@media screen and (max-width: 819px) {
#Ex h2{
font-size: 5.5rem;
padding: 0;
margin-bottom: 0;
}
#Ex h2 span{
font-size: 4rem;
margin: auto;
}
}


#Ex P{
text-align: left;
color: #000;
}
#Ex P span{
padding: 0.25rem;
background: linear-gradient(90deg, rgb(150, 183, 243), rgb(214, 119, 179));
}
#Ex .What h3{
color: #9099c8;
padding: 2rem 8rem;
border-top: 1px solid #9099c8;
border-bottom: 1px solid #9099c8;
margin-top: 6rem;
}
#Ex .What P{
text-align: center;
color: #000;
}
#Ex .What .InImg{
width: fit-content;
margin: 3rem auto;
}

@media screen and (max-width: 520px) {
#Ex .What P{
text-align: left;
}
#Ex .What .InImg{
margin: 3rem auto 0;
}
#Ex .flex_line3 li{
text-align: center;
}
#Ex .flex_line3 li img{
margin: 0 auto;
width: 80%;
}
}


#movieArea {
margin: 3rem auto 0;
position: relative;
width: auto;
max-width: 980px;
}

@media screen and (max-width: 520px) {
#movieArea {
position: relative;
width: 96vw;
}
}
#movieArea > div {
overflow: hidden;
position: relative;
aspect-ratio: 16 / 9;
border: 1px solid #fff;
border-radius: 1em;
}
#movieArea > div iframe {
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 100%;
height: 100%;
}



/*==================================================================================================*/
/*milk*/

#milk{
padding: 0;
position: relative;
background-image: url(../img/back-milk.png);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
height: auto;
min-height: 732px;
}

#milk .InImg{
position: absolute;
bottom: 0;
left: 0;
}
#milk .inner{
width: 70%;
max-width: inherit;
height: auto;
min-height: 732px;
}
#milk .inner .Dit{
position: absolute;
background-image: url(../img/img-milk.png);
background-repeat: no-repeat;
background-position: bottom left;
bottom: 0;
right: 0;
width: 606px;
height: 682px;
display: block;
}
#milk .inner .Dit .DitTxt{
position: absolute;
bottom: 4rem;
right: 9rem;
}

#milk .inner .Dit .DitTxt h4 {
font-size: 3rem;
}

#milk .inner .Dit .DitTxt P {
text-align: left;
font-size: 1.6rem;
font-weight: normal;
margin-bottom: 0rem;
}

#milk .inner .Dit .DitTxt P.price {
font-weight: bold;
font-size: 1.8rem;
padding: 2rem 0;
}

.SpInImg{
display: none;
}

/* === タブレット用 === */
@media screen and (max-width: 1600px) {
#milk{
background: none;
min-height: inherit;
}
#milk .inner{
display: none;
}
.SpInImg{
display: block;
}
#milk .InImg{
display: none;
}
}

/*==================================================================================================*/
/*point*/

#point{
position: relative;
background-color: #eff6fe;
padding-bottom: 0;
}

#point::before{
position: absolute;
top: 0;
content: '';
background-image: url(../img/back-point.png);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 100%;
height: 1062px;
}

#point::after{
position: absolute;
bottom: 0;
content: '';
background-image: url(../img/back-point_ft.png);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
width: 100%;
height: 1037px;
}

#point .inner{
z-index: 1;
padding-bottom: 12vw;
}
#point h2{
color: #b6569c;
padding: 0 8rem 3rem;
border-bottom: 1px solid #b6569c;
margin-bottom: 3rem;
}
#point h3{
color: #b6569c;
font-weight: bold;
}
#point P{
text-align: center;
font-weight: 700;
font-size: 2.2rem;
}

@media screen and (max-width: 819px) {
#point h2{
padding: 0 0.5rem 3rem;
}
#point P{
text-align: left;
font-size: 1.8rem;
}
}

#point ul li,
.Point5{
background-color: #FFF;
padding: 3rem;
margin-bottom: 2rem;
}

#point ul.flex_line2{
margin-top: 3rem;
flex-wrap: wrap;
}
#point h4{
text-align: center;
color: #b6569c;
font-size: 5.4rem;
padding: 0 auto 2rem;
}
#point h5{
font-size: 2.2rem;
font-weight: 700;
text-align: center;
/*min-height: 9rem;*/
vertical-align: middle;
padding: 2rem 0;
line-height: 1.4;
}

#point li P,
#point .Point5 P{
font-size: 1.8rem;
text-align: left;
font-weight: normal;
}

#point .InImg{
padding-top: 3rem;
}

#point .Point5 .InImg .sp{
display: none;
}
@media screen and (max-width: 819px) {
#point h4{
font-size: 4rem;
}
#point h5{
min-height: inherit;
padding-bottom: 2rem;
}
#point .Point5 .InImg .pc{
display: none;
}
#point .Point5 .InImg .sp{
display: block;
}
}

#Muse{
position: relative;
z-index: 1;
}

#Muse .inner{
width: 95%;
max-width: 1300px;
}
#Muse .Name{
position: absolute;
top: 10rem;
left: 0;
width: 40%;
}
#Muse .Prof{
position: absolute;
top: 20rem;
right: 0;
width: fit-content;
}

#Muse .Prof P.sns{
display: flex;
align-items: center;
width: auto;
margin: 0;
padding: 1rem 0;
}

#Muse .Prof P.sns img{
width: 27px;
}
#Muse .Prof P.sns A{
width: fit-content;
margin-right: 1rem;
}
#Muse .Prof P.sns A:last-child{
margin-right: 0;
}
A.BlkLink{
background-image: url(../img/icon-link.png);
background-position: right center;
background-repeat: no-repeat;
padding-right: 3rem;
width: fit-content;
}
#Muse .InImg{
width: 100%;
margin: auto;
}

#Muse .Name h2{
width: 100%;
padding: 0 0 3rem 0;
}
#Muse .Name h3{
margin-left: 0;
font-size: 2rem;
color: #000;
}
#Muse .Name P,
#Muse .Prof P{
text-align: left;
font-size: 1.4rem;
font-weight: normal;
}
#Muse .Prof h6{
font-size: 2rem;
font-weight: 700;
padding-bottom: 2rem;
}

@media screen and (max-width: 1200px) {

#Muse .inner{
padding-bottom: 30rem;
}
#Muse .Name h2{
width: fit-content;
padding: 0 8rem 3rem;
margin: auto;
}
#Muse .Name h3{
text-align: center;
width: fit-content;
margin: auto;
padding: 3rem 0;
}
#Muse .Name{
position: inherit;
top: 0;
width: 100%;
margin-bottom: 3rem;
}
#Muse .Prof{
position: inherit;
top:0
}
#Muse .InImg{
position: absolute;
width: 100%;
margin: auto;
bottom: 0;
}
}

/*==================================================================================================*/
/*product*/

#product{
background-color: #FFF;
padding-top: 0;
}

#product .inner{
padding-top: 6vw;
}
#product h2{
color: #b6569c;
padding: 0 8rem 3rem;
border-bottom: 1px solid #b6569c;
margin-bottom: 3rem;
}
#product h3{
color: #b6569c;
font-weight: bold;
}
#product P{
text-align: center;
font-weight: 700;
font-size: 2.2rem;
margin-bottom: 6rem;
}

#product ul{
border-top: 1px solid #d8d2e0;
padding: 6rem 0;
}
#product ul li h4{
font-size: 3rem;
}
#product ul li P{
text-align: left;
font-size: 1.6rem;
font-weight: normal;
margin-bottom: 0rem;
}

#product ul li P.price{
font-weight: bold;
font-size: 1.8rem;
padding: 2rem 0;
}

#product ul li:first-child{
text-align: center;
}
#product ul li img{
width: fit-content;
margin: auto;
}
#product ul li A{
width: fit-content;
display: block;
margin-top: 3rem;
}

#product .Aten{
font-size: 1.2rem;
}
#product .Aten span {

padding-right: 1rem;
}
#product .Aten sup {
padding-right: 0.5rem;
display: inline-block;
}

@media screen and (max-width: 819px) {
#product P{
text-align: left;
font-size: 1.8rem;
}
#product ul li A{
margin: 3rem auto 0;
}
#product ul li h4{
font-size: 2.6rem;
}
}
/*==================================================================================================*/
/*shop*/

#shop{
color: #FFF;
background: #E578AC;
}
#shop ul{
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0;
}
#shop ul::-webkit-scrollbar {
width: 8px;
background-color: #FFF;
border-radius: 3px;
}
#shop ul::-webkit-scrollbar-thumb {
background: #DB498F;
border-radius: 3px;
}
#shop ul li{
width: calc((100% - 9%) / 4);
padding: 10px 0 5px;
border-bottom: solid 1px #FFF;
margin-right: 3%;
}
#shop ul li:nth-child(4n) {
margin-right: 0;
}
#shop ul li h4{
font-size: 14px;
line-height: 1;
}
#shop ul li p{
font-size: 12px;
}
#shop ul li p::before{
display: inline-block;
content: "";
width: 8.25px;
height: 10.12px;
background: center / contain no-repeat url("../img/icon_map.svg");
margin: 0 2px 0 0;
}

#shop ul li a{
color:#fff;
}

p.shop_aren {
margin: 1rem 0;
font-size: 10px;
color: #FFFFFF;
}

@media screen and (max-width: 819px) {
#shop ul li{
width: calc((100% - 5%) / 2);
padding: 10px 0 5px;
border-bottom: solid 1px #FFF;
margin-right: 5%;
}
#shop ul li:nth-child(2n) {
margin-right: 0;
}
}

/*==================================================================================================*/
/*movie*/

#movie{
color: #FFF;
background: #9099c8;
text-align: center;
}

#movie .inner{
width: 90%;
max-width: initial;
}

#movieArea2C {
margin: 3rem auto 3rem;
position: relative;
width: auto;
display: flex;
gap: 24px;
}

#movieArea2C .half {
margin: 3rem auto 0;
position: relative;
flex: 1;
}

@media screen and (max-width: 768px) {
#movieArea2C {
position: relative;

flex-direction: column;
margin: 3rem auto;
}
#movieArea2C .half {
position: relative;
flex: 1;
width: 90%;
}
}
#movieArea2C > div {
overflow: hidden;
position: relative;
aspect-ratio: 16 / 9;
border: 1px solid #fff;
border-radius: 1em;
}
#movieArea2C > div iframe {
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
/*==================================================================================================*/
/*contact*/

#contact{
color: #FFF;
background: #b6569c;
text-align: center;
}
#contact a{
color: #FFF;
}
#contact h3{
width: fit-content;
font-size: 2rem;
margin: 0 auto 1rem;
font-weight: normal;
text-align: center;
}

#contact .telno{
font-size: 2rem;
font-weight: 600;
line-height: 1.35;
padding-bottom: 3rem;
}

#contact .telno span{
font-size: 4rem;
font-weight: 600;
line-height: 1.35;
}

/*==================================================================================================*/
/*footer*/
footer{
background-color: #000;
padding: 4rem;
color: #FFF;
}
footer .inner {
width: 90%;
max-width: inherit;
}

footer .flex_line2 li:first-child{
width: 40%;
padding-right: 2rem;
}

footer .flex_line2 li:first-child img{
width: 100%;
max-width: 310px;
}

footer .flex_line2 li:last-child{
width: 100%;
max-width: 660px;
}

@media screen and (max-width: 819px) {
footer .inner {
width: 100%;
text-align: center;
}
footer .flex_line2 li:first-child{
width: 100%;
}
footer .flex_line2 li:last-child{
padding-top: 3rem;
width: 100%;
max-width: inherit;
}
}

footer dd A{
width: 100%;
color: #FFF;
display: block;
padding-top: 1rem;
}
footer dd P:first-child{
font-weight: bold;
padding-bottom: 1rem;
}

footer .inner img{
width: fit-content;
}

footer .inner .sns{
width: fit-content;
margin: 0 auto;
}
footer .inner .sns A{
width: 27px;
margin-left: 1rem;
}
footer .inner .sns A:first-child{
margin-left: 0rem;
}
footer .inner .sns img{
width: 100%;
}
/*ポップアップ*/
/*========= モーダル表示のためのCSS ===============*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
display: none;
}
.modal{
display: block;
position: fixed;
top: 0;
height: 100vh;
width: 100%;
opacity:0;
pointer-events: none;
transition: opacity 1s;
}
.modal.open{
opacity:1;
pointer-events: auto;
}
/*ポップアップ共通css*/
.modaal-container{
width: 90%;
max-width: 350px;
padding: 20px 0;
border-radius: 11px;
}
.modaal-content-container{
max-height: 80vh;
overflow: scroll;
padding: 0 !important;
}
.modaal-container [type="button"]{
margin: 0;
}
.modaal-wrapper .modaal-close{
width: 26px;
height: 26px;
background: #D9D9D9;
border-radius: 50%;
position: absolute !important;
top: -10px !important;
right: -5px !important;
}
.modaal-close:after,
.modaal-close:before{
width: 2px !important;
height: 12px !important;
border-radius: 0;
background: #696969 !important;
top: 7px !important;
left: 12px !important;
}
/**/
.privacyPop{
width: 80%;
margin: 0 auto;
}
.privacyPop h2{
font-size: 26px;
text-align: center;
letter-spacing: 0;
color: #E578AC;
margin: 0 0 20px;
}
.privacyPop h3{
font-size: 18px;
font-weight: 400;
margin: 0 0 10px;
}
.privacyPop h3 + p{
font-size: 12px;
line-height: 2;
margin: 0 0 30px;
}
.privacyPop li{
margin: 0 0 20px;
}
.privacyPop li h4{
font-size: 14px;
font-weight: 400;
margin: 0 0 10px;
}
.privacyPop li h4 + P{
font-size: 12px;
line-height: 2;
}
.privacyPop li + p{
font-size: 12px;
line-height: 1.8;
padding: 0 0 20px;
}