@charset "utf-8";
/* CSS Document */


/*********************************
              全体
*********************************/	

#wrapper {
	width: 100%;
	max-width: 768px;
	margin: 5% auto;
	display: block;
	color: #434545;
	text-align: center;
	overflow: hidden;
	background-color: #dfd6ea;
	background-image: linear-gradient(90deg, #ffffff80 2px, transparent 2px), linear-gradient(#ffffff80 2px, transparent 2px);
	background-position: 10px 10px;
	background-size: 26px 26px;
	position: relative;
}
#wrapper img {
	width: 100%;
}
#wrapper a {
	text-decoration: none;
}
#wrapper a:link {
	color: #434545;
} 
#wrapper a:visited {
	color: #434545;
	} 
#wrapper a img:hover {
	opacity: 0.8;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
}

#wrapper p {
    font-size: 3vw;
    line-height: 2.2em;
    letter-spacing: 0.04em;
}


/*********************************
            共有
*********************************/	

/*ボタン*/

#wrapper .btn {
    position: relative;
    background-color: #c6a4c5;
    font-weight: bold;
    padding: 2%;
    font-size: 5.8vw;
    border-radius: 5rem;
    margin: 5% auto 10%;
    color: black;
	min-width: 10em;
	max-width: 10em;
}

#wrapper .btn a {
    color: black;
}

#wrapper .btn a::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent black;
    position: absolute;
    top: 9%;
    right: 14%;
    bottom: 0;
    margin: auto;
}

#wrapper .btn_cm {
    position: relative;
    background-color: #c6a4c5;
    font-weight: bold;
    padding: 2%;
    font-size: 5.8vw;
    border-radius: 5rem;
    margin: 5% auto 10%;
    color: black;
	min-width: 10em;
	max-width: 10em;
}

#wrapper .btn_cm a {
    color: black;
}

/*配置*/

#wrapper .m_c ,.butter_p {
    position: relative;	
}

#wrapper span.br {
    display: block;
}

.fadeIn.view {
  opacity: 0;
  transition: opacity 1s, transform 1s;
}

.fadeIn.view.up {
  transform: translateY(-20px);
}

.fadeIn.view.down {
  transform: translateY(20px);
}

.fadeIn.view.down_h {
  transform: translateY(20px);
  transition-delay: 0.5s;
}

.fadeIn.view.left {
  transform: translateX(-50px);
}


.fadeIn.view.right {
  transform: translateX(50px);
}


.fadeIn.view.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/*落下アニメーション*/

@keyframes fallAndRotate {
  0% {
    transform: translateY(0) rotate(0deg); /* 開始時の位置と回転角度 */
	opacity: 1;
  }
  95% {
    transform: translateY(490vh) rotate(670deg);
    opacity: 1; /* 直前までは見えている */
  }
  100% {
    transform: translateY(500vh) rotate(720deg);
    opacity: 0; /* 最後に一気に透明に */
  }
}

#wrapper .animated-element {
  width: 15%;
  height: auto;
  position: absolute;
  top: -10%;
  /* アニメーションの適用 */
  animation: fallAndRotate 40s linear infinite;
}

#wrapper .d_kuromi{
  left:3%; 
}

#wrapper .d_kuromi2{
  right: 13%;
  animation-delay: 7s;
}

#wrapper .d_baku{
  right: 3%;
  animation-delay: 5s;
}

/*リボンアニメーション*/

@keyframes ribbonWiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

#wrapper .ribbon.w_img_01 img,
#wrapper .ribbon.g_img_02 img,
#wrapper .ribbon.g_img_03 img,
#wrapper .ribbon.g_img_06 img,
#wrapper .ribbon.w_img_03 img,
#wrapper .ribbon.w_img_04 img {
  animation: ribbonWiggle 2s ease-in-out infinite;
  transform-origin: top center; /* 上辺を支点に揺らすと自然 */
}


/*********************************
           メインエリア
*********************************/

/*トップエリア*/

#wrapper .top_area {
    padding: 10% 0 13%;
	position: relative;
}

#wrapper .title_img_01 {
    width: 60%;
    margin: 0 auto;
}

#wrapper .title_img_02 {
    width: 55%;
    margin: 0 30%;
	position: absolute;
	top: 31%;
}

#wrapper ul {
    display: flex;
    width: 88%;
    flex-wrap: wrap;
    margin: 5% auto 10%;
    padding-bottom: 0;
}

#wrapper ul li {
    text-align: center;
    width: 50%;
    padding: 2%;
}


#wrapper .title_room {
    width: 85%;
    margin: 59% auto 7%;
    background-color: #fbeffb;
    padding: 10% 0;
    border-radius: 15%;
}

#wrapper .ribbon {
	position: absolute;
}

#wrapper .ribbon.w_img_01 {
	width: 20%;
    top: 41%;
    transform: rotate(37deg);
    left: 6%;
}
#wrapper .ribbon.w_img_02 {
	width: 17%;
    right: 6%;
    transform: rotate(-28deg);
    bottom: 38%;
}
#wrapper .ribbon.g_img_01 {
	width: 18%;
    top: 24%;
    transform: rotate(18deg);
    left: 6%;
}
#wrapper .ribbon.g_img_02 {
	width: 17%;
	right: 4%;
	bottom: 6%;
	transform: rotate(-10deg);
}

/*ミドルエリア*/

#wrapper .middle_area {
	position: relative;
}

#wrapper .roomwear {
	position: relative;
	height: auto;
}

#wrapper .m_1862379 {
    padding: 20% 0 10%;
	width: 94%;
	margin: 0 4% auto;
}

#wrapper .m_1862379_2 {
    width: 95%;
    display: block;
    margin: 10% 0 auto;
}

#wrapper .m_1862379_3 {
    width: 95%;
    display: block;
    margin: 0 10% auto;
	margin-top: -17%;
	top: 49%;
}

#wrapper .item_name {
	margin-top: 5%;
    font-size: 3vw;
    line-height: 2rem;
}

#wrapper .m_1862306 {
    width: 100%;
}

#wrapper .room_kids {
	width: 95%;
    position: relative;
    margin: 13% auto 5%;
	height: auto;
}

#wrapper .k_heart {
	width: 33%;
    position: absolute;
	top: -16%;
}

#wrapper .ribbon.s_kuromi {
    top: -1%;
    width: 30%;
    right: 0;
}
#wrapper .ribbon.l_ribbon {
    width: 65%;
    top: -1%;
}

#wrapper .ribbon.w_img_03 {
	width: 19%;
    bottom: 0;
    transform: rotate(-18deg);
}
#wrapper .ribbon.w_img_04 {
    width: 15%;
    bottom: -30%;
    transform: rotate(-18deg);
    right: 1%;
}
#wrapper .ribbon.g_img_03 {
	width: 18%;
    top: 35%;
    transform: rotate(18deg);
}
#wrapper .ribbon.g_img_04 {
	width: 16%;
    right: 1%;
    top: 20%;
	transform: rotate(15deg);
}
#wrapper .ribbon.g_img_05 {
    width: 19%;
    left: 1%;
    top: 95%;
    transform: rotate(7deg);
}

/*ボトムエリア*/

#wrapper .bottom_area {
	position: relative;
}

#wrapper .m_1862579 {
    padding: 25% 0 7%;
	width: 94%;
	margin: 0 4% auto;
}

#wrapper .p_attention{
	font-weight: bold;
	color: #E7012C;
	font-size: 1em;
}

#wrapper .ribbon.b_kuromi {
	width: 47%;
    top: -2.5%;
}

#wrapper .ribbon.r_ribbon {
    width: 70%;
    right: -7%;
    top: 2%;
}

#wrapper .ribbon.g_img_06 {
	width: 16%;
    right: 18%;
    top: 8%;
    transform: rotate(-18deg);
}
#wrapper .ribbon.g_img_07 {
	width: 16%;
    right: 1%;
    top: 12%;
	transform: rotate(15deg);
}


/*pc用指示*/	
@media (min-width: 768px){
	
/*********************************
            共有
*********************************/


/*アイテムエリア商品名*/	
	
#wrapper .item_name {
        margin: 8% 0 1%;
        font-size: 2.0rem;
        line-height: 4rem;
}
	
#wrapper .block-goods-item--price .price {
        font-size: 2.4rem;
}
	
#wrapper .btn {
    font-size: 1.8vw;
}
	
#wrapper .btn_cm {
    font-size: 1.8vw;
}

	
/*********************************
           メインエリア
*********************************/
	
#wrapper p {
    font-size: 1.9rem;
    line-height: 2.2em;
    letter-spacing: 0.03em;
}
	
#wrapper .top_area {
    padding: 10% 0 5%;
}
	
#wrapper .title_img_01 {
    width: 43%;
}

#wrapper .title_img_02 {
    width: 45%;
    margin: 0 30% 0 34%;
}
	
#wrapper .title_room {
    margin: 50% auto 7%;
}
	
#wrapper .roomwear {
}
	
#wrapper .ribbon.w_img_01 {
    width: 17%;
    left: 12%;
}
	
#wrapper .ribbon.w_img_02 {
    width: 17%;
    right: 10%;
}
	
#wrapper .ribbon.g_img_01 {
    width: 16%;
    left: 10%;
}

#wrapper .ribbon.g_img_02 {
    width: 17%;
    right: 6%;
}
	
#wrapper .ribbon.g_img_03 {
    top: 20%;
    left: 5%;
}
	
#wrapper .m_1862379 {
    width: 78%;
	margin: 0px auto;
}
	
#wrapper .m_1862379_2 {
    width: 78%;
}
	
#wrapper .m_1862379_3 {
    width: 78%;
	margin: -10% 25% 0;
}
	
#wrapper .room_kids {
    width: 83%;
    margin: 4% auto 5%;
}
	
#wrapper .ribbon.b_kuromi {
    width: 40%;
}
	
#wrapper .ribbon.r_ribbon {
    right: -2%;
 }
	
#wrapper .ribbon.g_img_06 {
    right: 23%;
}
	
#wrapper .ribbon.g_img_07 {
    right: 9%;
}
	
#wrapper .m_1862579 {
    width: 78%;
	margin: 0px auto;
}

#wrapper .copyright {
    font-size: 0.7vw;
}
	
}