@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: #f9d6df;
	position: relative;
}
#top_section {
	border: 10px solid #aadcf7;
	background-color: #f9d6df;
	border-bottom: none;
	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: #fff;
    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 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 0;
	position: relative;
}

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

#wrapper .title_img_02 {
    width: 33%;
    margin: 0 7%;
	position: absolute;
	top: 40%;
}

#wrapper .title_img_03 {
    width: 44%;
    margin: 0 32%;
	position: absolute;
	top: 27%;
}

#wrapper .title_img_04 {
    width: 35%;
    margin: 0 60%;
	position: absolute;
	top: 44%;
}

#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: 70% auto 10%;
}

#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;
	background-image: linear-gradient(90deg, #ffffff80 2px, transparent 2px), linear-gradient(#ffffff80 2px, transparent 2px);
	background-position: 10px 10px;
	background-size: 26px 26px;
}
/* middle_areaの最下部にグラデーション帯を生成して重ねる */
#wrapper .middle_area::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px; /* グラデーションさせたい縦幅（お好みで調整してください） */
	/* 上は透明、下に向かって bottom_areaの青(#a9cef4) になる */
	background: linear-gradient(to bottom, transparent, #a9cef4);
	pointer-events: none; /* 下にあるリンク等のクリックを邪魔しない設定 */
}

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

#wrapper .m_1863277 {
    padding: 0 0 7%;
	width: 92%;
	margin: 0 auto;
}

#wrapper .m_1863277_2 {
    width: 85%;
    display: block;
    margin: 10% 0 auto;
}

#wrapper .m_1863277_3 {
    width: 85%;
    display: block;
    margin: 0 0 0 auto;
	top: 49%;
}

#wrapper .m_1863277_4 {
    width: 85%;
    display: block;
    margin: 0 0 auto;
}

#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.i_kuromi {
	width: 106px;
	height: auto;          /* 縦幅を自動にして比率を守る */
	aspect-ratio: 1 / 1;   /* 読み込み前から「正方形」の枠を確保する */
    top: 233px;
	right: 3%;
}

#wrapper .ribbon.i_baku {
	width: 73px;
	height: auto;          /* 縦幅を自動にして比率を守る */
	aspect-ratio: 1 / 1;   /* 読み込み前から「正方形」の枠を確保する */
    top: 506px;
    left: 3%;
}

#wrapper .ribbon.w_img_03 {
	width: 27%;
    right: 2%;
    top: 10%;
}
#wrapper .ribbon.w_img_04 {
    width: 15%;
    bottom: -30%;
    transform: rotate(-18deg);
    right: 1%;
}
#wrapper .ribbon.w_img_05 {
    width: 33%;
    left: 2%;
    bottom: 0;
}
#wrapper .ribbon.g_img_03 {
	width: 18%;
    top: 35%;
}
#wrapper .ribbon.g_img_04 {
	width: 27%;
    left: 2%;
    top: 55%;
}
#wrapper .ribbon.g_img_05 {
    width: 19%;
    right: 0;
    top: 14%;
	mix-blend-mode: color-dodge;
}
#wrapper .ribbon.g_img_06 {
	width: 16%;
    left: 5%;
    bottom: 0;
	mix-blend-mode: color-dodge;
}
#wrapper .ribbon.g_img_07 {
	width: 27%;
    right: 2%;
    top: 5%;
}
#wrapper .ribbon.g_img_08 {
	width: 13%;
    left: 2%;
    top: 53%;
	mix-blend-mode: color-dodge;
}


/*ボトムエリア*/

#wrapper .bottom_area {
	position: relative;
	/*background-color: #a9cef4; */
	/* 単色からグラデーションへ変更（上から下へ、青からピンクへ変化） */
	background: linear-gradient(to bottom, #a9cef4 0%, #a9cef4 95%, #ffb2d7 100%);
}

#wrapper .bottom_area2 {
	position: relative;
	background-color: #ffb2d7;
}

#wrapper .title_kuromi {
    width: 60%;
    margin: 0 auto;
	padding: 7% 0;
}

#wrapper .title_kitty {
    width: 90%;
    margin: 0 auto;
	padding: 11% 0;
}

#wrapper .ribbon.kitty_img_01 {
	width: 129px;
	height: auto;          /* 縦幅を自動にして比率を守る */
	aspect-ratio: 1 / 1;   /* 読み込み前から「正方形」の枠を確保する */
    top: 124px;
	right: 33%;
}

#wrapper .ribbon.kitty_img_02 {
	width: 107px;
	height: auto;          /* 縦幅を自動にして比率を守る */
	aspect-ratio: 1 / 1;   /* 読み込み前から「正方形」の枠を確保する */
    top: 132px;
	left: 3%;
}

#wrapper .ribbon.kitty_img_03 {
    width: 110px;
	height: auto;          /* 縦幅を自動にして比率を守る */
	aspect-ratio: 1 / 1;   /* 読み込み前から「正方形」の枠を確保する */
    top: 504px;
    right: 2%;
}

#wrapper .m_1804277 {
    padding: 0 0 7%;
	width: 92%;
	margin: 0 auto;
}

#wrapper .m_1804277_2 {
    width: 85%;
    display: block;
    margin: 10% 0 auto;
}

#wrapper .m_1804277_3 {
    width: 85%;
    display: block;
    margin: 0 0 0 auto;
	top: 49%;
}

#wrapper .m_1804377 {
    padding: 0 0 7%;
	width: 92%;
	margin: 0 auto;
}

#wrapper .m_1804377_2 {
    width: 85%;
    display: block;
    margin: 10% 0 auto;
}

#wrapper .m_1804377_3 {
    width: 85%;
    display: block;
    margin: 0 0 0 auto;
	top: 49%;
}


#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%;
}

/*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: 90%;
}

#wrapper .title_img_02 {
    width: 28%;
    margin: -18px 0 0 8%;
}
	
#wrapper .title_img_03 {
    width: 35%;
    margin: 0 30% 0 34%;
}
	
#wrapper .title_img_04 {
    width: 34%;
    margin: -40px 0 0 61%;
}
	
#wrapper .title_room {
    margin: 56% auto 0;
}
	
#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.i_kuromi {
    top: 420px;
	width: 212px;
}
	
#wrapper .ribbon.i_baku {
    top: 1000px;
	width: 130px;
}
	
#wrapper .ribbon.r_ribbon {
    right: -2%;
 }
	
#wrapper .ribbon.g_img_06 {
    right: 23%;
}
	
#wrapper .ribbon.kitty_img_01{
	top: 239px;	
	width: 232px;
}

#wrapper .ribbon.kitty_img_02 {
	width: 230px;
	top: 240px;
}

#wrapper .ribbon.kitty_img_03 {
    width: 190px;
	top: 1000px;
}
	
#wrapper .ribbon.g_img_07 {
    right: 3%;
}
	
#wrapper .m_1862579 {
    width: 78%;
	margin: 0px auto;
}

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