@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Zen+Maru+Gothic:wght@900&display=swap');
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
	
}

a{text-decoration: none;color:#000;}



/*----------------------------------------------------------------------------------
use color

yellow:#ffd237;
orange:#fa8839;
brown:#7F4F21;
bule:#a4dcdd;

green:#018176;
nevy:#1e5778;
pink:#e464a5;
red:#ce3a4c;
gold:#cda976;
----------------------------------ALL use------------------------------------------------------*/
body{/*background-color: #ffd237;*/}
#container{
	position:relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-family: 'Kosugi Maru', sans-serif;
	font-weight: 500;
	overflow: hidden;
	color:#7F4F21;
	line-height: 2;
	background-color: #ffd237;
}
#container2{}
section{
	padding: 0px 5%;
	max-width: 750px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	
	/**/
}
.text{
	
	padding: 20px 10%;
	font-size: 1.2rem;
	line-height: 2;
	width: 80%;
	
}
h1{font-size: 2.5rem;
	line-height: 1.3;
	font-family: 'Zen Maru Gothic', sans-serif;
	/*font-family: 'RocknRoll One', sans-serif;*/
	color:#fa8839;
	font-weight: 900;
	text-align: center;
	padding-bottom: 20px;
}

.text p{text-align: left;}
.gn{background-color:#55d58b;}
.pr{background-color:#8E73AB;}
.yl{background-color:#ffd237;}
.bl{background-color:#99e2e3;}
.og{background-color:#fa8839;}
.lpr{background-color:#A892D2;}
.pk{background-color:pink;}
.last_btn{
	margin: 100px 0;
	display: inline-block;
	padding: 7px 10px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 1.2rem;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 -4px 5px -2px #D14828 inset;
}
.last_btn a{color:#fff;}
.topred{font-size: 1rem;color:crimson;}
/*--------------------------------------------------------------*/
#top{

	margin: 0 auto;
	text-align: center;
	position: relative;
	padding-bottom: 50px;
}

.babydoll_Logo{position: absolute;top:15px;right: 15px;width: 150px;}






.goodsbox {
	margin-top: 100px;
	background-color: #fff; 
	padding: 30px 20px 20px 20px;
	border-radius: 20px;
	margin-bottom: 50px;
}

.goods{/*padding-top:100px;*/}

.goods_2flex{display:flex;margin-top: -11px;}

.goods_price{display: inline-block; align-items: center;width:100%;padding: 20px 0%;}
.price_item{flex-basis:50%;padding: 20px 0; }
.pui_cr{width: 25%; margin: 0 auto;text-align: center;}
.check{display: inline-block;}

.check img{
	/*border: solid 2px #fff;*/
	
	border-radius: 30px;
	padding: 5px 10px;
	background-color: #F5C243;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 -4px 5px -2px #DEA933 inset;
  transition: .3s;
}
.imgbox{position: relative;}


.detail img{border-radius: 20px;/**/ }
.detail{width: 70%;position: relative;display: inline-block;}
/*.detail:before{
  content: "";
  position: absolute;
  top: 92%;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
	border-top: 20px solid #fff;}
.d_1{/*margin-left: 40%;}*/

.bottomred{font-size: .9rem; color:#000;margin-top: 20px;}
.olinesp{margin-left: 25%; width: 50%;text-align: center;}
.mall{
	flex-basis: 50%;
	width: 5%;
	padding: 10px 0;
	border: solid #333 1px;/**/
	margin: 0 5%;
}

/*-----------------------site-header---------------------*/
.site-header{

    display: none;
 
    position: absolute;

	z-index: 99999;
   
}
.gnav__menu{
	width: 100%;

	justify-content:space-around;/**/
	
}
.gnav__menu__item{
	
	font-family: 'Be Vietnam Pro', sans-serif;
	height: 70px;
		width: 70px;
		padding:  5px;
	list-style: none; 
	border-radius: 50%;
		display:flex;
		align-items: center;
		justify-content:center;
	line-height: 1;
	background-color: #7F4F21;
}
.gnav__menu__item a{color:#fff;}

.site-header.show{
	 display:flex;
    position: fixed;
    top:300px;
	z-index: 99999;
}



/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/

#gFooter address {
    padding: 35px 5px 56px;
    color: #666;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-family: "Helvetica Neue" , Helvetica , Arial , sans-serif;
    background-color: #D9D9D9;
}

#gFooter{
	margin-top: -20px;
	/*bottom:0;*/

	}

@media all and (max-width: 749px) {
	.mainVisual{
		width:100vw;
		
	}
.topred{font-size: .8rem;}	
h1{font-size: 1.6rem;
	line-height: 1.3;
	font-family: 'Zen Maru Gothic', sans-serif;
	/*font-family: 'RocknRoll One', sans-serif;*/
	color:#fa8839;
	font-weight: 900;
	text-align: center;
	padding-bottom: 20px;
}

	section{width: 95vw;padding: 0;}
	.text{
	
	padding: 0px 5%;
	font-size: 1rem;
	line-height: 2;
	width: 90%;
	
}
	.babydoll_Logo{top:13px;right: 10px;width: 120px;}
	
	.goods_price{;width: 100%;padding-bottom:40px;}
	.price_item{flex-basis:50%; }
	.pui_cr{width: 60%; }
	
	.goodsbox {
	margin-top: 100px;
	background-color: #fff; 
	padding: 30px 10px 20px 10px;
	border-radius: 20px;
	margin-bottom: 50px;
}
	
	.gnav__menu{
		display: flex;
		
		
	}

	.gnav__menu__item{
		height: 50px;
		width: 50px;
		padding:  5px;/*0px*/
		margin: 0;
	    font-size: .9rem;
		border-radius: 50%;
		display:flex;
		align-items: center;
		justify-content:center;
		
	}

.bottomred{font-size: .8rem; color:#000;}
	.last_btn{margin: 50px 0;}
	.olinesp{margin-left: 15%; width: 70%;}
	.mall{
	flex-basis: 50%;
	width: 39%;
	padding: 10px 0;
	border: solid #333 1px;/**/
	margin: 0 3%;
}
	
}







/*------------------------------------------------------------------------------
  anime
------------------------------------------------------------------------------*/

.demo_item{
	width: 150px;
    height:113px;
    border-radius: 10px;
    background-image:url("../img/potato.gif");
    background-size: 100% 100%;
    /*background-position: 0 0;*/
    background-repeat: no-repeat;
    display: block;
    position: relative;    

}
.c3wrap{

	display: flex;
  justify-content: center;
  align-items: center;}


.shiro{
	background-image:url("../img/shiromo2.gif");
}	
.choco{background-image:url("../img/choco.gif");}
.c3{
	background-position: center;
	width: 385px;
    height:113px;
	background-image:url("../img/3c.png");}

.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}	
	
	.demo_stage{
    position: relative;
    width: 100%;
    height: 110px;/**/
    top: 0px;
    display: block;
		z-index: 99;
	/*border-bottom: dashed #a4dcdd 1px; */
		
	background-image : linear-gradient(to right, #fff, #fff 25px, transparent 25px, transparent 8px);  
    background-size: 60px 6px;         
    background-position: left bottom;  
    background-repeat: repeat-x;       
}

.run{position: relative;}
.road{position: absolute;
	 height: 35px;
     bottom:-15px;
	 /*background-color:#55d58b#99e2e3#28984a*/;
	 width: 100%;
	 z-index: 0;
}	
.demo_wrap{
	display: block;
    position: absolute;
    top: 20px;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-duration:6s;
    animation-iteration-count: 1;
	/*margin-right:-50px;*/
	animation-iteration-count:infinite;
	z-index: 9;
}
	
	.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}
.demo_wrap[data-order="right2"] {
    animation-name: GoRight2;
}
[data-order="right"] > .demo_item {
   /* transform: rotateY(180deg);*/
}

	@keyframes GoLeft {
    0% { 
       right: 10%;
		
    }
		
    100% {
        right: 100%;
		
    }
}
@keyframes GoRight {
    0% {
		/*top:0px;*/
        right: 90%;
		
		
    }
	
    100% {
		/*top:100%;*/
        right: -10%;
    }
}


@keyframes upDown {
    0% {
        top: 0;
		left:3px;
    }
	50%{left:0px;}
	
    100% {right:3px;
        top: 3px;
    }
}

@media all and (max-width: 749px) {
	
	.demo_item{
		width: 110px;
        height:83px;
	}
	.c3{width: 283px;}
	.road{height: 37px;
     bottom:-15px;}
	.demo_wrap{
		animation-duration:3s;
	}
	.demo_stage{height: 85px;}
}
/*--------------------------------------------slick-----------------------------------------*/