@charset "UTF-8";

/*----------MENU-------------

 Reset

------------MENU-----------*/

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Sans+JP:wght@100..900&display=swap');

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*-------------------------
	Reset
---------------------------*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box; }

article,
aside,
details,
figcaption,
figure,
hgroup,
menu,
section,
main {
  display: block; }

body {
  -webkit-text-size-adjust: 100%; }

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;}

.brand_title_item h1{
  margin: 0 0 0 !important;
}

table,
input,
textarea,
select,
option {
  line-height: 1.1; }

table {
  border-collapse: collapse;
}

blockquote,
q {
  quotes: none; }

*:focus {
outline: none!important;
}

a {outline:none!important;}

a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer!important;
}

a,
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

img {
  max-width:100%;
  vertical-align: top; }

a {
  transition: 0.3s ease-in-out; }

ul li{
  list-style:none;
}

ul{
  margin:0;
  padding:0;
}

body.amily{
  background: none;
}

body.amily .block-top-topic--body{
  background: none;
}

body.amily .wrapper{
  background: none;
}

body.amily .pane-contents{
  font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  letter-spacing: .11em;
}

.pc_only{
  display: block;
}
.sp_only{
  display: none;
}

@media (max-width: 767px){
.pc_only{
  display: none;
}
.sp_only{
  display: block;
}
  }


 /* ------------------------
  amily_contents
  ----------------------- */

.bg_choco_2 {
  transform: scale(-1, 1);
}


/*----------------------------------------
  bg-parallax パララックス
--------------------------------------- */
.bg-parallax{
  position: relative;
  min-height: 450px;
}

.bg-parallax_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 150px;
  clip-path: inset(0);
  z-index: 0;
}

.bg-parallax-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.bg-parallax-fixed {
    background-image: url(/assets/img/amily/cookie_kv.webp);
    background-size: unset;
    background-position: left;
  }

@media only screen and (max-width: 767px) {
  .bg-parallax{
  min-height: 400px;
}

.bg-parallax_inner {
  min-height: 400px;
}

.bg-parallax-fixed {
    background-image: url(/assets/img/amily/cookie_kv.webp);
    background-size: cover;
   background-position: center;
  }
}

/*  */
.bg-parallax2{
  position: relative;
  min-height: 450px;
}

.bg-parallax_inner2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 150px;
  clip-path: inset(0);
  z-index: 0;
}

.bg-parallax-fixed2 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.bg-parallax-fixed2 {
    background-image: url(/assets/img/amily/cookie_kv2.webp);
    background-size: unset;
    background-position: left;
  }

@media only screen and (max-width: 767px) {
  .bg-parallax2{
  min-height: 400px;
}

.bg-parallax_inner2 {
  min-height: 400px;
}

.bg-parallax-fixed2 {
    background-image: url(/assets/img/amily/cookie_kv2.webp);
    background-size: cover;
   background-position: center;
  }
}

 /* ------------------------
  amily_background
  -----------------------*/
.amily_background {
  background-image: url('/assets/img/amily/bg_pink.webp');
  background-attachment: fixed;
  background-position: center;
}

.center {
  position: relative;
  overflow: visible;
  width: 600px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.center section {
  width: 100%;
  text-align: center;
}

.section2{
  background-color:#faf3e3;
  padding: 40px 20px;
}

.bg_hearts{
  background-image: url(/assets/img/amily/bg_hearts.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.bg_hearts img.cookie_anime{
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  width: 20%;
  filter: drop-shadow(4px 4px 4px rgba(157, 126, 106, 0.5));
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.section2 h2{
  font-size: 28px;
}

.section2 p{
  font-size: 16px;
  line-height:1.8;
  text-align: left;
  display: inline-block;
}

.sanjushi{
  padding: 0 150px 0px;
  margin: 0 auto;
}

.section3{}

.section3 .infomation{
  margin: 0px auto 0px;
  background-color: #f9d6a0;
  text-align:center;
  letter-spacing: 0.15em;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px 10px;
}

.section3 .infomation h2{
  padding: 14px 0px ;
  margin: 0 0;
  font-size: 18px;
  font-weight: 600;
}

.section3 .infomation .btn__{
  background-color: #fff;
  border-radius:30px;
  padding: 14px 10px;
  font-size: 16px;
  max-width: 390px;
  margin: 0 auto;
  min-width: 320px;
}

.section4 p{
  font-size: 16px;
  line-height:1.6;
  padding: 40px 40px;
  text-align: left;
  display: inline-block;
}

.section5{
  background-color: #fad3d0;
  padding: 0px 0px ;
}

.section5 h2{
  margin: 20px 0 0px;
}

.section5 h2 span:nth-child(1),
.section9 h2 span:nth-child(1){
    font-size:33px;
    display:block;
}

.section5 h2 span:nth-child(2),
.section9 h2 span:nth-child(2){
    font-size:18px;
    display:block;
}

.section6{
  padding: 0 5px;
}

.flex_list h3 {
    margin: 0px 0 0px;
}

.tap{
  width: 30%;
  position: absolute;
  top: -16%;
  right: -3%;
  animation: heartbeat 3s infinite ease-in-out;
}


.tap2{
  width: 30%;
  position: absolute;
  top: -11%;
  right: -3%;
  animation: heartbeat 3s infinite ease-in-out;
}

@keyframes heartbeat {
  0%  { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
  45% { transform: scale(1.2); }
  70% { transform: scale(1); }
}

@media screen and (max-width: 767px) {
  .section6 .flex_list .flex_list_item_2 {
    padding: 0px;
    width: calc(50% - 10px);
    margin: 0em auto 1em;
    padding-top: 10px;
  }
}

.section7_front{
  position: relative;
}

.bg_front{
  position: relative;
  z-index: 100;
  margin-top: -5px;
  }

.section7_front h2.title{
  margin: 20px 0 0px;
}

.section7{
  padding: 20px 20px ;
}

.item_left{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.item_left .collection_img{
  order: 0;
  width: 50%;
}

.item_left h2{
  order: 1;
}

.item_right{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.item_right .collection_img{
  order: 1;
  width: 50%;
}

.item_right h2{
  order: 0;
}

@media screen and (max-width: 767px) {
  .section7{
  padding: 20px 10px ;
  }
  .item_left h2,
  .item_right h2{
    font-size: 18px;
  }
}


.section8{
  padding: 20px 20px ;
}

/*.section8 h2{
  background-color: #fad3d0;
  padding: 10px 0;
}*/

.section8 h2{
    font-size:33px;
    padding: 5px 30px;
    margin: 20px 0 0px;
    display: inline-block;
}

.section8 h2{
  background-color: #EF8DA5;
  color: #fff;
  transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1) rotate(356deg) skewX(0deg) skewY(0deg);
}

.section8 h3{
    font-size:18px;
    display:block;
}

.enjoy{
  padding: 0 0 30px;
}

.section9{
  background-color: #f9d6a0;
  padding: 20px 20px ;
}

.section9 .sales_information_inner{
  /*display: flex;
  flex-wrap: wrap;
  gap: 20px 10px;*/
  margin: 20px auto;
  padding: 0 10px;
  text-align: left;
}

.section9 .sales_information_inner .sales_info{
  font-size: 14px;
  margin: 0 0 10px;
}

.section9 .sales_information_inner .sales_info dt{
  font-weight: 600;
}

.section9 .sales_information_inner .sales_info dd{
  margin-left: 10px;
}

.section9 .sales_info a{
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .center {
    width: 100%;
  }
  .sanjushi{
  padding: 0 20px 0px;
  margin: 0 auto;
}

.section9{
  padding: 20px 10px ;
}

}

.leftside {
  width: calc(50% - 300px);
  position: sticky;
  top: 0;
  left: 0;
  overflow: clip;
}

@media screen and (max-width: 600px) {
  .leftside {
    display: none;
  }
}

.rightside {
  width: calc(50% - 300px);
  position: sticky;
  top: 0;
  right: 0;
  overflow: clip;
}

@media screen and (max-width: 600px) {
  .rightside {
    display: none;
  }
}

.leftside .ill {
    width: 70%;
    max-width: 327px;
    top: 1%;
    left: 26%;
}

.rightside .ill {
    width: 70%;
    max-width: 327px;
    top: 1%;
    right: 26%;
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
}




 /* ----------------------------------------------------------
  bg_amily
  amily_contents
  ---------------------------------------------------------- */

#particles-js{
  position:fixed;
  z-index:1;
  width: 100%;
  height: 100%;
}


.bg_amily{
  background: pink;
    width: 100%;
    height: 100vh;
    margin:0;
    position:relative;
    z-index: 1;
}



/* パーティクルエリア */
.particle-container {

    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}

/* ハートの基本スタイル */
.heart {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    transform: rotate(-45deg); /* 下をとがらせる形 */
    bottom: 0; /* 下からスタート */
    opacity: 0; /* 初期状態は透明 */
    animation: fly 5s linear infinite; /* アニメーション速度をゆっくりに変更 */
}

/* ハートの疑似要素で形を作る */
.heart::before,
.heart::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%; /* 丸みを持たせる */
}

.heart::before {
    top: -10px;
    left: 0;
}

.heart::after {
    top: 0;
    left: 10px;
}


/* ハートのアニメーション */
@keyframes fly {
    0% {
        transform: translateY(0) scale(0.5) rotate(-45deg);
        opacity: 0; /* 透明で開始 */
    }
    30% {
        opacity: 1; /* 徐々に表示 */
    }
    70% {
        opacity: 1; /* 完全に表示されたまま維持 */
    }
    100% {
        transform: translateY(-300vh) scale(1.2) rotate(-45deg);
        opacity: 0; /* 再び透明に */
    }
}


.pane-footer{
  position: relative;
  z-index: 5;
}


/*------------------------
 iziModal
--------------------------*/
.iziModal_btn{
  cursor: pointer;
}

.amily .iziModals {
    background: #ef8da5 !important;
    border-bottom: 10px solid #ef8da5 !important;
}

.amily .iziModal .iziModal-header{
  background: #ef8da5!important;
}

.amily .iziModal .iziModal-content {
  background: #ef8da5 !important;
}

.iziModal-content .menu_inner{
  background-color: #fff;
  padding: 10px 15px;
}

.iziModal-content .menu_inner .menu_image{
  text-align: center;
}

.iziModal-content .menu_inner .menu_guide{
  text-align: center;
}

.iziModal-content .menu_inner .menu_guide h2{
  margin: 0 0 20px;
}

.iziModal-content .menu_inner .menu_guide p.inner_text{
  display: inline-block;
  text-align: left;
}

@media screen and (max-width: 600px) {
  .iziModal-content .menu_inner .menu_image img{
   width: 80%;
   margin: auto;
}

}