html,body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
color: #2d1e0a;
background-color: #4b3723;
font-feature-settings: "palt";
}
::selection {background: #ff9bc3; color: #FFF;}
::-moz-selection {background: #ff9bc3; color: #FFF;}
#main {
margin: 0 auto;
position: relative;
}
#main img {
width: 100%;
height: auto;
}

/*btn_float*/
.btn_float {
position: fixed;
bottom: 15px;
right: 15px;
width: 70px;
height: 70px;
z-index: 10
}
.btn_float img {
width: 100%;
height: auto;
}
.btn_float a {
display: block;
}
@media only screen and (min-width: 641px) {
.btn_float {
right: calc(50% - 172.5px);
}
}
@media only screen and (min-width: 1201px) {
.btn_float {
display: none;
}
}

/*mv*/
#mv {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
background: #FFDCDC;
background: linear-gradient(300deg,rgba(255, 240, 240, 1) 0%, rgba(255, 220, 220, 1) 100%);
padding-bottom: 50%;
}
#mv::after {
content: "";
width: 100%;
padding-bottom: 24%;
height: auto;
background: url("../img/bg_top.png") bottom center no-repeat;
background-size: 100% auto;
bottom: 0;
left: 0;
position: absolute;
}
#mv .mv_wrap {
padding-bottom: 50px;
}
#mv .inner {
width: auto;
padding: 0 20px;
}
#mv h1 {
width: 36%;
margin: 25px auto 10px;
}
/*scroll txt*/
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-66.66%);
}
}
@keyframes infinity-scroll-right {
from {
  transform: translateX(-66.66%);
}
  to {
  transform: translateX(0);
}
}
#main .loop_wrap {
width: 100%;
display: flex;
overflow: hidden;
background-color: #a58269;
padding: 3px 0;
}
#main .loop_list {
display: flex;
list-style: none;
padding: 0;
}
#main .loop-left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
#main .loop-right {
  animation: infinity-scroll-right 80s infinite linear 0.5s both;
}
#main .loop_list li {
font-family: "Montserrat", sans-serif;
width: 495px;
font-size: 20px;
color: #FFF;
}
#mv .cap {
font-size: 12px;
padding: 10px 0;
}
#mv .maininfo_wrap {
width: 100%;
position: relative;
padding: 15% 0 18%;
}
#mv .maininfo_wrap p {
font-size: 20px;
font-weight: bold;
text-align: center;
letter-spacing: 0.05em
}
#mv .maininfo_wrap p .date {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 26px;
letter-spacing: 0.1em
}
#mv .maininfo_wrap p .day {
font-size: 14px;
}
#mv .maininfo_wrap h2  {
margin: 20px auto;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 26px;
letter-spacing: 0.1em;
text-align: center;
}
#mv .maininfo_wrap h2 div  {
width: 64%;
margin: 0 auto 15px;
}
#mv .maininfo_wrap::before {
content: "";
width: 22%;
height: auto;
padding-top: 22%;
display: block;
background: url("../img/main_choco01.png") 0 0 no-repeat;
background-size: 100% auto;
position: absolute;
top: 10%;
right: 3%;
}
#mv .maininfo_wrap::after {
content: "";
width: 20%;
height: auto;
padding-top: 20%;
display: block;
background: url("../img/main_choco02.png") 0 0 no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 5%;
}
#mv .lead {
font-size: 15px;
line-height: 2;
text-align: center;
margin-bottom: 5%;
}
#mv .name {
font-size: 18px;
line-height: 1.25;
text-align: center;
font-weight: 500;
margin-top: 0.5em;
}
#mv .name span {
font-size: 12px;
margin-top: 1em;
}
#mv .price {
font-size: 30px;
line-height: 1.25;
text-align: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
margin-top: 0.5em;
}
#mv .price span {
font-size: 16px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: bold;
}

/*CTA*/
.cta_wrap {
width: 100%;
background-color: #FFF;
padding-bottom: 30px;
box-shadow: 0px 0px 15px 0px rgba(155, 124, 124, 0.7);
}
.cta_wrap .cta_date {
background-color: #a58269;
padding: 12px 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.cta_wrap .cta_date p {
color: #FFF;
font-weight: bold;
font-size: 14px;
margin: 0 5px;
}
.cta_wrap .cta_date p u {
text-decoration: underline;
text-underline-offset: 8px;
}
.cta_wrap .cta_date p span {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 26px;
letter-spacing: 0.075em
}
.cta_wrap .cta_body {
font-size: 16.8px;
font-weight: bold;
text-align: center;
padding: 15px 0;
}
.cta_wrap .cta_body span {
font-size: 16px;
font-weight: bold;
border: 1px solid #2d1e0a;
padding: 3px 5px;
margin-right: 5px;
}
.cta_wrap .cta_body strong {
font-size: 24px;
font-weight: bold;
}
.cta_wrap .btn_cta {
width: 90%;
margin: 0 auto;
}
.cta_wrap .btn_cta li a {
background-color: #ff9bc3;
font-size: 22px;
font-weight: bold;
display: block;
position: relative;
margin-bottom: 20px;
padding: 15px;
border-radius: 999px;
text-align: center;
}
.cta_wrap .btn_cta li a::before {
content: "";
display: block;
width: 14px;
height: 14px;
position: absolute;
top: 50%;
right: 15px;
transform: translate(-50%,-50%);
background: url("../img/ico_arrow.svg") center center no-repeat;
background-size: 100% auto;
}
.cta_wrap .cta_cap {
font-size: 14px;
line-height: 1.3;
text-align: center;
}

/*product*/
#product {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
background: #FFDCDC;
background: linear-gradient(45deg,rgba(255, 220, 220, 1) 25%, rgba(255, 240, 240, 1) 50%, rgba(255, 220, 220, 1) 75%);
padding-top: 10%;
padding-bottom: 10%;
}
#product h2 {
font-size: 30px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 0.075em;
text-align: center;
position: relative;
padding-top: 14%;
}
#product h2::before {
content: "";
width: 16%;
padding-top: 12%;
height: auto;
display: block;
background: url("../img/ico_diamond.svg") center center no-repeat;
background-size: 100% auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#product .product_ph {
margin: 15px 0;
}
#product .product_name {
font-size: 22px;
line-height: 1.1;
font-weight: bold;
text-align: center;
position: relative;
padding-bottom: 8%;
margin-bottom: 4%;
}
#product .product_name::after {
content: "";
width: 15%;
padding-bottom: 4.267%;
display: block;
background: url("../img/ico_kirakira.svg") center center no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#product .product_name span {
font-size: 12px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.075em;
}
#product .product_body {
font-size: 16px;
line-height: 1.5;
font-weight: 400;
text-align: center;
}
#product .point_wrap {
background: url("../img/bg_products.png") center center no-repeat;
background-size: 100% auto;
margin: 16% auto;
}
#product .box_inner {
width: 90%;
margin: -10% auto 0;
}
#product .box_name {
font-size: 22px;
line-height: 1.1;
font-weight: bold;
text-align: left;
position: relative;
padding-bottom: 8%;
margin-bottom: 4%;
}
#product .box_name::after {
content: "";
width: 15%;
padding-bottom: 4.267%;
display: block;
background: url("../img/ico_kirakira.svg") center center no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 0;
}
#product .box_name span {
font-size: 12px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.075em;
}
#product .box_body {
font-size: 16px;
line-height: 1.5;
font-weight: 400;
text-align: left;
}
#product .point_wrap2 {
background: url("../img/bg_box.png") center center no-repeat;
background-size: 100% auto;
margin: 10% auto;
}
#product .point_wrap2 .point06 {
margin-top: -18%;
}
#product .flavor_name {
font-size: 22px;
line-height: 1.1;
font-weight: bold;
text-align: center;
position: relative;
padding-bottom: 8%;
margin-bottom: 4%;
}
#product .flavor_name::after {
content: "";
width: 15%;
padding-bottom: 4.267%;
display: block;
background: url("../img/ico_kirakira.svg") center center no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
}
#product .flavor_name span {
font-size: 12px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.075em;
}
#product .flavor_body {
font-size: 16px;
line-height: 1.5;
font-weight: 400;
text-align: center;
}
#product .choco_wrap {
width: 90%;
margin: 10% auto;
}
#product .choco_wrap .choco_inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
#product .choco_wrap .choco_inner .choco_ph {
width: 35%;
margin: 0 auto 0 0;
}
#product .choco_wrap .choco_inner .choco_txt {
width: 62%;
margin: 0 0 0 auto;
}
#product .choco_wrap .choco_inner .choco_txt p {
font-size: 14px;
line-height: 1.4;
}
#product .choco_wrap .choco_inner .choco_txt p strong {
font-size: 18px;
font-weight: bold;
display: inline-block;
padding-bottom: 5px;
}

/*about*/
#about {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
background: #fff0f0;
background: linear-gradient(45deg,rgba(255, 240, 240, 1) 0%, rgba(255, 220, 220, 1) 50%, rgba(255, 240, 240, 1) 100%);
padding-top: 40%;
padding-bottom: 40%;
}
#about::before {
content: "";
width: 100%;
padding-bottom: 24%;
height: auto;
background: url("../img/bg_bottom.png") bottom center no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
position: absolute;
}
#about::after {
content: "";
width: 100%;
padding-bottom: 24%;
height: auto;
background: url("../img/bg_top.png") bottom center no-repeat;
background-size: 100% auto;
bottom: 0;
left: 0;
position: absolute;
}
#about h2 {
font-size: 30px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 0.075em;
text-align: center;
position: relative;
padding-top: 14%;
}
#about h2::before {
content: "";
width: 16%;
padding-top: 12%;
height: auto;
display: block;
background: url("../img/ico_diamond.svg") center center no-repeat;
background-size: 100% auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
#about .about_date {
width: 90%;
margin: 8% auto;
text-align: center;
}
#about .about_date p {
font-size: 18px;
font-weight: 500;
line-height: 1.4;
}
#about .about_date p u {
font-size: 18px;
text-decoration: underline;
text-underline-offset: 8px;
display: block;
}
#about .about_date .date {
font-size: 22px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 0.075em;
display: inline-block;
padding-top: 8px;
}
#about .about_date .date span {
font-size: 34px;
}
#about .btn_store {
width: 75%;
margin: 20px auto;
}
#about .btn_store li a {
background-color: #ff9bc3;
font-size: 18px;
font-weight: bold;
display: block;
position: relative;
margin-top: 5px;
margin-bottom: 20px;
padding: 15px;
border-radius: 999px;
text-align: center;
}
#about .btn_store li a::before {
content: "";
display: block;
width: 14px;
height: 14px;
position: absolute;
top: 50%;
right: 15px;
transform: translate(-50%,-50%);
background: url("../img/ico_arrow.svg") center center no-repeat;
background-size: 100% auto;
}
#about p.send_cap {
font-size: 12px;
line-height: 1.3;
text-align: center;
font-weight: 400;
}
#about .notice_wrap {
margin-top: 20px;
}
#about p.notice {
font-size: 12px;
line-height: 1.5;
text-align: left;
font-weight: 400;
padding-left: 1em;
text-indent: -1em;
}

/*footer*/
footer {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
background: #FFDCDC;
background: linear-gradient(180deg,rgba(255, 220, 220, 1) 20%, rgba(255, 240, 240, 1) 80%);
padding-top: 20%;
}
footer .footer_wrap {
text-align: center;
padding-bottom: 3%;
}
footer .foot_body {
font-size: 16px;
margin-bottom: 10px;
}
footer .logo_syl {
width: 70%;
margin: 0 auto 50px;
}
footer .logo_del {
width: 45%;
margin: 0 auto 50px;
}
footer .btn_sns {
display: flex;
justify-content: space-between;
width: 64%;
margin: 12px auto 60px;
}
footer .btn_sns li {
width: 16.5%;
}
footer .btn_sns li img {
fill: #2d1e0a;
}
footer p.copyright {
font-size: 12px;
line-height: 1.6;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.075em;
}
#pc_logo,
#pc_cta {display: none;}

@media only screen and (min-width: 641px) {
body {
background-image: url("../img/bg_body_pc.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#main {
margin: 0 auto;
max-width: 375px;
overflow: hidden;
}
#pc_logo {
width: calc(50% - 187.5px);
height: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
#pc_cta {
width: calc(50% - 187.5px);
height: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
right: 0;
}
#pc_logo .pc_logo_wrap {
width: 100%;
max-width: 300px;
margin: 0 auto;
text-align: center;
}
#pc_logo .pc_logo_wrap p {
font-size: 30px;
line-height: 1.4;
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.075em;
color: #FFF;
margin-top: 15%
}
#pc_cta .pc_cta_inner {

}
#pc_cta .cta_wrap {
width: 100%;
background-color: transparent;
padding-bottom: 30px;
box-shadow: none;
}
#pc_cta .cta_wrap .cta_date {
background-color: transparent;
padding: 12px 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#pc_cta .cta_wrap .cta_date p {
color: #FFF;
font-weight: bold;
font-size: 14px;
margin: 0 5px;
}
#pc_cta .cta_wrap .cta_date p u {
text-decoration: underline;
text-underline-offset: 8px;
}
#pc_cta .cta_wrap .cta_date p span {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 26px;
letter-spacing: 0.075em
}
#pc_cta .cta_wrap .cta_body {
font-size: 16.8px;
font-weight: bold;
text-align: center;
padding: 15px 0;
color: #FFF;
}
#pc_cta .cta_wrap .cta_body span {
font-size: 16px;
font-weight: bold;
border: 1px solid #FFF;
padding: 3px 5px;
margin-right: 5px;
}
#pc_cta .cta_wrap .cta_body strong {
font-size: 24px;
font-weight: bold;
}
#pc_cta .cta_wrap .btn_cta {
width: 90%;
margin: 0 auto;
}
#pc_cta .cta_wrap .btn_cta li a {
background-color: #fab9be;
font-size: 22px;
font-weight: bold;
display: block;
position: relative;
margin-bottom: 20px;
padding: 15px;
border-radius: 999px;
text-align: center;
}
#pc_cta .cta_wrap .btn_cta li a::before {
content: "";
display: block;
width: 14px;
height: 14px;
position: absolute;
top: 50%;
right: 15px;
transform: translate(-50%,-50%);
background: url("../img/ico_arrow.svg") center center no-repeat;
background-size: 100% auto;
}
#pc_cta .cta_wrap .cta_cap {
font-size: 14px;
line-height: 1.3;
text-align: center;
color: #FFF;
}
#pc_cta .pc_sns_wrap {
position: fixed;
width: calc(50% - 187.5px);;
bottom: 0;
right: 15px;
}
#pc_cta .btn_sns {
display: flex;
justify-content: space-between;
width: 176px;
margin: 0 0 10px auto;
}
#pc_cta .btn_sns li {
width: 16.5%;
}
#pc_cta .btn_sns li img {
fill: #2d1e0a;
}
#pc_cta p.copyright {
font-size: 12px;
line-height: 1.6;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.075em;
color: #FFF;
text-align: right;
margin-bottom: 10px;
}
}

@media only screen and (max-width: 1200px) {
#pc_logo,
#pc_cta {display: none;}
}