@charset "Shift_JIS";
/* CSS Document */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);


/* PC */

/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}#mugbottle,#mugbottle h1,#mugbottle h2,#mugbottle h3,#mugbottle h4,#mugbottle p,#mugbottle figure,#mugbottle blockquote,#mugbottle dl,#mugbottle dd{margin:0}#mugbottle ul[role="list"],#mugbottle ol[role="list"]{list-style:none}#mugbottle{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}
#mugbottle a:not([class]){text-decoration-skip-ink:auto} #mugbottle img,#mugbottle picture{max-width:100%;display:block}#mugbottle input,#mugbottle button,#mugbottle textarea,#mugbottle select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* A Modern CSS Reset */

#mugbottle{
    font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	width: 880px;margin: 0 auto;
	/*background: #f9f1e7;*/
    /*background-image:
        url("../../images/mugbottle2021/bg4.jpg"),
        url(""),
        url("");
    background-repeat:
        no-repeat,
        repeat,
        no-repeat;
    background-position:
        center,
        100% 0,
        100% 100%;
	background-attachment: fixed;
	background: contain;*/
	
}

.inner_content {width: 900px;margin: 0 auto;}

#c_content .desc {
    margin: 20px 0;
    text-align: center;
}

#mugbottle .shrink{width: 100%;padding:2% 2% 0 2%; margin: 0 auto;background: #f9f1e7;}


/**{ list-style:none; margin:0;padding:0;}*/
#mugbottle a{ text-decoration:none;}
#mugbottle a img{ border:none;}
#mugbottle a:hover div img{ opacity:0.8;  transition: all 0.3s;}
#mugbottle p{text-align:left;margin: 5px 0} 
#mugbottle section{margin-bottom:30px;}


/***h***/
#mugbottle h1{position: relative;}
#mugbottle h1 img{max-width:100%!important;}
#mugbottle h2{text-align: center;font-size: 60px;color: #19b3e8;/*padding: 20px 0;margin:20px 0 0 0;*/border-bottom:1vh solid #19b3e8;}
#mugbottle h2.text01{font-size: 50px;color: #ff3709;border:0!important; background: #ffede9;}
#mugbottle h3{text-align: center;font-size: 40px;color: #fff;background: #b59e81;padding: 20px 0;}
#mugbottle h4{font-size: 20px; padding: 10px 0; line-height: 1em; color: #000!important;}
#mugbottle h4 span{font-size: 18px;}


/*****ranking*****/
#mugbottle .flexbox_rank p.rank{
    font-size: 36px;
    font-weight: bold;
    border-bottom: solid 4px;
	text-align: center;}
#mugbottle .flexbox_rank p.rank img{width: 50px;display: inline;margin: 10px 3px;}
#mugbottle .flexbox_rank p.no1{color: #aa8821;}
#mugbottle .flexbox_rank p.no2{color: #70674c;}
#mugbottle .flexbox_rank p.no3{color: #655527;}
#mugbottle .flexbox_rank p.no4{color: #565656;}

/*****flexbox*****/
#mugbottle .flexbox {display: flex;flex-wrap:wrap;}
/*****flexbox_rank*****/
#mugbottle .flexbox_rank {padding: 10px;color: #000;}
#mugbottle .flexbox_rank:nth-child(1) {
    /*flex:2 1 450px;*/
	width:calc(98%/2) ;margin-right: 2%;}
#mugbottle .flexbox_rank:nth-child(2) {
    /*flex:2 1 450px; */ 
	width:calc(98%/2) ;}
#mugbottle .flexbox_rank:nth-child(3) {
	/*flex:0 1 310px; */
width:calc(100%/3)  }
#mugbottle .flexbox_rank:nth-child(4) {
/*flex:0 1 310px;*/
width:calc(100%/3)  }
#mugbottle .flexbox_rank:nth-child(5) {
/*flex:0 1 310px;*/
width:calc(100%/3) }

/*****flexbox_item*****/
#mugbottle .flexbox_item {padding: 30px;color: #000;}
#mugbottle .flexbox_item:nth-child(1) {
    /*flex:2 1 450px;*/
	width:calc(100%/1) ;}
#mugbottle .flexbox_item:nth-child(2) {
    /*flex:2 1 450px; */ 
	width:calc(98%/2) ;margin-right: 2%;}
#mugbottle .flexbox_item:nth-child(3) {

	/*flex:0 1 310px; */
width:calc(98%/2)  }
#mugbottle .flexbox_item:nth-child(4) {
/*flex:0 1 310px;*/
width:calc(98%/2) ;margin-right: 2%; }
#mugbottle .flexbox_item:nth-child(5) {
/*flex:0 1 310px;*/
width:calc(98%/2) }

/***item_box***/
#mugbottle div.item_box{background:white;padding:30px;margin:0 0 20px 0;position: relative;}
#mugbottle div.item_box ul.icon{ display: flex;justify-content: left;align-items: left;margin: 5px 0}
#mugbottle div.item_box ul.icon li{margin:0 5px 0 0}

/***item_box**/
#mugbottle div.item_box ul.btn{ display:flex; justify-content: left; align-items:left;}
#mugbottle div.item_box ul.btn li{ width:calc(100%/1);padding: 5px;}
#mugbottle div.item_box ul.btn li div.flame14{
padding: 8px;
    width: 100%;
    color: #606060;
    background-color: #fbf6f0;
    border: 2px solid #19b3e8;
    border-radius: 8px;
}
#mugbottle div.item_box ul.btn li div.flame14 p{display:flex; justify-content: center; align-items:center; }
#mugbottle div.item_box ul.btn li div.flame14 p.btn_txt01{background: #19b3e8;margin: 0;font-size: 30px;}
#mugbottle div.item_box ul.btn li div.flame14 p.btn_txt01 span{color: #FFF;position: relative; padding-left: 30px;}
#mugbottle div.item_box ul.btn li div.flame14 p.btn_txt01 span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;}

/***navi***/
#mugbottle #navi{margin: 10px 0;}
#mugbottle #navi ul.btn{ display:flex; justify-content: left; align-items:left;}
#mugbottle #navi ul.btn li{ width:calc(100%/3);padding: 5px;}
#mugbottle #navi ul.btn li div.flame14{
padding: 8px;
    width: 100%;
    color: #fff;
	font-weight: bold;
    background-color: #19b3e8;
    border-radius: 8px;
}
#mugbottle #navi ul.btn li div.flame14 p{display:flex;justify-content: center; align-items:center; }
#mugbottle #navi ul.btn li div.flame14 p.btn_txt01{/*background: #FF9E3E;*/margin: 0;font-size: 26px;}
#mugbottle #navi ul.btn li div.flame14 p.btn_txt01 span{/*color: #FFF;*/position: relative; padding-left: 30px;}
#mugbottle #navi ul.btn li div.flame14 p.btn_txt01 span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    margin-top: -5px;}

#mugbottle #navi ul.btn li img{height: 200px;}
/*******price*******/
#mugbottle .price{
    font-weight: bold;
    color: #e82d2d;font-size:36px;display:flex; justify-content: center; align-items:center;   padding: 4px 0; }
#mugbottle .prdisp-taxin span span{display: none;}

#mugbottle .ranking{justify-content: flex-end!important;font-size:40px!important;}

/*===============================
価格CSV
===============================*/
#mugbottle .wrap_price {
    /*width: 100%!important;*/
    /*text-align: right;*/
	   
}
#mugbottle .wrap_price > dt,
#mugbottle .wrap_price > dd {
	/*display: inline-block;*/
	/*vertical-align: middle;*/
	/*display:inline;*/
padding:0!important;
}

#mugbottle .wrap_price .buy_price{
	font-weight:bold;
	padding:0!important;
}
#mugbottle .wrap_price .buy_price .price,#mugbottle .wrap_price .buy_price .intax{
    /*vertical-align: baseline;*/
    color: #ec3c3c;
    /*display:inline;*/
	padding: 0!important;
    width: 100%;
    line-height: 1.1em;
    text-align: center;
}
#mugbottle .wrap_price .buy_price .intax{
    font-size: 40%;
    width: auto;
}
#mugbottle .motoprice,#mugbottle .spesicalprice{display:none;}   




/********icon**********/
#mugbottle .icon span{color:white;font-weight:bold;font-size: 21px;padding: 3px 10px; margin: 0 1px 0 0!important;display: inline-block;}
#mugbottle span.free_shipping{ border:2px #e82d2d solid;box-sizing: border-box;background:#fff;color:#e82d2d;font-weight:bold;font-size: 21px;padding: 1px 8px; margin: 0 10px 0 0;}
#mugbottle .recommend{background-color:#ff5e00;}
#mugbottle .new{background:#ef600c;}
#mugbottle .type{background:#b59e81;}

/********point**********/
#mugbottle .point{color: white;/*padding: 5px 0;*/text-align: center;font-size: 50px;font-weight: bold;}
#mugbottle .point span{font-size: 30px; letter-spacing:-0.2em;}
#mugbottle .icon_pink { background-color: #E40003; text-shadow: 3px 2px 0 #6f0909;}
#mugbottle .icon_yellow { background-color: #fffd6d; text-shadow: 3px 2px 0 #fff;}


	  
/********point icon**********/
#mugbottle .pointicon {
	width: 105px;
	height: 105px;
	
	position: absolute;

	left:3px;                
    top: 4px;                  
	z-index: 1;
	border-radius: 105px;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	 box-shadow: 3px 2px 5px #292929;
}
#mugbottle .pointicon dt,
#mugbottle .pointicon dd{
	color:#000;
	text-align: center;
	line-height: 1.2;
}

#mugbottle .pointicon dt{
	font-size:15px;
	margin-bottom:0;
	font-weight:bold;
}

#mugbottle .pointicon dd{
	font-size:22px;
	font-weight:bold;
}

#mugbottle .pointicon dl {
	margin-top: 4px;
}


/******footer********/
#mugbottle #footer{
    clear: both;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    margin:0 auto 100px auto;
    color: #333333;
}
#mugbottle #footer a{
    padding: 0 30px;
    width: 80px;
    height: 50px;
    margin: 20px auto 0 auto;
    color: #333333;
}


/******Decoration******/
#mugbottle .bg_color{background: #f9f1e7;}
#mugbottle .bg_white{background-color: white;}
#mugbottle .margin{margin:  10px}
#mugbottle .center_text{
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	margin: 30px 0;
	line-height:150%;
	color: #333333;
	/*text-shadow: 
    #0b173d 1px 1px 10px, #0b173d -1px 1px 10px,
    #0b173d 1px -1px 10px, #0b173d -1px -1px 10px;*/
}

/******back to top button******/
#mugbottle #pagetop {
    position: fixed;
    bottom: 30px;
    right: 30px;
}


#mugbottle #pagetop img{
    filter: drop-shadow(0px 1px 1px #aaa);
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
#mugbottle .pc { display: block !important; }
#mugbottle .sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 400px) {
    #mugbottle .pc { display: none !important; }
    #mugbottle .sp { display: block !important; }
}